一．樣式表基礎
1． 樣式表中每一個條目由選擇符（selector）和對應的規則組成，選擇符通常是HTML元素名稱，也可以是類（class）、標識符（id）、偽類（pseudo class，它們標示了超鏈接的不同狀態）等。
2． 將樣式表（規則）添加到HTML文檔中有3種方式：
① 外部樣式表。
② 應用于整個文檔的樣式，位于head>區，包括嵌入樣式表和輸入樣式表。
③ 行內樣式，通過絕大多數元素的style屬性實現。
3． 樣式表內的注釋用/* …*/。通過將樣式規則包圍在HTML注釋!-- -->之間可以讓那些不支持樣式表技術的老瀏覽器也能正常工作而不是直接把樣式規則顯示在屏幕上。一般而言，瀏覽器會忽略不認識的元素和屬性，但包圍在元素之間的內容會顯示出來。
4． 每一條規則必須以分號；結束。
5． 如果多個元素共享相同的樣式規則，可以使用逗號將它們分組定義。這里分組的概念與分類（class）或標識符（id）的概念不同，前者設置的規則對整個文檔中所有的該元素都起作用，而后者只對該元素的一個子集（class或id相同的）起作用。當成組規則和其他規則都涉及到同一個元素時，它們將被組合起來，以生成某個元素的完整的樣式。
舉例：成組規則的應用。
h1,h2,h3 {background : yellow; color : black;}
h1 {font-size : 200%;}
h2 {font-size : 150%;}
h3 {font-size : 125%;}
二．外部樣式表
外部樣式表通過在head>區內使用link>元素來引用，link>元素有三大屬性：
① rel：指明了鏈接關系，這里是stylesheet。
② href：指明了外部樣式表的URL。
③ type：指明了樣式表的類型，這里是text/css。（其他還有jss）
舉例：外部樣式表的引用方式。
head>
title>Style Sheet Linking Example/title>
link rel = "stylesheet" href = "\css\css1.css" type = "text/css">
/head>
三．應用于整個文檔的樣式表
3．1 嵌入樣式表
嵌入樣式表的使用方式是直接寫在head區的style元素內，從而形成應用與整個文檔的樣式表。這種情況下只需要用到style元素的type屬性。
舉例：嵌入樣式表的使用。
head>
style type = “text/css”>
!--
body {
font: 10pt;
font-family: Serif;
color: black;
background-color: white;
}
-->
/style>
/head>
3．2 輸入樣式表
輸入樣式表也是引用一個外部樣式表，但不是通過link元素而是在style區內通過@import語法來引用：@import url（css的url地址）；可以在style>元素內引用一些輸入樣式表，同時又指定一些只應用于本文檔的樣式。但是（Netscape）瀏覽器對輸入樣式表的支持還不普遍，所以建議使用link>來引用外部樣式表。
舉例：輸入樣式表和嵌入樣式表的聯合使用。
head>
style type = “type/css”>
!--
@import url(corerules.css);
@import url(linkrules.css);
/* a rule specific to this document */
h1{
font : 24pt;
font-family : Sans-Serif;
color : black;
text-align : center;
}
-->
/style>
/head>
四．行內樣式
絕大多數元素都有style屬性。行內樣式信息并不需要從不支持樣式表的瀏覽器中隱藏，因為瀏覽器會忽略它們不理解的任何屬性。
舉例：行內樣式的使用。
h1 style = “font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline/h1>
五．樣式規則的轄域
以上討論了樣式表的存放位置，現在討論樣式表的作用范圍，兩者既有聯系又有區別：行內樣式規則自然決定了它的影響范圍是當前元素，而其他樣式規則可以靈活地設置規則的作用范圍。
5．1 簡單規則
最簡單的規則不妨稱它們為文檔規則和行內規則。前者可以應用到整個文檔中出現的所有的某元素（如所有的p>元素），后者只應用到當前元素。
5．2 id規則
使用id屬性的元素除了可以作為超鏈接的目標外（類似name屬性，在載入頁面時將顯示定位在頁面的指定位置），還可以用它來和樣式表中的某個樣式規則綁定（比name屬性強的地方）。無論是作為超鏈接的href還是樣式規則的選擇符，引用id的格式為：＃id值。在一個HTML文檔中，id屬性值必須全局唯一。
舉例：id屬性與超鏈接或樣式表的結合使用。
如有p id = “SecondParagraph”>…/p>，則可以如下引用：
a href = “# SecondParagraph”>Go to SecondParagraph/a> 或者
head>
style type = “text/css”>
!--
＃SecondParagraph {background-color : green;}
-->
/style>
/head>
5．3 class規則
和id屬性一樣，class屬性也是HTML核心屬性之一，多數元素都有該屬性。class屬性定義了一個元素所屬類的名稱。class取值不要求唯一，同一類元素的多個實例、多個不同類的元素都可能屬于同一個類。使用類可以顯著地減少文檔中必需的樣式規則的數量。樣式規則中有兩種引用class的格式：
① 為所有該類的元素設置樣式：.類名{樣式規則;}
② 為屬于該類的所有X元素設置樣式：X.類名{樣式規則;}
舉例：class規則的使用。
style type = “text/css”>
!--
.main-item {font-size:150%;}
h1.veryimportant {background-color:orange;}
-->
/style>
5．4 偽類（pseudo－classes）和偽元素（pseudo－elements）
5．4．1 偽類
一組專門的預定義的類稱為偽類，主要用來處理超鏈接的狀態。超鏈接文字的狀態可以通過偽類選擇符＋樣式規則來控制。偽類選擇符包括：
① a:link：未訪問鏈接
② a:visited：已訪問鏈接
③ a:active：激活時（鏈接獲得焦點時）鏈接的顏色
④ a:hover：鼠標移到鏈接上時
一般a:hover和a:visited鏈接的狀態（顏色、下劃線等）應該是相同的。前三者分別對應body元素的link、vlink、alink這三個屬性。四個“狀態”的先后過程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能設置有無下劃線（總是有的）。
舉例：偽類的常見狀態值
style type = “text/css”>
!--
a:link {color: blue; text-decoration:none;} //未訪問：藍色、無下劃線
a:active:{color: red; } //激活：紅色
a:visited {color:purple;text-decoration:none;} //已訪問：purple、無下劃線
a:hover {color: red; text-decoration:underline;} //鼠標移近：紅色、下劃線
-->
/style>
5．4．2 偽元素
兩個偽元素：:first-letter和:first-letter。它們常常和像p>這樣的元素引導的一段文字一起使用，用來影響其中首字母或者首行的顯示，如p:first-letter和p:first-line。
style type = “text/css”>
!--
p:first-line {background-color:yellow;}
p:first-letter{color:red;font-size:150%;}
-->
/style>
5．5 情景選擇（contextual selection）
情景選擇允許對位于某嵌套層次內的某元素進行樣式控制，該規則通過按照嵌套的順序列出元素的名稱，然后給出樣式規則來創建。
舉例：使所有出現在p>元素內的strong>元素都有黃色的背景顏色。
p strong {background-color : yellow;}
六．樣式規則的繼承與嵌套
該性質允許對元素的多種規則進行組合，既可以從父元素那里繼承一些屬性，也可以重寫某些屬性。層疊（CSS中的C）的一般思想有效地創建了一個系統以確定在有多個樣式表的文檔中哪些規則將被應用。例如，使用id屬性為一個特定的p>元素指定規則，這相對于通過class規則指定的規則具有優先權，而class規則相對于為p>元素自身指定的規則有優先權。相對于應用于整個文檔的樣式或鏈接進來的外部樣式，通過一個style屬性指定的行內樣式是更重要的。考慮究竟哪一個規則將最終生效的簡單方法是：越專門的規則優先級越高，和標記位置越近的規則優先級越高。
如果需要一個特定的規則永遠不被后面的另一條規則重寫，可以用!important聲明。對希望絕不被忽略的規則，可以在這個規則的分號之前插入聲明!important，它一定要放在規則的最后，分號之前的位置，否則將被忽略。另外，許多老版本的瀏覽器并不支持該聲明。
舉例：使用!important聲明不被重寫的規則。
P {color:red !important;font-size:12pt;}
p style=“color:green;font-size:24pt;”}.../p>
p>元素最終將以紅色、24點大小顯示。
七．CSS1屬性
3．1 font屬性
字模、字體樣式、字體大小、字體效果等。常用屬性有：
① font-family：字模，Cursive、Fantasy、Comic Sans MS等。
② font-size：字體物理大小或相對大小，物理大小包括：xx-small、x-small、small、medium、large、x-large、xx-large分別對應1～7號字體。
③ font-style：是否斜體， normal、italic、oblique（＝italic）。
④ font-weight：文字粗細，normal、bold、bolder、lighter。
⑤ font-variant：小型大寫字母，normal、small-caps（小型大寫字母）。
!--[if !supportEmptyParas]--> !--[endif]-->
!--[endif]-->3．2 text屬性
文本修飾、文本縮進、單詞間距、字母間距、行間距、文本的水平對齊和垂直對齊以及空白大小的控制。常用屬性有：
① text-transform：單詞大小寫，none、capitalize、uppercase、lowercase。
② text-decoration：特殊效果，none、line-through、overline、underline。
③ word-spacing：單詞間距，normal、英寸（in）、厘米（cm）、point（pt）、pica（pc）、em（em）、像素（px）。
④ letter-spacing：字母間距。
⑤ vertical-align：文本或圖像的垂直定位，baseline（默認）、sub、super、top、text-top、middle、bottom、text-bottom。
⑥ text-align：文本水平對齊方式，left、right、center、justify。
⑦ text-indent：為段落元素第一行產生縮進。
⑧ line-height：當前行的高度，這樣設置的行上下會空出相同的距離。
⑨ white-space：控制元素內空格的處理方式，normal（默認）、pre（不壓縮空格）、nowrap（即使文本行超出了元素內容的寬度也不會換行）
!--[if !supportEmptyParas]--> !--[endif]-->
3．3 color屬性和background屬性
① color：文字顏色
② background-color：背景色
③ background-image：背景圖像，背景色顯示在背景圖像的下面，以提供不透明的背景，比④ background-repeat：決定當背景圖像比元素的畫布空間小時該如何排列。
repeat：默認，在水平和垂直兩個方向上平鋪；
repeat-x：僅在水平方向平鋪；
repeat-y：僅在垂直方向平鋪；
no-repeat：不平鋪。
⑤ background-attachment：
scroll：默認，圖像和文本一起滾動；
fixed：圖像不動，水印效果。
⑥ background-position：背景圖像在元素畫布空間中的定位方式，指定了圖像左上角相對于畫布的水平間距和垂直間距。可以用絕對距離（像素）、百分比或特殊關鍵字。
水平方向關鍵字：left、center、right
垂直方向關鍵字：top、center、bottom
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：background-image屬性使用。
b{background-image：url(donut-tile.gif);background-color：white;}
p{background-image：url(picture.gif);background-position：20% 40%;}
body{background-image：url(picture.gif);background-position：center center;}
!--[if !supportEmptyParas]--> !--[endif]-->
3．4 box屬性
像p>元素這樣的塊級元素可以作為屏幕上的一個矩形容器來考慮。可以通過樣式屬性來控制這些容器的三個方面。可以控制的box屬性如下：
① margin屬性：決定元素的box的邊和相鄰元素的邊的距離。
② border屬性：決定包圍元素的邊的邊框的視覺特性。
③ padding屬性：決定元素內它的邊和它的實際內容間的距離。
④ height，width和positioning屬性：決定由元素產生的box的大小和位置。
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．1 margin屬性
單邊距的設置規則：
① margin-top：上邊距
② margin-right：右邊距
③ margin-bottom：下邊距
④ margin-left：左邊距
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：單邊距的設置。
body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}
p {margin-bottom:20mm;}
div.fun {margin-left:1.5cm; margin-right: 1.5cm;}
!--[if !supportEmptyParas]--> !--[endif]-->
也可以用margin屬性來一次性為四條邊設置邊距。
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：通過margin屬性設置邊距的規則。
① 如果僅指定了單個值，則該值被應用到4個“空白”。
如：p{margin:1.5cm;}
② 如果四個值都指定了，則它們按照順時針方向應用到各個空白（上、右、下、左的順序），
最后一個距離后加分號，之間用空格相隔。
如：p{margin:10px 5px 15px 5px;}
③ 如果在規則中僅指定了兩個或三個值，缺少一邊的取值將由它的對邊決定。
如：p{margin:10px 5px ;}
將設置上邊、下邊的空白為10像素，右邊、左邊的空白為5像素。
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．2 border屬性
border位于空白（margin）和間隙（padding）之間。
（一）border-style屬性
① none：無邊框
② dotted：點邊框
③ dashed：虛線邊框
④ solid：實線邊框
⑤ double：雙邊框
⑥ groove：蝕刻邊框
⑦ ridge：突出邊框
⑧ inset：凹進邊框
⑨ outset：凸起邊框
也可以通過border-top-style，border-right-style，border-bottom-style，border-left-style來單獨設置各邊的邊框類型。當使用border-style來設置四邊時，規則同margin類似。
!--[if !supportEmptyParas]--> !--[endif]-->
（二）border-width屬性
border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分別設置邊框的粗細。典型取值有：thin、medium、thick，當然也可取其他長度值。
（三）border-color屬性
border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分別設置邊框的顏色。
!--[if !supportEmptyParas]--> !--[endif]-->
可以將border-style、border-width、border-color一起應用到border、border-top、border-right、border-bottom、border-left上來實現對相關border屬性的快速設置。當三個屬性在放在一起設置時，最好按照border-style、border-width、border-color的順序來給出值。
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：border組合屬性的設置。
#RainbowBox
{
background-color:yellow;
border-top:solid 20px red;
border-right:double 10px blue;
border-bottom:solid 20px green;
border-left:dashed 10px orange;
}
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．3 padding屬性
在元素的邊框和它的實際內容之間的空白可以通過padding屬性來控制。元素的4個間隙（padding）可以通過padding-top、padding-right、padding-bottom、padding-left來設置。與空白（margin）和邊框（border）一樣，你可以使用速記符形式的padding屬性來一次性地對四邊的間隙進行設置。
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：一個涉及margin、border、padding的綜合應用。
style type = “text/css”>
!--
#one
{
background:yellow;
border-style:double;
border-width:medium;
padding-left:1cm;
padding-right:0.5cm;
}
#two
{
background:yellow;
border-style:double;
border-width:medium;
padding-top:1cm;
padding-bottom:1cm;
}
#three
{
background:yellow;
border-style:double;
border-width:medium;
padding:1cm 1cm;
margin:0.5cm 4cm;
}
-->
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．4 width、height屬性
舉例：綜合。
P
{
width:300px;
height:400px;
padding:10px;
border:solid 5px;
background-color:yellow;
color:black;
}
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．5 float、clear屬性
float屬性影響元素在水平方向上的對齊方式，類似與多數html元素的align屬性。它使得它所包含的元素“流”向左邊或右邊，這時我們稱這個元素為“流動”元素。 clear屬性對“流動”元素進行垂直定位，決定是否繼續或清除當前的流動方式，類似于html元素br的clear屬性，取值有left、right、both、none（默認）。
!--[if !supportEmptyParas]--> !--[endif]-->
3．4．6 display屬性
CSS模型定義了三種類型的顯示元素：塊級元素、行內元素和列表。display屬性允許一個元素的顯示類型成為下面四個值中的一個：block，inline，list-item和none。
① none：元素將不會顯示出來，并且也不會占據畫布空間，這點和設置visibility屬性不同。
② block：塊級元素。
③ inline：行內元素。
④ list-item：列表元素
!--[if !supportEmptyParas]--> !--[endif]-->
舉例：display屬性使用。
① “關閉”一個段落，使其不顯示出來：
p.remove{display:none;}
② 將一個塊級元素（比如段落）轉變成行內元素，這樣就可以不換行顯示！
p{display:inline;}
③ 將一個行內元素轉變成塊級元素，這樣就增加了一個回車（換行）！
em{display:block;}
④ 強制一個元素在一定程度上像列表那樣顯示：
b{display:list-item;}
