文本属性

CSS 文本属性全面指南

文本颜色 (color)

.text-color {
color: red;/* 预定义颜色 */
color: #FF0000;/* 十六进制 */
color: rgb(255, 0, 0);/* RGB值 */
color: rgba(255,0,0,0.5); /* 带透明度的RGB */
}

开发实践

推荐优先使用十六进制简写形式（如 #fff），浏览器兼容性最好

文本对齐 (text-align)

.text-align {
text-align: left;/* 默认左对齐 */
text-align: right;/* 右对齐 */
text-align: center;/* 居中对齐 */
text-align: justify; /* 两端对齐 */
}

文本装饰 (text-decoration)

.text-decoration {
text-decoration: none;/* 去除装饰 */
text-decoration: underline;/* 下划线 */
text-decoration: overline;/* 上划线 */
text-decoration: line-through; /* 删除线 */
}

实用技巧

去除链接默认下划线：

a {
text-decoration: none;
}

文本缩进 (text-indent)

.text-indent {
text-indent: 20px;/* 固定值缩进 */
text-indent: 2em;/* 相对单位缩进 */
text-indent: -2em;/* 负值缩进（悬挂缩进） */
text-indent: 10%;/* 百分比缩进 */
}

行高控制 (line-height)

.line-height {
line-height: 1.5;/* 无单位倍数 */
line-height: 24px;/* 固定值 */
line-height: 120%;/* 百分比 */

/* 垂直居中技巧 */
height: 40px;
line-height: 40px;
}

文本属性速查表

属性	描述	常用值	示例
color	文本颜色	十六进制值	#fff
text-align	水平对齐	left/right/center	text-align: center
text-indent	首行缩进	em单位	text-indent: 2em
text-decoration	文本装饰	underline/none	text-decoration: none
line-height	行间距	倍数/像素值	line-height: 1.5

高级技巧

1. 多行文本垂直居中：

.multiline-center {
display: flex;
align-items: center;
height: 100px;
}

2. 文字阴影效果：

.text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

3. 文本溢出处理：

.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

兼容性提示

1. text-align: justify 在移动端表现可能不一致
2. 某些旧版浏览器不支持 RGBA 颜色表示法
3. 行高使用无单位值时继承方式可能产生意外结果