當(dāng)前位置 : 首頁(yè)>軟件學(xué)院>程序開發(fā)>CSS>正文

實(shí)用的CSS常見(jiàn)的問(wèn)題和技巧總結(jié)

http://www.yibo1263.com　2009-5-19 8:06:56 　來(lái)源:東北IT網(wǎng) 　編輯:葉子

1、善用css縮寫可以減少頁(yè)面文件大小，提高下載速度，同時(shí)使代碼簡(jiǎn)潔可讀。
如：

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}
/*注意，數(shù)值與單位不能有空格，每個(gè)值之間用空格隔開*/

(詳細(xì)請(qǐng)參考：css2參考手冊(cè)、常用css縮寫總結(jié))

2、可以同時(shí)為一個(gè)html元素的class屬性設(shè)定多個(gè)規(guī)則(多重class定義)。
通常我們寫法為：

實(shí)際上我們可以為p元素指定多個(gè)規(guī)則，如：

CSS：
.a{…}
.b{….}
HTML：

該元素同時(shí)包括a和b中設(shè)定的樣式

注意：多個(gè)規(guī)則之間用空格分開。

3、明確定義單位，除非值為0
忘記定義尺寸是css初學(xué)者新手普遍存在的問(wèn)題。在html我們可以寫width=”100”，但在css中應(yīng)該給出一個(gè)準(zhǔn)確的單位。如：width:100px;height:50px;font-size:9pt ，0值除外，因?yàn)椴徽搶?duì)于任何單位。0值的大小都是相等的。

注意：不要在數(shù)值和單位之間加空格。

4、區(qū)分大小寫
在xhtml中，css定義的元素名稱是區(qū)分大小寫的，class和id的值在html和xhtml中也是區(qū)分大小寫的，所以為了避免錯(cuò)誤，推薦一律使用小寫。
如#aaa,與#AAA是不同的，在xhtml中，p和P也是不同的.他們之間不會(huì)覆蓋。
如果在css中定義了#aaa，在html元素中使用AAA來(lái)應(yīng)用將不能得到#aaa中定義的樣式。
示例代碼：

CSS:
#aaa{border:1px solid #ccc}
HTML:

顯示不出來(lái)1個(gè)像素的邊線

5、CSS的最近優(yōu)先原則
如果對(duì)一個(gè)元素定義了多次樣式，則以最近的一級(jí)優(yōu)先，最近一級(jí)的樣式將覆蓋其他的樣式定義。
如：

CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:

此處顯示為紅色

此處顯示為藍(lán)色

此處顯示為綠色

此處顯示為黃色

注意：
（1）注意樣式的幾個(gè)優(yōu)先順序(優(yōu)先級(jí)由上至下遞減)：
--元素style設(shè)定
--head區(qū) 中的設(shè)定
--外部引用css文件
（2）優(yōu)先級(jí)不是按訪問(wèn)順序來(lái)設(shè)定的，而是又css中的聲明順序來(lái)設(shè)定的。
如上例中

此處顯示為黃色

也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue的后面。

6、使用子選擇器減少id和class的定義
例如：

#contain{..}
#contain_ul{...}
.contail_li{...}

可以更改為：

#contain{..}
#contain ul{...}
.contain ul li{...}

7、不要給背景圖片路徑加引號(hào)
將background:url("xxx.gif")改為background:url(xxx.gif)
因?yàn)閷?duì)于部分瀏覽器加引號(hào)反而會(huì)引起錯(cuò)誤。

8、背景圖片的路徑是相對(duì)與當(dāng)前css頁(yè)面的路徑。

例如：
有如下目錄結(jié)構(gòu)
　--images
　--xxx.gif
　--css
　--xx.css
　--index.html
代碼內(nèi)容
index.html引用xx.css文件。
xx.css要引用xxx.gif圖片其寫法為：background:url(../images/xxx.gif)

9、使用組選擇器為不同元素應(yīng)用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體

10、書寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，一定要注意其書寫順序，即：:link :visited :hover :active。
如果不按照該順序書寫可能無(wú)法達(dá)到自己希望的效果。為了記憶該順序我們抽取每個(gè)單詞的首字母：L V H A，你可以通過(guò)記憶LoVe,Hate,兩個(gè)單詞來(lái)記住其順序。

本新聞共2頁(yè),當(dāng)前在第1頁(yè) 1 2

【收藏】【打印】【進(jìn)入論壇】

相關(guān)文章：

·CSS技巧import與link的具體區(qū)別

·CSS技巧:IE6用import導(dǎo)入CSS的問(wèn)題

·初學(xué)者實(shí)用的十則CSS技巧

亚洲AV无码乱码在线观看不卡|最新大伊香蕉精品视频在线|亚洲不卡av一区二区|国产美女无遮挡免费