文本处理

字符样式

CSS 中可以设置文本的大部分样式，比如文本所用的字体，颜色大小等等。

字体

可以使用 font-family 属性设置文本使用的字体库，比如常说的黑体，宋体等等。

系统自带了一些字体，比如：

<style>
  * {
    font-family: "黑体";
    /* font-family: "宋体"; */
    /* font-family: "仿宋"; */
    /* font-family: "微软雅黑"; */
  }
</style>

应用上面 CSS 代码，页面的字体会有所改变。

如果你不满足与这些常见的字体，也可以使用网络字体，下面是一些字体的网站，你可以点击查看：

谷歌字体
第一字体
其他，因为中文字符太多，所以大部分字体都是收费的，可以自行搜索。另外，请支持正版字体。

下面我们引入了一个叫做 Hanalei 的字体，你可以点此链接进行下载，并在页面中使用。

把 Hanalei 字体下载到本地后，压缩包里面有一个后缀名为 .ttf 的字体文件，把字体文件放到开发文件夹当中，编写以下代码即可引入：

<style>
  /* 引入一个自定义字体 */
  @font-face {
    font-family: Hanalei;
    src: url(./hanalei-regular.ttf);
  }

  p {
    /* 使用自定义字体 */
    font-family: Hanalei;
  }
</style>
<p>Hanalei font !</p>

上面代码中，@font-face 被称作 @ 规则，@ 规则并不是选择器，它被用来强化 CSS 的功能。你可以点击这里查看相关 @ 规则。

@font-face 规则用来引入一段网络字体，在 @font-face 的声明块中：

font-family 属性用来设置字体名；
src 属性用来设置引入字体的路径，可以是本地路径，也可以是一个网络路径。

有时候字体并不能正常加载，为了防止这种现象，你可以同时设置多个备用字体，多个字体之间使用逗号分割，比如：

