5.5 CSS 文本属性
除了前述的一些 font-*
开头的字体属性外,CSS还提供很多 text-*
系列的文本属性。
文本对齐(text-align)
text-align
属性必须用于块级元素,定义文本以及内联子元素如何横向对齐。
body{ text-align: left;}
最常用的取值为:
- left:把文本排列到左边。默认值:由浏览器决定。
- right:把文本排列到右边。
- center:把文本排列到中间。
- justify:实现两端对齐文本效果。
这些值对应于Microsoft Word 或 Photohop工具栏中的对齐按钮:
不推荐使用 justify
。这个值用于等宽文本打印,由于它会拉伸文本来实现两端对齐,这通常会影响CSS中定义的文本字符间距(letter-spacing),各个浏览器的处理方式并不一致。而且可读性不好。
text-align
的默认值是 start
。start
可以是 left
或 right
,这取决于HTML文档方向(direction)属性的设置。
direction
是一个CSS属性,可以是 ltr
(left to right) 或 rtl
(right to left):
- 如果
direction
等于ltr
,那么start
等于left
- 如果
direction
等于rtl
,那么start
等于right
文本修饰(text-decoration)
text-decoration
属性用来在文本上添加一根线条。缺省值为:none
.deleted{ text-decoration: line-through;}
Deleted
可能的取值有:
上划线(overline)
下划线(underline)
中划线或叫删除线(line-through)
缺省情况下,HTML链接(<a>
)有一个 text-decoration: underline;
属性。而为了设计更好的链接观感,通常Web工程师会首先移除这个默认文本修饰:
a{ text-decoration: none;}
文本缩进(text-indent)
text-indent
属性用来在块级元素的第一行添加一定的空格,以达到排版缩进的效果。
Default value: 0
(zero)
blockquote{ text-indent: 30px;}
你看过的书,记住的知识常常会忘记,但这些书本上的知识实际上已经对你产生了影响,这些知识潜移默化成了你的理解力和想象力。而真正重要的就是这些能力而不是具体的知识。
注意只有第一行会被缩进,如果想使得整个文本段落产生偏移,可以使用 内边距(paddings)。后续章节会讲解这个属性。
和 font-size
属性一样,对于文本缩进,你也可以使用 px
,em
或者 %
。
文本阴影(text-shadow)
Photoshop软件中有一个投影(Drop Shadow)工具。同样的在CSS中,我们也可以为文本添加阴影,来实现更好的视觉效果或可读性。
语法格式如下
text-shadow: h-shadow v-shadow blur color;
h-shadow
必需。水平阴影的位置。允许负值。v-shadow
必需。垂直阴影的位置。允许负值。blur
可选。模糊的距离。color
可选。阴影的颜色。
h1{ text-shadow: 0 2px 5px rgba(0,0,0,0.5);}
Hello World
只有 x
和 y
参数值是必须定义的。blur
的缺省值为 0
,而 color
缺省值为文本的颜色。
前面几个章节我们讲述了文本的字体属性(font-*)、文本属性(text-*)以及行高(line-height),不过要全面理解文本的空间属性,还需要进一步了解CSS的盒子模型或称为框模型(Box Model)。