css式樣重用、子選取器和組選取器

css

工作與網頁製作有關，最近整理了一些css的東西，發出來，希望有用。

重用:
經常會用到一些基本的式樣疊加，比如字型的顏色和加粗。網頁中可能同時出現三種情況：1.字型為紅色  2.字型加粗 3.字型紅色加粗
這時我們只需要定義前兩個css：
.red{color:red;}
.b{font-weight:bold;}
第三種情況時用<div class="red b"></div>

子選取器:
相對來說，簡化html檔案的代碼更加重要，因此在css中使用子選取器非常有益，同時也使css代碼更加容易理解。比如下面的代碼：
<div id="sub_nav">
<ul>
<li> <a href="#">Item 1</a></li>>
<li> <a href="#">Item 2</a></li>
<li> <a href="#">Item 3</a></li>
</ul>
</div>
如果div li a都有各自的式樣,採用子選取器,可以省略代碼中li 和a 的class屬性，從而簡化代碼：
#sub_nav { /* Some styling */ }
#sub_nav li { /* Some styling */ }
#sub_nav a { /* Some styling */ }
組選取器：
當一些元素類型、class或者id都有共同的一些屬性，你就可以使用組選取器來避免多次的重複定義。這可以節省不少位元組。
例如：定義所有標題的字型、顏色和margin，你可以這樣寫：
h1,h2,h3,h4,h5,h6 {
font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;
color:#333;
margin:1em 0;
}
如果在使用時，有個別元素需要定義獨立樣式，你可以再加上新的定義，可以覆蓋老的定義，例如：
h1 { font-size:2em; }
h2 { font-size:1.6em; }
重用、子選取器和組選取器的靈活使用可以非常有效減少代碼，同時非常有利的增加代碼的可讀性，具體的應用需要在具體編寫過程中體會。