[精讚] [會員登入]
15542

[CSS] 多個 class 的表示法和寫法

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

此文完整連結 http://n.sfs.tw/11457

複製連結 [CSS] 多個 class 的表示法和寫法@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 13:39:50 最後編修
2017-07-18 08:52:48 By 張○○
 

自動目錄

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

<span class="style2">

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

.style2 { color:#666666; }

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

<span class="style2 style3 style4">

假設以上的例子中,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 載入:

<link href="images/css/index.css" rel="stylesheet" type="text/css" />

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

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

CSS的註解

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

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

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

延伸閱讀

CSS 的 !important 意義@新精讚

[CSS] 背景 background@新精讚


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

你可能感興趣的文章

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

表格如何選取一欄(選取一直行) 表格中要指選擇一列很容易,直接叫用的標籤即可,但是要選取一欄呢?

網頁的標頭(head)搜尋引擎和FB最佳化 網頁的標頭(head)搜尋引擎和facebook最佳化

如何讓瀏覽器每次都重新載入css、js、圖檔 不管怎麼刷新網頁,他總是跑出來舊的內容,這對開發的人來說很困擾...

[HTLM5] html元件上的 data-* 屬性 html5 中元件中多了一個 data-*的屬性,這個屬性超級好用

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

關閉瀏覽器表單的自動完成autocomplete 什麼是自動完成?就是當我們在網頁的輸入文字欄位中打入文字時,瀏覽器會把曾輸入過歷史記錄中找出來讓我們選擇。

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

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

[CSS] 多個 class 的表示法和寫法 網頁設計中常會用到CSS,他的一般格式是這樣的:

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

使用Google尋找你的手機 這近發現google竟然可以用來找android的手機,而且不需要經過什麼設定或安裝軟體。

TFTP Server 安裝及使用 讓設備的網路設定檔或是韌體經由TFTP拷備出來,操作的方法

UTF-8的網頁但IE8一片空白 UTF8編碼的網頁在Firefox 正常顯示、但IE8 就是空白,IE8編碼設定是「自動偵測」可是自動偵測到的是 big5...

詭異的創業思維 創業的思維中,有多少銀彈,有多少技術,有多少人脈,有多少時間等等,每個都要考慮進去,以熱忱建立的關係脆弱的像蘇打餅乾一樣..

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