玩美計劃*開始享瘦

使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。CSS縮寫的主要規則如下：

16進位的色彩值，如果每兩位的值相同，可以縮寫一半，例如：

#000000可以縮寫為#000；#336699可以縮寫為#369。

通常有下面四種書寫方法：

• property: value1;－－表示所有邊都是一個值value1。
• property: value1 value2;－－表示top和bottom的值是value1；right和left的值是value2。
• property: value1 value2 value3;－－表示top的值是value1；right和left的值是value2；bottom的值是value3。
• property: value1 value2 value3 value4;－－四個值依次表示top、right、bottom、left。

方便的記憶方法是順時針，上右下左。具體應用在margin和padding的例子如下：margin: 1em 0 2em 0.5em;。

邊框的屬性如下：

• border-width: 1px;
• border-style: solid;
• border-color: #000;

可以縮寫為一句：border: 1px solid #000;。

背景的屬性如下：

• background-color: #f00;
• background-image: url(background.gif);
• background-repeat: no-repeat;
• background-attachment: fixed;
• background-position: 0 0;

可以縮寫為一句：background: #f00 url(background.gif) no-repeat fixed 0 0;。

你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器預設值，預設值為：

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

字體的屬性如下：

• font-style: italic;
• font-variant: small-caps;
• font-weight: bold;
• font-size: 1em;
• line-height: 140%;
• font-family: "Lucida Grande", sans-serif;

可以縮寫為一句：font: italic small-caps bold 1em/140% "Lucida Grande", sans-serif;。

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。

取消預設的圓點和序號可以這樣寫list-style: none;。

list的屬性如下：

• list-style-type: square;
• list-style-position: inside;
• list-style-image: url(image.gif);

可以縮寫為一句：list-style: square inside url(image.gif);。

忘記定義尺寸的單位是CSS新手普遍的錯誤。
在HTML中你可以只寫width="100"，但是在CSS中，你必須給一個準確的單位，
比如：width: 100px、width: 100em。
只有兩個例外情況可以不定義單位：行高和0值。
除此以外，其他值都必須緊跟單位。注意，不要在數值和單位之間加空格。

當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫的。
為了避免這種錯誤，我建議所有的定義名稱都採用小寫。

class和id的值在HTML和XHTML中也是區分大小寫的，如果你一定要大小寫混合寫，
請仔細確認你在CSS的定義和XHTML裡的標籤是一致的。

當你寫給一個元素定義class或者id，你可以省略前面的元素限定，
因為id在一個頁面裡是唯一的，而class可以在頁面中多次使用。
你限定某個元素毫無意義。例如：

div#content { /* 定義內容 */ }
fieldset.details { /* 定義內容 */ }

可以寫成

#content { /* 定義內容 */ }
.details { /* 定義內容 */ }

這樣可以節省一些字元。

通常padding的預設值為0，background-color的預設值是transparent。
但是在不同的瀏覽器預設值可能不同。
如果怕有衝突，可以在樣式表一開始就先定義所有元素的margin和padding值都為0，像這樣：

* {
margin: 0;
padding: 0;
}

CSS中，子元素自動繼承父元素的屬性值，像顏色、字體等，已經在父元素中定義過的，
在子元素中可以直接繼承，不需要重復定義。但是要注意，瀏覽器可能用一些預設值覆蓋你的定義。

如果對同一個元素的定義有多種，以最接近（最小一級）的定義為最優先。

你可以查閱W3C的Calculating a selector's specificity了解更多。

一個標籤可以同時定義多個class。
例如：我們先定義兩個樣式，第一個樣式背景為#666；第二個樣式有10px的邊框。

.one{ width: 200px; background: #666; }
.two{ border: 10px solid #F00; }

在網頁原始碼中，我們可以這樣使用：

這樣最終的顯示效果是這個div既有#666的背景，也有10px的邊框。
是的，這樣做是可以的，你可以嘗試一下。

CSS初學者不知道使用子選擇器是影響他們效率的原因之一。
子選擇器可以幫助你節約大量的class定義。
我們來看下面這段原始碼：

Item 1
>


Item 1
Item 1

這段原始碼的CSS定義是：

div#subnav ul { /* 定義內容 */ }
div#subnav ul li.subnavitem { /* 定義內容 */ }
div#subnav ul li.subnavitem a.subnavitem { /* 定義內容 */ }
div#subnav ul li.subnavitemselected { /* 定義內容 */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* 定義內容 */ }

你可以用下面的方法替代上面的原始碼：

Item 1
Item 1
Item 1

樣式定義是：

#subnav { /* 定義內容 */ }
#subnav li { /* 定義內容 */ }
#subnav a { /* 定義內容 */ }
#subnav .sel { /* 定義內容 */ }
#subnav .sel a { /* 定義內容 */ }

用子選擇器可以使你的原始碼和CSS更加簡潔、更加容易閱讀。

**********************************************************************(未完)
轉自
無聊人的無聊故事