CSS基础13 文本

却尘

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;

}

文本对齐

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;}
文字装饰

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;}
字间距

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

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

实例h1 {  word-spacing: 10px;} h2 {  word-spacing: -5px;}
空白

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

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

实例p {  white-space: nowrap;}
文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

文字阴影效果！

实例h1 {  text-shadow: 2px 2px;}

接下来，向阴影添加颜色（红色）：

文字阴影效果！

实例h1 {  text-shadow: 2px 2px red;}

然后，向阴影添加模糊效果（5px）：

文字阴影效果！

实例h1 {  text-shadow: 2px 2px 5px red;}
所有 CSS 文本属性

属性	描述
color	设置文本颜色。
direction	指定文本的方向 / 书写方向。
letter-spacing	设置字符间距。
line-height	设置行高。
text-align	指定文本的水平对齐方式。
text-decoration	指定添加到文本的装饰效果。
text-indent	指定文本块中首行的缩进。
text-shadow	指定添加到文本的阴影效果。
text-transform	控制文本的大小写。
text-overflow	指定应如何向用户示意未显示的溢出内容。
unicode-bidi	与 direction 属性一起使用，设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align	指定文本的垂直对齐方式。
white-space	指定如何处理元素内的空白。
word-spacing	设置单词间距。