CSS命名規範二 入門篇

2、同一屬性的縮寫：

同一屬性根據它的屬性值也可以進行簡寫，如：

代碼如下	複製代碼
.search { background-color:#333; background-image:url(../images/icon.gif); background-repeat: no-repeat; background-position:50% 50%; } .search { background:#333 url(../images/icon.gif) no-repeat 50% 50%; }

3、內外側邊框的縮寫：

在CSS中關於內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不同時也可直接縮寫，如：

代碼如下	複製代碼
.btn { margin-top:10px; margin-right:8px; margin-bottom:12px; margin-left:5px; padding-top:10px; padding-right:8px; padding-bottom:12px; padding-left:8px; }

則可縮寫為：

代碼如下	複製代碼
.btn { Margin:10px 8px 12px 5px; Padding:10px 8px 12px 5px; }

而如果當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值可以直接縮寫為兩個，如：

代碼如下	複製代碼
.btn { margin-top:10px; margin-right:5px; margin-bottom:10px; margin-left:5px; }

縮寫為：

代碼如下	複製代碼
.btn {margin:10px 5px;}

而當上下左右四個邊框的屬性值都相同時，則可以直接縮寫成一個，如：

代碼如下	複製代碼
.btn { margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left:10px; }

縮寫為：

代碼如下	複製代碼
.btn{margin:10px;}

4、顏色值的縮寫：

當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：

代碼如下	複製代碼
.menu { color:#ff3333;}

可縮寫為:

.menu {color:#f33;}

四．hack書寫規範

因為不同瀏覽器對W3C標準的支援不一樣，各個瀏覽器對於頁面的解釋呈視也不盡相同，比如IE在很多情況下就與FF存在3px的差距，對於這些差異性，就需要利用css 的hack來進行調整，當然在沒有必要的情況下，最好不要寫hack來進行調整，避免因為hack而導致頁面出現問題。

1、 IE6、IE7、Firefox之間的相容寫法：

寫法一：

代碼如下	複製代碼
IE都能識別*;標準瀏覽器(如FF)不能識別*； IE6能識別*，但不能識別 !important, IE7能識別*，也能識別!important; FF不能識別*，但能識別!important; 根據上述表達，同一類/ID下的CSS 　hack可寫為： .searchInput { background-color:#333;/*三者皆可*/ *background-color:#666　!important; /*僅IE7*/ *background-color:#999; /*僅IE6及IE6以下*/ } 一般三者的書寫順序為：FF、IE7、IE6.

寫法二：

代碼如下	複製代碼
IE6可識別“_”，而IE7及FF皆不能識別，所以當只針對IE6與IE7及FF之間的區別時，可這樣書寫： .searchInput { background-color:#333;/*通用*/ _background-color:#666;/*僅IE6可識別*/ }

寫法三：

代碼如下	複製代碼
*+html 與 *html 是IE特有的標籤, Firefox 暫不支援。 .searchInput {background-color:#333;} *html .searchInput {background-color:#666;}/*僅IE6*/ *+html .searchInput {background-color:#555;}/*僅IE7*/

屏蔽IE瀏覽器：

select是選擇符，根據情況更換。第二句是MAC上safari瀏覽器專屬的。

代碼如下	複製代碼
*:lang(zh) select {font:12px  !important;} /*FF的專用*/ select:empty {font:12px  !important;} /*safari可見*/

IE6可識別：

這裡主要是通過CSS注釋分開一個屬性與值，注釋在冒號前。

代碼如下	複製代碼
select { display /*IE6不識別*/:none;}

IE的if條件hack寫法：

所有的IE可識別：

代碼如下	複製代碼
<!–[if IE]> Only IE <![end if]–> 只有IE5.0可以識別: <!–[if IE 5.0]> Only IE 5.0 <![end if]–> IE5.0包換IE5.5都可以識別: <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–> 僅IE6可識別: <!–[if lt IE 6]> Only IE 6- <![end if]–> IE6以及IE6以下的IE5.x都可識別: <!–[if gte IE 6]> Only IE 6/+ <![end if]–> 僅IE7可識別: <!–[if lte IE 7]> Only IE 7/- <![end if]–>

2、清除浮動：

在Firefox中，當子級都為浮動時，那麼父級的高度就無法完全的包住整個子級，那麼這時用這個清除浮動的HACK來對父級做一次定義，那麼就可以解決這個問題。

代碼如下	複製代碼
select:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; }