设置第一个字母字体变大并且所有字母大小写及下划线


以上是目标样式,第一个字母大概24px,后面的大概19px,并且都是大写。

如果单纯的给A和T两个字母添加标签再设置字体大小的话,那么设置的underlin;会有所差别,效果如下:

很明显下划线不在一条水平线上。为了解决这个问题可以有两种方法;

第一种:为<p>标签设置border-bottom,可以说设置颜色等属性。

第二种:HTML标签

<p class="about">about</p>

<p class="about">technologe</p>

css样式:

.about{font-size:24px;

color:#000;

font-family:"微软雅黑";

text-decoration:underline;

text-transform:capitalize;/*关键样式*/

font-variant:small-caps;/*关键样式*/

text-transform属性:

这个属性会改变元素中的字母大小写,不管原文档中的字母大小写。如值为capitalize,则要对某些字母大写,但并没有明确定义什么字母大写。

font-variant属性:

设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换成大写,但是所有使用小型的大写字体的字母与其余文本相比,其字体更小。(意味着已经使用大写字母的文本字体会更大)。

优质内容筛选与推荐>>
1、我的书籍《Redis 源码日志》
2、关于python的感想
3、对象数据排序
4、Go语言 之无缓冲的channel
5、python-mock


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号