/* element ui 的字体风格 */
* {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

上面的代码是 ElementUI 的字体风格，假设第一个字体失效，就会使用后续的备用字体进行显示。

并不建议大家使用网络中文字体。英文字符很少，也就 26 个字母加一些符号，所以英文字体包很小，一般也就几十到几百 KB。中文则不同，即便是一个常用中文字符的字体包，也有几十 MB，甚至上百 MB，最坏的情况就是用户打开了页面，页面字体无法正常加载，或者页面在备用字体和首要字体之间闪烁，这样的用户体验并不好。

颜色

通过设置 color 属性，可以改变文本的颜色，比如：

* {
  color: blue;
}

上面让页面的文本显示为蓝色。CSS 有非常多的颜色单词，几乎都不常用，课程中是为了方便调试，所以使用比较频繁。

CSS 的颜色单词中，有一个使用得不多但是很特殊的颜色 transparent，它表示透明色。如果编写以下代码，那么页面的文本就看不到了：

* {
  color: transparent;
}

可以使用选中状态查看页面中的透明文本。

rgb 三原色

在 CSS 中，颜色不止常用的单词，可以根据 rgb 三原色配置出多中的颜色，rgb 对应了 red、green 和 blue 三种颜色，它们被称作光学三原色，这三种元素通过不同的比例可以混合出不同的颜色。

在 CSS 中，可以按一下方式设置其颜色比例：

.red {
  color: rgb(255, 0, 0);
}
.green {
  color: rgb(0, 255, 0);
}
.blue {
  color: rgb(0, 0, 255);
}
.other-color {
  color: rgb(122, 41, 38);
}

上面代码中，rgb 是一个颜色函数，它接收三个值，分别是三种颜色的权重，每种色的权重最大可设置为 255，最小设置为 0，通过这个函数可以调配各种不同的颜色。它还有另一种简写方式：

.red {
  color: #ff0000;
}
.green {
  color: #00ff00;
}
.blue {
  color: #0000ff;
}
.other-color {
  color: #7a2926;
}

这种方式使用 16 进制来表示颜色，颜色值使用 # 开头，每两位代表一个色值，依次对应红绿蓝。在计算机中，16 进制的数字超过 10 使用字母代替，对应关系如下：

16 进制字符	对应数据
1	1
2	2
......	......
9	9
10	a 或者 A
11	b 或者 B
......	......
15	f 或者 F

所以颜色 ff0000 转化为对应的 rgb 值为：

ff0000
=&gt; (ff , 00 , 00)
=&gt; (15 * 16 + 15 * 1 , 0 , 0)
=&gt; (255 , 0 , 0)

即 rgb(255 , 0 , 0) 红色

备注：一些编辑器中，还可以直接把鼠标挪到颜色上进行选择，比如 vscode 或者 codesandbox。

在简写的基础上，如果每种颜色的值使用同一个字符，还可以继续简写 。比如：

.foo {
  color: #112233;
  color: #ee99ff;
  color: #aadd44;
}
/* 可以简写为 */
.foo {
  color: #123;
  color: #e9f;
  color: #ad4;
}

rgba

rgba函数在 rgb 函数的基础上添加了透明度的设置，可以透明度写到最后一个值中，透明度的大小是 0 到 1，其中 1 表示完全显示，0 表示完全透明，比如：

p {
  /* 透明度为 50% 的黑色 */
  color: rgba(0, 0, 0, 0.5);
  /* 透明度为 50% 的红色 */
  background-color: rgba(255, 0, 0, 0.5);
}

rgba 也可以使用十六进制简写，但是并不推荐，因为简写的兼容性并不好，低版本的浏览器可以无法识别，比如：

p {
  color: #ff000066;
}
/* 可以简写为 */
p {
  color: #f006;
}

其中最后两位表示透明度。

字体粗细

通过设置 font-weight 属性，可以改变字体的粗细，比如：

p {
  font-weight: bold;
}

font-weight 有以下值可供选择：

`font-weight` 值	描述
数字	使用 100 的倍数来表示字体粗细，值为 100 ~ 1000，如果值不是 100 的倍数，会进行四舍五入。
`normal`	正常，等于数字的 400
`bold`	粗体，等于数字的 700
`lighter`	更细的字体
`bolder`	比粗体更粗的字体，大部分字体并不支持

大部分字体只有 lighter、normal、bold 三种粗细状态。strong 元素的默认值就是 bold。

大小

通过设置 font-size 属性，可以改变字体的大小，比如：

p {
  font-size: 100px;
}

上面将给 p 元素显示超大的字体。

装饰线

通过设置 text-decoration 属性，可以设置字体的装饰线，比如：

p {
  /* 添加下划线 */
  text-decoration: underline;
}

text-decoration 有以下值可用：

装饰线值	描述
`none`	无装饰线
`underline`	下划线
`overline`	上划线
`line-through`	中划线

超链接 a、插入 ins 和删除 del 元素默认样式都有装饰线，可以使用 none 值来取消它们的默认装饰线。

斜体

通过设置 font-style 属性，可以改变字体是否倾斜，它有两个值：

font-style:normal 正常字体
font-style:italic 斜体

em 元素默认就是斜体，它的 font-style 默认为 italic。

字符间距

字符间距 letter-spacing 用于设置字符之间的间隙，比如：

p {
  letter-spacing: 10px;
}

上面代码会使 p 元素内的字母或者汉字间隙增大。

单词间距

字符间距 word-spacing 用于设置单词之间的间隙，比如：

p {
  word-spacing: 10px;
}

上面代码只会设置单词之间的间隙，不会设置汉字之间的间隙（浏览器无法识别汉字中的单词，每个汉字都被视作一个独立的字符）。

列表

列表项前缀

list-style-type 属性用于设置用于列表项前缀符号的类型，例如无序列表的方形、圆形等符号，又或者是有序列表的数字，字母或罗马数字等等。

list-style-type 的值很多，以下简单列出几个：

值	描述
`none`	无标记。
`disc`	默认。标记是实心圆。
`circle`	标记是空心圆。
`square`	标记是实心方块。
`decimal`	标记是数字。
其他	参见这里

实际开发中一般很少改变列表前缀符号的类型。

列表项前缀位置

list-style-position 属性用于设置项目符号是出现在列表项内，还是出现在其外。

值	描述
`outside`	列表前缀被放到列表项外
`inside`	列表前缀被放到列表项内

列表项前缀图片

list-style-image 属性允许你设置列表项前缀为一张图片，而不是简单的方形圆形数字。比如：

li {
  list-style-image: url(./img.png);
}

列表样式简写

使用 list-style 可以简写上述三个属性，规则如下：

Formal syntax: &lt;&#39;list-style-type&#39;&gt; || &lt;&#39;list-style-position&#39;&gt; || &lt;&#39;list-style-image&#39;&gt;

一般来说，列表的样式我们都会去掉，最最最常编写的列表就是：

ul,
ol {
  list-style: none;
}

上面代码会直接清除所有列表样式，li 元素的列表样式会继承父级。

如果一个列表项不是表示一段文本，比如使用列表项来标记导航栏，轮播图，一般会消除列表项的默认样式。

链接

超链接的样式其实都是各种字体样式和伪类拼凑而成，超链接的常用伪类如下：

伪类	选择的范围
`:visited`	已经访问过
`:active`	激活
`:hover`	悬停

自定义一个超链接样式：

a {
  color: rgb(255, 51, 0);
  text-decoration: none;
}
a:hover {
  color: rgb(255, 101, 62);
  text-decoration: underline;
}
a:active {
  color: rgb(255, 142, 113);
  text-decoration: underline;
}
a:visited {
  color: rgb(182, 36, 0);
}

如果你想设计一个链接的颜色，可以选取一个基础色作为超链接的主要颜色，其他状态的颜色可以在基础色的基础上进行调整：
:hover 状态一般比基础色浅一些；
:active 状态一般比基础色更浅一些；
:visited 状态一般比基础色深一些；