隨筆分類

重用:
經常會用到一些基本的式樣疊加，比如字體的顏色和加粗。網頁中可能同時出現三種情況：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; }
重用、子選擇器和組選擇器的靈活使用可以非常有效的減少代碼，同時非常有利的增加代碼的可讀性，具體的應用需要在具體編寫過程中體會。