CSS 文本格式
03-css2026/11/14
1. color - 文本颜色
设置文本的前景色。
p {
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.8); /* 带透明度 */
color: hsl(0, 100%, 50%); /* 色相、饱和度、明度 */
}
2. text-align - 水平对齐
设置文本的水平对齐方式。
p {
text-align: left; /* 左对齐（默认） */
text-align: right; /* 右对齐 */
text-align: center; /* 居中对齐 */
text-align: justify; /* 两端对齐 */
}
3. vertical-align - 垂直对齐
设置行内元素或表格单元格的垂直对齐方式。
img {
vertical-align: middle; /* 图片与文本中线对齐 */
}
span {
vertical-align: super; /* 上标 */
vertical-align: sub; /* 下标 */
vertical-align: top; /* 顶部对齐 */
vertical-align: bottom; /* 底部对齐 */
}
4. text-decoration - 文本装饰
简写属性，用于设置文本的装饰线。
a {
text-decoration: none; /* 去除链接下划线 */
}
h1 {
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 删除线 */
text-decoration: underline; /* 下划线 */
text-decoration: underline wavy red; /* 波浪形红色下划线 */
}
/* 也可以拆分为更详细的属性 */
.fancy {
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-color: blue;
text-decoration-thickness: 2px;
}
5. text-transform - 文本转换
控制文本的大小写。
p {
text-transform: capitalize; /* 每个单词首字母大写 */
text-transform: uppercase; /* 全部大写 */
text-transform: lowercase; /* 全部小写 */
text-transform: none; /* 默认，原样显示 */
}
6. text-shadow - 文本阴影
为文本添加阴影效果。
h1 {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* 格式：水平偏移 垂直偏移 模糊半径 颜色 */
}
/* 多重阴影效果 */
.fancy-text {
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
}
7. font-family - 字体家族
设置文本的字体系列。
body {
font-family: "Microsoft YaHei", Arial, sans-serif;
/* 浏览器会从左到右依次查找可用的字体 */
}
更过详情内容，请看下文 font-family 字体文件如何获取和配置
8. font-size - 字体大小
p {
font-size: 16px; /* 像素 */
font-size: 1em; /* 相对于父元素 */
font-size: 1rem; /* 相对于根元素(html) */
font-size: 100%; /* 百分比 */
font-size: larger; /* 相对大小 */
}