天天看點

css入門教程資料(2)

三.層疊樣式表的格式

一般來說,樣式表的聲明分為選擇符(selector)和塊{}(block),塊裡包含屬性(properties)和屬性的取值(value),基本格式如下:

選擇符 {屬性:值}

其它格式1:

選擇符1,選擇符2,選擇符3 {屬性1:值1;屬性2:值2;屬性3:值3}

有時候多個選擇符将使用相同的設定,為了簡化代碼,我們可以一次性為它們設定樣式,并在多個選擇符之間加上“,”來分隔它們。

當有多個屬性的時候,必須在兩個屬性之間用“;”來分隔。

其它格式2:

選擇符1 選擇符2 {屬性1:值1;屬性2:值2;屬性3:值3}

和格式1非常相似,隻是在選擇符之間少加了“,”,但作用卻大不相同。表示如果選擇符2包括的内容同時包括在選擇符1裡的時候,所設定的樣式規則才起作用。

四.層疊樣式表的分類

為了使網頁的格式不過分的單調,必需讓相同的選擇符也能分類,并能按照不同的類别來進行不同的樣式設計。基本格式如下:

選擇符.類别名 {屬性:值}

類别名将可以在HTML的辨別符裡引用:

< 辨別符 class=類别名>網頁内容

五.層疊樣式表的僞類

除了上述的分類方式外,為了使分類的使用更靈活多樣,又産生了僞類的概念。類和僞類有什麼樣的差別呢?

一般地說,選擇符可以和多個類采用捆綁的形式來設定,這樣雖然能夠為同一個選擇符建立多種不同的樣式,但捆綁的形式同時也限制了設定的類為其它的選擇符所使用。僞類的産生就是為了解決這個問題,每個預聲明的僞類都可以被所有的HTML辨別符引用,當然有些塊級内容的設定除外。基本格式如下:

.僞類名 {屬性:值}

僞類可以被任何辨別符在HTML裡引用。

<辨別符 class=僞類名>網頁内容

 六.控制字型的樣式

控制字型的樣式包括控制字型類型、字型大小、字型風格、字型粗細四個部分。

1.字型類型

平時在使用WORD之類的字處理軟體的時候,經常需要調整字型的顯示,比如說“Arial”、“Impact”、“Verdana”等字型都是筆者使用的較多的。

基本格式如下:

font-family: 字型名稱

如果在font-family後加上多種字型的名稱,浏覽器回按字型名稱的順序逐一在使用者的計算機裡尋找已經安裝的字型,一旦遇到與要求的相比對的字型,就按這種字型顯示網頁内容,并停止搜尋;如果不比對就繼續搜尋,直到找到為止,萬一樣式表裡的所有字型都沒有安裝的話,浏覽器就會用自己預設的字型來替代顯示網頁的内容。

注意:

·當指定多種字型時,用“,”分隔每種字型名稱。

·當字型名稱包含兩個以上分開的單詞時,用“”把該字型名稱括起來。

·當樣式規則外已經有“”時,用‘’代替“”。

2.字型大小

font-size: 字号參數

字号的取值範圍:

·以Point為機關:點機關在所有的浏覽器和操作平台上都适用

·以Em為機關:指字母要素的尺寸,和Point相同距離

·以Pixes為機關:像素可以使用于所有的操作平台,但可能會因為浏覽者的螢幕分辨率不同,而造成顯示上的效果差異

·以in(英寸)為機關

·以cm(厘米)為機關

·以mm(毫米)為機關

·以pc(列印機的字型大小)為機關

·以ex(x-height)為機關

·smaller:比目前文字的預設大小更小一号

·larger:比目前文字的預設大小更小大号

·使用比例關系

·xx-small

·x-small

·small

·medium

·large

·x-large

·xx-large

3.字型風格

字型風格隻能控制各種斜體字的顯示。

font-style: 斜體字的名稱

4.字型粗細

字型粗細控制粗體字的顯示,取值範圍從數字100~900,浏覽器預設的字型粗細為400。另外可以通過參數lighter和bolder使得字型在原有基礎上顯得更細或更粗些。

font-weight: 字型粗細