第一頁

這個網頁的第三個部分就是css測驗
在w3school當中測試您的css技能！
開始css測驗吧。

第二頁

CSS簡單介紹一下
在繼續學習之前，你需要對下面的知識要有基本的瞭解的：
第一個就是html
第二個就是xhtml
如果你希望首先學習這些專案就請你馬上過去首頁，然後去訪問這些相關的一些教程的。

css概述
css指的是層疊樣式表(cascading style sheets)
樣式定義如何顯示html元素
樣式通常儲存在樣式表當中的。
你如果把樣式新增到html4.0當中呢，是為了解決內容和表現進行分離的問題的。
外部樣式表可以極大地提高工作效率的。
外部樣式表通常儲存在CSS檔案當中的。
多一個樣式定義可以層疊成一個樣式的。

樣式就是解決了一個普遍的問題
html標籤原本就是設計用於定義文件的內容的。通過使用什麼h1,p,table這樣的標籤，
html的初衷是表達這是標題的，這裡是段落的，這裡是表格的資訊的。
這個時候穩定的佈局都是由瀏覽器來完成的，而且不是用任何的格式化的標籤的。

由於有兩種主要的瀏覽器，一個叫做netscape和internet explorer，
這兩個瀏覽器是很壞的，他們不斷地將新的html標籤和屬性（比如字型標籤和顏色屬性）
新增到html規範當中，這個時候，建立一個文件，如果想要使內容清晰，在有文件表現層的時候
這個想法已經變得越來越困難了。

為了解決這個問題，有個江湖組織叫做全球資訊網聯盟的，W3C。這是一個不掙錢的江湖組織，是個標準化的聯盟的。
它自己就肩負起來了HTML標準化的使命的，並且在html4.0之外呢，創造了樣式，我們叫做style。

所有的主流的瀏覽器都是支援層疊樣式表的。

這個時候產生了兩個問題。
第一個html4.0之前，他們的第一個，第二個，第三個版本都是什麼玩意。
第二個問題是存在不存在不支撐css的瀏覽器呢？

樣式表是極大地提高了工作效率的。
樣式表當中定義瞭如何顯示html元素的，就像是html3.2的字型標籤和顏色屬性所起到的作用那樣的。
樣式通常是儲存在外部的css檔案當中的。通過僅僅編輯一個簡單的css文件呢，外部樣式表就可以讓你有這個能力
同時改變站點中所有頁面的佈局和外觀的。
這個是個“解耦實現批量”的思想。

由於允許同時控制多重頁面的樣式和佈局的，css可以稱得上web設計領域的一個突破的。
作為網站開發者呢，你能夠為每個html元素定義樣式，並且將之應用於你希望的任意多的頁面當中。
如果需要進行全域性的更新呢，只是需要簡單地改變樣式，然後從網站當中的所有元素都會自動地更新的。

多重樣式將層疊為一個的。

樣式表允許以多種方式規定樣式資訊的。樣式可以規定在單個的html元素當中的，在html頁面的頭元素當中，或者在一個外部的css檔案
當中，甚至可以再同一個html文件內部引用多個外部樣式表的。

層疊的次序

當同一個html元素被不止一個樣式定義的時候，會使用哪個樣式呢？
一般而言的話，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表當中的，其中的數字4擁有最高的優先的權利的。

第一個最高的就是內聯樣式表，就是在html的元素的內部的。
第二個就是內部樣式表的，就是位於header標籤內部的style標籤修飾的玩意。
第三個就是外部樣式表的，就是你的link標籤當中的css檔案的地址的。
第四個就是你的瀏覽器進行格式化顯示的時候，預設時候的設定的。

因此內聯樣式（在html元素內部）擁有最高的優先權的。
這就是意味著它將優先於一下的樣式宣告的：
head標籤當中的樣式宣告。
外部樣式表中的樣式生命的，或者是瀏覽器當中的樣式生命的（預設值）。

這個時候，我就產生了第三個問題，就是瀏覽器當中的樣式宣告，我們能夠怎麼看到呢，這個是在哪裡看這些預設值呢。

第三頁

CSS基礎語法

css語法

css規則是由兩個主要的部分構成的：第一個叫做選擇器，以及一條或者多條宣告的。

selector {
declaration1;
declaration2;
……
declarationN;
}

選擇器通常是您需要改變樣式的html元素的。
每條宣告都是由一個屬性和一個值組成的。
屬性叫做property，是你希望設定的樣式的屬性style attribute。
每一個屬性是都有一個值的。屬性和值是用冒號進行分開的。
selector {property:value}

這裡需要注意的是什麼，在html標籤當中的屬性，我們是叫做attribute。
在css當中的屬性的名稱，我們是叫做property的。

下面這行程式碼當中的作用是將h1元素內的文字顏色定義為紅色的。同時字型的大小是設定為14個畫素的。
在這個例子當中呢，h1就是選擇器的，color和font-size就是屬性的，red和14px就是值的。

h1 {color:red;
font-size:14px;
}

值的不同寫法和單位

