《HTML+CSS+JS 网页制作》- 段落属性

2017-06-18  本文已影响0人  架构与我

在网页布局当中,肯定会涉及到段落的相关处理,主要会包括单词间隔属性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%。

例如:

效果:

关注微信公众号

上一篇下一篇

猜你喜欢

热点阅读