您當前位置:七彩分享網 >> 網站運營 >> 正文內容

初學CSS應該注意的5個問題

2014/12/20 21:52:05 | 來自百度空間:agui | 閱讀 次 | 【字體:
摘要:一些新手初學CSS,有以下5個很容易忽略或者出現錯漏的地方,應該要引起注意:對于布局標簽的定義;大小寫和縮寫的問題;少用限定,多用繼承;多重class及就近優先原則;鏈接的正確寫法。

一些新手初學CSS,有以下5個很容易忽略或者出現錯漏的地方,應該要引起注意:

一、對于布局標簽的定義

有時候寫好了css,但是反復調試總發現效果差強人意,總是有那么一塊空白,揮之不去。其實這就是對于標簽定義的不嚴謹造成的。因為在xhtml的部分標簽里,有一些的默認屬性值不一定是為空或零的。例如form,p,他們的margin默認值并不是0,所以在定義時定要多加注意。我們可以這樣來寫更加嚴謹的定義:* { margin:0;padding:0 } /*注釋:定義所有標簽的margin值和padding值為0*/。

二、大小寫和縮寫的問題

css對于class和id是區分大小寫的,所以當樣式不生效的時候建議先檢查一下大小寫的問題。我建議所有名稱統一小寫,當然你有自己的編碼風格也可以用。例如第二單詞大寫,oneTwo。

在css里有很多縮寫的習慣,推薦使用縮寫格式。基本的縮寫有“屬性縮寫”和“顏色縮寫”等。屬性縮寫的例子:

“margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;”可以簡單的寫成“marign:1px;”;它已經代表了以上四個屬性,節約了很多字節。

順便提一下,margin的縮寫比較特殊,給不會的朋友看看:

margin x;代表四個方向都為 x ;margin x y;代表上下為 x ,左右為 y ;margin x y z n;是x代表上,y代表右,z代表下,n代表左。其它的這種表示上下左右的屬性也同marign。

另一種縮寫就是顏色縮寫:比如 #aabbcc;可以簡寫為 #abc;

初學CSS應該注意的5個問題

三、少用限定,多用繼承

(1)、少用限定:比如定義了一個類a,該類被用于一個id為b的div中,有人為了嚴謹,這樣定義:#b.a {};這樣定義就違備了class的初衷:靈活性!所以一般定義class盡量不要限定他們的應用范圍,除非有特殊需要。

子選擇是一種不錯的方法,比如一個li,我們可以不必為其定義id或class,一樣可以設置它的屬性。例子:

<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; }

其實在兩個樣式有許多雷同的時候,我們完全可發揮css的繼承特性,例如把上面的例子改成這樣:

#a,#b { font-size:12px;font-weight:bold;color:#abc; }

#b { color:#123; }

一組標簽也同樣適用此方法:h1,h2,h3 {....};效果是完全一樣的,是不是又節約了很多字節呢?

四、多重class及就近優先原則

如果一個標簽相同時應用兩個class,不要這樣寫:<div class="a" class="b">;這樣是不對的,正確寫法應該是:<div class="a b">。

如果同時定了兩個p margin屬性,后面的將覆蓋前面的。還有定義了一個span的color屬性,又定義了一個class,名為a的color屬性,當<span class="a">時候,a的屬性就會覆蓋原span的屬性。這就是就近優先原則……

五、鏈接的正確寫法

順序是很重要的,一定要正確::link :visited :hover :active;否則有可能會出現錯誤。


網友對【初學CSS應該注意的5個問題】的評論: