div css(div+css):方法,發展,優先權,使用誤區,作用,

DIV+CSS是WEB設計標準，它是一種網頁的布局方法。與傳統中通過表格（table）布局定位的方式不同，它可以實現網頁頁面內容與表現相分離。提起DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML（標準通用標記語言的子集）基礎上最佳化和改進的新語言，目的是基於XML套用與強大的數據轉換能力，適應未來網路套用更多的需求。

“DIV+CSS”其實是錯誤的叫法，而標準的叫法應是XHTML+CSS。因為DIV與Table都是XHTML或HTML語言中的一個標記，而CSS只是一種表現形式。也許其提出者本意並沒有錯，但是跟風者從表現曲解了其意思，認為整個頁面就應當是DIV+CSS檔案的組合。

基本介紹

外文名：div+css
本質：WEB設計標準
特點：實現網頁頁面內容與表現相分離
領域：計算機

方法,發展,優先權,使用誤區,作用,

方法

css是層疊樣式表（Cascading Style Sheets）的縮寫，用於定義HTML元素的顯示形式，是W3C推出的格式化網頁內容的標準技術。網頁設計者必須掌握的技術之一。

在HTML文檔中加入CSS

樣式表可分為嵌入式樣式表、外部樣式表和內聯樣式表三種，在同一文檔內可以同時使用三種方法。

發展

1.樣式定義放在一個單獨的檔案中，例：新建一個後輟為CSS的樣式定義。

元素{ 屬性color:值red；} 在head段使用<link>標記，

引用語法：<link rel=”stylesheet” type=”text/css” href=”樣式表URL” />

2.嵌入式樣式表：

語法格式： <style type=”text/css”>

…樣式定義…

樣式

3.在嵌入式樣式表中我們可以使用@import導入一個外部樣式表，例：

@import url(外部樣式表位置)；

…其它嵌入式的樣式定義…

</style>

4.內聯樣式表：

寫在開始標記裡面，比如你要H1變紅色，

總結：三種樣式表優先使用外部樣式表、嵌入式樣式表用來調試用的、一般不使用內聯樣式表。

5.樣式規則：

一個樣式規則由一個選擇器後跟一個聲明塊組成，聲明塊是一個大容器,由大括弧中間的部分組成,聲明塊中間的空間會被忽略,,聲明塊由一個一個的聲明組成,聲明由屬性和值組成,屬性和值用冒號隔開,分號結束，每個聲明內只能有一個屬性，如果屬性值中含有空格用雙引號括起來例，在一個聲明塊內可以有多個聲明，每個聲明用分號隔開。

選擇器	聲明塊
選擇一個元素	聲明{ }
	屬性 : 值;
	冒號開始分號結束

6、注釋：有關的詳細內容在中有詳細的解釋。

7、選擇器分組

當遇到幾個選擇器共享一個聲明的時候，可以分組放在一起，每個選擇器必須以逗號隔開。例：h1,h2,h3,h4 { color red;}選擇器分組時要將每個選擇器路徑寫全，分組結尾不能有逗號。

例：路徑不全： #maincontent p, ul{ border-top:1pxsolid #ddd;}

正確寫法：#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}

例：結尾多了一個逗號： .a1 p, .a1 ul,{color:red;}

8、選擇器

元素選擇器：語法格式：元素{color: blue;}

類選擇器：語法格式： .類名{屬性: 值;}

ID選擇器：#id名 {屬性 : 值；} ID名不能重複

通配符選擇器：語法格式：*{屬性:值;}

偽類選擇器：

偽類選擇器可以以不同方式格式化超級連結<a>元素的四種不同狀態：以下順序依次寫；（記憶方法：a Love or Hate）

a:link 是用在未訪問的連結的選擇器

a:visited 是用在已訪問過的連結的選擇器

a:hover 是用在滑鼠游標放在其上的連結的選擇器

a:active 是用在獲得焦點（比如，被點擊）的連結的選擇器

如果需要，我們可以組合這幾個狀態，按順序寫：

a:link，a:visited { color :blue;}

a:hover ，a:active { color :blue;}

9、偽元素選擇器

標準的選擇器不能格式化一個元素內容的第一個字母或者第一行，而偽元素選擇器能實現：

所有瀏覽器支持的有兩種：：first-line和：first-letter

例：段落的第一行：p：first-line {屬性：值；}

例：段落的第一個字母：p：first-letter {屬性：值；}

優先權

所謂CSS優先權，即是指CSS樣式在瀏覽器中被解析的先後順序。

內聯樣式(inline style) > ID選擇符 > 類選擇符(class), 偽類(pseudo-class)和屬*(attribute)選擇符 > 類別(type)，偽對象(pseudo-element)

一,解釋：

*內聯樣式(inline style)：元素的style屬*，比如 <div style="color:red;"></div> ,其中的color:red;就是內聯樣式

*ID選擇符：元素的id屬*，比如 <div id="content"></div> 可以用ID選擇符#content

