CSS中可以设置文本的颜色、对齐方式、划线方式、大小写、首行缩进、字间距、行高、文本方向、词距、文本阴影等属性。
CSS中的color属性可以用来定义文本颜色;其取值如下:
更多取值方式,可参考CSS颜色。
body {
color: LightGray;
}
h1 {
color: #46acb6;
}
CSS中的text-align用来定义文本元素水平层面上的对齐方向,一般分为左对齐(left)、右对齐(right)、居中(center)、两端对齐(justify)。
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
如下例所示,表示的是两端对齐(justify),即文本的每行宽度保持同样的宽度,一般适用于报纸类的文本排版。
div {
text-align: justify;
}
CSS中的text-decoration属性是用来定义文本装饰方式,实际上就是让该文本的划线样式:上划线(overline)、中划线(line-through)、下划线(underline)抑或是不被划线(none)。
默认情况下,a元素定义的链接元素都会有下划线,如果想去除默认的下划线,可以通过把text-decoration属性设置成none取值以达到去除默认下划线的功效。如下例所示:
a {
text-decoration: none;
}
上划线、中划线、下划线的案例如下:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
CSS中的text-transform属性,可以控制文本元素中的字母的大小写样式,取值如下:
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
CSS中的text-indent属性是用来定义文本首行缩进距离。如下例所示:
p {
text-indent: 256px;
}
CSS中的letter-spacing可用来定义文本的字符间距,如下例所示:
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
CSS中的line-height属性可用来定义文本的行高。行高的取值如下:
p.small {
line-height: 0.7;
}
p.big {
line-height: 1.8;
}
友情提示:line-height属性使用实数取值时,比如0.8代表0.8倍行高,这里的0.8倍不是针对外部容器的高度,而是针对该文本元素本身而言。
CSS中的direction属性可以定义文字的方向,该属性可取值:
p {
direction: rtl;
}
CSS中的word-spacing属性可以用来定义文本中单词之间的距离,该属性主要是针对拉丁字母构成的文本。试试下面的例子吧~
h1 {
word-spacing: 24px;
}
h2 {
word-spacing: -12px;
}
CSS中的text-shadow可以设置文本的阴影,如下例所示:
h1 {
text-shadow: 3px 2px #46acb6;
}
如果想强制一段文本不会换行,可以如下例所示:
div {
white-space: nowrap;
}