[CSS] 多個 class 的表示法和寫法 @新精讚

自動目錄

使用圖片當背景
CSS的註解
延伸閱讀

網頁設計中常會用到CSS，他的一般格式是這樣的：

而其中的 style2 就是一個 css 的class，他的表示法大概長這樣：

.style2 { color:#666666; }

如果一個網頁物件同時有兩個以上的style，則寫成這樣，中間用空白分隔。

假設以上的例子中，style2, style3, style4 有相同的屬性的話，會以最後一個style4 去覆蓋。例如
.style2 { color:#111111; }
.style3 { color:#333333; }
.style4 { color:#666666; }
則最後的結果會是 color=#666666 這是因為屬性覆寫的關係。

像上例的表示法中是可以偷懶一下，可以用三個值代表。例如

color:#666 = color:#666666;
color:#987 = color:#998877;

另外當兩個以上的 class 有相同的屬性時，可以用逗點 ',' 分隔，例如下例要 a 的兩種屬性都一樣顏色的話，可以寫在同一行。

a:link,visited { color: #0066cc;}

如果省略那個逗點而用空白代替的話，就是階層的意思，例如：

.frame .box .pic{border:1px solid #666}

代表在 frame class 下的 box class 下的 pic class 的屬性為 border:1px solid #666，他的html 可能長這個樣子：

<div class="frame">
   <div class="box">
      <div class="pic">
          .... 網頁的文字內容 ....
       </div>
   </div>
</div>

使用圖片當背景

接下來說個我以前搞不清楚的地方，就是 css中的 url表示法，以下面的範例開始：

例如設定背景使用圖片

background: url(../pro/clothes/infor/line1.gif) no-repeat;

這裡的url 中的路徑../pro/clothes/infor/line1.gif 是個相對路徑；要清楚，這個是相對於你這個 css 檔案的路徑，不是相對於你的網頁檔的路徑。

舉例來說，例如你的檔案是 /index.html ，其中用下面這個方法把 css 載入：

所以圖檔的實際位置是 /image/pro/clothes/infor/line1.gif

假設url 用絕對路徑，就是路徑以 '/' 開始，他就是參考網站的絕對路徑，不是參考 css 檔案的路徑。

CSS的註解

css中註解的寫法，雖然這個很基本，但是常常會忘：

/* 註解的正確寫法 */
^ 要留一空白 ^

如上，要注意的是，註解的內文一定要和註解的邊界留一個空白，否則有些瀏覽器會出錯。

延伸閱讀

CSS 的 !important 意義@新精讚

[CSS] 背景 background@新精讚

原文 2009-11-29 21:34:17

END

你可能感興趣的文章

[HTLM5] 表單時間日期date/time輸入類型介紹HTML5和時間有關的輸入類型date/datetime/datetime-local/month/time/week

textarea計算字數和行數 textarea可以大量的放入文字，但要如何計算字數和行數呢？

[CSS] 改變文字選擇的顏色(反選的顏色) 我們會用滑鼠選取一小段文字，可能是為了複製或是為了看他清楚點，這篇來改變他選擇時的背影色。

CSS 垂直中文字要把文字垂直顯示的處理中文字正轉或逆轉90度的css設定

CSS 的 !important 意義網頁的前端工程師非常頭痛的事，就是同時要處理 IE和 FF等不同的瀏覽器，更糟的是 IE 又分成了 6 7 8三種版本，

網頁自動轉址的四種方法設定網頁自動轉址的四種方法，三種html，一種php

隨機好文

如何在linux下執行java 原生的java應用程式可以使用簡單的方法在console下面寫出來，適合作簡單的應用

[PHP]解決ksort新增的SORT_NATURAL|SORT_FLAG_CASE方法 php>=5.4中ksort函數多了SORT_NATURAL 和 SORT_FLAG_CASE 旗標，對舊版的PHP中要怎麼辦？

超扯童話血多-賣火柴小女孩這個真的是太扯了，扯到一直笑，尤其是作者出來那段因為他第一到第九會連播，笑滿累的。如果你看不懂的話表示你的大腦還滿正經

真正的喜悅幾種喜悅的類型，雖然很簡單，卻是很多人百思不得其解的難題..

[HTLM5] 表單color、email、url、search、tel輸入類型介紹HTML5好用的輸入類型：color、email、url，以及兩個形同雞肋的類型search、tel..

使用圖片當背景
CSS的註解
延伸閱讀

到最底端