CSS 文本效果

原创

爱是与世界平行 2021-06-01 11:37:44 ©著作权

文章标签 CSS教程前端开发网页布局 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者爱是与世界平行的原创作品，请联系作者获取转载授权，否则将追究法律责任

对于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元素有效，对块元素无效。