CSS教程:設計制作網頁的CSS經驗

2024-07-11 09:05:04

字體：大中小

來源：轉載

供稿：網友

武林網(www.companysz.com)文章簡介：有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。

　　我們在網頁教學網中向大家介紹過很多CSS經驗與技巧，這些東西都發布在的文章中，相信對大家是有一些幫助與啟發的。有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。

一、用class_name方式寫類名。
　　以前喜歡用class-name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峰式，理由見下一條。

二、樣式都用class而不用id。
　　有三個理由，一，id不可以重復，所以用class的話，可以肆無忌憚的用無數次。二，id的優先級太高，若是寫了一個#page_content a {color:#f60} ，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過這個優先級。三，id專門留給JS用，這樣才符合表現與行為分離的原則。所以id我用駝峰式，也是為了體現這一點。

三、margin和padding，盡量省略最后一個值。
　　比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應該省略掉最后一個值，寫成margin: 20px 10px 5px; 這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規則的熟練程度。

四、按標準寫CSS，再針對特定瀏覽器作hack。
　　比如，通常我們會遇到如下的寫法：

.side_col {
    float:left;
    display: inline;
    margin-left: 20px;
}

　　而我的寫法會是：

.side_col {
    float: left;
    margin-left: 20px;
}
*   .side_col {
    _display:inline;  /*hacked for IE 6*/
}

　　看明白了么？不應該把hack混在一起，也不應該用一種僥幸的心態，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達你的目的。
　　另外不要以為凡是hack都是為IE準備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的判斷哪些渲染是遵守標準，哪些違反標準的。
　　此外，我喜歡在hack前面加上星號，其實這純粹是個人習慣了。可能過段時間我就不這么用了，呵呵。

五、記得加空格。
　　.class_name { property: value; } 。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣，標點后面都應該帶空格（如果你寫This is a pen.That’s a pencil.句點后面不加空格， word里面會有錯誤提示）。所以既然CSS是外國人發明的，應該按他們的格式來寫。類似的，在JS里var a = b + c;里面的空格也應該都要加。

六、適當的層疊（Cascading)或縮進以定義CSS的“作用域”。
　　啥叫“CSS的作用域”？其實并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導航欄”里的“搜索框”，可能應該寫成：

.nav .search {}

　　而有時候用層疊會增加代碼優先級，所以也可以用縮進來“象征性的”體現作用域。像這樣：

.login_box {}
.forgot_pwd{}

　　縮進，是為了表示它們對應的標簽具有父子關系。但這樣只能起一個提醒的作用。
　　CSS技巧在于不斷的總結與對編碼的理解，任何時候都是在不斷的完善的，有何經驗歡迎您來52CSS.com與我分享，也可以在W3Cbbs.com發貼，寫出您對CSS的心得體會。

上一篇：認識Opera瀏覽器和IE瀏覽器

下一篇：CSS實例:vertical-align屬性讓網頁層居中