XHTML CSS基礎知識-Web標準(div+css)教程

　　4）css樣式

　　加載css樣式有以下四種

　　§ 外部樣式

　　§ 內部樣式

　　§ 行內樣式

　　§ 導入樣式

　　<link href="layout.css" rel="stylesheet" type="text/css" />

　　這種形式是把css單獨寫到一個css文件內，然后在源代碼中以link方式鏈接。它的好處是不但本頁可以調用，其它頁面也可以調用，是最常用的一種形式。

　　<style>

　　h2 { color:#f00;}

　　</style>

　　這種形式是內部樣式表，它是以<style>和</style>結尾，寫在源代碼的head標簽內。這樣的樣式表只能針對本頁有效。不能作用于其它頁面。

　　<p style="font-size:18px;">行內樣式</p>

　　這種在標簽內以style標記的為行內樣式，行內樣式只針對標簽內的元素有效，因其沒有和內容相分離，所以不建議使用。

　　@import url("/css/global.css");

　　鏈接樣式是以@import url標記所鏈接的外部樣式表，它一般常用在另一個樣式表內部。如layout.css為主頁所用樣式，那么我們可以把全局都需要用的公共樣式放到一個global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達到很好的重用性。

　　5）css優先級

　　§ id優先級高于class

　　§ 后面的樣式覆蓋前面的

　　§ 指定的高于繼承

　　§ 行內樣式高于內部或外部樣式

　　§ 總結：單一的(id)高于共用的(class)，有指定的用指定的，無指定則繼承離它最近的

　　6）css盒模型組成

　　css盒模型是本節教程的重點。前面幾個知識點，如果您會用表格布局的話，就非常好理解和掌握了。這里的盒模型是和table布局的一個不同點。學習web標準，首先要弄懂的就是這個盒模型，這就是DIV排版的核心所在。傳統的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁內容，改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。這種排版方式的網頁代碼簡潔，表現和內容相分離，維護方便，能兼容更多的瀏覽器，比如PDA設備也能正常瀏覽。

　　那么它為什么叫盒子呢？先說說我們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。