今天早上，康晓玲同学拿着一个U盘在我面前晃了一晃，问道，老师，这是你的吗？

我看着那个熟悉的U盘，不正是我朝思暮想，迷失了一天的U盘吗？失而复得的惊喜实在太大了，让我旋转、跳跃、闭上眼……

在此，感谢康晓玲同学，你拯救了我32G的教学资料，我的命，咳咳……，又跑题了！

回到正题，大家认为讲完了margin和padding，是不是就该讲解浮动布局了？

屁咧，根据我多年经验，在没有讲解元素基本样式之前就开始讲浮动布局，会死掉班级大多数还愿意学习，但学习能力不够强的学生。

所以，今天我们从最基础最简单的文本样式正式进入CSS的世界。

查看案例

一、文本常用属性

选择几个比较重要的属性讲解吧，不是我懒，而是我觉得如果你稍微勤奋一点，应该可以自行测试一遍就掌握了。

二、font-size字体大小

body{
	font-family:"microsoft YaHei";/*文字字体由宋体变成微软雅黑*/
	font-size:16px;  /*文字大小为16px*/
	color:#333;     /*文字颜色为深黑*/
	background-color:#eee; /*文档整个背景颜色为亮灰*/}

font-size是个很关键的属性，设置文字大小，除了固定像素值之外，还有一个em的单位非常有用，表示基于父元素的相对关系。

比如，h1会继承body的样式，如果为h1设置如下的样式：

h1{
	font-size:2em;/*倍数关系，基于body定义的文字大小的倍数。*/
	color:#121212;
	text-align:center;/*文本在水平方向居中对齐*/
	}

此时h1的文字大小就为2*16px=32px了。

三、font-weight文字粗细

浏览器为h1-h6默认设置了字体加粗，如果希望不加粗，则可以如下设置：

h2{
	font-weight:normal;/*不加粗文字，h2默认是加粗的，可以设置为不加粗。*/}

当然，如果你希望加粗默认没有加粗的文字，可以这样设置：

span{
    font-weight:bold;/*文字加粗*/
}

除了用样式加粗之外，还可以用<strong></strong>标签加粗文字，代表有强调的意思。

四、line-height行高和text-indent首行缩进

段落默认没有首行缩进和行高，所以这两个值必须为段落设置。

p{
	text-indent:2em;/*em倍数一般用在文字大小的倍数上。*/
	line-height:180%;/*%单位一般用在宽高的百分比的设置上。*/
	}

为什么text-indent的值为2em，因为p也会继承body的文字大小呀，如果p为16px，那么首行缩进2em就是缩进32px，不管文字大小怎么变，都是两个字的大小。

行高也是百分比的单位，因为如果设置固定的行高值，比如为20px，如果文字变成24px，则文字会上下交错在一起。百分比的行高也可以保证文字大小不管怎么变化，都是有弹性的行高。

五、text-align文本对齐方式

要注意的是，这个属性只能针对block（块状）对象里面的内容设置对齐方式。如果你本身是内联对象，则不能使用。

比如为h1、p设置，则h1和p里面的文字会改变对齐方式，但如果你直接为一张图片设置，则图片不会改变的。因为图片是inline-block(内联块状)对象，图片不独占整个通栏。

那如何实现图片在一行上居中对齐呢？

<p class="imgcenter"><img src="images/斗笠.jpg" width="480" height="321"  /></p>

p.imgcenter{/*用了class为imgcenter的p段落，p段落里面的内容要居中对齐。里面的内容是文字或者图片无关系。*/
	text-align:center;
	}

把图片当成p的内容，为段落做居中，则图片在整个段落中就可以居中对齐了。

六、text-decoration文本装饰

这个属性几乎不会用在正常的文本上添加下划线或者删除线，大部分都是用在超链接上的，因为这种线条的颜色和文本颜色是保持一致的。

a{
	color:#1AADC8;
	text-decoration:none;/*没有下划线*/}
a:hover{
	color:#F60;
	text-decoration:underline;/*有下划线*/}

先为a的四个状态（:link，:visited，:hover，:active）设置一样的样式，再为:hover设置不一样的样式，这样，超链接就只有鼠标经过的时候样式不一样了，其他时候都一样的。

如果想为文本添加线条，完全可以考虑用border，不仅可以设置粗细，还可以设置颜色等其他样式，比text-decoration更好控制。

六、图文混排

如果想让图片和段落产生环绕的效果，只需要把图片放在段落的前面，为图片设置左浮动或者右浮动即可。

记住，图片一定要在段落的前面，以为浮动只会往上浮，而不是往下浮的。

<img src="images/douli.jpg" class="fr ml20" />
<p>越南人制作斗笠的原料并不讲究，斗笠一般使用成熟的竹子，把竹子劈开成圆形的小小条、作为骨架、做成圆锥形，之后把他们放在烧柴厨房的厨架上面以防虫子，而且更加坚韧。一般斗笠骨架做成16圈、叠成16层、有不同的半径，并用丝线把它固定起来。附上上面一层层的是使用坚韧的葵丝，棕榈叶，竹叶等叶子编成，然后使用针线固定它，缝纫的针脚全凭非常均匀，毫厘不差，缝纫时必须靠着每一圈骨架缝起来。一般编成斗笠之前要选好的、比较完整的叶子、洗干净、晒干，然后把它染成白色，编成之后再涂上一层有点点黄的斗笠专用油加以光滑并有不渗水的作用，涂上油之后那他晒干一天时间左右就可以使用，可以拿去卖了。</p>

.fr{
	float:right;/*右浮动*/}
.fl{
	float:left;/*左浮动*/}
.mr20{
	margin-right:20px;}
.ml20{
	margin-left:20px;}

很多的细节只有做了才知道！实践完后再回头看看理论，反复循环就会熟练掌握。