CSS 結構和規則

選擇符

任何html元素都可以是乙個css1的選擇符。選擇符僅僅是指向特別樣式的元素。例如，

當中的選擇符是p。

類選擇符

單乙個選擇符能有不同的class(類)，因而允許同一元素有不同樣式。例如，乙個網頁製作者也許希望視其語言而定，用不同的顏色顯示** :

code.html

code.css

以上的例子建立了兩個類，css和html，供html的code元素使用。class屬性是用於在html中以指明元素的類，例如，

每個選擇符只允許有乙個類。例如，code.html.proprietary是無效的。

類的宣告也可以無須相關的元素:

.note

在這個例子，名為note的類可以被用於任何元素。

乙個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的note類也可以命名為**all，但如果網頁製作者決定改變這個類的樣式，使得它不再是小字型的話，那麼這個名字就變得毫無意義了。

id 選擇符

id 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的侷限。乙個id選擇符的指定要有指示符"#"在名字前面。例如，id選擇符可以指定如下:

#svp94o

這點可以參考html中的id屬性:

文字縮排3em

關聯選擇符

關聯選擇符只不過是乙個用空格隔開的兩個或更多的單一選擇符組成的字串。這些選擇符可以指定一般屬性，而且因為層疊順序的規則，它們的優先權比單一的選擇符大。例如，以下的上下文選擇符

p em

是p em。這個值表示段落中的強調文字會是黃色背景；而標題的強調文字則不受影響。

宣告屬性

乙個屬性被指定到選擇符是為了使用它的樣式。屬性的例子包括顏色、邊界和字型。值

宣告的值是乙個屬性接受的指定。例如，屬性顏色能接受值red。

為了減少樣式表的重複宣告，組合的選擇符宣告是允許的。例如，文件中所有的標題可以通過組合給出相同的宣告:

h1, h2, h3, h4, h5, h6

實際上，所有在選擇符中巢狀的選擇符都會繼承外層選擇符指定的屬性值，除非另外更改。例如，乙個body定義了的顏色值也會應用到段落的文字中。

有些情況是內部選擇符不繼承周圍的選擇符的值，但理論上這些都是特殊的。例如，上邊界屬性是不會繼承的；直覺上，乙個段落不會有同文件body一樣的上邊界值。

樣式表裡面的註解使用c語言程式設計中一樣的約定方法去指定。css1註解的例子如以下格式:

/* comments cannot be nested */

偽類和偽元素是特殊的類和元素，能自動地被支援css的瀏覽器所識別。偽類區別開不同種類的元素(例如，visited links(已訪問的連線)和active links(可啟用連線)描述了兩個定位錨(anchors)的型別)。偽元素指元素的一部分，例如段落的第乙個字母。

偽類或偽元素規則的形式如

選擇符:偽類

或

選擇符:偽元素

偽類和偽元素不應用html的class屬性來指定。一般的類可以與偽類和偽元素一起使用，如下:

選擇符.類: 偽類

或

選擇符.類: 偽元素

偽類可以指定a元素以不同的方式顯示連線(links)、已訪問連線(visited links)和可啟用連線(active links)。定位錨元素可給出偽類link、visited或active。乙個已訪問連線可以定義為不同顏色的顯示，甚至不同字型大小和風格。

乙個有趣的效果是使當前(或「可啟用」)連線以不同顏色、更大的字型顯示。然後，當網頁的已訪問連線被重選時，又以不同顏色、更小字型顯示。這個樣式表的示例如下:

a:link a:active

a:visited

通常在報紙上的文章，例如wall street journal中的，文字的首行都會以粗印體而且全部大寫地展示。css1包括了這個功能，將其作為乙個偽元素。首行偽元素可以用於任何塊級元素(例如p、h1等等)。以下是乙個首行偽元素的例子:

p:first-line

首個字母偽元素用於加大(drop caps)和其他效果。含有已指定值選擇符的文字的首個字母會按照指定的值展示。乙個首個字母偽元素可以用於任何塊級元素。例如:

p:first-letter

會比普通字型加大三倍。

當使用了多個樣式表，樣式表需要爭奪特定選擇符的控制權。在這些情況下，總會有樣式表的規則能獲得控制權。以下的特性將決定互相對立的樣式表的結果。

! important規則可以用指定的! important特指為重要的。乙個特指為重要的樣式會凌駕於與之對立的其它相同權重的樣式。同樣地，當網頁製作者和讀者都指定了重要規則時，網頁製作者的規則會超越讀者的。以下是! important宣告的例子:

body

origin of rules (author's vs. reader's)正如以前所提及的，網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突，網頁製作者的規則會凌駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內建樣式表。

網頁製作者應該小心地使用! important規則，因為它們會超越使用者任何的! important規則。例如，乙個使用者由於視覺關係，會要求大字型或指定的顏色，而且這樣的使用者會有可能宣告確定的樣式規則為! important，因為這些樣式對於使用者閱讀網頁是極為重要的。任何的! important規則會超越一般的規則，所以建議網頁製作者使用一般的規則以確保有特殊樣式需要的使用者能閱讀網頁。

選擇符規則: 計算特性基於它們的特性級別，樣式表也可以超越與之衝突的樣式表，乙個較高特性的樣式永遠都凌駕於乙個較低特性的樣式。這只不過是計算選擇符的指定個數的乙個統計遊戲。

統計選擇符中的id屬性個數。

統計選擇符中的class屬性個數。

統計選擇符中的html標記名格式。

最後，按正確的順序寫出三個數字，不要加空格或逗號，得到乙個三位數。( 注意，你需要將數字轉換成乙個以三個數字結尾的更大的數。)相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。以下是乙個按特性分類的選擇符的列表:

#id1          /* a=1 b=0 c=0 --> 特性 = 100 */
ul ul li.red  /* a=0 b=1 c=3 --> 特性 = 013 */
li.red        /* a=0 b=1 c=1 --> 特性 = 011 */
li            /* a=0 b=0 c=1 --> 特性 = 001 */

特性的順序為了方便使用，當兩個規則具同樣權重時，取後面的那個。

CSS 結構和規則

CSS 結構和規則

CSS結構和規則

CSS語法和規則

CSS 結構和規則

CSS 結構和規則

CSS結構和規則

CSS語法和規則

相關推薦