26、CSS 文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定:

颜色名 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”
查看 CSS 颜色值,以获取可能颜色值的完整列表。

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

实例

body {
  color: blue;
}

h1 {
  color: green;
}

亲自试一试
提示:对于 W3C compliant CSS:如果您定义了 color 属性,则还必须定义 background-color 属性。

文本颜色和背景色
在本例中,我们定义了 background-color 属性和 color 属性:

实例

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

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

文本可以左对齐或右对齐,或居中对齐。

下例展示了居中对齐以及左右对齐的文本(如果文本方向是从左到右,则默认为左对齐;如果文本方向是从右到左,则默认是右对齐):

实例

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

当 text-align 属性设置为 “justify” 后,将拉伸每一行,以使每一行具有相等的宽度,并且左右边距是直的(就像在杂志和报纸中):

实例

div {
  text-align: justify;
}

亲自试一试
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向:

实例

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

亲自试一试
垂直对齐
vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式:

实例

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

28、CSS 文字装饰
text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线:

实例

a {
  text-decoration: none;
}

其他 text-decoration 值用于装饰文本:

实例

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

注释:建议不要在非链接文本加下划线,因为这经常会使读者感到困惑。
29、文本转换
text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母,或将每个单词的首字母大写:

实例

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

30、CSS 文字间距
文字缩进
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;
}

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

下例演示如何增加或减少单词之间的间距:

实例

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

空白
white-space 属性指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行:

实例

p {
  white-space: nowrap;
}