html css js网页制作实例,《HTML+CSS+JS 网页制作》- 段落属性

在网页布局当中，肯定会涉及到段落的相关处理，主要会包括单词间隔属性word-spacing、字符间隔属性letter-spacing、文字修饰属性text-decoration、垂直对齐方式属性vertical-align、水平对齐方式属性text-align、文本缩进属性text-indent和文本行高属性line-height。

单词间隔属性word-spacing和字符间隔属性letter-spacing

使用单词间隔属性可以控制单词之间的间隔距离，语法：word-spacing:取值

其中取值可以是normal，或者具体的长度值，例如3px、5px等，默认值为normal。

注意：word-spacing属性一般用于英文句子中。

字符间隔属性是可以控制每个字符之间的间隔，语法：letter-spacing:取值

其中取值跟单词间隔属性的取值是一样的。

注意：letter-spacing属性一般用于中文句子中。

例如：

效果：

文字修饰属性text-decoration

如果需要对文字进行修饰时，可以用文字修饰属性，语法：text-decoration:取值

其中取值可以有：

none:表示不修饰，默认值；

underline:表示对文字添加下划线效果；

overline:表示对文字添加上划线的效果；

line-through:表示对文字添加删除线效果。

例如：

效果：

垂直对齐方式属性vertical-align

垂直对齐方式属性vertical-align，语法如下：vertical-align:取值

其中取值如下：

sub：文字的下标；

super：文字的上标；

top：垂直靠上对齐；

middle：垂直居中对齐；

bottom：垂直靠下对齐。

例如：

效果：

水平对齐方式属性text-align

水平对齐方式属性text-align的语法：text-align:取值

其中取值如下：

left：左对齐；

right：右对齐；

center：居中对齐；

justify：两端对齐。

例如：

效果：

文本缩进属性text-indent

在CSS中可以控制段落首行缩进以及缩进距离，语法：text-indent:取值

其中取值可以是一个具体的长度值，例如5px，也可以是百分比10%。

例如：

效果：

文本行高属性line-height

文本行高属性line-height是用于控制行与行之间的距离的，语法：line-height:取值

其中取值可以具体的数值，例如20px，或者用百分比，例如10%。

例如：

效果：

关注微信公众号