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