5.6 CSS 文本属性

text开头的一些属性

除了前述的一些 font-* 开头的字体属性外,CSS还提供很多 text-* 系列的文本属性

文本对齐(text-align)

text-align 属性必须用于块级元素,定义文本以及内联子元素如何横向对齐。

body{ text-align: left;}

最常用的取值为:

  • left:把文本排列到左边。默认值:由浏览器决定。
  • right:把文本排列到右边。
  • center:把文本排列到中间。
  • justify:实现两端对齐文本效果。

这些值对应于Microsoft Word 或 Photohop工具栏中的对齐按钮:

不推荐使用 justify。这个值用于等宽文本打印,由于它会拉伸文本来实现两端对齐,这通常会影响CSS中定义的文本字符间距(letter-spacing),各个浏览器的处理方式并不一致。而且可读性不好。

text-align 的默认值是 startstart 可以是 leftright,这取决于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 属性一样,对于文本缩进,你也可以使用 pxem 或者 %

文本阴影(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

只有 xy 参数值是必须定义的。blur 的缺省值为 0,而 color 缺省值为文本的颜色。

前面几个章节我们讲述了文本的字体属性(font-*)、文本属性(text-*)以及行高(line-height),不过要全面理解文本的空间属性,还需要进一步了解CSS的盒子模型或称为框模型(Box Model)。