提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、文本颜色
- 二、文本对齐
- 三、文本修饰
- 四、文本缩进
- 五、行间距
- 六、字符间距
- 七、文本阴影
- 总结
前言
文本样式与字体样式不同，CSS文本属性可以定义文本外观，例如行间距等。由于自己在学习CSS的过程中会时不时忘记一些CSS文本样式的书写，因此在本文记录了一些常用的CSS文本样式的用法。
一、文本颜色
使用color属性定义文本的颜色，其属性值有三类：
- 十六进制：由0-9这十个数字和A-F这六个字母组成（例如：#FF0000、#23DF90…）
- RGB代码（例如：red、green、yellow…）
- 预定义的颜色值（例如：rgb(0,255,0) ， rgb(30%,30%,100%) ）
例如：
//红色
color:#FF0000;
注意：
开发中常用的color属性值用十六进制表示。
二、文本对齐
使用text-align属性用于设置元素内文本内容的水平对齐方式，其属性值如下：
- left：左对齐（默认值）
- center：居中对齐
- right：右对齐
例如：
//水平居中对齐
text-align:center;
注意：
（1）text-align属性只能设置文本内容的水平对齐，不能设置竖直对齐。
（2）使用text-align属性时，必须保证被设置元素为行内元素或者行内块元素才可生效。
三、文本修饰
使用text-decoration属性规定添加到文本的修饰，其属性值如下：
- none：默认值，无任何修饰（最常用）
- underline：下划线，例如链接a标签自带的下划线（常用）
- overline：上划线（几乎不用）
- line-through：删除线（不常用）
例如：
text-decoration:none;
text-decoration:underline;
text-decoration:overline;
text-decoration:line-through;
效果展示如下：
注意：
如果想要去掉a标签自带的下划线，直接给a标签添加text-decoration:none;样式即可。
四、文本缩进
使用text-indent属性设置文本的第一行缩进，通常是将段落首行进行缩进，其单位可以用px或者em。
例如：
text-indent:10px;
注意：
（1）缩进长度可以是负值。
（2）em是一个相对单位，是指当前元素的font-size的1个文字大小，如果当前文字没有设置文字大小，则会按照父元素的1个文字大小，因此一般情况下使用text-indent:2em;来进行常规缩进，即缩进两个文字长度。
五、行间距
使用line-height设置各行间的距离（行高），例如：
line-height:20px;
行间距包含上间距、文本高度、下间距，如下：
注意：
（1）改变行高其实改变的是上、下间距的高度。
（2）为了方便观感，一般给段落设置行间距，而不是每行设置行间距。
六、字符间距
使用letter-spacing设置每个字符间的距离（字符间距），例如：
letter-spacing:2px;
注意：
（1）如果不设置该属性，则为默认值normal，即字符间没有额外的空间。
（2）如果设置该属性的属性值为inherit，则表示该元素会继承父元素的letter-spacing的值。
七、文本阴影
使用text-shadow设置文本阴影，其语法如下：
text-shadow: h-shadow v-shadow blur color;
- h-shadow：水平阴影的位置，正负值均可（必需）
- v-shadow：垂直阴影的位置，正负值均可（必需）
- blur：模糊的距离（可选）
- color：阴影的颜色（可选）
例如：
//右移3px，下移3px，阴影宽度为1px，颜色为红色
text-shadow: 3px 3px 1px #ff0000;
效果如下：
注意：
（1）如果不设置color，则默认为黑色阴影。
（2）如果不设置blur，则默认与文字大小一致。
总结
以上就是有关常用文本样式的笔记内容，希望对各位有所帮助，作者也在学习中，如有解释不清楚或有误的地方，还请各位指正。
