首頁 > web前端 > css教學 > CSS整體佈局聲明的一些使用技巧_經驗交流

CSS整體佈局聲明的一些使用技巧_經驗交流

PHP中文网
發布: 2016-05-16 12:07:15
原創
1395 人瀏覽過

我們應該養成良好的編碼習慣,css整體佈局聲明為我們的程式碼簡化、提高運作效率提供了途徑。我們列舉比較常用的形式,並加上解釋。整體佈局聲明的作用在於將目標作一個整體的概括,聲明一些完全相同或基本相同的屬性及值,以免在後面的程式碼中每一個標籤中都需要單獨定義。若有不同的屬性與值,後面的重新定義即可。

一、通配式整體佈局聲明。

* { 
margin:0; 
padding:0; 
font-size:0.8em; 
... 
}
登入後複製

  這類形式的聲明是針對整個頁面的。可以設定頁面元素共有的屬性。而不必每一個元素單獨的聲明。上面的程式碼我們聲明邊距及填充為零、字體大小為0.8em。對於頁面中的元素都套用此聲明的屬性和值。除非在後面的程式碼中再次定義margin、padding、font-size的值,否則就以此定義來顯示。

二、標籤式整體宣告

body { 
background:#fff; 
font-family: courier, "courier new", monospace; 
} 
或 
p { 
background:#fff; 
font-family: courier, "courier new", monospace; 
}
登入後複製

  這類聲明是針對某些xhtml標籤的。如果無特別的定義,將適用此聲明。我們定義了body的背景色及字體。所以body內的元素都適用它,除非再次定義。對於段落p的定義原理是一樣的。

三、群組式整體聲明


h1,h2,h3 {color:#00f; font-weight:100;}
登入後複製

  這類聲明表示h1,h2,h3的文字顏色以及字體加粗情況。我們在實際操作中,不一定是這樣的情況,或許是某些class或id的xhtml元素有著相同的屬性,我們都可以群組起來編碼。有些不同的地方,單獨的重新定義即可。例如在有小圖示的清爽css表單設計這個http://www.52css.com/article.asp?id=392實例中。我們就用到了這種類型的聲明。
   

以上就是css整體佈局聲明的一些使用技巧_經驗交流的內容,更多相關內容請關注php中文網(www.php.cn)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板