文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解：
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform
文本缩进[text-indent]
CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。
p {text-indent: 30px;}
文本对齐[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;
}
文本装饰[text-decoration]
CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。
h1 {
text-decoration:underline;
}
h2 {
text-decoration:overline;
}
h3 {
text-decoration:line-through;
}
字符间距[letter-spacing]
CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：
h1 {
letter-spacing:6px;
}
p {
letter-spacing:3px;
}
文本转换[text-transform]
CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。
比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。text-transform属性有四个可选值：
- capitalize
- 将每个单词的首字母转换为大写。例如：“john doe”将被转换为“John Doe”。
- uppercase
- 所有字母都转换为大写。例如：“john doe”将被转换为“JOHN DOE”。
- lowercase
- 所有字母都转换为小写。例如：“JOHN DOE”将被转换为“john doe”。
- none
- 不作任何转换——文本怎么写的就怎么显示。
来举个例子，我们将使用一个姓名列表。所有姓名都用<li>（列表项）标签来标记。我们希望对姓名采用首字母大写的方式，而对标题采用全部大写的方式。
查看过该例的HTML代码后你会发现，其实在HTML代码里我们写的姓名和标题全部都是小写。
h1 {
text-transform:uppercase;
}
li {
text-transform:capitalize;
}
小结
在上面三课里，你已经学习了一些CSS属性，不过还有更多需要学习。在下一课我们将对链接作有关介绍。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4972.html
微信扫一扫 
支付宝扫一扫 