CSS教程 - 层叠样式表完整指南
CSS 文本属性与格式化 - 全面掌握文本样式
CSS 文本格式 ¶
CSS提供了多种控制文本外观的属性，允许您创建专业、易读的文本排版。
下面是一个文本格式化的示例：
css
1h1 {
2 text-align: center;
3 text-transform: uppercase;
4 color: #4CAF50;
5}
6
7p {
8 text-indent: 30px;
9 text-align: justify;
10 letter-spacing: 2px;
11 line-height: 1.5;
12}文本颜色 ¶
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: #FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
参阅 CSS 颜色值 查看完整的颜色值。
一个网页的背景颜色是指在主体内的选择：
css
1body {
2 color: red;
3}
4h1 {
5 color: #00ff00;
6}
7h2 {
8 color: rgb(255,0,0);
9}对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
文本的对齐方式 ¶
text-align 属性用于设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐。
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
css
1h1 {
2 text-align: center;
3}
4p.date {
5 text-align: right;
6}
7p.main {
8 text-align: justify;
9}文本修饰 ¶
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
css
1a {
2 text-decoration: none;
3}也可以这样装饰文字：
css
1h1 {
2 text-decoration: overline;
3}
4h2 {
5 text-decoration: line-through;
6}
7h3 {
8 text-decoration: underline;
9}注意：我们不建议强调指出不是链接的文本添加下划线，因为这常常会混淆用户。
文本转换 ¶
text-transform 属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
css
1p.uppercase {
2 text-transform: uppercase;
3}
4p.lowercase {
5 text-transform: lowercase;
6}
7p.capitalize {
8 text-transform: capitalize;
9}文本缩进 ¶
text-indent 属性用于指定文本的第一行的缩进。
css
1p {
2 text-indent: 50px;
3}文本间距 ¶
CSS提供了控制字母和单词间距的属性：
css
1p {
2 letter-spacing: 2px; /* 字母间距 */
3 word-spacing: 4px; /* 单词间距 */
4 line-height: 1.5; /* 行高 */
5}文本阴影 ¶
text-shadow 属性为文本添加阴影效果：
css
1h1 {
2 text-shadow: 2px 2px 5px #888888;
3}参数含义：
- 第一个值是水平阴影的位置
- 第二个值是垂直阴影的位置
- 第三个值是模糊半径
- 第四个值是阴影颜色
CSS 文本属性表 ¶
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |