W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 文本(Text)


文本格式

敲一夜代码,流两行老泪;用三种语言,唯四肢受罪;待五更鸡鸣,遇骤雨初歇;遂登门而去,伫十里长亭;欲望穿泪眼,无如意郎君;借微薄助力,愿寻得佳偶;成比翼双鸟,乃畅想云端;卷情网之内,做爬虫抓取;为连理桂枝,容数据分析;思千里子规,助框广天地;念茫茫人海,该如何寻觅? "尝试一下"


文本颜色

color 属性被用来设置文字的颜色。

使用CSS时,颜色经常使用以下指定:

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

参阅 CSS 颜色值 查看完整的颜色值。

一个网页的背景颜色是指在主体内的选择:

Example

body {
    color: blue;
}

h1 {
    color: green;
}
尝试一下 »
Note 提示: 对于W3C标准的CSS:如果你定义了 color 属性,你还必须定义 background-color 属性。

文本的对齐方式

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

文本可居中或对齐到左或右,两端对齐。

以下示例显示了中心对齐和左右对齐文本:

Example

h1 {
    text-align: center;
}

h2 {
    text-align: left;
}

h3 {
    text-align: right;
}
尝试一下 »

text-align 属性设置为 "justify" ,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

Example

div {
    text-align: justify;
}
尝试一下 »

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

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

Example

a {
    text-decoration: none;
}
尝试一下 »

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

Example

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}
尝试一下 »
Note 提示: 我们不建议强调指出不是链接的文本,因为这常常混淆用户。

文本转换

text-transform 属性是用来指定在一个文本中的大写和小写字母。

它可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

Example

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}
尝试一下 »

文本缩进

text-indent 属性是用来指定文本的第一行的缩进。

Example

p {
    text-indent: 50px;
}
尝试一下 »

Letter Spacing(字符间距)

letter-spacing 属性增加或减少字符间的空白(字符间距)。

以下实例演示了如何增加或减少字符之间的间距:

Example

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}
尝试一下 »

Line Height(行高)

line-height 属性设置行间的距离(行高)。

Example

p.small {
    line-height: 0.8;
}

p.big {
    line-height: 1.8;
}
尝试一下 »

文本方向

direction 属性规定文本的方向 / 书写方向。

Example

div {
    direction: rtl;
}
尝试一下 »

Word Spacing(字间隔)

word-spacing 属性增加或减少单词间的空白(即字间隔)。

以下实例演示如何增加或减少单词之间的空格:

Example

h1 {
    word-spacing: 10px;
}

h2 {
    word-spacing: -5px;
}
尝试一下 »

Examples

更多实例

在元素内禁用文字环绕
这个例子演示了如何禁用一个元素内的文字环绕

垂直对齐图像
这个例子演示了如何设置文本的垂直对齐图像。

添加文本阴影
这个例子演示了如何设置文本阴影。


所有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 设置字间距