CSS文本

文本颜色

color 属性用于设置文本的颜色。

使用CSS, 颜色经常使用如下方式指定：

• 颜色名称 - 例如 "red"
• 十六进制值 - 例如 "#ff0000"
• RGB 值 - 例如 "rgb(255,0,0)"

页面的默认文本颜色定义在body选择器中。

body {
    color: blue;
}

h1 {
    color: green;
}

让我试试

注意：为了 兼容 W3C CSS: 如果你定义了 color 属性,你必须定义background-color属性.

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以向左或向右对齐，居中或两边对齐。

下面的示例显示居中对齐，以及左对齐和右对齐文本. (左对齐是默认的，如果文本方向是left-to-right, 右对齐是默认的，如果文本方向是 right-to-left):

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}

让我试试

当text-align 属性设置为"justify", 每一行被拉伸，使每行宽度相等, 左边和右边的边是直的 (像在杂志和报纸上):

div {
    text-align: justify;
}

让我试试

文本装饰

text-decoration 属性用于从文本中设置或移除装饰.

text-decoration: none; 通常用于移除链接中的下划线：

a {
    text-decoration: none;
}

让我试试

text-decoration 常用值有:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

让我试试

不是链接的文字，不推荐添加下划线，这样经常混淆读者。

文本转换

text-transform 属性用于指定大写字母和小写字母的文本。

它可以把一切都变成大写或小写字母，或每个单词的首字母大写：

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

让我试试

文本缩进

text-indent 属性用于指定文本的第一行的缩进：

p {
    text-indent: 50px;
}

让我试试

字母间隔

letter-spacing 属性用于指定文本中字符之间的空间.。

下面的示例演示如何增加或减少字符之间的空间：

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

让我试试

行高

line-height 属性用于指定行之间的空间：

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}

让我试试

文字方向

direction 属性用于更改元素的文本方向：

div {
    direction: rtl;
}

让我试试

字间距

word-spacing 属性用于指定文本中单词之间的空间。

下面的示例演示如何增加或减少单词之间的空间：

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}

让我试试

文字阴影

text-shadow 属性将阴影添加到文本中。

下面的示例指定水平的影子的位置（3px），垂直的阴影的位置（2PN）和阴影的颜色（红色）：

h1 {
    text-shadow: 3px 2px red;
}

让我试试

所有的CSS文字属性