一些很不錯(cuò)的css技巧,但也常為人們所忽略
更新時(shí)間:2007年05月16日 00:00:00 作者:
一.區(qū)分大小寫
當(dāng)在XHTML中使用CSS,CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯(cuò)誤,我建議所有的定義名稱都采用小寫。
二.不需要給背景圖片路徑加引號(hào)
為了節(jié)省字節(jié),我建議不要給背景圖片路徑加引號(hào),因?yàn)橐?hào)不是必須的。例如:
background:url("images/***.gif") #333;
可以寫為
background:url(images/***.gif) #333;
如果你加了引號(hào),反而會(huì)引起一些瀏覽器的錯(cuò)誤。
三.用正確的順序指定鏈接的樣式
當(dāng)你用CSS來定義鏈接的多個(gè)狀態(tài)樣式時(shí),要注意它們書寫的順序,正確的順序是::link :visited :hover :active。抽取第一個(gè)字母是"LVHA",你可以記憶成"LoVe HAte"(喜歡討厭)。
四.清除浮動(dòng)
一個(gè)非常常見的CSS問題,定位使用浮動(dòng)的時(shí)候,下面的層被浮動(dòng)的層所覆蓋,或者層里嵌套的子層超出了外層的范圍。
通常的解決辦法是在浮動(dòng)層后面添加一個(gè)額外元素,例如一個(gè)div或者一個(gè)br,并且定義它的樣式為clear: both。這個(gè)辦法有一點(diǎn)牽強(qiáng),幸運(yùn)的是還有一個(gè)好辦法可以解決,參看這篇文章《How To Clear Floats Without Structural Markup》(注:本站將盡快翻譯此文)。
上面2種方法可以很好解決浮動(dòng)超出的問題,但是如果當(dāng)你真的需要對(duì)層或者層里的對(duì)象進(jìn)行clear的時(shí)候怎么辦?一種簡(jiǎn)單的方法就是用overflow屬性,這個(gè)方法最初的發(fā)表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被廣泛討論。
上面那一種clear方法更適合你,要看具體的情況,這里不再展開論述。另外關(guān)于float的應(yīng)用,一些優(yōu)秀的文章已經(jīng)說得很清楚,推薦你閱讀:《Floatutorial》、《Containing Floats》和《Float Layouts》
五.橫向居中(centering)
這是一個(gè)簡(jiǎn)單的技巧,但是值得再說一遍,因?yàn)槲铱匆娞嗟男率謫栴}都是問這個(gè):CSS如何橫向居中?你需要定義元素的寬,并且定義橫向的margin,如果你的布局包含在一個(gè)層(容器)中,就象這樣:
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}
六.調(diào)試技巧:層有多大?
當(dāng)調(diào)試CSS發(fā)生錯(cuò)誤,你就要象排版工人,逐行分析CSS代碼。我通常在出問題的層上定義一個(gè)背景顏色,這樣就能很明顯看到層占據(jù)多大空間。有些人建議用border,一般情況也是可以的,但問題是,有時(shí)候border 會(huì)增加元素的尺寸,border-top和boeder-bottom會(huì)破壞縱向margin的值,所以使用background更加安全些。
當(dāng)在XHTML中使用CSS,CSS里定義的元素名稱是區(qū)分大小寫的。為了避免這種錯(cuò)誤,我建議所有的定義名稱都采用小寫。
二.不需要給背景圖片路徑加引號(hào)
為了節(jié)省字節(jié),我建議不要給背景圖片路徑加引號(hào),因?yàn)橐?hào)不是必須的。例如:
background:url("images/***.gif") #333;
可以寫為
background:url(images/***.gif) #333;
如果你加了引號(hào),反而會(huì)引起一些瀏覽器的錯(cuò)誤。
三.用正確的順序指定鏈接的樣式
當(dāng)你用CSS來定義鏈接的多個(gè)狀態(tài)樣式時(shí),要注意它們書寫的順序,正確的順序是::link :visited :hover :active。抽取第一個(gè)字母是"LVHA",你可以記憶成"LoVe HAte"(喜歡討厭)。
四.清除浮動(dòng)
一個(gè)非常常見的CSS問題,定位使用浮動(dòng)的時(shí)候,下面的層被浮動(dòng)的層所覆蓋,或者層里嵌套的子層超出了外層的范圍。
通常的解決辦法是在浮動(dòng)層后面添加一個(gè)額外元素,例如一個(gè)div或者一個(gè)br,并且定義它的樣式為clear: both。這個(gè)辦法有一點(diǎn)牽強(qiáng),幸運(yùn)的是還有一個(gè)好辦法可以解決,參看這篇文章《How To Clear Floats Without Structural Markup》(注:本站將盡快翻譯此文)。
上面2種方法可以很好解決浮動(dòng)超出的問題,但是如果當(dāng)你真的需要對(duì)層或者層里的對(duì)象進(jìn)行clear的時(shí)候怎么辦?一種簡(jiǎn)單的方法就是用overflow屬性,這個(gè)方法最初的發(fā)表在《Simple Clearing of Floats》,又在《Clearance》和《Super simple clearing floats》中被廣泛討論。
上面那一種clear方法更適合你,要看具體的情況,這里不再展開論述。另外關(guān)于float的應(yīng)用,一些優(yōu)秀的文章已經(jīng)說得很清楚,推薦你閱讀:《Floatutorial》、《Containing Floats》和《Float Layouts》
五.橫向居中(centering)
這是一個(gè)簡(jiǎn)單的技巧,但是值得再說一遍,因?yàn)槲铱匆娞嗟男率謫栴}都是問這個(gè):CSS如何橫向居中?你需要定義元素的寬,并且定義橫向的margin,如果你的布局包含在一個(gè)層(容器)中,就象這樣:
body {
text-align:center;
}
#wrap {
width:760px; /* 修改為你的層的寬度 */
margin:0 auto;
text-align:left;
}
六.調(diào)試技巧:層有多大?
當(dāng)調(diào)試CSS發(fā)生錯(cuò)誤,你就要象排版工人,逐行分析CSS代碼。我通常在出問題的層上定義一個(gè)背景顏色,這樣就能很明顯看到層占據(jù)多大空間。有些人建議用border,一般情況也是可以的,但問題是,有時(shí)候border 會(huì)增加元素的尺寸,border-top和boeder-bottom會(huì)破壞縱向margin的值,所以使用background更加安全些。
相關(guān)文章
CSS設(shè)置網(wǎng)頁的字體 防瀏覽器瀏覽頁面字體變形
CSS設(shè)置網(wǎng)頁的字體 防瀏覽器瀏覽頁面字體變形...2007-03-03
學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)
學(xué)習(xí)樣式表CSS參考-常用的CSS知識(shí)...2007-09-09
標(biāo)準(zhǔn)布局應(yīng)用:顯示/隱藏側(cè)邊欄 [附詳細(xì)注解]
標(biāo)準(zhǔn)布局應(yīng)用:顯示/隱藏側(cè)邊欄 [附詳細(xì)注解]...2006-12-12
全國(guó)哀悼日網(wǎng)站頁面變成灰色的filter方法
今天訪問好多網(wǎng)站包括百度,啟點(diǎn)等網(wǎng)站都變成了黑白色界面,體現(xiàn)大家對(duì)于四川地震的深切哀悼,但有好的站長(zhǎng)不一定知道是什么方法,還以為是大量改版,對(duì)于任何人都不是很輕松的事,特將本站的解決方法告訴大家。2008-05-05

