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文字属性

属性 描述
color 设置文本颜色
direction 指定文本方向/写入方向
letter-spacing 增加或减少文字中字符间的间距
line-height 设置行高
text-align 指定文本的水平对齐方式.
text-decoration 指定添加到文本的装饰
text-indent 指定文本块中第一行的缩进.
text-shadow 指定添加到文本中的阴影效果.
text-transform 控制文本的大写
text-overflow 指定了内容,不应向用户显示
unicode-bidi 设置或返回文本是否应该被重写以支持多种语言在同一文件中
vertical-align 设置元素的垂直对齐方式.
white-space 指定如何处理元素内部的空白.
word-spacing 增加或减少文字间的空格