在網頁布局當中,肯定會涉及到段落的相關處理,主要會包括單詞間隔屬性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%。
例如:

效果:

關注微信公衆号
