CSS筆記

基本語法

規則

選擇符

任何HTML元素都可以是一個CSS1的選擇符。選擇符僅僅是指向特別樣式的元素。例如,

P { text-indent: 3em }

當中的選擇符是P

類選擇符

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

code.html { color: #191970 }
code.css  { color: #4b0082 }

以上的例子建立了兩個類,csshtml,供HTML的CODE元素使用。CLASS屬性是用於在HTML中以指明元素的類,例如,

<P CLASS=warning>每個選擇符只允許有一個類。
例如,code.html.proprietary是無效的。</p>

類的聲明也可以無須相關的元素:

.note { font-size: small }

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

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

ID 選擇符

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

#svp94O { text-indent: 3em }

這點可以參考HTML中的ID屬性:

<P ID=svp94O>文本縮進3em</P>
關聯選擇符

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

P EM { background: yellow }

P EM。這個值表示段落中的強調文本會是黃色背景;而標題的強調文本則不受影響。

聲明

屬性

一個屬性被指定到選擇符是爲了使用它的樣式。屬性的例子包括顏色邊界字體

聲明的是一個屬性接受的指定。例如,屬性顏色能接受值red。

組合

爲了減少樣式表的重複聲明,組合的選擇符聲明是允許的。例如,文檔中所有的標題可以通過組合給出相同的聲明:

H1, H2, H3, H4, H5, H6 {
  color: red;
  font-family: sans-serif }

繼承

實際上,所有在選擇符中嵌套的選擇符都會繼承外層選擇符指定的屬性值,除非另外更改。例如,一個BODY定義了的顏色值也會應用到段落的文本中。

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

註解

樣式表裏面的註解使用C語言編程中一樣的約定方法去指定。CSS1註解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

僞類和僞元素

僞類僞元素是特殊的類和元素,能自動地被支持CSS的瀏覽器所識別。僞類區別開不同種類的元素(例如,visited links(已訪問的連接)和active links(可激活連接)描述了兩個定位錨(anchors)的類型)。僞元素指元素的一部分,例如段落的第一個字母。

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

選擇符:僞類 { 屬性: 值 }

選擇符:僞元素 { 屬性: 值 }

僞類和僞元素不應用HTML的CLASS屬性來指定。一般的類可以與僞類和僞元素一起使用,如下:

選擇符.類: 僞類 { 屬性: 值 }

選擇符.類: 僞元素 { 屬性: 值 }

定位錨僞類

僞類可以指定A元素以不同的方式顯示連接(links)、已訪問連接(visited links)和可激活連接(active links)。定位錨元素可給出僞類linkvisitedactive。一個已訪問連接可以定義爲不同顏色的顯示,甚至不同字體大小和風格。

一個有趣的效果是使當前(或“可激活”)連接以不同顏色、更大的字體顯示。然後,當網頁的已訪問連接被重選時,又以不同顏色、更小字體顯示。這個樣式表的示例如下:

A:link    { color: red }
A:active  { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }

首行僞元素

通常在報紙上的文章,例如Wall Street Journal中的,文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能,將其作爲一個僞元素。首行僞元素可以用於任何塊級元素(例如PH1等等)。以下是一個首行僞元素的例子:

P:first-line {
  font-variant: small-caps;
  font-weight: bold }

首個字母僞元素

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

P:first-letter { font-size: 300%; float: left }

會比普通字體加大三倍。

層疊順序

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

  1. ! important

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

    BODY { background: url(bar.gif) white;
           background-repeat: repeat-x ! important }
  2. Origin of Rules (Author's vs. Reader's)

    正如以前所提及的,網頁製作者和讀者都有能力去指定樣式表。當兩者的規則發生衝突,網頁製作者的規則會凌駕於讀者的其它相同權重的規則。而網頁製作者和讀者的樣式表都超越瀏覽器的內置樣式表。

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

  3. 選擇符規則: 計算特性

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

    1. 統計選擇符中的ID屬性個數。
    2. 統計選擇符中的CLASS屬性個數。
    3. 統計選擇符中的HTML標記名格式。

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

    #id1         {xxx} /* a=1 b=0 c=0 --> 特性 = 100 */
    UL UL LI.red {xxx} /* a=0 b=1 c=3 --> 特性 = 013 */
    LI.red       {xxx} /* a=0 b=1 c=1 --> 特性 = 011 */
    LI           {xxx} /* a=0 b=0 c=1 --> 特性 = 001 */

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章