css語言基礎 css屬性值的規範

2021-09-06 08:20:58 字數 3960 閱讀 9048

1

1.屬性值的資料型別和資料單位23

1.1長度:有兩種長度單位,一種是相對長度單位,一種是絕對長度單位

41.1.1:相對長度單位:em、ex、px、gd、rem、vw、vh、ch56

以下是幾個常用的相對長度單位:

7(1)em單位:em單位等於該元素font-size屬性的計算值,乙個例外情況是font-size屬性值本身出現了em單位,這 89

時它參造其父元素的font-size屬性值。

10(2)ex單位:ex單位也被稱為x-height。之所以叫x-height,是因為它通常等於小寫字母x的高度,即使字型中沒有x

1112

字母,ex單位還是會有定義的。該單位取決於每個字型的規定。

13(3)px單位:px也就是畫素單位,它是相對於使用者瀏覽器裝置的解析度,最常見的就是指計算機的顯示器。

1415

1.1.2:絕對長度單位:絕對長度單位只有在其輸出介質的物理特性已知的情況下才有用。in(英吋)\cm\mm\pt(點)\pc(12pt)

1617

1.2百分比值

18百分比的值總是相對於另外乙個值而言,如相對乙個長度。如果乙個屬性允許使用百分比作為屬性值,那麼該屬性也肯定定

1920

義了百分比所相對的絕對值。這個絕對值可以是同一元素的另外乙個樣式屬性的值,也可以是其父元素的樣式屬性值,或是

2122

格式化環境的值。

23如:line-height屬性的百分值就是相對於元素本身的font-size屬性值。下面的**中,p元素的line-height屬性的計算值

2425

是12px。26p

27如果根元素的樣式屬性指定了百分比值,並且該百分比值又被定義為相對某個屬性的繼承值,那麼結果值就是百分比乘以

2829

那個屬性的初始值。

301.3顏色

31顏色可以用多種方式表示,可以是名稱,也可以是rgb數字或hsl數字。

3233

1.3.1顏色名稱關鍵字

34常見的有white、green、red等,當然使用者也可以使用svg顏色名稱關鍵字等。如:p

3536

1.3.2rgb顏色模型(用在顏色的數字表示中)

37如:em(16進製表示法)

38em

39em函式表示法

4041

1.3.3rgba顏色模型

42rgba顏色模型是對rgb顏色模型的擴充套件,包括alpha通道(即透明度(範圍:0到1))。

43例子:將背景顏色設定為具有50%透明度的紅色,可以在樣式表中包含以下兩個css宣告中任何乙個。

44background-color:rgba(255,0,0,0.5);/background-color:rgba(100%,0,0,0.5);

4546

1.3.4hsl顏色模型

47hsl是hue(色相)、saturation(飽和度)、lightness(亮度)的簡稱。hsl把顏色描述在雙圓錐體內的點,這個雙圓錐

4849

的中心軸取值為自底部的黑色到頂部白色而在他們中間是灰色。

50hsl顏色模型格式:hsl(h,s,l);

51h是乙個色盤中的顏色,色彩選擇通過度數來確定,0度是紅色,120度是綠色,240是藍色。

52s是該色彩使用了多少,用百分比表示。0%表示灰度,也就是沒有使用該顏色,而100%表示該顏色飽滿。

53l是該色彩有多亮,也用百分比表示。較低較暗,較高較亮。0%與100%分別表示為黑與白。

54如:定義紅色背景:background-color:hsl(0,100%,50%);

5556

1.3.5hsla顏色模型

57對hsl顏色模型的擴充套件。與hsl顏色模型相似,不過多了最後乙個透明度而已。

58如:定義透明度為50%的紅色背景:background-color:hsl(0,100%,50%,0.5);

5960

1.4其他資料型別

61css定義的一些資料型別目前一般用得較少,很多資料型別一般用於語音介質

621.4.1角度(deg、grad、rad、turn)

631.4.2時間(s、ms)時間不能為負值

641.4.3頻率(hz、khz)頻率不能為負值

