CSS/tutorials/lesson5

2010年10月16日 (六) 04:16的版本

文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解：

CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。

p {
 text-indent: 30px;
}

CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td）被设置为居中。正常的文本段落被设置为两端对齐。

th {
 text-align: right;
}
td {
 text-align: center;
}
p {
 text-align: justify;
}

<discussion>characters_max=300</discussion>

@@ 第20行： / 第20行： @@
 ==文本对齐[text-align]==
+CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。
+在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。
+ th {
+  text-align: right;
+ }
+ td {
+  text-align: center;
+ }
+ p {
+  text-align: justify;
+ }
+[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson5-ex2.html 显示示例]
 ==文本装饰[text-decoration]==
 ==字符间距[letter-spacing]==