天天看點

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屬性一般用于中文句子中。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

文字修飾屬性text-decoration

如果需要對文字進行修飾時,可以用文字修飾屬性,文法:text-decoration:取值

其中取值可以有:

none:表示不修飾,預設值;

underline:表示對文字添加下劃線效果;

overline:表示對文字添加上劃線的效果;

line-through:表示對文字添加删除線效果。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

垂直對齊方式屬性vertical-align

垂直對齊方式屬性vertical-align,文法如下:vertical-align:取值

其中取值如下:

sub:文字的下标;

super:文字的上标;

top:垂直靠上對齊;

middle:垂直居中對齊;

bottom:垂直靠下對齊。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

水準對齊方式屬性text-align

水準對齊方式屬性text-align的文法:text-align:取值

其中取值如下:

left:左對齊;

right:右對齊;

center:居中對齊;

justify:兩端對齊。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

文本縮進屬性text-indent

在CSS中可以控制段落首行縮進以及縮進距離,文法:text-indent:取值

其中取值可以是一個具體的長度值,例如5px,也可以是百分比10%。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

文本行高屬性line-height

文本行高屬性line-height是用于控制行與行之間的距離的,文法:line-height:取值

其中取值可以具體的數值,例如20px,或者用百分比,例如10%。

例如:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

效果:

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性

關注微信公衆号

html css js網頁制作執行個體,《HTML+CSS+JS 網頁制作》- 段落屬性