Css基础学习（四）—文本

 文本是网页内容的核心，文字的美观、可视性、表现性会加强网页内容的可读性。相对于精美的图片和样式，枯燥的文字就没有得到相应的重视程度。人们浏览网页并不是漫无目的的欣赏图片，而是获取信息。我们下面就来说说文字的一些基本样式。

1、font-family属性

font-family属性是针对某个元素的字体名称和（或）字体系列名称的一个列表。

font-family有两种值：字体名称（family name）和字体系列名称（Generic family）。每个值之间用逗号隔开，一般情况下，建议把字体系列作为列表中最后一项。如果字体名称中有空格，则要将其置于引号中（在HTML中则使用单引号）。

2、font-size属性

这个属性对字体的大小进行设置，可以使用像素、em和百分数。

1. /* Specify blanket rules for all elements */
2. body{
3. font-family: "Lucida Grande",Arial,Sans-serif;
4. font-size:12px;
5. }

上面的样式首先给定Lucida Grande字体，因为中间存在空格，所以放在引号中。如果机器中有Lucida Grande字体，文本将以这种字体显示；没有这种字体的话，则默认显示为Arial字体，如果这两种字体都不存在，浏览器会选择Sans-serif这种系列中的一种合适字体来显示。上例中的font-size:12px;保证所有的元素都以12px来显示。不过这样的设置会有例外，标题<h1>,<h2>,<h3>并不会受到这个样式的影响。

3、line-height属性

line-height属性调整文本行与行之间的间距。此属性可以使用百分比设置，如：line-height:150%，则间距为字号的一半。在实际的使用中，150%或者160%可能更合适。

line-height:normal;这个设置值与不指定line-height值时可得到相同的效果，所以只有希望改变某个特殊元素的继承值时才用这个值。

line-height:2;用数字设定间距时，行距将等于数字乘以当前的font-size值。

line-height:8px;将行距设定为固定的值，这种方法精度很高。但是这种情况，如果重新设置文本的大小，行距不会改变。

4、letter-spacing属性

这个属性可以控制文本之间的距离。注意：这个值可以为负数。

5、font-weight属性

font-weight属性设置文本中字符显示的粗细程度。其值100（最轻）、200、400（与normal相等）、700（等于粗体）和900（更粗）。

6、font-style属性

font-style:italic;设置文本斜体。

7、font-variant属性

font-variant用于将文本显示为小型大写字母字体，也就是所有的小写字母都将转换为大写字母，不过所有的字符都会小一些。
该属性只有normal和small-caps。

8、text-transform属性

这个属性和font-variant相对应，它可以将所有的字符显示为大写字母但是不缩小字号。text-transform属性的值：uppercase（全部大写）、lowercase（全部小写）、capitalize（全部首字符大写）、none。

9、text-indent属性

text-indent属性设置段落的缩进。如：

1. text-indent:15px;

10、首字下沉

1. p.dropcap:first-letter{
2. float:left;
3. width:40px;
4. font:60px "Lucida Grande",Arial,sans-serif;
5. line-height:50px;
6. }

这个css的设置就可以达到首字下沉的效果，是不是很酷阿？