總結(jié)新手學(xué)CSS容易出現(xiàn)錯誤的內(nèi)容
2024-07-11 08:43:24
供稿：網(wǎng)友
一些新手容易忽略或者出現(xiàn)錯漏的地方。
1.首先是對于布局標(biāo)簽的定義。
有時候?qū)懞昧薱ss，但是反復(fù)調(diào)試總發(fā)現(xiàn)效果差強(qiáng)人意，有那么一塊空白，揮之不去。其實這就是對于標(biāo)簽定義的不嚴(yán)謹(jǐn)造成的。因為在xhtml的部分標(biāo)簽里，有一些的默認(rèn)屬性值不一定是為空或零的。例如form,p，他們的margin默認(rèn)值并不是0，所以在定義時定要多加注意。我們可以這樣寫來更加嚴(yán)謹(jǐn)?shù)亩x：* { margin:0;padding:0 } /*注釋:定義所有的標(biāo)簽的margin和padding為0*/
2.縮寫和大小寫問題
css對于class和id是區(qū)分大小寫的，所以當(dāng)樣式不生效的時候建議先檢查一下大小寫問題。我建議所有名稱統(tǒng)一小寫，當(dāng)然你有自己的編碼風(fēng)格也可以用。例如第二單詞大寫，oneTwo在css里有很多縮寫的習(xí)慣，推薦使用縮寫格式。基本的縮寫有 屬性縮寫和顏色縮寫等。
屬性縮寫的例子：
margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;
可以簡單的寫成 marign:1px;代表了以上四個屬性。節(jié)約了很多字節(jié)。
順便提一下，margin的縮寫比較特殊，給不會的朋友看看。
margin x;代表四個方向都為x
margin x y;代表上下為x,左右為y;
margin x y z a;x代表上,y代表右,z代表下,a代表左
其他的這種表示上下左右的屬性同marign.
另一種縮寫就是顏色縮寫：比如 #aabbcc;可以簡寫為 #abc;
3.少用限定,多用繼承
(1).少用限定：比如定義了一個類a,該類被用于一個id為b的div中,有人為了嚴(yán)謹(jǐn),這樣定義：#b.a {}
這樣定義就違備了class的初衷-靈活性.所以一般定義class盡量不要限定他們的應(yīng)用范圍，除非有特殊需要。
子選擇是一種不錯的方法，比如一個li,我們可以不必為其定義id或class，一樣可以設(shè)置它的屬性。
例子：
<div id="header">
<ul><li></li></ul>
</div>
這種情況我們也可以這樣寫： #header ul li { 這里就是li的屬性 }
(2).多用繼承：
有人剛開始寫css寫的很死，例如這樣寫：
#a { font-size:12px;font-weight:bold;color:#abc; }
#b { font-size:12px;font-weight:bold;color:#123; }
其實在兩個樣式有許多雷同的時候，我們完全可發(fā)揮css的繼承特性，例如把上面的例子改成這樣：
#a,#b { font-size:12px;font-weight:bold;color:#abc; }
#b { color:#123; }
一組標(biāo)簽也同樣適用此方法：h1,h2,h3 {....}
效果是完全一樣的，是不是又節(jié)約了很多字節(jié)呢..
4.多重class及就近優(yōu)先原則
如果一個標(biāo)簽相同時應(yīng)用兩個class，不要這樣寫：<div class="a" class="b">這樣是不對的
正確寫法：<div class="a b">
如果同時定了兩個p margin屬性，后面的將覆蓋前面的。還有定義了一個span的color屬性，又定義了一個class,名為a的color屬性，當(dāng)<span class="a">時候，a的屬性就會覆蓋原span的屬性。這就是就近優(yōu)先原則。。。。
5.鏈接的正確寫法:
順序是很重要的，一定要正確：:link :visited :hover :active
否則有可能會出現(xiàn)錯誤。
學(xué)好css最需要的就是多動多實踐，那樣才能學(xué)的快。
