[CSS] 多個class 的表示法和寫法 | css共用
![[CSS] 多個class 的表示法和寫法](https://i.imgur.com/axBPWDg.jpg)
自動目錄網頁設計中常會用到CSS,他的一般格式是這樣的:
![[CSS] 多個class 的表示法和寫法](http://pix4.agoda.net/hotelimages/4172139/0/24097f8fc1c9959ea5062e8d6497eaad.jpg?s=800x)
網頁設計中常會用到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 可能長這個樣子:
...取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
[技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白 ... | css共用
CSS樣式架構[3] 全站共用型(Common):通用樣式、其他框架 ... | css共用
[CSS] 多個class 的表示法和寫法 | css共用
CSS 群組式宣告 | css共用
C S S 教學 | css共用
增加共用程式碼,減少ctrl+cctrl+v | css共用
CSS的優先順位. 載入位置&撰寫順序&選擇器類型都會影響css ... | css共用
CSS id 與class 的使用影響範圍 | css共用
3.2 作業二說明,共用CSS | css共用
![](https://i.imgur.com/axBPWDg.jpg)