1、css語法
css規則有兩個主要部分構成：選擇器，以及一條或多條說明。
例如：selector
注：選擇器通常是你需要改變樣式的html元素。
每條宣告有乙個屬性和乙個值組成。
屬性(property)是你希望設定的樣式屬性(style attribute)。每個屬性都有乙個值，屬性與值之間通過冒號(：)隔開。
例：h1
2、值的不同寫法和單位
除了英文單詞red，我們還可以使用十六進製制的顏色值#ff0000;
例：p為了節約位元組，我們可以使用css的縮寫
例：p還可以通過兩種方法使用rgb值（這種方法很少用，只需要了解就行）
例：pp注：使用rgb，0也需要百分號0%
3、值有單詞時，記得加引號「」
例：p4、定義多重宣告，需要用分號把它隔開，即屬性與屬性之間通過分號(;)隔開。
例：p5、選擇器的分組
你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用逗號將需啊喲分組的選擇區分開、
例：h1,h2,h3,h4,h5
對所有的標題分了組，所有標題的屬性顏色為綠色。
6、繼承及問題
根據 css，子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則：
body
根據上面這條規則，站點的 body 元素將使用 verdana 字型（假如訪問者的系統中存在該字型的話）。
通過 css 繼承，子元素將繼承最高端元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規則，所有 body 的子元素都應該顯示 verdana 字型，子元素的子元素也一樣。並且在大部分的現代瀏覽器中，也確實是這樣的。
但是在那個瀏覽器大戰的血腥年代裡，這種情況就未必會發生，那時候對標準的支援並不是企業的優先選擇。比方說，netscape 4 就不支援繼承，它不僅忽略繼承，而且也忽略應用於 body 元素的規則。ie/windows 直到 ie6 還存在相關的問題，在**內的字型樣式會被忽略。我們又該如何是好呢？
友善的對待netscape4
幸運地是，你可以通過使用我們稱為 "be kind to netscape 4" 的冗餘法則來處理舊式瀏覽器無法理解繼承的問題。
body
p, td, ul, ol, li, dl, dt, dd
4.0 瀏覽器無法理解繼承，不過他們可以理解組選擇器。這麼做雖然會浪費一些使用者的頻寬，但是如果需要對 netscape 4 使用者進行支援，就不得不這麼做。
如果你不希望 "verdana, sans-serif" 字型被所有的子元素繼承，又該怎麼做呢？比方說，你希望段落的字型是 times。沒問題。建立乙個針對 p 的特殊規則，這樣它就會擺脫父元素的規則：
body
td, ul, ol, ul, li, dl, dt, dd
p
7、派生選擇器
通過依據元素在起位置的上下文關係來定義樣式，你可以是標記更加簡潔。
在css1中，通過這種方式來應用規則的選擇區被稱為上下文選擇器，這是由於它們依賴於上下文關係來應用或者避免某項規則，在css2中，它們被稱為派生選擇器，但是無論你如何稱呼它們，但作用都是相同的。
例：li strong
在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，**更加簡潔。
8、id選擇器
id選擇器可以為特定id的html元素指定特定的樣式。
id選擇器以「#」來定義。
下馬兩個id選擇器，第乙個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red
#green
下面html**中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。
這段落是紅色
這段落是綠色
9、id選擇器和派生選擇器
#sidebar p
上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是**單元，儘管它也可能是乙個**或者其他塊級元素。它甚至可以是乙個內聯元素，比如 或者 ，不過這樣的用法是非法的，因為不可以在內聯元素 中嵌入
乙個選擇器多種用法，這個id選擇器可以被多次使用：
#sidebar p
#sidebar h2
單獨選擇器
id選擇完全及時不被用來建立派生選擇器，它也可以獨立的發揮作用
例：#sidebar
根據這條規則，id 為 sidebar 的元素將擁有乙個畫素寬的黑色點狀邊框，同時其周圍會有 10 個畫素寬的內邊距（padding，內部空白）。老版本的 windows/ie 瀏覽器可能會忽略這條規則，除非你特別地定義這個選擇器所屬的元素：
例：div#sidebar
10、css類選擇器
在css中，類選擇器以乙個點號(.)顯示：
.center
在上面的例子中，所有擁有center類的html元素均為居中。
下面html**中，h1和p元素都有center類。這意味著兩者都要遵守「.center」選擇器中的規則。
this paragraph will also be center-aligned.
注意：類名的第乙個字元不能使用數字！它無法在 mozilla 或 firefox 中起作用。
和 id 一樣，class 也可被用作派生選擇器：
.fancy td
在上面這個例子中，類名為 fancy 的更大的元素內部的**單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是乙個**或者乙個 div）
元素也可以基於它們的類二被選擇：
td.fancy
在上面的例子中，類名為 fancy 的**單元將是帶有灰色背景的橙色。
你可以將類 fancy 分配給任何乙個**元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標註為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式，這個效果被限制於被標註為 fancy 的**單元（即使用 td 元素來選擇 fancy 類）。
11、css屬性選擇器
對帶有指定屬性的html元素設定樣式。
可以為擁有指定屬性的html元素設定樣式，而不僅限於class和id屬性。
注釋：只有在規定了!doctype時，ie7和ie8才支援屬性選擇器，在ie6及更低版本中，不支援屬性選擇。
下面的例子為帶有 title 屬性的所有元素設定樣式：
[title]
下面的例子為 title="w3school" 的所有元素設定樣式：
[title=w3school]
下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：
[title~=hello]
下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字元分隔的屬性值：
[lang|=en]
設定表單的樣式
屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特別有用：
input[type="text"]
input[type="button"]
p body
不要在屬性值與單位之間留有空格。假如你使用 「margin-left: 20 px」 而不是 「margin-left: 20px」 ，它僅在 ie 6 中有效，但是在 mozilla/firefox 或 netscape 中卻無法正常工作
內部樣式
當單個文件需要特殊的樣式時，就應該使用內部樣式表。你可以使用 標籤在文件頭部定義內部樣式表，就像這樣:
內聯樣式
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在乙個元素上應用一次時。
this is a paragraph
多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
例如，外部樣式表擁有針對 h3 選擇器的三個屬性：
h3 而內部樣式表擁有針對 h3 選擇器的兩個屬性：
h3 color:red; text-align:right; font-size:20pt;
即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代。
css設計指南學習1 css基礎
從前做網頁的時候就學過css。當時應該還是css2，現在正是html5和css3大行其道，去亞馬遜買了一本css設計指南，重新系統學習下。2,在html頭部用style標籤嵌入 3,鏈結。不直觀，但是有助於文件整潔 選擇符 上下文選擇符 p em 表示p為祖先元素的所有em 不一定非要是父 子選擇符...
css設計指南學習1 css基礎
從前做網頁的時候就學過css。當時應該還是css2，現在正是html5和css3大行其道，去亞馬遜買了一本css設計指南，重新系統學習下。2,在html頭部用style標籤嵌入 3,鏈結。不直觀，但是有助於文件整潔 選擇符 上下文選擇符 p em 表示p為祖先元素的所有em 不一定非要是父 子選擇符...
從零開始的wed前端學習 css基礎
繼承性 層疊性 可被覆蓋 1.後來者居上原則 後來的樣式覆蓋先前的樣式,越往後越說的算 2.行內樣式優先順序大於頭部樣式與外部樣式 3.頭部樣式優先順序大於等於外部樣式 因為後來者居上原則頭部樣式優先順序大於外部樣式 4.越精確越說的算,id選擇器 class類選擇器 標籤選擇器 5.importa...