學習CSS之屬性

2021-04-16 06:40:07 字數 3303 閱讀 1184

一、字型屬性

1.font-family:字型族

常用的屬性值有:arial,courer,宋體

2.font-size:字型大小

常用單位為pt(point,磅),px(pixel,畫素),有時也可用xx-**all,x-**all,medium,large,x-large,xx-

large

如:3.font-style:字型樣式

屬性值有:normal, italic, oblique,其中italic和oblique為斜體,但有些瀏覽器不支援oblique,建議

用斜體時使用italic

4.font-weight:字型粗細

屬性值有:normal(預設值),bold,bolder,lighter

5.color:字型顏色

二、文字屬性

1.text-indent:文字縮排

該屬性可以指定段落首行的縮排

2.text-align:文字對齊

屬性值有:left(預設值),right

3.text-decoration:文字修飾

用於指定文字和橫線的關係,屬性值有:none(預設值),overline(上劃線),line-through(當中劃

線),underline(下劃線)

4.letter-spacing:字元間距

屬性值可設定特定長度,預設值為normal

用於指定文字的顏色

示例:text.html:

這是文字縮排,0.5in ,首行縮排

這是預設對齊方式

這是右對齊方式

這是普通文字,無文字修飾

文字有上劃線

文字中間劃線

文字有下劃線

字元間距為:0.8in

text_show.css:

p.indent

p.alignl

p.alignr

p.overline

p.through

p.underline

p.spacing

三、列表屬性

列表樣式型別屬性為:list-style-type

1.無序列表

屬性list-style-type 的常用屬性值有:disc(實心圓點),circle(空心圓點),square(實心方塊),none

2.有序列表

屬性list-style-type的常用屬性值有:decimal(阿拉伯數字),upper-alpha(小寫字母),lower-alpha(大寫

字母),upper-roman(大寫羅馬數字),lower-roman(小寫羅馬數字)

四、背景屬性

1.background-color:背景顏色屬性

該屬性用於指定html背景顏色

2.background-image:背景屬性:

該屬性用於指定html背景

如:現在我們在演示背景顏色和背景

五、邊框屬性

1.border-style:邊框樣式

每個html元素都有乙個border-style屬性,該屬性用於指定元素的內容是否有乙個邊框,並指定邊框的樣式.

屬性值有:none(預設值),dotted(點線式),dashed(破折線),solid(直線),double(雙線),groove (槽線),

ridge(脊線),inset (內嵌),outset (突起)

2.border-width:邊框寬度

該屬性用來指定上下左右邊框的寬度,常用屬性值有medium,thin,thick,也可用帶長度單位的數字指定.

另外,也可分別指定元素四個邊框的寬度,可通過屬性border-top-width,border-bottom-width,border-

left-width,border-right-width來設定.

3.border-color:邊框顏色

該屬性用於指定邊框的顏色.元素的四個邊框的顏色也可以不相同,可通過屬性border-top-color,border-

bottom-color,border-left-color,border-right-color來設定.

六、間隙屬性

間隙(padding)用於指定元素內容與其邊框之間的距離。

1.padding-left:左間隙屬性

用來設定元素內容到左邊框的寬度

2.padding-right:右間隙屬性

用來設定元素內容到右邊框的寬度

3.padding-top:上間隙屬性

用來設定元素內容到上邊框的寬度

4.padding-bottom:下間隙屬性

用來設定元素內容到下邊框的寬度

特殊寫法:

(1)上下左右間隙相同

.mypadding1

(2)分別設定上下左右間隙(順序是上,右,下,左)

.mypadding2

七、margin

邊距(margin)用於指定元素邊框與相鄰元素邊框之間的距離。

1.margin-left:左邊距屬性

該屬性用於指定左邊距的寬度

2.margin-right:右邊距屬性

該屬性用於指定右邊距的寬度

3.margin-top:上邊距屬性

該屬性用於指定上邊距的寬度

4.margin-bottom:下邊距屬性

該屬性用於指定下邊距的寬度

特殊寫法:

(1)上下左右邊距相同

.mymargin1

(2)分別設定上下左右邊距(順序是上,右,下,左)

.mymargin2 

CSS學習筆記之 z index屬性》

z index是針對網頁顯示中的乙個特殊屬性。因為顯示器是顯示的圖案是乙個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z index屬性來表示z軸的區別。表示乙個元素在疊加順序上的上下立體關係。由此圖可以顯而易見的,z index越大越靠前,z i...

學習css之文字屬性

css3之文字屬性 1 縮排和水平對齊 text indent,通過使用 text indent 屬性,所有元素的第一行都可以縮排乙個給定的長度,甚至該長度可以是負值。這個屬性最常見的用途是將段落的首行縮排,下面的規則會使所有段落的首行縮排6 em p text indent 屬性可以繼承.2 水平...

css屬性學習

css display 屬性 css text decoration 屬性 css padding 屬性 在我做導航欄時使用到了padding 我沒有設定ul li a的寬,我使用padding加大了寬並且居中顯示了。來自個人的胡思亂想 css background position 屬性 floa...