最新的Web开发教程
 

CSS文本


文本格式

该文本样式与一些文本格式属性。 标题使用text-align, text-transformcolor属性。 段落缩进,对齐,并指定字符间距。 下划线从该有色删除“试一试”的链接。


文字颜色

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

使用CSS,颜色是最经常被指定:

  • 色彩的名字-像"red"
  • 一个十六进制值-象"#ff0000"
  • 一个RGB值-像"rgb(255,0,0)"

看看CSS颜色值可能的颜色值的完整列表。

对于一个页面默认的文本颜色在体内选择限定。

body {
    color: blue;
}

h1 {
    color: green;
}
试一试»
注意注意:对于符合W3C CSS:如果定义color属性,还必须定义background-color属性。

文本对齐

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

文本可以向左或右对齐,居中还是有道理的。

下面的示例演示中心对齐,左,右对齐文本(左对齐是默认的,如果文本方向是左到右,右对齐是默认的,如果文本方向是从右到左):

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;
}
试一试»

例子

更多示例

禁用元素中文字环绕
这个例子演示了如何禁用元素中文字换行。

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

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


自测练习用!

练习1» 练习2» 练习3» 练习4» 练习5»


所有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 增加或减少的话之间的空间中的文本