一、基础文本与字体样式化
用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。
字体样式：
作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。文本布局风格：
作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。
1.1字体样式
网页安全字体
指目前，可以应用到所有系统的字体样式。
| 字体名称 | 泛型 | 注意 |
|---|---|---|
| Arial | sans-serif | 通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使 Arial 更广泛地可用。 |
| Courier New | monospace | 某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫 Courier。使用 Courier New 作为 Courier 的首选替代方案，被认为是最佳做法。 |
| Georgia | serif | |
| Times New Roman | serif | 某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用 Times 作为 Times New Roman 的首选替代方案，被认为是最佳做法。 |
| Trebuchet MS | sans-serif | 您应该小心使用这种字体——它在移动操作系统上并不广泛。 |
| Verdana | sans-serif |
默认字体
CSS 定义了 5 个常用的字体名称：serif, sans-serif, monospace, cursive, 和fantasy. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器。
serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理，另一方面，cursive 和 fantasy 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。
字体栈
用于保证在网页上使用的字体的可用性，例如：
p {
font-family: "Trebuchet MS", Verdana, sans-serif;
}
1.2文本布局样式
详情 去看 CSS - 内容区域 字体 font、CSS - 内容区域 文本 text 两篇文章。
二、样式化列表
2.1、列表特定样式
list-style-type： 设置用于列表的项目符号的类型。
例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。list-style-position：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。list-style-image：允许您为项目符号使用自定义图片，而不是简单的方形或圆形。
符号样式 list-style-type
语法：
list-style-type =
|
|
none
=
|
=
symbols( ? [ | ]+ )
=
cyclic |
numeric |
alphabetic |
symbolic |
fixed
=
|
取值：
-
示例：
.o1 { list-style-type: 'n'; }
.o2 { list-style-type: "-" ; }
.o3 { list-style-type: "*"; }
-
关键字：-
none：不显示列表项的标记。 -
disc：实心圆点 (默认值)。 -
circle：空心圆点 -
square：实心方块 -
decimal：十进制阿拉伯数字
... 还有很多，参考
-
示例：
.o1 { list-style-type: circle; }
.o2 { list-style-type: square; }
.o3 { list-style-type: armenian; }
.o4 { list-style-type: decimal-leading-zero; }
.o5 { list-style-type: decimal; }
-
symbols()：定义列表的匿名样式，允许您内联定义计数器样式，直接定义为list-style等属性的值。是匿名的（即只能使用一次）。详情戳这里CSS - 函数 - symbols()
-
@counter-style或预定义样式的值匹配的标识符:
详情戳这里CSS 数据类型 -
详情戳这里CSS - At-rules - @counter-style
知识拓展：
这里设计的知识点比较多，向上面提到的2篇文章，还有 一个 概念叫 样式表模型 也包含了下面的知识点。
了解使用，CSS属性content，counter-reset，counter-increment
了解使用，CSS伪元素::before。
了解使用，CSS函数content()，contents()。
符号位置 list-style-position
语法：
list-style-position =
inside |
outside
自定义的项目符号图片 list-style-image
语法：
list-style-image =
|
none
=
|
管理列表计数 - HTML属性
-
start：允许你从 1 以外的数字开始计数。
示例：
- Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
- Wash and chop the salad.
- Fill pitta with salad, humous, and fried halloumi.
-
reversed：将启动列表倒计数。
示例：
- Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
- Wash and chop the salad.
- Fill pitta with salad, humous, and fried halloumi.
-
value：
示例：
- Toast pitta, leave to cool, then slice down the edge.
- Fry the halloumi in a shallow, non-stick pan, until browned on both sides.
- Wash and chop the salad.
- Fill pitta with salad, humous, and fried halloumi.
样式化链接
链接状态
第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式：
Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用
:link伪类来应用样式。Visited: 这个链接已经被访问过了 (存在于浏览器的历史纪录), 它可以使用
:visited伪类来应用样式。Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用
:hover伪类来应用样式。Focus: 一个链接当它被选中的时候 (比如通过键盘的 "Tab" 移动到这个链接的时候，或者使用编程的方法来选中这个链接
HTMLElement.focus() 它可以使用:focus` 伪类来应用样式。Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用
:active
示例1：
在链接中包含图标
示例2：
样式化链接为按钮
Web 字体
IE 版本 6。Web 字体是一种 CSS 特性，允许您指定在访问时随您的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用您指定的字体。太酷啦！所需的语法如下所示：
关于网页字体有两件重要的事情要记住：
浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。
字体一般都不能自由使用。您必须为他们付费，或者遵循其他许可条件。
字体是由字体铸造厂创建的，并且存储在不同的文件格式中。通常有三种类型的网站可以获得字体：
- 免费的字体经销商：这是一个可以下载免费字体的网站 (可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
- 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com。您也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype 或 Exljbris。
- 在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见使用在线字体服务。
@规则 @font-face
指定一个用于显示文本的自定义字体。字体能从远程服务器或者用户本地安装的字体加载，可以消除对用户电脑字体的依赖。
详情戳这里 CSS - At-rule - @font-size