CSS制作教程

時(shí)間：2024-08-11 01:04:24 CSS 我要投稿

相關(guān)推薦

CSS制作教程

　　有些習(xí)慣顯得尤為重要，今天與您分享六個(gè)CSS習(xí)慣。因?yàn)榱?xí)慣其實(shí)是會變的，所以只能寫“最近”的。這些習(xí)慣都跟技術(shù)無關(guān)，如果不遵守，也不會出錯(cuò)。但是我覺得良好的習(xí)慣會體現(xiàn)一個(gè)人的素質(zhì)。我們在中向大家介紹過很多CSS經(jīng)驗(yàn)與技巧，這些東西都發(fā)布在/css/的文章中，相信對大家是有一些幫助與啟發(fā)的。有些習(xí)慣顯得尤為重要，今天與您分享六個(gè)CSS習(xí)慣。因?yàn)榱?xí)慣其實(shí)是會變的，所以只能寫“最近”的。這些習(xí)慣都跟技術(shù)無關(guān)，如果不遵守，也不會出錯(cuò)。但是我覺得良好的習(xí)慣會體現(xiàn)一個(gè)人的素質(zhì)。

　　一、用class_name方式寫類名。

　　以前喜歡用class-name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因?yàn)槭冀K對瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會寫成駝峰式，理由見下一條。

　　二、樣式都用class而不用id。

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

　　三、margin和padding，盡量省略最后一個(gè)值。

　　比如margin:20px10px5px10px;，左右值是一樣的，就應(yīng)該省略掉最后一個(gè)值，寫成margin:20px10px5px;這樣到時(shí)候要改左右間距，改一個(gè)就好，免得改漏了。其實(shí)這個(gè)問題雖然很細(xì)小，但是可以看得出對margin四個(gè)值省略規(guī)則的熟練程度。

　　四、按標(biāo)準(zhǔn)寫CSS，再針對特定瀏覽器作hack。

　　比如，通常我們會遇到如下的寫法：

　　.side_col{

　　float:left;

　　display:inline;

　　margin-left:20px;

　　}

　　而我的寫法會是：

　　.side_col{

　　float:left;

　　margin-left:20px;

　　}

　　*.side_col{

　　_display:inline;/*hackedforIE6*/

　　}

　　看明白了么？不應(yīng)該把hack混在一起，也不應(yīng)該用一種僥幸的心態(tài)，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實(shí)沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達(dá)你的目的。

　　另外不要以為凡是hack都是為IE準(zhǔn)備的。其實(shí)有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標(biāo)準(zhǔn)的熟練掌握，能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn)，哪些違反標(biāo)準(zhǔn)的。

　　此外，我喜歡在hack前面加上星號，其實(shí)這純粹是個(gè)人習(xí)慣了。可能過段時(shí)間我就不這么用了，呵呵。

　　五、記得加空格。

　　.class_name{property:value;}。我個(gè)人覺得合理的空格是優(yōu)秀代碼的一個(gè)指標(biāo)。按英文的習(xí)慣，標(biāo)點(diǎn)后面都應(yīng)該帶空格（如果你寫Thisisapen.That’sapencil.句點(diǎn)后面不加空格，word里面會有錯(cuò)誤提示）。所以既然CSS是外國人發(fā)明的，應(yīng)該按他們的格式來寫。類似的，在JS里vara=b c;里面的空格也應(yīng)該都要加。

　　六、適當(dāng)?shù)膶盈B（Cascading)或縮進(jìn)以定義CSS的“作用域”。

　　啥叫“CSS的作用域”？其實(shí)并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導(dǎo)航欄”里的“搜索框”，可能應(yīng)該寫成：

　　.nav.search{}

　　而有時(shí)候用層疊會增加代碼優(yōu)先級，所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣：

　　.login_box{}

　　.forgot_pwd{}

　　縮進(jìn)，是為了表示它們對應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個(gè)提醒的作用。

　　CSS技巧在于不斷的總結(jié)與對編碼的理解，任何時(shí)候都是在不斷的完善的，有何經(jīng)驗(yàn)歡迎您來52CSS.com與我分享，也可以在W3Cbbs.com發(fā)貼，寫出您對CSS的心得體會。

【CSS制作教程】相關(guān)文章：

css屬性定位教程07-23

CSS入門教程01-25

CSS閉合浮動元素教程06-26