我们来先来分析一下这个案例。

　　标题容器左对齐，有固定的宽高。标题文字白色，水平垂直居中。

　　正文共四个段落，每个段落都有固定的宽度，右侧边界对齐。

　　前三个段落首行空两个字。每个段落里都有一段高亮的文本，有颜色和下划线修饰，也有文本斜体和加粗效果。

　　段落中的一些文字还有颜色、加粗、下划线以及倾斜等修饰效果。

　　第四个段落起始有个吉他图标，英文字体有外发光效果。

　　下面我们来制作这个网页。

　　创建 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 地址。

　　给英文的段落元素定义 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 选择器要大于元素选择器。

　　这样，就取消了最后一行的段首缩进!

上一篇

CSS填充属性和CSS宽度与高度属性

下一篇

CSS选择器的权重如何判断？