html免费教程在线,免费HTML5在线教程 - 踏得网
除了前述的一些 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链接()有一个 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)。