专栏持续更新中
字体属性
字体属性用于定义字体的类型、字号大小、加粗、斜体等方面样式。常用的字体属性如下表所示：
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| font | font-style、font-variant、font-weight、font-size（或 line-height）、font-family | 在一个声明中设置所有的字体属性 |
| font-family | 字体名称、inherit | 设置字体类型 |
| font-size | xx-small、x-small、small、medium（默认）、large、x-large、xx-large smaller、larger | length、%、inherit |
| font-weight | normal（默认）、bold、bolder、lighter、inherit 100、200…900（400=normal，700=bold） | 设置字体粗细 |
| font-style | normal、italic、oblique、inherit | 设置字体风格 |
新建一个 index13.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h3 {
font-size: 20px;
font-family: 隶书;
line-height: 28px;
}
span {
font: italic 16px 华文彩云;
}
</style>
</head>
<body>
<h3>Web 前端技术</h3>
<span
>在当今社会中，Web 已经成为网络信息共享和发布的主要形式。要想开发 Web 应用
系统，就必须掌握 Web 前端技术。</span
>
</body>
</html>
链接中的伪类
何为伪类呢？
在 CSS 中，伪类是添加到选择器的关键字，给指定元素设置一些特殊状态，我们以 : 开头。
链接有以下四个状态。这四种状态也称之为超链接的伪类。
a:link 普通的、未被访问的链接。
a:hover 鼠标指针位于链接的上方。
a:active 链接被单击的时刻。
a:visited 用户已访问的链接。
针对超链接的上述四种状态设置样式规则，能起到美化超链接的作用。例如，为了完成下对超链接的显示要求，编写的 CSS 样式代码如下。
| 状态 | 颜色 | 背景色 | 文本修饰 |
|---|---|---|---|
| 未访问 | 蓝色 | 无 | 无下画线 |
| 鼠标移到 | 黑色 | #DDDDDD | 下画线 |
| 正单击 | 红色 | #AAAAAA | 删除线 |
| 已访问 | 绿色 | 无 | 无下画线 |
对于超链接的伪类，我们推荐的使用顺序是：:link - :visited - :hover - :active。
新建一个 index14.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
text-decoration: none;
}
a:link {
color: red;
}
a:visited {
color: blue;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
</html>
我们为什么要按照这样的顺序来使用呢？🤔 我们调整一下这几个伪类的顺序，看看会发生什么。
我们把 a:link 放到最后，效果如下。
从图中我们可以发现其中的样式属性都被覆盖了。
我们把 a:hover 放到 a:active 之后，效果如下。
从图中我们可以发现 a:active 的属性样式被覆盖了。
通过上面的例子我们可以知道链接伪类的使用顺序是很重要的。
列表样式
| 属 性 | 可 取 值 | 描 述 |
|---|---|---|
| list-style | list-style-type、list-style-position、list-style-image | 在一个声明中设置所有的列表属性 |
| list-style-image | URL、none | 设置图像为列表项标志 |
| list-style-position | inside、outside、inherit | 设置列表中列表项标志的位置 |
| list-style-type | disc（默认）、circle、square、decimal 等 | 设置列表项标志的类型 |
list-style-position 是 CSS 属性，用于控制列表项标记（如圆点或数字）的位置，特别是在列表项的文本流中的位置。这个属性有两个可能的值：
- outside: 列表项标记位于列表项框之外，与文本不在同一流中。这是默认值。
- inside: 列表项标记位于列表项框内，与文本在同一流中。
ul { list-style-position: outside; /* 列表项标记位于列表项框外 / } ol { list-style-position: inside; / 列表项标记位于列表项框内 */ }
在默认情况下（outside），列表项标记会在文本的外部，与文本不在同一行。如果设置为 inside，列表项标记将放在列表项框内，与文本在同一行。选择使用哪个取决于你的设计和排版需求。
使用 list-style-position 属性可以影响整个列表的外观。这在设计有关列表的网页时可以很有用，特别是当你想要调整列表项标记的位置以及文本的对齐方式时。
新建一个 index15.html 文件，在其中写入以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
ul {
list-style-position: inside;
list-style-image: url(list.gif);
}
</style>
</head>
<body>
<ul>
<li>喵</li>
</ul>
</body>
</html>
