實用的CSS常見的問題和技巧總結_CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
1、善用css縮寫可以減少頁面文件大小,提高下載速度,同時使代碼簡潔可讀。
如:
div{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}
可以寫為
p{border:1px solid #cccccc}
再如:
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
可以改寫為:
/*注重上、右、下、左的書寫順序*/
div{margin:10px 20px 30px 40px}
/*注重,數值與單位不能有空格,每個值之間用空格隔開*/
(具體請參考:css2參考手冊、常用css縮寫總結)
2、可以同時為一個html元素的class屬性設定多個規則(多重class定義)。
通常我們寫法為:<p class=”a”></p>
實際上我們可以為p元素指定多個規則,如:
CSS:
.a{…}
.b{….}
HTML:
<p class="a b">該元素同時包括a和b中設定的樣式</p>
注重:多個規則之間用空格分開。
3、明確定義單位,除非值為0
忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width=”100”,但在css中應該給出一個準確的單位。如:width:100px;height:50px;font-size:9pt ,0值除外,因為不論對于任何單位。0值的大小都是相等的。
注重:不要在數值和單位之間加空格。
4、區分大小寫
在xhtml中,css定義的元素名稱是區分大小寫的,class和id的值在html和xhtml中也是區分大小寫的,所以為了避免錯誤,推薦一律使用小寫。
如#aaa,與#AAA是不同的,在xhtml中,p和P也是不同的.他們之間不會覆蓋。
假如在css中定義了#aaa,在html元素中使用AAA來應用將不能得到#aaa中定義的樣式。
示例代碼:
CSS:
#aaa{border:1px solid #ccc}
HTML:
<div id="AAA">顯示不出來1個像素的邊線</div>
5、CSS的最近優先原則
假如對一個元素定義了多次樣式,則以最近的一級優先,最近一級的樣式將覆蓋其他的樣式定義。
如:
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此處顯示為紅色</p>
<p class="blue">此處顯示為藍色</p>
<p class="blue" style="color:green">此處顯示為綠色</p>
<p class="blue yellow">此處顯示為黃色</p>
注重:
(1)注重樣式的幾個優先順序(優先級由上至下遞減):
--元素style設定
--head區<style></style>中的設定
--外部引用css文件
(2)優先級不是按訪問順序來設定的,而是又css中的聲明順序來設定的。
如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色,因為在css定義中.yellow在.blue的后面。
6、使用子選擇器減少id和class的定義
例如:
#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
<ul id="contain_ul">
<li class="contain_li"></li>
<li class="contain_li"></li>
</ul>
</div>
可以更改為:
#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
<li></li>
<li></li>
</ul>
</div>
7、不要給背景圖片路徑加引號
將background:url("xxx.gif")改為background:url(xxx.gif)
因為對于部分瀏覽器加引號反而會引起錯誤。
如:
div{
border-top:1px solid #cccccc;
border-left:1px solid #cccccc;
border-right:1px soli #cccccc;
border-bottom:1px solid #cccccc;
}
可以寫為
p{border:1px solid #cccccc}
再如:
div{
margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
}
可以改寫為:
/*注重上、右、下、左的書寫順序*/
div{margin:10px 20px 30px 40px}
/*注重,數值與單位不能有空格,每個值之間用空格隔開*/
(具體請參考:css2參考手冊、常用css縮寫總結)
2、可以同時為一個html元素的class屬性設定多個規則(多重class定義)。
通常我們寫法為:<p class=”a”></p>
實際上我們可以為p元素指定多個規則,如:
CSS:
.a{…}
.b{….}
HTML:
<p class="a b">該元素同時包括a和b中設定的樣式</p>
注重:多個規則之間用空格分開。
3、明確定義單位,除非值為0
忘記定義尺寸是css初學者新手普遍存在的問題。在html我們可以寫width=”100”,但在css中應該給出一個準確的單位。如:width:100px;height:50px;font-size:9pt ,0值除外,因為不論對于任何單位。0值的大小都是相等的。
注重:不要在數值和單位之間加空格。
4、區分大小寫
在xhtml中,css定義的元素名稱是區分大小寫的,class和id的值在html和xhtml中也是區分大小寫的,所以為了避免錯誤,推薦一律使用小寫。
如#aaa,與#AAA是不同的,在xhtml中,p和P也是不同的.他們之間不會覆蓋。
假如在css中定義了#aaa,在html元素中使用AAA來應用將不能得到#aaa中定義的樣式。
示例代碼:
CSS:
#aaa{border:1px solid #ccc}
HTML:
<div id="AAA">顯示不出來1個像素的邊線</div>
5、CSS的最近優先原則
假如對一個元素定義了多次樣式,則以最近的一級優先,最近一級的樣式將覆蓋其他的樣式定義。
如:
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
<p>此處顯示為紅色</p>
<p class="blue">此處顯示為藍色</p>
<p class="blue" style="color:green">此處顯示為綠色</p>
<p class="blue yellow">此處顯示為黃色</p>
注重:
(1)注重樣式的幾個優先順序(優先級由上至下遞減):
--元素style設定
--head區<style></style>中的設定
--外部引用css文件
(2)優先級不是按訪問順序來設定的,而是又css中的聲明順序來設定的。
如上例中<p class="yellow blue">此處顯示為黃色</p>也顯示為黃色,因為在css定義中.yellow在.blue的后面。
6、使用子選擇器減少id和class的定義
例如:
#contain{..}
#contain_ul{...}
.contail_li{...}
<div id="contain">
<ul id="contain_ul">
<li class="contain_li"></li>
<li class="contain_li"></li>
</ul>
</div>
可以更改為:
#contain{..}
#contain ul{...}
.contain ul li{...}
<div id="contain">
<ul>
<li></li>
<li></li>
</ul>
</div>
7、不要給背景圖片路徑加引號
將background:url("xxx.gif")改為background:url(xxx.gif)
因為對于部分瀏覽器加引號反而會引起錯誤。
相關CSS教程:
- 相關鏈接:
- 教程說明:
CSS教程-實用的CSS常見的問題和技巧總結
。