《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%。
例如:
效果: