前端css基本知识（零基础教你学前端）

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

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

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

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

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

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

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

创建 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

,