*類選擇符：比如<div class="box"></div>，可以使用類選擇符 .box

*偽類(pseudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.

*屬性選擇符(attribute selectors)：比如div[class=demo],含有class為demo的div元素

*類別選擇器(type selector)：HTML標籤選擇，比如div .demo,div元素下含有class為demo的元素

*偽對象選擇器(pseudo-element selector)：比如div:first-letter,div元素下的第一個單詞。

多重CSS樣式定義，屬性追加重複最後優先原則

一個標籤可以同時定義多個class，也可以是同一個class中重複定義屬性。例如：

我們先定義兩個樣式

.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}

.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}

在頁面代碼中，我們可以這樣調用:<div class="one two"></div>

這樣最終的顯示效果是這個div樣式是什麼呢？？重複的是以哪一個為準呢？？

<div class="one two"></div>套用到的樣式如下：

width:200px;

border:10px solid #000;

background:url(images/imgB.jpg) no-repeat left top;

因為，當套用兩個或多個樣式時，瀏覽器所套用的樣式根據是屬性追加重複最後優先原則

就是說兩個或多個或重複的樣式名定義，瀏覽器所套用的樣式是按先後順序的，如果定義了重複的屬性值，以最後定義的為準，如果套用了兩個或多個樣式名，裡面不重複定義的

屬性值就追加上去，重複的屬性值就以最後一個為準。這裡要注意的是，樣式的先後不是根據頁面上套用的名字順序，而是樣式表里的樣式順序。

二、CSS的調用

頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。類似這樣：

外部調用法：將樣式表寫在一個獨立的.css檔案中，然後在頁面head區用類似以下代碼調用。

"@import"命令方法：類以下代碼, <style type="text/css" media="all">@import url( css/style01.css );</style>

本人推薦使用第二種調用方法（外部調用法）

優先規則

既然樣式有優先權，那么就會有一個規則來約定這個優先權，而這個“規則”就是本次所需要講的重點。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1、統計選擇符中的ID屬性個數。
2、統計選擇符中的CLASS屬性個數。
3、統計選擇符中的HTML標記名個數。
最後，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位數(css2.1是用4位數表示)。( 注意，你需要把數字轉換成一個以三個數字結尾的更大的數)。相應於選擇符的最終數字列表可以很容易確定較高數字特性凌駕於較低數字的。
例如：
1、每個ID選擇符(#someid)，加 0,1,0,0。
2、每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=value]等)、每個偽類(形如:hover等)加0,0,1,0。
3、每個元素或偽元素(:firstchild)等，加0,0,0,1。
4、其它選擇符包括全局選擇符*，加0,0,0,0。相當於沒加，不過這也是一種specificity，後面會解釋。

使用誤區

1、DIV+CSS的合理之處在於可以進行網頁的統一設計管理，通過一個樣式表，牽一髮而動全身，只要修改樣式表，就可以統一全站的風格，如果為一個頁面單獨做一個樣式表，或者一個div就做一個樣式表，沒有全局設計觀念，那么這個div+CSS的設計方式就完全沒有必要，甚至成了累贅;

2、像Table一樣用DIV+CSS，無窮盡的嵌套，其效果與Table設計沒有兩樣，並不會帶來搜尋引擎的最佳化效果，反而會增加頁面的負擔;

3、推崇Div+CSS，卻不考慮兼容性，TABLE設計由來已久，得到瀏覽器的廣泛支持，所以顯示效果很好，不會出現錯位情況，但是DIV+CSS卻在部分瀏覽器中會發生頁面錯位的情況，因此在進行設計的時候也要考慮到不同瀏覽器的情況，進行更改和調試。

作用

SEO

1、精簡的代碼，使用DIV+CSS布局，頁面代碼精簡，這一點相信對XHTML有所了解的都知道。代碼精簡提高了百度蜘蛛的爬行效率以及高效性，能在最短的時間內爬完整個頁面，同時這樣對收錄質量有一定好處;

2、提高訪問速度、增加用戶體驗性

使得載入速度得到很大的提高，那么用戶點擊頁面的等待時間就越少，用戶體驗性的增加相應的帶來就是網站受到搜尋引擎的喜歡，進而提高網站排名。

3、div+css結構清晰，很容易被搜尋引擎搜尋到，天生就是適合最佳化seo，降低網頁大小，讓網頁體積變得更小。注意：div+css結構清晰、精簡，不意味著可以全部用div+css結構，比如通篇HTML標籤全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整個HTML是一萬個毫不相干的內容拼裝起來，或者通篇是<div><ul><li>結構的，就如同這個頁面所有元素全是列表。事實上這兩種情況還相當普遍，因為曲解了“DIV+CSS”的真實含義，也許根本就不應該有這個說法，因為一個完整頁面幾乎不可能僅僅DIV+CSS就能完成。

div css

基本介紹

方法

發展

優先權

使用誤區

作用

相關詞條

熱門詞條