除了英文單詞red，我們還可以使用十六進位制的顏色值: $ff0000
p {color:#ff0000;}

為了節約位元組，我們可以使用css的縮寫形式：
p {color:#f00;}

其實這個是一種冗餘設計的。

我們還可以通過兩種方法來使用rgb值的：
p {color:rgb(255,0,0);}
p {color:rgb(100%,0,0);}

請注意的是，當使用rgb百分比的時候，即使是當值為0的時候，也要寫成是百分比的符號。
但是在其他的情況下的時候就不需要這麼做了。
比如說，當尺寸為0畫素的時候，0之後就需要再使用px單位了。因為0就是0，無論單位是什麼的。

記得寫引號的
如果值為若干的單詞，則要給值加上引號的：
p {font-family:”sans serif”;}

多重宣告：

提示：如果要定義不止一個宣告，則需要用分號將兩個宣告分開的。
下面的例子展示出如何頂一個紅色文字的居中段落的。
最後一條規則是不需要加上分號的。因為分號在英語當中是一個分隔符號，不是結束符號的。
然而，大多數有經驗的設計師會在每條宣告的末尾都加上分號，這樣做的好處是，
當你從現有的規則當中增減宣告的時候，會盡可能地減少出錯的可能性的。

p {text-align:center;color:red;}

你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像是這樣的：

p {
text-aligen:center;
color:black;
font-family:arial;
}

空格和大小寫
大多數樣式表包含不止一條規則，而大多數規則包含不止一個宣告。
多重宣告和空格的使用使樣式表更容易編輯；

body {
color:#000;
background:#fff;
margin:0;
padding:0;
font-family:Georgia,Palatino,serif;
}

是否包含空格不會影響到css在瀏覽器的工作效果。
同樣的，與xhtml是不一樣的，css對大小寫是不敏感的。
不過存在一個例外的情況：
如果涉及到與html文件一起工作的話，class和id名稱對大小寫是敏感的。

第四頁

css高階語法

選擇器的分組

你可以對選擇器進行分組，這樣，被分組的選擇器具就可以分享相同的宣告。
用逗號將需要分組的選擇器分開。
在下面的例子當中，我們隊所有的標題元素進行了分組。
所有的標題元素都是綠色的。

h1,h2,h3,h4,h5,h6{
color:green;
}

繼承及其問題
根據css，子元素從父元素繼承屬性。但是它並不總是按照這個方式來工作的。看看下面這條規則：
body {
font-family:Verdana,sans-serif;
}
根據上面這條規則，站點的body元素將使用berdana字型(假如訪問者的系統中存在該字型的話)。

通過css繼承，子元素將繼承最高元素(在本個例子當中是body)所擁有的屬性(這些子元素諸如p,td,ul,ol,ul,li,dl,dt和dd)。
不需要另外的規則，所有的body的子元素都應該顯示verdana字型。
子元素的子元素也一樣的。並且在大部分的現代瀏覽器當中，也確實是這樣的。

但是在以前的歷史的長河當中，在那個瀏覽器大戰的血腥的年代當中，這種情況就未必會發生的，按個時候對標準的支援並不是企業的優先選擇。
比方說，netscape4就不支援整合，它不僅僅忽略整合，而且也忽略應用於body元素的規則。IEwindows一直到了ie6還存在相關的問題，在表格內的字型樣式會被忽略，我們又該如何是好呢？

友善地對待netscape4
幸運的是，你可以通過使用我們稱之為be kind to netscape 4的冗餘法則來處理舊的樣式的瀏覽器無法理解整合的問題。

body {
font-family:verdana,sans-serif;
}

p,td,ul,ol,li,dl,dt,dd {
font-family:verdana,sans-serif;
}

4.0瀏覽器無法理解繼承，不過他們可以理解組選擇器。這麼做雖然會浪費一些使用者的寬頻。
但是如果需要對netscape4使用者進行支援，就不得不這麼做的。

繼承是一個詛咒的麼？
如果你不希望verdana，sans-serif字型被所有的子元素整合，又該怎麼做呢？
比方說，你希望段落的字型是times。沒有問題的，建立一個針對p的特殊規則，這樣它就會擺脫父元素的規則：

body {
font-family:verdana,sans-serif;
}

td,ul,ol,ul,li,dl,dt,dd{
font-family:verdana,sans-serif;
}

p {
font-family:times,”times new roman”,serif;
}

CSS派生選擇器

派生選擇器
通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
在CSSI當中，通過這種方式來應用規則的選擇器被稱之為上下文選擇器(contextual selectors)，
這是由於它們依賴於上下文關係來應用或者避免某項規則。

在CSS2當中，他們被命名為派生選擇器的，但是無論你是如何稱呼他們的，他們的作用都是相同的。
派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式的。
通過合理地使用派生選擇器，我們可以使用html程式碼變得更加整潔。

比方說，你希望列表當中strong元素變為斜體字的。而不是通常的粗體字的，可以這樣定義一個派生選擇器的。

li strong {
font-style:italic;
font-weight:normal;

}

請你要餿主意一下的標記為strong的藍色程式碼的上下文關係的。

我是粗體字的，不是斜體字，因為我不在列表當中的，所以這個規則對我是不起作用的。

1. 我是斜體的，因為strong元素位於li元素當中的
2. 我是正常的字型的。

在上面的例子當中，只有li元素中的strong元素的樣式為斜體字的，無需為strong元素定義特別的class或者id，程式碼更加簡潔。

再看看下面的css規則：
strong{
color:red;
}

h2 {
color:red;
}

h2 strong {
coor:blue;
}

下面是它施加影響的html：

the strongly emphasized word in this paragraph is strong red

this subhead is alsso red.

the strongly emphasized word in this subhead is blue

相關內容
如果您需要更深入地學習關於派生選擇器的知識，請閱讀w3school的高階教程中的以下內容：
1、css後代選擇器
2、css子元素選擇器
3、css相鄰兄弟選擇器