今天我们接着分享关于文本样式的内容。
font-variant属性：
在CSS中，使用font-variant属性只有一个作用，就是把文本设置成小型的小写字母，此属性只针对英文而言。
语法：
font-variant:normal/small-caps;
| font-variant属性 | |
| 属性值 | 说明 |
| normal | 默认值，正常效果 |
| small-caps | 小型大写字母 |
示例代码：
<html><head><title>font-variant</title><style type="text/css">#p1 { font-variant:normal;}#p2 { font-variant:small-caps;}</style></head><body><p id="p1">font-variant属性值为normal</p><p id="p2">font-variant属性值为small-caps</p></body></html>
此属性在英文国家能够见到，在中文网页中极少用到。
text-indent文本缩进：
我们在使用<p>标签的时候，首行文字是不会缩进的，在HTML中，我们通常使用“ ”空格来做进首行文本，但是这样冗余代码较多。在css代码中，我们可以使用text-indent属性来定义段落的首行缩进。
语法：
text-indent:像素值；
示例代码：
<html><head><title>文本缩进</title><style type="text/css">#p1{font-size: 15px;}#p2{font-size:15px;text-indent:30px;}</style></head><body><h3>文本缩进</h3><p id="p1">此行文本没有缩进。</p><p id="p2">此行文本有缩进。</p></body></html>
在css入门基础中，建议大家缩进时使用像素为单位，等到更加深入后，在学习其他的单位。
大家注意观察，这里有个小技巧，就是文本缩进一般都是需要缩进两个字的，那么我们就可以先设定字符的像素值，再设定缩进值是字符值的两倍。这样就可以达到缩进两个字的目的。
text-align文本对齐：
文本对齐分为，左对齐，居中对齐，右对齐。
语法：
text-align：属性值；
| text-align属性取值 | |
| 属性值 | 说明 |
| left | 默认值，左对齐 |
| center | 居中对齐 |
| right | 右对齐 |
text-align属性只能针对文本文字和img标签，对其他标签无效。
示例代码：
<html><head><title>对齐方式</title><style type="text/css">div{width:400px;height:300px;border: 1px solid black;}#p1 { text-align:left;}#p2 { text-align:center;}#p3 { text-align:right;}</style></head><body><div><p id="p1">虾米大王教你学编程系列之XXX</p><p id="p2">虾米大王教你学编程系列之XXX</p><p id="p3">虾米大王教你学编程系列之XXX</p></div></body></html>
因为p标签是块元素，是独占一行的，所以当你设置了文本对齐后，它是按照整个页面的宽度来计算对齐的位置的，此时我使用div包裹它们，是为了将宽度设定在一个小的范围内，便于观察。
line-height行高：
在这里纠正一个错误，就是很多书中，喜欢把line-height称为行间距，但其实整个叫法不严谨，因为行间距应该是指两行之间的距离，而line-height实际只是代表了行的高度。
语法：
line-height:像素值；
一般在css入门阶段，我们都是采用像素做单位的。
示例代码：
<html><head><title>行高line-height</title><style type="text/css">div{width:400px;height:300px;border: 1px solid black;}#p1 {line-height:10px;}#p2 {line-height:20px;}#p3 {line-height:30px;}#p4 {line-height:40px;}#p5 {line-height:50px;}</style></head><body><div><p id="p1">我是第1行</p><p id="p2">我是第2行</p><p id="p3">我是第3行</p><p id="p4">我是第4行</p><p id="p5">我是第5行</p></div></body></html>
从代码中，可以观察到，我给每行的行高，加了一倍，它只是影响了其所在行的行高，并没有影响上下，所以它只是行高，不是行间距的概念。
下节我们接着分享关于文本样式的内容。
