CSS Text(文本)

CSS 文本属性负责控制文字的"排版细节"：颜色、对齐、修饰、缩进、行高与间距。字体属性（Fonts）决定文字长什么样，文本属性决定文字怎么摆放；两者配合，才能排出清晰耐读的正文与标题。

文本颜色 color

color 设置文字颜色，支持英文名、十六进制、rgb()/rgba() 等写法：

h1 { color: #333; }
p  { color: gray; }

<h1>深灰标题</h1>
<p>灰色正文</p>

效果说明：颜色可被后代元素继承，rgba(0,0,0,0.5) 的最后一个参数是透明度。

文本对齐 text-align

text-align 设置元素内文本的水平对齐方式：

h1 { text-align: center; }   /* 居中 */
p  { text-align: justify; }  /* 两端对齐 */

效果说明：取值还有 left、right；justify 让段落左右边缘整齐，适合中文正文。

文本修饰 text-decoration

text-decoration 用于加下划线、删除线等，最常见的用途是去掉链接默认下划线：

a { text-decoration: none; }         /* 去掉下划线 */
.del { text-decoration: line-through; } /* 删除线 */

效果说明：可取 none、underline（下划线）、line-through（删除线）、overline（上划线）。

缩进、行高与间距

text-indent 控制首行缩进，line-height 控制行高，letter-spacing 控制字符间距：

p {
    text-indent: 2em;      /* 首行缩进两字符 */
    line-height: 1.8;      /* 行高 */
    letter-spacing: 1px;   /* 字符间距 */
}

效果说明：em 是相对单位，1em 约为当前字号；line-height 建议写无单位倍数，随字号自动缩放。

垂直对齐与大小写

vertical-align 处理行内元素的垂直对齐，text-transform 转换英文大小写：

img { vertical-align: middle; }     /* 图片与文字垂直居中 */
.en { text-transform: uppercase; }  /* 全部转大写 */

<p><img src="icon.png" width="20" height="20"> 图标与文字居中</p>

效果说明：uppercase/lowercase/capitalize 分别对应全大写、全小写、首字母大写。

易错点

• 想让文字"垂直居中"，可用行高等于容器高度近似实现，text-align 做不到。
• text-align 只排列块级元素内部的文本，不能让块级元素本身居中。
• vertical-align 与 text-align 名字相近但用途不同，注意区分。

小结

文本属性围绕颜色、对齐、修饰、间距展开：先掌握 color、text-align、text-decoration 与 line-height，正文与标题的排版基本就够用了。