CSS整體布局聲明的一些使用技巧
更新時(shí)間:2007年09月23日 19:26:40 作者:
我們應(yīng)該養(yǎng)成良好的編碼習(xí)慣,CSS整體布局聲明為我們的代碼簡(jiǎn)化、提高運(yùn)行效率提供了途徑。我們列舉比較常用的形式,并加上解釋。整體布局聲明的作用在于將目標(biāo)作一個(gè)整體的概括,聲明一些完全相同或基本相同的屬性及值,以免在后面的代碼中每一個(gè)標(biāo)簽中都需要單獨(dú)定義。若有不同的屬性與值,后面的重新定義即可。
一、通配式整體布局聲明。
* {
margin:0;
padding:0;
font-size:0.8em;
...
}
這類形式的聲明是針對(duì)整個(gè)頁(yè)面的??梢栽O(shè)置頁(yè)面元素共有的屬性。而不必每一個(gè)元素單獨(dú)的聲明。上面的代碼我們聲明邊距及填充為零、字體大小為0.8em。對(duì)于頁(yè)面中的元素都應(yīng)用此聲明的屬性和值。除非在后面的代碼中再次定義margin、padding、font-size的值,否則就按這一定義來(lái)顯示。
二、標(biāo)簽式整體聲明
body {
background:#fff;
font-family: Courier, "Courier New", monospace;
}
或
p {
background:#fff;
font-family: Courier, "Courier New", monospace;
}
這類聲明是針對(duì)某些xhtml標(biāo)簽的。如果無(wú)特別的定義,將適用此聲明。我們定義了body的背景色及字體。所以body內(nèi)的元素都適用它,除非再次定義。對(duì)于段落p的定義原理是一樣的。
三、群組式整體聲明
h1,h2,h3 {color:#00f; font-weight:100;}
這類聲明表示h1,h2,h3的文字顏色以及字體加粗情況。我們?cè)趯?shí)際操作中,不一定是這樣的情況,或許是某些class或id的xhtml元素有著相同的屬性,我們都可以群組起來(lái)編碼。有些不同的地方,單獨(dú)的重新定義即可。例如在帶有小圖標(biāo)的清爽CSS表單設(shè)計(jì)這個(gè)http://www.52css.com/article.asp?id=392實(shí)例中。我們就用到了這種類型的聲明。
一、通配式整體布局聲明。
* {
margin:0;
padding:0;
font-size:0.8em;
...
}
這類形式的聲明是針對(duì)整個(gè)頁(yè)面的??梢栽O(shè)置頁(yè)面元素共有的屬性。而不必每一個(gè)元素單獨(dú)的聲明。上面的代碼我們聲明邊距及填充為零、字體大小為0.8em。對(duì)于頁(yè)面中的元素都應(yīng)用此聲明的屬性和值。除非在后面的代碼中再次定義margin、padding、font-size的值,否則就按這一定義來(lái)顯示。
二、標(biāo)簽式整體聲明
body {
background:#fff;
font-family: Courier, "Courier New", monospace;
}
或
p {
background:#fff;
font-family: Courier, "Courier New", monospace;
}
這類聲明是針對(duì)某些xhtml標(biāo)簽的。如果無(wú)特別的定義,將適用此聲明。我們定義了body的背景色及字體。所以body內(nèi)的元素都適用它,除非再次定義。對(duì)于段落p的定義原理是一樣的。
三、群組式整體聲明
h1,h2,h3 {color:#00f; font-weight:100;}
這類聲明表示h1,h2,h3的文字顏色以及字體加粗情況。我們?cè)趯?shí)際操作中,不一定是這樣的情況,或許是某些class或id的xhtml元素有著相同的屬性,我們都可以群組起來(lái)編碼。有些不同的地方,單獨(dú)的重新定義即可。例如在帶有小圖標(biāo)的清爽CSS表單設(shè)計(jì)這個(gè)http://www.52css.com/article.asp?id=392實(shí)例中。我們就用到了這種類型的聲明。
相關(guān)文章
Firefox2中輸入框丟失光標(biāo)bug的解決方法
在Firefox2中某些情況下輸入框雖然可以輸入,但在獲取焦點(diǎn)時(shí)沒(méi)有文本輸入光標(biāo)的顯示,這個(gè)是非常惡心的bug,非常容易讓表單使用者有一種不能輸入的錯(cuò)覺(jué),即使后來(lái)嘗試知道可以輸入,但也無(wú)法判斷光標(biāo)定位在哪兒。2008-05-05CSS3實(shí)現(xiàn)動(dòng)態(tài)翻牌效果 仿百度貼吧3D翻牌一次動(dòng)畫(huà)特效
本文主要分享一個(gè)利用CSS3新特性transform,實(shí)現(xiàn)3D翻牌的特效,有需要的小伙伴可以參考下。2016-05-05xhtml+css網(wǎng)頁(yè)制作中常見(jiàn)問(wèn)題解決方法
xhtml+css頁(yè)面制作過(guò)程中問(wèn)題的解決方案,說(shuō)是解決方案應(yīng)該有點(diǎn)過(guò)了,充其量只不過(guò)是給剛剛開(kāi)始學(xué)標(biāo)準(zhǔn)頁(yè)面制作的朋友們的一些小建議,如果講得不對(duì)的地方請(qǐng)多多包涵,當(dāng)然也可以提出你們更好的方法,大家相互學(xué)習(xí)交流,共同成長(zhǎng)!2008-10-10