我们来先来分析一下这个案例。
标题容器左对齐，有固定的宽高。标题文字白色，水平垂直居中。
正文共四个段落，每个段落都有固定的宽度，右侧边界对齐。
前三个段落首行空两个字。每个段落里都有一段高亮的文本，有颜色和下划线修饰，也有文本斜体和加粗效果。
段落中的一些文字还有颜色、加粗、下划线以及倾斜等修饰效果。
第四个段落起始有个吉他图标，英文字体有外发光效果。
下面我们来制作这个网页。
创建 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/search?p=2&favorites=staff）
在段落头部添加 i 元素，定义 class属性，值为 fas fa-guitar。 （注意中间有空格）。
我们发现，真正使用这个图标时，样式类的值，要求在官网查找到的图标名字前，加上 fa- (读作：fa杠)，并且还需要添加 fas。
图标添加好了！实际的效果，最后一行没有缩进。
在 .p1 (注意这里有点) 选择器里添加 text-indent: 0，来覆盖 p 元素的样式。
为什么能覆盖呢？答对了，因为作用的优先级—— class 选择器要大于元素选择器。
这样，就取消了最后一行的段首缩进！
文章配套视频链接：https://www.bilibili.com/video/BV1oU4y1278g?p=68
文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/Zerobased%20teaching%20you%20to%20learn%20the%20front%20end%20%2067CSS%20text%20and%20font%20comprehensive%20case.html
支付宝扫一扫 
评论列表（196条）
测试