共计 2894 个字符，预计需要花费 8 分钟才能阅读完成。
咱们来先来剖析一下这个案例。
题目容器左对齐，有固定的宽高。题目文字红色，程度垂直居中。
注释共四个段落，每个段落都有固定的宽度，右侧边界对齐。
前三个段落首行空两个字。每个段落里都有一段高亮的文本，有色彩和下划线润饰，也有文本斜体和加粗成果。
段落中的一些文字还有色彩、加粗、下划线以及歪斜等润饰成果。
第四个段落起始有个吉他图标，英文字体有外发光成果。
上面咱们来制作这个网页。
创立 007-css-case-1 文件夹，在文件里创立一个 case-text-fonts.html 页面文件和 case-1.css 款式文件。
在 html 文件内创立根底代码，在 head 标签外部引入内部款式 case-1.css。
首先来制作题目。
增加一个 h1 元素，填入题目文本。
在编写题目款式之前，假如 UI 设计师给你的是一篇文章的图片，你可能就犯难了，如何取得题目的宽高、背景色彩和文字大小呢？
大家关上电脑里的 QQ，登录进去，Mac 电脑按下键盘 Control + Command + A，Windows 电脑按下 ctrl+alt+a，圈选页面题目，点击对号按钮，实现截屏。
在浏览器中输出 ps.gaoding.com，关上在线版 PS。点击文件，新建，再点击创立按钮。最初，Control + V，将截屏的图片粘贴过去。
利用选框工具，发现题目选区的宽度和高度别离为 200 和 50 像素，文字的大小为 24 像素。
利用吸管工具，点击题目框汲取背景色，点击前景色按钮，失去十六进制色彩值 #a52a2a。
有了这三个值，就能够定义题目的款式了。
h1 {
width: 200px;
height: 50px;
background-color: #a52a2a;
color: white;
line-height: 50px;
font-size: 24px;
text-align: center;
}定义 h1 选择器，申明款式 width: 200px，height: 50px，background-color: #a52a2a，color: white，font-size: 24px,text-align:center
在浏览器中查看页面，题目的成果基本上都实现了。接下来实现文本的垂直居中对齐。
能够通过给文本申明 line-height 行高属性，来间接实现文本的垂直居中，那行高的值设置为多少呢？依据后面学习的行高常识，将行高的值设置为 50px，也就是文本所在容器的高度。这样，文本在容器中恰好就垂直居中了。
接下来制作四个段落。
在 HTML 里增加四个 p 元素，填入一些文本。上面给这些段落增加款式。
p {
width: 500px;
text-indent: 2em;
text-align: justify;
word-spacing: 10px;
text-transform: capitalize;
line-height: 28px;
}定义 p 选择器，申明款式：width: 500px，让每一个段落都有固定的宽度。text-indent: 2em，每个段首空两格。text-align: justify，实现段落右侧边界对齐。给最初一段英文增加款式：word-spacing: 10px，增加单词间距。text-transform: capitalize，每个单词首字母大写。最初再增加 line-height: 28px，给段落设置一个行间距。
四个段落基本上制作结束了。接下来装璜个别段落和文字。
别离应用三个 span 元素将这三局部文字包裹起来。给第一个和第三个 span 元素定义 class 属性，值为 mark1。(第一个段落外面的带有下滑划线区域, 和第三个段落中的下划线区域)
在 CSS 中定义 mark1 选择器，申明款式 color: red，text-decoration-line: underline，text-decoration-style: double。
咱们看，这两局部文本被红色、双下划线润饰了。
实际效果第三局部文本还带有一个波浪线。须要再定义一个款式笼罩一下。
给这个 span 的款式类再增加一个 mark2。
定义选择器 mark2，申明款式 text-decoration-style: wavy。
成果实现了。
给第二个 span 增加 class 属性，值为 mark3。
定义选择器 mark3，申明款式 color: orange。
第二局部文本变成了橙色。
案例还要求这两局部文字为歪斜成果。应用 span 元素把他们包裹起来，定义 class 等于 mark4。
定义选择器 mark4，申明款式 font-style: italic。
文本歪斜成果实现了。
实际上，千锋全副学科的名称和被非凡润饰的文本都有加粗成果，给全副学科再增加一个 span 元素包裹在外层。给所有须要加粗的 span 都增加 mark0 款式类名。
定义选择器 mark0，申明款式 font-weight: bold。
文本加粗成果实现了。
.mark0 {font-weight:bold}
.mark1 {
color: red;
text-decoration-line: underline;
text-decoration-style: double;
}
.mark2 {text-decoration-style: wavy;}
.mark3 {color:orange;}
.mark4 {font-style: italic;}最初，给英文段落定义非凡字体并增加外发光的成果。
.p1 {
font-family: "Sofia", sans-serif;
text-indent: 0;
}在 head 里增加援用谷歌字体的 css 链接，和自定义 icon 图标的 js 地址。
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Sofia&effect=outline”>
<script src=”https://kit.fontawesome.com/772ccfd500.js” crossorigin=”anonymous”></script>
给英文的段落元素定义 class 属性，值为 p1 font-effect-outline。
增加 p1 选择器，申明款式：font-family: “Sofia”, sans-serif。
字体成果实现了！在段首还有一个 icon 图标。
如何查找本人心仪的图标呢？大家能够拜访 fontawesome 官网这个地址，海量图标到任你抉择了。guitar 就在这里。（https://fontawesome.com/searc…）
在段落头部增加 i 元素，定义 class 属性，值为 fas fa-guitar。（留神两头有空格）。
咱们发现，真正应用这个图标时，款式类的值，要求在官网查找到的图标名字前，加上 fa- (读作：fa 杠)，并且还须要增加 fas。
图标增加好了！理论的成果，最初一行没有缩进。
在 .p1 (留神这里有点) 选择器里增加 text-indent: 0，来笼罩 p 元素的款式。
为什么能笼罩呢？答对了，因为作用的优先级—— class 选择器要大于元素选择器。
这样，就勾销了最初一行的段首缩进！
文章配套视频链接：https://www.bilibili.com/vide…
