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

 以上是目标样式,第一个字母大概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 条评论
登录 后参与评论

相关文章

来自专栏hbbliyong

ES6+ 开发 React 组件

在这里简要的说一下这些语言新特性对 React 应用的开发有什么影响,这些 ES6+ 特性使得 React 开发更简单更有趣。 类 迄今为止,最能体现我们使用 ...

3598
来自专栏前端说吧

布局的诡异bug合集+解决方法(更新中)

2976
来自专栏向治洪

android之View绘制

Android系统的视图结构的设计也采用了组合模式,即View作为所有图形的基类,Viewgroup对View继承扩展为视图容器类,由此就得到了视图部分的基本...

1619
来自专栏有趣的django

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情...

3519
来自专栏Android干货

安卓开发_浅谈Android动画(四)

2036
来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

3213
来自专栏姬小光

小鸡君の前端小姜汤【第014期】- 内联样式

在第003期我们讲过一点所谓样式,当时举的栗子是行内样式,只能写在元素的标签上,作为 style 属性的值存在的。这一期我们学习内联样式,或叫嵌入样式。

903
来自专栏前端知识分享

第82天:jQuery中prop()和attr()的区别

 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在...

922
来自专栏九彩拼盘的叨叨叨

使用 CSS 伪元素需要注意的

若不设置,则伪元素不会显示。如果不想设置 content 的内容,可以将内容设置为空。如:

732
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十五)-- 谈谈 CSS 关键字 initial、inherit 和 unset

2025

扫码关注云+社区

领取腾讯云代金券