製作網頁技術CSS整體布局聲明的一些用法

來源:互聯網
上載者:User
css|網頁

  我們應該養成良好的編碼習慣,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元素有著相同的屬性,我們都可以群組起來編碼。有些不同的地方,單獨的重新定義即可。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。