CSS文本和字体属性,列表属性

一、常用文本样式属性

1. color 属性 ------ 文字颜色

color 属性用来设置文字的颜色。在CSS中，我们可以用几种不同的方式来指定颜色值。

1.1. 英文单词颜色值

最简单直接的方式：直接用颜色的英文单词。 例如： color: red; 文字就变成红色。常用颜色有：red（红）、blue（蓝）、green（绿）、yellow（黄）、orange（橙）、pink（粉）、purple（紫）、black（黑）、white（白）等等。这种方式虽然简单，但能表达的颜色有限，不太灵活。

1.2. 十六进制表示法

这是最常用的颜色写法，由 # 号开头，后面跟着6位十六进制数字（0-9，a-f）。 例如： color: #ff0000; 也是红色。原理：前两位代表红色（R），中间两位代表绿色（G），最后两位代表蓝色（B）。每种颜色的取值范围是00～ff（相当于十进制0～255）。

#ff0000 = 红最大，绿和蓝为0 → 纯红
#00ff00 = 纯绿
#0000ff = 纯蓝
#000000 = 黑色
#ffffff = 白色如果六位中每两位重复，可以简写为三位，比如 #ff0000 可以简写为 #f00。

1.3. rgb() 表示法

rgb() 函数接受三个数字（0～255）或百分比，分别表示红、绿、蓝的值。 例如： color: rgb(255, 0, 0); 红色。

rgb(0, 255, 0) 绿色
rgb(0, 0, 255) 蓝色
rgb(255, 255, 255) 白色
rgb(0, 0, 0) 黑色

1.4. rgba() 表示法

rgba() 在rgb的基础上增加了一个透明度通道（alpha），取值范围0～1，0表示完全透明，1表示完全不透明。 例如： color: rgba(255, 0, 0, 0.5); 半透明的红色。这个属性很实用，可以实现文字的半透明效果。

2. font-size 属性 ------ 字体大小

font-size 用来设置文字的大小。常用的单位有px、%、em。

2.1. px（像素）单位

像素是屏幕上的一个小点，px是绝对单位，1px就是屏幕上的一个像素点。 例如： font-size: 16px; 设置文字大小为16像素。这是最直观的单位，大多数浏览器默认的文字大小是16px。

2.2. %（百分比）单位

百分比是相对于父元素的字体大小来计算的。假设父元素的 font-size 是16px，那么子元素设置 font-size: 150%; 就等于 16px * 150% = 24px。

2.3. em 单位

em也是相对单位，相对于当前元素的字体大小（如果当前元素没有设置，则继承父元素的字体大小）。 1em 等于当前元素的字体大小。 例如： 如果父元素字体16px，子元素设置 font-size: 1.5em; 则子元素字体大小为 16px * 1.5 = 24px。如果当前元素设置了字体大小为20px，那么它里面的 margin: 2em 就代表40px。 注意： em会叠加计算，容易混乱，但现在有更好的单位rem（相对于根元素html），不过我们这里只提em。

3. font-weight 属性 ------ 字体粗细

font-weight 控制文字的粗细程度。常用值有：

normal：正常粗细（相当于400）
bold：加粗（相当于700）
lighter：更细（相对父元素）
bolder：更粗（相对父元素）
也可以用数字：100～900，其中400是normal，700是bold。但并不是所有字体都支持那么细的粒度，通常只有部分字体支持。

相对粗细值的解析 ：lighter 和 bolder 是相对于父元素的字体粗细来增加或减少一个等级，但实际效果可能不明显，建议直接用 bold 或数字。

4. font-style 字体样式

用来设置文字的倾斜样式。常用值：

normal：正常（默认）
italic：斜体（使用字体的斜体版本）
oblique：倾斜（让正常字体倾斜模拟斜体，效果和italic差不多，但italic有专门的字体设计）

5. font-family 字体类型

