為元素命名：
在分配id和類名的時候，一定要盡可能的保持名稱與表現方式無關！
因此，應該根據「他們是什麼」來為元素命名，而不應該根據「他們的外觀如何」來命名。在書寫類名和id的時候要注意大小寫。我們建議採用完全小寫的類名和id，多個旦夕之間用連字元分隔，例如，andy-budd比andybudd清楚得多。
選擇id還是類：
一般原則是，類應該應用於該面上相似的元素，這些元素可以出現在同乙個頁面上多個位置，而id應該應用於不同的唯一的元素。其實一般來說，應用類的機會大很多，只有在目標元素非常獨特，絕對不會對**上的其他地方的別的東西使用這個名稱是才會使用id。換句話說，就是在絕對確定這個元素只會出現一次的情況下才會使用id。如果你認為以後會使用相似的元素那麼你就使用類。但是也不可陷入「多類症」，應該類名和層疊結合使用來達到目的。
div和span：
許多人誤認為div沒有語義，但是，div實際上代表部分（division），他可以將文件分為幾個有意義的區域。
div可以對會計元素進行分組，而span可以用來對行內元素進行分組或標識。
html的不同版本：
html4.01在2023年成為推薦標準，這是大多數人現在使用的html版本。2023年1月，w3c發布了html4.01的xml版本，並命名為xhtml1.0。它html4.01的主要差異是它遵循xml編碼約定，這意味著與常規的html不同，所有的xhtml屬性必須包含引號，所有的元素必須封閉。
文件型別（dtd），doctype切換和瀏覽器模式：
dtd：
dtd是一組機器可讀的規則，他們定義了xml或html的特定版本中允許有什麼不允許有什麼。在解析網頁的時候，瀏覽器將使用這些規則檢查網頁的有效性並且採取相應的措施。瀏覽器通過分析頁面的doctype宣告來了解要使用哪個dtd，由此知道要使用html的哪個版本。
doctype：
doctype是指在html文件開頭處的一行或兩行**，他描述使用哪個dtd，如下面的示例描述的是使用xhtml 1.0 strict的dtd：
"">
doctype通常--但不總是--包含指定dtd檔案的dtd。例如html5就不需要url，瀏覽器一般不讀取這些檔案（.dtd檔案），而是只識別常見的doctype宣告。
doctype當前有兩種風格：嚴格（strict）和過渡（transitional）。顧名思義，過渡doctype的目的是幫助開發人員從老版本遷移到新版本。因此，html4.01和xhtml1.0的過渡版本仍然允許使用廢棄的元素，比如font元素。但這些語言的嚴格版本禁止使用廢棄的元素。
瀏覽器模式：
當年瀏覽器廠商建立與標準相容的瀏覽器時，他們希望確保向後相容性。為了實現這一點他們建立了兩種呈現模式：標準模式和混雜模式。在標準模式下，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後相容的方式顯示。混雜模式通常模擬老師瀏覽器的行為以防止老式站點無法工作。
乙個比較典型的例子就是盒模型。
具體內容參見我的部落格：
doctype切換：
瀏覽器根據doctype的存在與否以及使用的哪種dtd來選擇要使用什麼呈現方式。
如果xhtml文件包含形式完整的doctype，那麼它一般使用標準模式呈現。
對於html4.01文件，包含嚴格（strict）dtd的doctype常常導致頁面以標準模式呈現。
包含過渡（transitional）dtd和url的doctype也導致頁面以標準模式呈現，但是有過渡dtd但是沒有url的會導致頁面以混在模式呈現。
doctype不存在或者形式不正確的會導致html和xhtml以混雜模式呈現。
根據doctype是否存在選擇呈現模式，被稱為doctype切換或doctype偵測。並非所有的瀏覽器都採取這些規則，但是這些規則很好地說明了doctype切換的工作方式。更具體的內容參見：
而且要注意，在ie6中如果doctype不是頁面中的第乙個元素，那麼會自動切換為混雜模式，ie7已經做了糾正，但是除非將頁面作為xml文件，否則最好避免使用xml宣告：<?xml version=」1.0」 encoding = 「utf-8」?>
為樣式找到應用目標
偽類：
表單元素或鏈結元素
:link和:visited稱為鏈結偽類，只能應用於錨元素。:hover, :active和:focus稱為動態偽類，理論上可以應用於任何元素。但是ie6只注意應用於錨鏈結的:hover, :active選擇器，完全忽略:focus。ie7在任何元素上都支援:hover，但是忽略:active和:focus。
高階選擇器：
ie6和更低版本不支援
如果瀏覽器不理解某個選擇器，那麼他會忽略整個規則。但是要注意，對於站點布局很重要的任何元素上，要避免使用這些高階選擇器。
子選擇器和相鄰同胞選擇器：
子選擇器（「>」）只選擇元素的直接後代，即子元素。ie7和更高版本的瀏覽器支援子選擇器。相鄰同胞選擇器（「+」）用於定位同乙個父元素下某個元素之後的元素。
但是，ie7中這兩類選擇器有乙個小bug，如果父元素和子元素之間有html注釋，就會出問題。
屬性選擇器：
「[attr]」 or 」[attr=val]」，ie6不支援。
層疊和特殊性：
層疊：
即使不太複雜的樣式表中，尋找同乙個元素可能有兩個或更多的規則。css通過乙個成為層疊（cascade）的過程處理這種衝突。層疊為每個規則分配乙個重要度。如下：
優先順序由上至下依次增高
user agent stylesheet
user declarations （normal）
author declarations （normal）
author declarations （!important）（例如：h1）
user declarations （!important）
（關於使用者樣式的解釋見我的部落格）。
然後根據選擇器的特殊性決定規則的順序，特殊性介紹如下。
特殊性：
選擇器的特殊性分為4個成分等級：a,b,c和d。
如果樣式是行內樣式，a=1;
b等於id選擇器的總數;
c等於類，偽類和屬性選擇器的數量;
d等於偽元素選擇器和元素選擇器的數量。
ps：css2偽元素選擇器如下：
:before
在元素之前新增內容。
2:after
在元素之後新增內容。
2有點暈，但是一般來說，用style屬性（行內樣式）編寫的規則總是比任何其他規則特殊，具有id選擇器的規則比沒有id選擇器的規則特殊，具有類選擇器的規則比只有型別選擇器的規則特殊。最後如果兩個規則的特殊性相同，那麼後定義的規則優先。
如果你遇到了似乎沒有起作用的css規則，很可能是出現了特殊性衝突。請在你的選擇其中新增他的乙個父元素id，從而提高它的特殊性。
為了盡量避免過分混亂，我們盡量保持一般性樣式非常一般，特殊性樣式盡可能特殊，這樣就不需要覆蓋特殊樣式了。如果發現不得不多次覆蓋一般樣式，那麼從更一般的規則中刪除需要覆蓋的樣式，並且將他顯示的應用於需要它的每個元素，這樣可能比較簡單。
繼承：
不要跟層疊混淆。
應用樣式的元素的後代會繼承樣式的某些屬性，比如顏色和字型大小。
注意繼承而來的樣式特殊性為空。所以直接應用於元素的任何樣式總會覆蓋繼承而來的樣式。
對文件應用樣式：
放在標籤中;
鏈結式，鏈結外部檔案;
匯入樣式表 @import url(…).
匯入樣式表比鏈結樣式表慢。
建議使用單一的css檔案而不是多個小檔案，當然應該根據實際站點情況作出決定，沒有硬性要求。
讀書筆記。
for my lover, cc !
CSS 基礎知識
選擇器 元素選擇器 p 後代選擇器 li a id選擇器 intro some text 類選擇器 dateposted 24 3 2006 偽類選擇器 a link 通用選擇器 浮動 定位 框模型 定位的四種模型 相對定位 relative 相對定位的座標原點 該元素在普通流中的位置 特別點 元素...
CSS基礎知識
css規則有兩個主要的部分組成 選擇器，以及一條或者多條宣告h1 css內部的注釋以 開始，以 結束p id選擇器，通過 來選擇html元素 username class選擇器，通過 來選擇一組class元素.center 指定特定的html元素使用classp center 引入外部樣式表 rel...
css基礎知識
css基礎 id選擇器 用 定義 結合div class選擇器 用.定義 結合div 背景 background color 背景色 background image 背景影象 background repeat 背景重複 background position 位置 background atta...