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; }