6566

2.函式

672.1.1atrr()函式

68 該函式用於獲取乙個樣式屬性的值,語法如下:attr(ident,[,<

type

>[,<

value

>

]]).第乙個引數ident指定樣式屬性名,將獲

69取該元素的ident樣式屬性的值。還可以指定命名空間字首,以限定屬性。命名空間和屬性之間用「|」分割。

70第二個引數type是可選的,如果第三個引數出現,那麼第二個引數就必須出現,該引數指示瀏覽器怎麼解釋屬性值。第二個

71引數可以是(string,url,color,integer,number,length等)。如果第二個引數缺失,那麼預設是string。

72如:width:attr(length,em);//預設值是0

7374

2.1.2url()函式

75格式是使用url()函式,括號中包括uri位址,位址可以是絕對位址,也可以是相對位址。如:background:url(yellow.jpg)

7677

2.1.3calc()函式

78該函式用來計算長度值,任何長度值都可以進行計算,包括相對長度與絕對長度。

79如:width:calc(100%3-2*1em-2*1px);

8081

2.1.4counter()函式

82計數器使用識別符號表示。要引用乙個計數器的值,可以採用下面兩種語法格式:

83(1)counter(識別符號) "符號1" "符號2" ... "符號n"

84(2)counter(識別符號,列表樣式型別)"符號1" "符號2" ... "符號n"

85要引用有名稱相同的巢狀計數器序列,也有兩種語法格式:

86(1)counters(識別符號,字串) "符號1" "符號2" ... "符號n"

87(2)counters(識別符號,字串,列表樣式型別)"符號1" "符號2" ... "符號n"

88css中,計數器只可以有content屬性引用。

8990

3.屬性值的計算步驟

91乙個屬性最終值的獲得要經過4步計算:

92(1)根據css規則中定義的值(稱為"指定值")\(2)被轉換成乙個用於繼承的值(稱為"計算值")\(3)在需要的情況下轉換成一

93個絕對的值(稱為"使用值")\(4)根據本地環境的限制條件最終轉換成另乙個值(稱為"呈現值")

943.1指定值:屬性的初始值

953.2計算值:指定值經過計算變成計算值

963.3使用值:將計算值和依賴關係綜合考慮後獲得的絕對值

973.4實際值:依據顯示介質後的值

9899

4.屬性的繼承

100101

文件樹種元素的某些樣式屬性的屬性值可以被子元素繼承,css規範為元素的每乙個樣式屬性都規定了它是否被繼承。當發生繼承時,

102繼承的是父元素的計算值,而從父元素那裡繼承的計算值將變成子元素的指定值和計算值。

103如:bodyh1

1044.1指定屬性值為inherit

105有些css屬性可以被繼承,但有些不能被繼承。為了解決這部分屬性繼承問題,css規定每乙個屬性可以有乙個為關鍵字inherit的

106指定值,即對於任何給定的元素,該屬性的值和它的父元素相同屬性的計算值相同。但是,有乙個例外,如果inherit被設定在根

107元素上,沒有父元素就不能繼承了,那麼該屬性將被賦予初始值。定義屬性值inherit可以繼承父元素的值。

108如:body *color的值

109 將從body元素繼承。

CSS基礎屬性

字型有以下相關屬性 font size 字型大小 font family 字型型別 font style 字形 斜體等 font variant 字型變化 如大寫 font weight 字型粗細 也可以簡寫為,但必須按以下順序排序 font style font variant font weig...

CSS基礎屬性

background color red p 文字相關屬性 文字相關屬性主要包括顏色 對齊方式 修飾效果等 none 預設值 eg text decoration line through underline 加下劃線 overline 加上劃線 line through 加刪除線 text sha...

css常用屬性值

以下是css樣式屬性 字型屬性如下 font family 用於設定字型名稱,可以設定多個字型名稱,用逗號隔開 font size 設定字型大小 絕對大小設定的值為xx small,x small,medium,large,x large xx large。相對大小設定 larger,smaller...