这一节我们分享关于文本样式的内容。
字体样式和文本样式为什么要区分呢？字体样式主要涉及字体本身，而文本样式主要涉及多文字的排版效果，即整个段落文字的排版效果。因此，使用text前缀来区分。
| CSS文本属性 | |
| 属性 | 说明 |
| text-decoration | 下划线、删除线、顶划线 |
| text-transform | 文本大小写 |
| font-variant | 将英文文本转换为小型大写字母 |
| text-indent | 段落首行缩进 |
| text-align | 文本水平对齐方式 |
| line-height | 行高 |
| letter-spacing | 字距 |
| word-spacing | 词距 |
text-decoration划线属性：
在CSS中，使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。
语法：
text-decoration:属性值；
| text-decoration属性取值 | |
| 属性值 | 说明 |
| none | 默认值，去掉划线样式 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 顶划线 |
示例代码：
<html><head><title>划线属性</title><style type="text/css">#p1 { text-decoration:underline;}#p2 { text-decoration:line-through;}#p3 { text-decoration:overline;}</style></head><body><p id="p1">我是下划线</p><p id="p2">我是删除线</p><p id="p3">我是顶划线</p></body></html>
在HTML学习中，我们知道了用<s></s>是删除线，<u></u>是下划线。现在学习css样式代码后，这些效果以后都使用text-decoration属性定义。
在学习css后，让HTML中的s标签和u标签就尘封吧。
text-decoration的none属性有一个很重要的使用方法，就是可以消除<a>链接的下划线的。
示例代码：
<html><head><title>none</title><style type="text/css">#link2 { text-decoration:none;}</style></head><body><p><a id="link1" href="http://www.baidu.com">有下划线链接</a></p><p><a id="link2" href="http://www.baidu.com">无下划线链接</a></p></body></html>
在实际开发中，大多数网站都会把链接的下划线给去除的，因为带下划线的链接实在是太丑了。这个小技巧请大家要记住的。
它们的用途：
下划线，一般用于文章的重点说明部分；
删除线，一般用于在电商网站中，对价格部分进行标记促销的；
顶划线，这个一般用不到；
text-transform文本大小写：
在css中，我们可以使用text-transform属性对文本的大小写进行变换，当然这个主要是针对的英文而言，中文字体不存在这个大小写的区分。
语法：
text-transform:属性值；
| text-transform属性 | |
| 属性值 | 说明 |
| none | 默认值，无转换发生 |
| uppercase | 大写 |
| lowercase | 小写 |
| capitalize | 每个英文单词首字母大写，其余无转换发生 |
示例代码：
<html><head><title>文本大小写</title><style>#p1 {text-transform:uppercase;}#p2 {text-transform:lowercase;}#p3 {text-transform:capitalize;}</style></head><body><p id="p1">大写：i love china.you love china.</p><p id="p2">小写：i love china.you love china.</p><p id="p3">首字母：i love china.you love china.</p></body></html>
下节我们接着分享文本样式的内容。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
