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

 以上是目标样式,第一个字母大概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属性:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

js 和 css动画

使用setTimeout()或者setInterval()使用这两个函数定时调用一段代码。这是其原理。

816
来自专栏章鱼的慢慢技术路

Go指南练习_图像

还记得之前编写的图片生成器吗?我们再来编写另外一个,不过这次它将会返回一个 image.Image 的实现而非一个数据切片。

692
来自专栏LIN_ZONE

已知两点的经度和纬度,计算两点间的距离(php,javascript)

php代码:转载  http://www.cnblogs.com/caichenghui/p/5977431.html

641
来自专栏前端知识分享

第51天:封装可视区域大小函数client

    offsetWidth: width  +  padding  +  border (披着羊皮的狼)  

674
来自专栏Python攻城狮

Javascript(2)-js进阶1.JavaScript核心操作——DOM对象2.DOM基础API操作3.DOM核心API操作代码操作4.简单特效开发5.JavaScript事件——Event

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

843
来自专栏我的博客

PHP–获取文件扩展名、网站计数器、截取字符串、跳转菜单

获取文件扩展名 方法一: <?php function fun1($filename) { $return=””; $p=strrpos($file...

2797
来自专栏Golang语言社区

Go语言单链表实现方法

本文实例讲述了Go语言单链表实现方法。分享给大家供大家参考。具体如下: 1. singlechain.go代码如下: ////////// //单链表 -- 线...

3034
来自专栏从零开始学自动化测试

appium+python自动化33-解锁九宫格(TouchAction)

一、TouchAction 1.源码可以在这个路径找到:Lib\site-packages\appium\webdriver\common\touch_acti...

3183
来自专栏Golang语言社区

Go语言单链表实现方法

本文实例讲述了Go语言单链表实现方法。分享给大家供大家参考。具体如下: 1. singlechain.go代码如下: ////////// //单链表 -- 线...

3506
来自专栏用户2442861的专栏

关于伪类元素:before和:after

:before和:after的作用就是在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素,最基本的用法如下:

491

扫码关注云+社区