指定文字使用哪种字体。可以写一个或多个字体名称，浏览器会按顺序依次查找，直到找到可用的字体。 例如：

复制代码

font-family: "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;

先找"微软雅黑"，如果有就用；
如果没有，找"PingFang SC"；
还没有，找"Helvetica Neue"；
再没有，找Arial；
最后，如果都没有，就用系统默认的无衬线字体（sans-serif）。字体名称如果有空格或中文，建议用引号括起来。

6. @font-face 自定义字体

有时候我们想用一些特别的字体，而用户的电脑上可能没有安装，这时可以通过 @font-face 引入外部字体文件，让用户下载并使用。

6.1. 定义字体前准备工作

你需要准备好字体文件，常见格式有 .ttf、.woff、.woff2（推荐woff2，体积小且现代浏览器支持好）。为了兼容不同浏览器，通常准备多种格式。

6.2. 如何定义字体

在CSS中使用 @font-face 规则：

复制代码

@font-face {
  font-family: 'MyFont';  /* 自定义字体名称 */
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

然后就可以在样式中使用 font-family: 'MyFont'; 来应用这个字体了。

6.3. 使用阿里妈妈·智造字，字体步骤

阿里妈妈·智造字是阿里巴巴推出的一套免费商用字体，我们可以通过 @font-face 引入。步骤大致如下：

去阿里妈妈·智造字官网下载字体文件（通常是woff2格式）。
将字体文件放在你的项目文件夹中（比如 fonts/ 目录下）。

在CSS中定义：

复制代码

@font-face {
  font-family: '阿里妈妈字体';
  src: url('fonts/Alimama_ShuHeiTi_Bold.woff2') format('woff2');
}

在元素上应用：
复制代码
```
body {
  font-family: '阿里妈妈字体', sans-serif;
}
```
这样你的网页就能使用漂亮的阿里妈妈字体啦！

二、CSS文本属性

1. text-decoration 修饰线

给文字添加下划线、上划线、删除线等。常用值：

none：无（默认）
underline：下划线
overline：上划线
line-through：删除线
也可以组合：text-decoration: underline overline;（同时有下划线和上划线）
还可以设置颜色和样式，比如 text-decoration: underline wavy red;（红色波浪下划线）

2. text-indent 首行缩进

设置段落第一行文字的缩进。常用单位是em或px。 例如： text-indent: 2em; 表示缩进两个汉字的距离（因为1em等于当前字体大小，一个汉字一般占一个em）。对于中文文章，常用首行缩进2个字符。

3. line-height 行高

行高指的是两行文字基线之间的距离，它控制行与行之间的空隙。适当增大行高可以让文章更易阅读。

3.1. line-height 值的4种写法

normal：默认值，由浏览器决定，通常为字体大小的1.2倍左右。
数字：如 line-height: 1.5; 表示行高是当前字体大小的1.5倍。推荐这种写法，因为它会相对于当前元素的字体大小动态变化。
长度值 ：如 line-height: 20px; 固定行高为20像素。
百分比 ：如 line-height: 150%; 表示行高是当前字体大小的150%。

3.2. 行高最佳实践

通常给整个页面设置一个基础行高，比如 body { line-height: 1.6; }。1.5～1.8之间阅读舒适。对于标题，行高可以小一些（比如1.2）。另外，行高可以用来实现单行文字的垂直居中：让行高等于容器高度即可。

4. font 属性------复合写法

font 属性可以一次性设置字体样式、粗细、大小、行高、字体类型。语法：

复制代码

font: font-style font-weight font-size/line-height font-family;

顺序有要求：font-style 和 font-weight 可选，写在前面；接着是 font-size（必须）和可选的 /line-height；最后是 font-family（必须）。

例如：

复制代码

p {
  font: italic bold 16px/1.8 "微软雅黑", sans-serif;
}

这行代码等价于：

复制代码

p {
  font-style: italic;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.8;
  font-family: "微软雅黑", sans-serif;
}

4.1. 最佳实践

用复合属性可以精简代码，但注意必须同时指定 font-size 和 font-family，否则整个 font 规则无效。平时我们可能还是单独写各个属性更清晰，但复合属性很适合统一设置。

5. text-align 行内内容水平位置

控制块级元素（如div、p、h1等）内部的行内内容（文字、span、图片等）的水平对齐方式。常用值：

left：左对齐（默认）
right：右对齐
center：居中对齐
justify：两端对齐（文字左右都对齐，最后一行不生效）

注意：text-align 作用于块级容器，使其内部的行内内容对齐。

6. word-spacing 字间距

设置单词之间的空白距离（英文有效，对中文不生效）。可以取正负值。 例如： word-spacing: 5px; 单词间多出5像素空白。

7. letter-spacing 字符间距

设置每个字符之间的空白距离，对中文也有效。 例如： letter-spacing: 2px; 每个字符间多了2像素空隙。负值可以让字符挤在一起。

三、列表样式

HTML中的列表有有序列表（<ol>）和无序列表（<ul>），每个列表项用 <li> 表示。CSS提供了一些属性来定制列表前的标记（bullet）。

1. list-style-type

设置列表项前面的标记类型。

无序列表常用：disc（实心圆，默认）、circle（空心圆）、square（实心方块）
有序列表常用：decimal（数字，默认）、lower-roman（小写罗马数字）、upper-roman（大写罗马数字）、lower-alpha（小写字母）、upper-alpha（大写字母）
也可以设置 none 去掉标记。

例如：

复制代码

ul {
  list-style-type: square;
}
ol {
  list-style-type: upper-roman;
}

2. list-style-image

用图片代替列表标记。语法：

复制代码

ul {
  list-style-image: url('bullet.png');
}

注意图片大小要合适，否则可能显示不完美。

3. list-style-position

设置标记的位置：

outside：标记在li外面（默认）
inside：标记在li里面，相当于标记和文字在同一块区域内，缩进效果不同。

4. list-style

复合属性，可以同时设置以上三个属性，顺序任意。 例如：

复制代码

ul {
  list-style: square inside url('bullet.png');
}

如果同时设置image和type，当图片加载失败时会回退到type。

四、应用实践

1. 单行文本水平垂直居中

在网页布局中，我们经常需要让一段文字在一个固定大小的盒子（比如按钮、导航栏、卡片标题）里既水平居中又垂直居中。对于单行文本 ，有一个非常简单又经典的方法，只需要用到我们刚刚学过的两个属性：text-align 和 line-height。

原理

水平居中 ：给父容器设置 text-align: center;，就可以让内部的文字水平居中。
垂直居中 ：让文字的行高（line-height）等于父容器的高度。因为行高定义了文字所占的垂直空间，当行高与容器高度一致时，文字就会在垂直方向上居中显示。

实现步骤

假设我们有一个 <div> 容器，宽度300px，高度100px，里面有一行文字"我是居中的文字"。

HTML代码：

html

复制代码

<div class="box">
  我是居中的文字
</div>

CSS代码：

css

复制代码

.box {
  width: 300px;        /* 容器宽度 */
  height: 100px;       /* 容器高度 */
  background-color: #f0f0f0;  /* 加个背景方便观察 */
  text-align: center;  /* 水平居中 */
  line-height: 100px;  /* 行高等于容器高度，实现垂直居中 */
  font-size: 16px;     /* 字体大小，不影响居中 */
  border: 1px solid #ccc;  /* 边框便于看到盒子 */
}

效果说明

文字在水平方向居中（因为 text-align: center）。
文字在垂直方向居中（因为 line-height: 100px，文字的行高占据了整个高度，并且默认文字在这个行高内是垂直居中的）。
这种方法只适用于单行文本。如果文字内容太多换行了，就会破坏垂直居中效果（因为多行时行高总和会超出容器高度）。