对于CSS文本的一些效果，基础一些的知识比较简单，但对于text-indent,vertical-align,text-align等的深入学习能够使我们对HTML5的学习更加轻松，对这部分知识的深入了解，也更利于以后网站的一些小技巧方面的运用。
CSS文本属性
text-decoration 下划线、删除线、顶划线
text-transform 文本大小写
text-indent 段落首行缩进
font-variant 将英文文本转换为“小型”大写字母
text-align 文本水平对齐
vertical-align 文本垂直对齐
line-height 行高
letter-spacing 字距
word-spacing 词距
（1）深入text-indent
在CSS中，可以使用text-indent属性来定义段落的首行缩进。关于text-indent的一个技巧：使用“text-indent：2em;”来实现段落的首行缩进。
现在来学习text-indent的另一个技巧：“text-indent：-9999px；”这种写法“text-indent：-9999px；”一般用于LOGO部分，在搜索引擎优化中，h1是非常重要的标签。一般情况下，我们都是把网址的LOGO图片放到h1标签中。不过，我们知道，搜索引擎无法识别图片，只能识别文字，为了更好地优化SEO，如何做呢?
一个很好的解决方案：指定h1元素的长宽与LOGO图片的长宽一样，然后定义h1的背景图片（background-image）为LOGO图片。也就是说，我们使用LOGO图片作为h1标签的背景图片，然后使用“text-indent：-9999px；”来隐藏h1的文字内容。
（2）深入text-align
①text-align起作用的元素
text-align对文字、inline元素（行内元素）以及inline-block元素（行内块元素）起作用，但对块元素不起作用。其中，img元素属于inline-block元素。
②text-align:center与margin:0 auto的区别
在页面水平居中实现中，二者是最常见的两种水平居中方式，不过这两者也有本质的区别。
（1）text-align:center实现的是文字、inline元素以及inline-block元素的水平居中。
（2）margin:0 auto实现的是块元素的水平居中。
（3）text-align在父元素中定义，margin:0 auto在当前元素中定义。
（3）深入line-hegiht
①line-hegiht的定义
在CSS中，line-hegiht还有一个更加准确的定义：两行文字基线之间的距离。
Ⅰ：顶线、中线、基线、底线
我们都用过英文簿，英文簿每一行都有4条线，分别是：顶线（top）、中线（middle）、基线（boseline）和底线（bottom）。
在CSS中，每一行文字都可以看成一个“行盒子”，而每一个行盒子都有4条线：顶线、中线、基线、底线。
vertical-align属性中的top、middle、baseline、bottom这四个属性值分别对应的就是：顶线、中线、基线、底线。
Ⅱ：行高、行距和半行距
（1）行高
行高（line-height）指的是“两行基线之间的垂直距离。
（2）行距
行距，指的是上一行的底线到下一行的顶线的垂直距离。也就是两行文字之间的空隙。
（3）半行距
行距的一半。
Ⅲ：内容区与行框
（1）内容区
内容区指的是盒子顶线到底线之间的垂直距离。
（2）行框
行框指的是两行文字“行半距分割线”之间的垂直距离。
②：line-height的取值
Ⅰ：height和line-hegiht
当没有定义line-height时，浏览器采用默认的line-height值。一行文字的高度由line-height决定，而不是由height决定的。例如，在p标签中，一个p标签的文字可以有很多行，其中line-height定义的是一行文字的高度，而height定义的是整个段落的高度（p标签的高度）。
在CSS中，我们可以定义height和line-height这两个属性相等，从而来实现单行文字的垂直居中。
Ⅱ：line-hegiht取值为百分比值、em值
当line-height值为百分比值或者em值时，当前元素的行高是相对于父元素的font-size值来计算的，计算公式如下：
line-height=（父元素font-size）x（百分比）
line-height=（父元素font-size）x（em值）
Ⅲ：line-hegiht取值为无单位数字
line-height还支持无单位数字的属性取值，在CSS中也只有line-hegiht属性具有这个特点。当line-hegiht值无单位数字时，实际的行高是相对于当前元素的font-size值来计算的，计算公式：line-height=（当前元素font-size）x（无单位数字）
（4）深入vertical-align
W3C对vertical-align属性的定义有4个方面
①vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式。这里的“该元素”指的是被定义了vertical-align属性的元素。
②在表格单元格中，vertical-align属性可以定义单元格td元素中内容的对齐方式。td元素是table-cell元素，也就是说vertical-align属性对table-cell类型元素有效。
③vertical-align属性对inline元素、inline-block元素和table-cell元素有效，对块元素无效。
④vertical-align属性允许指定负长度值（如-2px）和百分比值（如50%）。
vertical-align属性取值
①负值
vertical-align：-2px 表示元素相对于基线向下偏移2px.此方法用于解决单选框或复选框与文字垂直对齐的问题。
②百分比
vertical-align属性可以取值为百分比，这个百分比是相对于当前元素所继承的line-height属性值来决定的。
③关键字
top（顶部对齐）、middle（中部对齐）、baseline（基线对齐）、bottom（底部对齐）。
vertical-align属性应用
①inline元素和inline-块元素
②块元素
div是块元素，所以vertical-align属性对齐无效，如果想要在div中实现图片的垂直居中，可以先为div定义display:table-cell，也就是将块元素转化为table-cell元素（表格单元格），然后再使用vertical-align：middle就可以实现了。
③table-cell元素
要注意，table-cell元素跟inline、inline-block元素使用vertical-align是有很大区别的。
（1）inline元素和inline-block元素的vertical-align是针对周围的元素来说的，vertical定义的是周围元素相对于当前元素的对齐方式。
（2）table-cell元素的vertical-align属性是针对自身而言的。vertical-align定义的是内部子元素相对于自身的对齐方式。