CSS 指層疊樣式表 (Cascading Style Sheets)，是一種用來表現 HTML 文檔樣式的語言，樣式定義如何顯示 HTML 元素，是能夠真正做到網頁表現與結構分離的一種樣式設計語言。樣式通常存儲在樣式表中，外部樣式表通常存儲在 CSS 文件中，多個樣式定義可層疊為一。
HTML 標簽被設計為用於定義文檔內容，也就是文檔結構，為了增強代碼的可讀性，實現網頁結構與表現相分離的原則，萬維網聯盟（W3C），肩負起了 HTML 標准化的使命，並在 HTML4 之外創造出樣式（Style）。CSS 目前最新版本是 CSS3，相對於傳統 HTML 的表現而言，CSS 能夠對網頁中對象的位置排版進行像素級的精確控制，擁有對網頁對象編輯的能力，易於維護和改版，提高頁面浏覽速度，使用 CSS 布局頁面更符合 W3C 標准，他是目前基於文本展示最優秀的表現設計語言。
CSS 樣式表極大地提高了工作效率：樣式通常保存在外部的 .css 文件中，通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表有能力同時改變站點中所有頁面的布局和外觀。
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。如下：
p{
color:red;
text-indent:2em;
}
選擇器就是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明總是以分號 ; 結束，聲明組以大括號 {...} 括起來。為了讓 CSS 可讀性更強，可以每行只描述一個屬性。
CSS 注釋是用來解釋代碼，並且可以隨意編輯，浏覽器會忽略它。CSS注釋以 "/*" 開始，以 "*/" 結束。如下：
p{
color:red;
text-indent:2em; /* 段落縮進2個字，即段落開頭空2個漢字的位置。 */
}
當讀到一個樣式表時，浏覽器會根據它來格式化 HTML 文檔。CSS 創建樣式表有三種方法：內聯樣式、內部樣式、外部樣式。
(1)、內聯樣式
內聯樣式也叫行內樣式或者行間樣式，即在相關標簽內使用樣式（style）屬性定義。如下：
<div style="width:200px;height:100px;border:1px solid black;"></div>
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。因此需要慎用這種方法，例如當樣式僅需要在一個元素上應用一次時，可以使用內聯樣式。要使用內聯樣式，需要在相關的標簽內使用樣式屬性定義，style 屬性可以包含任何 CSS 屬性。
(2)、內部樣式
內部樣式也叫內嵌樣式，即在文檔中創建內嵌的樣式表，需要使用 <style> 標簽在文檔頭部定義內部樣式表，如下：
<head>
<style>
div{
width:200px;
height:100px;
border:1px solid black;
}
p{
color:blue;
font-size:14px;
}
span{
color:black;
font-weight:bold;
}
</style>
</head>
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。
(3)、外部樣式
外部樣式也叫做外聯樣式，即使用 <link> 標簽鏈接到外部樣式表，如下：
<head> <link rel="stylesheet" type="text/css" href="css/style.css"> </head>
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇，在使用外部樣式表的情況下，可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表，浏覽器會從文件 style.css 中讀到樣式聲明，並根據它來格式化文檔。注意：<link> 標簽中 rel="stylesheet" type="text/css" 是固定代碼格式，不可更改。
外部樣式表可以在任何文本編輯器中進行編輯，樣式文件不能包含任何的 HTML 標簽，樣式表以 .css 擴展名進行保存。注意：不要在屬性值與單位之間留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那麼它在不同的浏覽器中可能無法正常工作，導致意向不到的結果。
(4)、樣式優先級
樣式優先級，也可以稱為層疊次序，即同一個 HTML 元素不止被一個樣式定義時，會優先使用哪個樣式。一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中：
內聯樣式 > 內部樣式 > 外部樣式
內聯樣式（在 HTML 元素內部）擁有最高的優先權，即優先采用在元素內部定義的樣式信息，然後是內部樣式表（位於 <head> 標簽內部），最後是外部樣式表中的樣式聲明，浏覽器中的樣式聲明（缺省值）同外部樣式處於同一層次。
優先級的順序是有一個前提的，即內聯樣式、內部樣式、外部樣式表中 CSS 樣式是在的相同權值的情況下。
但是內部樣式 > 外部式也有一個前提，即內部樣式的位置一定在外部樣式的後面。如下：
<link rel="stylesheet" type="text/css" href="css/style.css"> <style> ... </style>
(5)、多重樣式
樣式表允許以多種方式規定樣式信息，樣式可以規定在單個的 HTML 元素中，或在 HTML 頁的 <head> 元素中，亦或在一個外部的 CSS 文件中，甚至可以在同一個 HTML 文檔內部引用多個外部樣式表，但是最終多重樣式將被層疊為一個。那就意味著：如果你使用了外部文件的樣式，在 <head> 中也定義了該樣式，那麼內部樣式會取代外部文件中的樣式。
如果要給 HTML 元素設置 CSS 樣式，則需要在元素中設置 "id" 和 "class" 屬性，該屬性用作選擇器。
(1)、id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證一樣具有唯一性。HTML元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。注意： id 屬性不能以數字開頭。
<head>
<style>
#heading{
color:red;
text-align:center;
}
</style>
</head>
<body>
<h1 id="heading">CSS 選擇器</h1>
</body>
(2)、class 選擇器
class 選擇器用於描述一組元素的樣式，也叫做類選擇器，class 選擇器有別於 id 選擇器，class 可以在多個元素中使用，並且一個元素也可以指定多個類名。class 選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點 "." 號來定義。可以設置所有帶有指定 class 的 HTML 元素，也可以指定特定的 HTML 元素使用 class。注意：類名的第一個字符也不能使用數字。
實例：所有擁有 center 類的 HTML 元素均為居中顯示。
<head>
<style>
.center{
text-align:center;
}
.col{
color:red;
}
.font{
font-size:18px;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center">class 選擇器</h1>
<p class="center col">我是一個段落。</p>
<p class="center font">我是另一個段落。</p>
</body>
實例：所有的 p 元素使用 class="center"，讓該元素的文本居中。
<head>
<style>
.center{
color:blue;
}
p.center{
text-align:center;
}
p.col{
color:red;
}
.font{
font-size:18px;
font-weight:bold;
font-family:"Microsoft YaHei";
}
</style>
</head>
<body>
<h1 class="center col">class 選擇器</h1>
<p class="center col">我是一個段落。</p>
<p class="center col font">我是另一個段落。</p>
<h2 class="center">h2 標題</h2>
</body>
(3)、ID 選擇器和類（class）選擇器的區別
相同點：可以應用於任何元素。
不同點：
①、ID 選擇器只能在文檔中使用一次。與類選擇器不同，在一個 HTML 文檔中，ID 選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
②、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。在一個 HTML 文檔中，可以為一個元素同時設置多個樣式，但只可以用類選擇器的方法實現，ID 選擇器是不可以的，不能使用 ID 詞列表，即一個元素可以指定多個類名，如 <span class="one two three">文本</span>，而 ID 只能指定一個。
最常見的 CSS 選擇器就是元素選擇器，即標簽選擇器，也就是說 HTML 的元素就是最基本的選擇器。
如果使用元素選擇器設置 HTML 的樣式，選擇器通常將是某個 HTML 元素，比如 body、h1、p、a，也可以是 html 本身。
在 W3C 標准中，元素選擇器也叫做類型選擇器，類型選擇器匹配文檔中元素類型的名稱，類型選擇器匹配文檔樹中該元素類型的每一個實例，也就是如果使用元素選擇器，比如 h1{color:red;}，他會匹配文檔中所有的 h1 元素，即頁面上所有的 h1 標題都顯示為紅色。
background 屬性用於定義 HTML 元素的背景。
定義元素背景效果的 CSS 屬性有以下五種：
①：background-color
②：background-image
③：background-repeat
④：background-position
⑤：background-attachment
(1)、background-color：背景顏色
background-color 屬性定義了元素的背景顏色。頁面的背景顏色可以使用 body 元素選擇器進行定義：
body{
background-color:gray;
}
CSS 中，顏色值通常使用以下方式定義：
①：十六進制，如："#ff0000"，類似這樣的形式，可以縮寫為："#f00"。
②：RGB，如："rgb(255,0,0)"。
③：顏色名稱，如："red"。
(2)、background-image：背景圖像
background-image 屬性描述了元素的背景圖像。默認情況下，背景圖像進行平鋪重復顯示，以覆蓋整個元素實體，頁面背景圖片設置如下：
body{
background-image:url('images/wallpaper.jpg');
}
(3)、background-repeat：背景圖像設置水平或垂直平鋪或不平鋪
默認情況下，background-image 屬性會在頁面的水平或者垂直方向平鋪。一些圖像如果在水平方向與垂直方向平鋪，這樣看起來很不協調，如果圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些：background-repeat:repeat-x，定義垂直方向平鋪語法：background-repeat:repeat-y。
在使用背景圖像時，默認會平鋪重復顯示，這樣不僅不具有美感，還會影響文本的排版。如果不想讓圖像平鋪，並且只顯示一次，那麼就這樣定義：background-repeat:no-repeat。
<head>
<style>
body{
background-image:url('images/wallpaper.jpg');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1 class="center col">class 選擇器</h1>
<p class="center col">我是一個段落。</p>
<p class="center col font">我是另一個段落。</p>
<h2 class="center">h2 標題</h2>
</body>
(4)、background-position：背景圖像設置定位
在上面的例子中，背景圖像與文本顯示在同一個位置，這樣不利於文本的閱讀，為了讓頁面排版更加合理，可以利用 background-position 屬性改變圖像在背景中的位置：
body{
background-image:url('images/wallpaper.jpg');
background-repeat:no-repeat;
background-position:right top;
}
此時，背景圖像會顯示在頁面的右上角。background-position 屬性設置背景圖像的位置，如果背景圖像要重復，也將從這一點開始。
background-position 屬性值可以使用關鍵字表示：left | right | center，如果僅指定一個關鍵字，其他值將會是 "center"。該方法可能的值的有：left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 屬性值也可以使用百分比表示：x％y％，默認值為：0％0％，第一個值是水平位置，第二個值是垂直位置。左上角是 0％0％，右下角是 100％100％。如果僅指定了一個值，其他值將是 50％。
background-position 屬性值還可以使用長度單位精確表示，單位可以是像素或任何其他 CSS 單位，通常都使用像素。第一個值是水平位置，第二個值是垂直位置，左上角是 0 0，兩個數值之間用空格隔開，例如：background-position:12px 24px; 表示背景圖片距離該元素左上角的水平方向位置是 12px，垂直方向位置是 24px。該屬性就是圖像左上角相對於元素左上角的位置偏移，如果取負值，則向上向左偏移。該方法在制作 CSS 雪碧圖（即 CSS Sprite，也叫做 CSS 精靈）時，將十分重要。
(5)、background-attachment：背景圖像設置固定或滾動
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動，默認值是 scroll，背景圖片隨頁面的其余部分滾動。如果需要設置圖像不隨著頁面的其他部分滾動，那麼屬性值則使用 fixed，定義背景圖像是固定的，如下：
<head>
<style>
body{
height:2000px;
background-image:url('images/fix.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
</head>
<body>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
<p>我是一個段落,我是一個段落</p>
</body>
(6)、背景屬性簡寫
在上面實例中，設置頁面的背景效果時，通過很多的單個屬性來進行定義，這樣代碼就顯得很繁瑣，為了簡化這些屬性的代碼，可以將這些屬性合並在同一個屬性中，如下：
body{
background:green url('images/fix.gif') no-repeat fixed 12px 24px;
}
background 屬於復合屬性，也叫快捷屬性，他可以簡化代碼，提高頁面的運行效率，但是在使用 JS 時卻不能使用復合屬性來獲取元素的樣式，需要使用單個屬性精確獲取，如果一個元素定義了多個背景樣式，那麼使用復合屬性獲取，浏覽器並不知道你到底需要哪個樣式，就出錯了。類似這樣的復合屬性還有：font、border、padding 和 margin 等。
當使用簡寫屬性時，屬性值的順序依次為：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上屬性無需全部使用，可以按照頁面的實際需要使用，比如只定義背景顏色，就可以這樣設置：background:#90C;
(1)、文本顏色
color 屬性被用來設置文字的顏色，可以使用合理的背景顏色和文本顏色搭配，這樣有利於提高文本的可讀性。
<head>
<style>
body{
background-color:#d5f3f4;
}
h1{
color:#00c; /* color:#0000cc; */
}
</style>
</head>
<body>
<h1>文字顏色</h1>
<p>可以使用合理的背景顏色和文本顏色搭配，這樣有利於提高文本的可讀性。</p>
</body>
(2)、文本對齊方式
text-align 文本排列屬性可以用來設置文本的水平對齊方式，文本可以居中或對齊到左或右，兩端對齊。
該屬性有4個值，默認值為 left，由浏覽器決定，把文本排列到左邊，即對齊到左。center 則為文本居中，right 為文本對齊到右邊。
<head>
<style>
h1{
text-align:center;
}
h3{
text-align:right;
}
</style>
</head>
<body>
<h1>標題 1 居中顯示</h1>
<h2>標題 2 居左默認顯示</h2>
<h3>標題 3 居右顯示</h3>
</body>
當 text-align 屬性的值設置為 justify 時，則表示文本兩端對齊，每一行將被展開為寬度相等，左、右外邊距對齊，就像雜志和報紙那樣，常應用於書刊雜志排版。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上，然後，調整單詞和字母間的間隔，使各行的長度恰好相等。那就是說對於英文這樣定義是可以的，但是對於中文兩端對齊支持並不是很好。解決辦法就是再定義 text-justify 屬性，將其值設置為 inter-ideograph，用表意文本來對齊內容，他增加或減少表意字和詞間的空格。表意字顧名思義，就是字形有一定表達意思性的文字，漢字屬於表意文字，他是文字萌芽時期的產物，是漢語形成歷史中最早的一種文字。該屬性值的默認值為 auto，讓浏覽器決定兩端對齊算法。實例：
<head>
<style>
.part{
color:red;
text-align:justify;
text-justify:inter-ideograph;
}
.p1{
width:300px;
}
.p2{
width:300px;
}
.p3{
width:400px;
}
.p4{
width:300px;
}
</style>
</head>
<body>
<h1>text-align 實例</h1>
<p class="part p1">當 text-align 屬性的值設置為 justify 時，每一行將被展開為寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜志和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。也就是說對於英文這樣定義就可以了，但是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p>
<p class="part p2">當 text-align 屬性的值設置為 justify 時,每一行將被展開為寬度相等,左,右外邊距是對齊的,即文本兩端對齊,如雜志和報紙那樣.在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上.然後,調整單詞和字母間的間隔,使各行的長度恰好相等.也就是說對於英文這樣定義就可以了,但是對於中文這樣定義是不行的.解決辦法就是使用 text-justify 屬性.</p>
<p class="part p3">當 text-align 屬性的值設置為 justify 時，每一行將被展開為寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜志和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。也就是說對於英文這樣定義就可以了，但是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p>
<p class="part p4">當屬性的值設置為時，每一行將被展開為寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜志和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。然後，調整單詞和字母間的間隔，使各行的長度恰好相等。也就是說對於英文這樣定義就可以了，但是對於中文這樣定義是不行的。解決辦法就是使用屬性。</p>
</body>
上面的實例，有4段文本，都設置了兩端對齊，前2段的寬度都為300像素，第一段使用全角的標點符號，而第二段使用了半角的標點符號，可以看到，標點符號會對布局對齊造成影響，2段文本的顯示長度不一樣，在 IE 中第一段顯示為9行，而在 Chrome 和 FireFox 中第一段顯示為10行，第二段均顯示為9行，並且第二段使用半角標點符號，布局顯得非常緊湊，毫無美感，不易閱讀，而且可以很明顯看到，這2段文本的字間距問題還是比較突出的，有的字之間相距很遠，而有的字之間間隔很小，主要是因為使用了中英文混合文本，空格也會造成影響。默認情況下，大部分主流浏覽器會避免讓標點符號占據行首，這也是導致文本間間隔不均的原因，這些問題要想控制還是較為復雜的。第3段文本將寬度設置為400像素，文本兩端對齊效果相對來說比較理想。最後一段文本寬度仍為300像素，但是將文本設置為純中文，文本兩端對齊效果很好。
綜上所述，如果文本是中文，文本兩端的對齊效果十分理想。如果文本是中英文混合的，通過適當的調整寬度，文本兩端對齊效果相對來說比較理想，但對於寬度的調整可能會影響到整體布局，其實不調整寬度，顯示效果也無傷大雅。如果文本的標點符號使用半角，或者半角和全角混合使用，那麼文本兩端對齊效果則相當糟糕。
text-justify 屬性是 CSS3 版本中定義的屬性，用於規定當 text-align 被設置為 justify 時的齊行方法，該屬性指定如何對齊文本以及對齊間距，目前只有 IE 支持該屬性，其他主流浏覽器都不支持，如果不設置該屬性，在 IE 中兩端對齊則無效果，但是對於其他浏覽器則無影響。該屬性有多個值，除了上面提到的2個值之外，還有 none 禁用齊行。inter-word 通過增加/減少單詞間的間隔對齊文本。inter-cluster 只對不包含內部單詞間隔的內容進行排齊，比如亞洲語系。distribute 類似報紙版面，除了在東亞語系中最後一行是不齊行的。kashida 通過拉伸字符來排齊內容。
(3)、文本修飾
text-decoration 屬性用來設置或刪除文本的修飾。從設計角度來講該屬性主要是用來刪除超鏈接的下劃線，如下：
<head>
<style>
.a1{
text-decoration:none;
}
</style>
</head>
<body>
<a href="#" target="_blank">默認帶有下劃線的超鏈接</a><br/><br/>
<a class="a1" href="#" target="_blank">text-decoration:none; 刪除超鏈接下劃線</a>
</body>
也可以使用其他值來設置文本的修飾，text-decoration:overline; 設置文本上劃線。text-decoration:line-through; 設置文本中間劃線。text-decoration:underline; 設置文本下劃線。該屬性還有一個值為 blink 定義閃爍的文本，但是所有浏覽器都不支持。
<head>
<style>
.p1{
text-decoration:overline;
}
.p2{
text-decoration:line-through;
}
.p3{
text-decoration:underline;
}
a{
color:black;
}
</style>
</head>
<body>
<p class="p1">text-decoration:overline; 定義文本上的一條線。</p>
<p class="p2">text-decoration:line-through; 定義穿過文本的一條線。</p>
<p class="p3">text-decoration:underline; 定義文本下的一條線。</p>
<br/><br/><br/>
<a href="#">設置文本下的一條線，會被混淆為超鏈接。</a>
<p>設置穿過文本 和 文本下的一條線，類似於 HTML 標簽，<del> del 元素定義已刪除的文本</del> 和 <ins> ins 元素定義新插入的文本</ins>！</p>
</body>
注意：給文本添加修飾，會給用戶帶來困擾，因此建議只將文本修飾屬性用於清除超鏈接的下劃線，其余值要慎用，特別是添加文本下的一條線，用戶會誤認為超鏈接，所以不要強調指出不是鏈接的文本，設置穿過文本和文本上的一條線，也常常會混淆用戶，不明就裡。
①、文本陰影
文本陰影是在 CSS3 中定義的一個文本修飾效果，text-shadow 屬性應用於陰影文本。該屬性有兩個作用，產生陰影和模糊主體。
語法：text-shadow: x y shadow color;
該屬性可以有4個值，其中前2個是必需的值，用來指定陰影的延伸距離，值為長度值，並且允許負值，其中 x 是水平陰影的偏移值，y 是垂直陰影的偏移值。最後2個值都是可選的，shadow 用於指定陰影的模糊值，即模糊效果的作用距離，不允許負值。color 指定陰影的顏色。
<head>
<style>
body{
font-family:"Microsoft YaHei";
}
.demo1{
text-shadow:2px 2px #f00;
}
.demo2{
text-shadow:2px 2px;
}
.demo3{
text-shadow:2px 2px 10px #f00;
}
.demo4{
color:white;
text-shadow:2px 2px 4px #000;
}
.demo5{
text-shadow:0 0 4px #f00;
}
</style>
</head>
<body>
<p class="demo1">基本文字陰影效果</p>
<p class="demo2">只定義2個必需值</p>
<p class="demo3">文字陰影模糊效果</p>
<p class="demo4">白色文本上的陰影</p>
<p class="demo5">霓虹燈效果</p>
<p class="demo5 demo4">霓虹燈效果</p>
</body>
(4)、文本格式
①、文本縮進
文本縮進屬性是用來指定文本的首行縮進，允許為負值，如果值是負數，第一行則向左縮進。從小學寫作文寫日記時，我們都知道每個段落的首行都必須空2個字的大小，也就是縮進2個字，那麼在 CSS 中表示為：text-indent:2em，em 是相對文字大小的單位，1em 就是1個文字大小，2em 就是兩個文字大小。也可以使用 % 定義基於父元素寬度的百分比的縮進，還可以以像素為單位設置縮進。
②、文本間距
文本間距即行高，就是文本行的高度。line-height 屬性用於設置行高，不允許負值。屬性值可以是長度單位，設置固定的行間距。也可以是數字，此數字會與當前的字體尺寸相乘來設置行間距。還可以用 % 設置基於當前字體尺寸的百分比行間距。
③、字間距
letter-spacing 和 word-spacing 這兩個屬性都可用來增加或減少文本間的空白，即字間距。不同的是：letter-spacing 屬性設置字符間距，而 word-spacing 屬性設置單詞間距。屬性值都為長度單位，定義文本間的固定間距，並允許負值。注意：word-spacing 屬性對中文無效，因此在設置中文的字間距時請使用 letter-spacing 屬性。
需要注意：letter-spacing 和 text-align:justify 是兩個沖突的屬性，不能同時使用，text-align:justify 是設置內容根據寬度自動調整字間距，使各行的長度恰好相等，實現文本兩端對齊效果，而 letter-spacing 是指定一個固定的字間距，比如字與字之間相隔 8px，如果這兩個屬性同時使用，那麼既要自動調整字間距，又要按指定的字間距排列，這就相互矛盾了，好比一個人既向左看的同時又向右看，那就神奇了，會出事的。
綜合實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本格式</title>
<style>
*{padding:0;margin:0;}
div{
width:500px;
margin:0 auto;
background-color:lightgray;
}
h1{
color:white;
text-align:center;
text-shadow:0 0 20px green;
}
h2{
color:blue;
text-align:right;
margin:0 50px 10px 0;
}
p{
text-indent:2em;
line-height:1.5;
letter-spacing:1px;
margin:0 10px;
}
</style>
</head>
<body>
<div id="" class="">
<h1>匆匆</h1>
<h2>作者: 朱自清</h2>
<p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時候。但是，聰明的，你告訴我，我們的日子為什麼一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們自己逃走了罷：現在又到了哪裡呢？</p><br/>
<p>我不知道他們給了我多少日子；但我的手確乎是漸漸空虛了。在默默裡算著，八千多日子已經從我手中溜去；像針尖上一滴水滴在大海裡，我的日子滴在時間的流裡，沒有聲音，也沒有影子。我不禁頭涔涔而淚潸潸了。</p><br/>
<p>去的盡管去了，來的盡管來著；去來的中間，又怎樣地匆匆呢？早上我起來的時候，小屋裡射進兩三方斜斜的太陽。太陽他有腳啊，輕輕悄悄地挪移了；我也茫茫然跟著旋轉。於是——洗手的時候，日子從水盆裡過去；吃飯的時候，日子從飯碗裡過去；默默時，便從凝然的雙眼前過去。我覺察他去的匆匆了，伸出手遮挽時，他又從遮挽著的手邊過去，天黑時，我躺在床上，他便伶伶俐俐地從我身上跨過，從我腳邊飛去了。等我睜開眼和太陽再見，這算又溜走了一日。我掩著面歎息。但是新來的日子的影兒又開始在歎息裡閃過了。</p><br/>
<p>在逃去如飛的日子裡，在千門萬戶的世界裡的我能做些什麼呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆裡，除徘徊外，又剩些什麼呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留著些什麼痕跡呢？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，為什麼偏要白白走這一遭啊？</p><br/>
<p>你聰明的，告訴我，我們的日子為什麼一去不復返呢？</p>
</div>
</body>
</html>
④、文本空白處理
white-space 屬性指定元素內的空白如何處理，默認值為 normal 空白會被浏覽器忽略。該屬性還有4個值，nowrap 文本不會換行，禁止換行，文本會在同一行上繼續，直到遇到 <br> 標簽為止。pre 空白會被浏覽器保留，這種方式類似 HTML 中的 <pre> 標簽，用於定義預格式文本。pre-wrap 指定保留空白符序列，但是正常地進行換行。pre-line 指定合並空白符序列，但是保留換行符，並允許自動換行。
<head>
<style>
.p1{
white-space:nowrap;
}
.p2{
white-space:pre;
}
.p3{
white-space:pre-wrap;
}
</style>
</head>
<body>
<p class="p1">white-space:nowrap 指定文本不換行，直到遇到 <br> 標簽。。<mark>1——</mark> 指定文本不換行，直到遇到 <br> 標簽。。<mark>2——</mark> 指定文本不換行，直到遇到 <br> 標簽。。<mark>3——</mark> 指定文本不換行，直到遇到 <br> 標簽。。<mark>4——</mark> 指定文本不換行，直到遇到 <br> 標簽。。<br/><mark>5——</mark> 指定文本不換行，直到遇到 <br> 標簽。。
</p>
<p class="p2">
white-space:pre
空白會被浏覽器保留，該方式類似 HTML 中的 <pre> 標簽。
white-space:pre 空白會被浏覽器保留，該方式
類似 HTML 中的 <pre> 標簽。
</p>
<p class="p3">
white-space:pre-wrap 保留空白符序列，但是正常地進行換行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進 行 換 行。<mark>2——</mark> 保留 空白 符序列，但是 正常地 進行換行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進行換行。
</p>
</body>
(5)、文本轉換
text-transform 屬性控制文本中的字母。文本轉換屬性是用來指定在一個文本中的大寫和小寫字母，可用於將所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
text-transform:capitalize; 定義文本中的每個單詞以大寫字母開頭。text-transform:uppercase; 定義文本僅有大寫字母。text-transform:lowercase; 定義文本僅有小寫字母。
<head>
<style>
.p1{
text-transform:capitalize;
}
.p2{
text-transform:uppercase;
}
.p3{
text-transform:lowercase;
}
</style>
</head>
<body>
<p class="p1">this is some text. 單詞以大寫字母開頭。</p>
<p class="p2">this is some text. 僅有大寫字母。</p>
<p class="p3">This IS SOme Text. 僅有小寫字母。</p>
</body>
font 屬性可用於設置文本字體，定義樣式，如加粗，大小等，屬於復合屬性，也叫做簡寫屬性，可以在一個聲明中設置所有字體屬性。
當使用簡寫屬性時，屬性值的順序依次為：
font-style --> font-variant --> font-weight --> font-size/line-height --> font-family
注意，font-size 和 font-family 的值是必需的，否則無效。如果缺少了其他值，浏覽器將使用默認值。如下：
font:12px/1.5 Tahoma,Arial,Helvetica,"宋體",sans-serif; font:bold 14px/1.5 "Microsoft YaHei",Arial,Tahoma,sans-serif;
font:12px/1.5 表示：font-size:12px，line-height:1.5，即行高為 12px 的 1.5 倍，也就是 150%。
(1)、CSS 字體系列
font-family 屬性設置文本的字體系列。應該始終為 font-family 屬性設置多個字體名稱作為一種 "後備" 機制，如果浏覽器不支持第一種字體，則會嘗試下一種字體。注意：如果字體系列的名稱超過一個字，他必須用引號，如 font-family:"黑體"，中文是也需要加引號，如 font-family:"微軟雅黑" font-family:"宋體"，英文字體名稱可以不用加，如 font-family:Arial，但是如果字體名稱為多個單詞組合，避免浏覽器解析時候把它解析成多個詞匯，因此也需要加引號，如 font-family:"Microsoft YaHei"。引號可以是單引號，也可以是雙引號。如下：
font-family:Arial,"Microsoft YaHei","黑體","宋體",sans-serif; font-family:Helvetica,'Microsoft Yahei','微軟雅黑',Arial,sans-serif;
(2)、字體大小
font-size 屬性用於設置文本的大小。文字的大小在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。因此必須規范使 HTML 標簽，如 <h1> - <h6> 表示標題，<p> 表示段落。如果不指定一個字體的大小，那麼默認大小和普通文本段落一樣，是 16 像素，即 1個漢字 = 16px = 1em。
字體大小的值可以是絕對或相對的大小：
絕對大小：①：指定文字大小。②：不允許用戶在所有浏覽器中改變文字大小。③：確定了輸出的物理尺寸時絕對大小很有用。
相對大小：①：相對於周圍的元素來設置大小。②：允許用戶在浏覽器中改變文字大小。
字體的大小可以使用 px、em，% 和 em 組合來設置。
①、使用 px 設置字體大小
通過像素設置文本大小，可以對字體大小進行完全控制，雖然可以通過浏覽器的縮放工具調整文本大小，但是，這種調整是整個頁面，而不僅僅是文本。
②、使用 em 設置字體大小
em 是 W3C 推薦使用的尺寸單位，可以使用 em 代替 px。1em 等於當前的字體尺寸，在浏覽器中默認的文字大小是 16px，因此，1em 的默認大小是 16px。可以通過下面這個公式將像素轉換為 em：px/16=em
實例：
<head>
<style>
.p1{
font-size:2.5em; /* 40px/16=2.5em */
}
.p2{
font-size:1.25em; /* 20px/16=1.25em */
}
.p3{
font-size:0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p class="p1">我是第一個段落</p>
<p class="p2">我是第二個段落</p>
<p class="p3">我是最後一個段落</p>
</p>
</body>
上面的例子，文字大小設置為 em， 注釋中是像素的轉換，使用 em 單位，可以在所有浏覽器中調整文本大小。
③、使用 % 和 em 組合設置字體大小
在所有浏覽器的解決方案中，設置 <body> 元素的默認字體大小是 100%，可以顯示相同的文本大小，並允許所有浏覽器縮放文本的大小。
<head>
<style>
body{
font-size:100%;
}
.p1{
font-size:2.5em; /* 40px/16=2.5em */
}
.p2{
font-size:1.25em; /* 20px/16=1.25em */
}
.p3{
font-size:0.875em; /* 14px/16=0.875em */
}
</style>
</head>
<body>
<p class="p1">我是第一個段落</p>
<p class="p2">我是第二個段落</p>
<p class="p3">我是最後一個段落</p>
</p>
</body>
(3)、字體樣式
CSS 的 font-style 屬性主要用於指定斜體文字。
這個屬性有三個值：
①：font-style:normal; 該值是默認值，浏覽器顯示一個標准的字體樣式，正常正常顯示文本。
②：font-style:italic; 定義斜體，浏覽器斜體的字體樣式。
③：font-style:oblique; 定義傾斜的文字，和斜體非常類似。
italic 和 oblique 區別：
這兩個值都可以設置文本向右傾斜顯示。一種字體有粗體、斜體、劃線等多種字體屬性，但是一些字體，或許只有正常體，並沒有斜體，這時候就可以用 oblique 定義，他可以讓沒有斜體屬性的文字傾斜，從 CSS 規范中就可以看出，italic 定義的是斜體，而 oblique 定義的是傾斜的文字，注意是傾斜的文字，而不是斜體字，這就是他們的區別。那麼，如果一種字庫中沒有提供斜體字，當使用 italic 時，浏覽器實際上是按 oblique 顯示的。
(4)、字體加粗
font-weight 屬性可用來設置字體的粗細，默認值為 normal 定義標准的字體。最常用的的值是 bold 定義粗體字體。bolder 定義更粗的字體。lighter 定義更細的字體。也可以使用數值指定，從 100 - 900 定義由細到粗的字體，100 對應最細的字體，900 對應最粗的字體，數值 400 等同於 normal，而 700 等同於 bold。
(5)、字體變形
font-variant 屬性設置以小型大寫字體或者正常字體顯示文本。這意味著所有的小寫字母均會被轉換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。該屬性主要用於定義小型大寫字母文本。默認值為 normal 浏覽器會顯示一個標准的字體。small-caps 浏覽器會顯示小型大寫字母的字體。
<head>
<style>
.p1{
font-variant:normal;
}
.p2{
font-variant:small-caps;
}
</style>
</head>
<body>
<p class="p1">Why are you so diao ?</p>
<p class="p2">Why are you so diao ?</p>
<p>Why are you so diao ?</p>
</body>
不同的鏈接可以設置不同的樣式，設置鏈接樣式可以用任何 CSS 屬性（如 color，background，font 等），鏈接的特殊性在於能夠根據它們所處的狀態來設置它們的樣式。
在所有浏覽器中，鏈接的默認外觀如下：
①：未被訪問的鏈接帶有下劃線而且是藍色的。
②：已被訪問的鏈接帶有下劃線而且是紫色的。
③：活動鏈接帶有下劃線而且是紅色的。
文本修飾屬性 text-decoration:none 可用於刪除鏈接中的下劃線。
鏈接的四種狀態是：
①：a:link - 正常，未訪問過的鏈接。
②：a:visited - 已訪問過的鏈接。
③：a:hover - 當鼠標滑動到鏈接上時。
④：a:active - 鏈接被點擊的那一刻。
當為鏈接的不同狀態設置樣式時，必須遵循以下順序規則：
①：a:hover 必須跟在 a:link 和 a:visited 後面。
②：a:active 必須跟在 a:hover後面。
在這四種狀態中，最常被應用到的狀態是 a:hover，:hvoer 是一個 CSS 偽類，在鼠標移動到元素上時添加的特殊樣式，可用於所有元素，不只是鏈接，常被用來做鼠標滑過動畫。當應用到鏈接上時，可以使用列表布局導航欄菜單，也叫選項卡，當鼠標移動到鏈接菜單上時，可以顯示特殊的樣式。
實例創建鏈接框：
<head>
<style>
*{padding:0;margin:0;font:bold 18px '微軟雅黑';}
a{
color:black;
background-color:green;
text-decoration:none;
display:block;
width:120px;
padding:10px;
margin:20px;
text-align:center;
}
a:hover{
color:white;
background-color:lightgray;
text-shadow:0 0 4px red;
}
</style>
</head>
<body>
<a href="#" >CSS 基礎知識</a>
</body>
從某種意義上講，不是描述性的文本的任何內容都可以認為是列表，比如家譜、人口普查、太陽系，甚至你的所有朋友都可以表示為一個列表或者是列表的列表。由於列表如此多樣，這使得列表相當重要，在 HTML 中，有兩種類型的列表：①：無序列表 - 列表項標記用特殊圖形，默認以小黑點樣式顯示。②：有序列表 - 列表項的標記默認以數字樣式顯示。
CSS 列表屬性作用如下：①：設置不同的列表項標記。②：設置列表項標記為圖像。
通過 CSS，可以列出進一步的樣式，並可用圖像作列表項標記。修改列表項標記使用 list-style-type，使用圖像作為標記可以利用 list-style-image 屬性完成。
(1)、無序列表項標記
無序列表可被用來做導航欄菜單，通常都需要隱藏無序列表項的標記，那麼就使用 list-style-type:none，表示無標記。list-style-type 屬性的默認值為 disc 實心圓，即小黑點。
<head>
<style>
ul{
list-style-type:none;
}
</style>
</head>
<body>
<ul>
<li>HTML 超文本標記語言</li>
<li>CSS 層疊樣式表</li>
<li>JavaScript 賦予 HTML 動態交互</li>
<li>jQuery 最好用的JS庫</li>
<li>Bootstrap 前端開發框架</li>
</ul>
</body>
無序列表除了可以無標記之外，還可以修改標記類型，如 circle 空心圓，square 實心方塊。實例：
<head>
<style>
.ul1{
list-style-type:circle;
}
.ul2{
list-style-type:square;
}
</style>
</head>
<body>
<ul class="ul1">
<li>HTML 超文本標記語言</li>
<li>CSS 層疊樣式表</li>
<li>JavaScript 賦予 HTML 動態交互</li>
</ul>
<ul class="ul2">
<li>jQuery 最好用的JS庫</li>
<li>Zepto 兼容 jQuery 語法的移動端JS庫</li>
<li>Bootstrap 前端開發框架</li>
</ul>
</body>
(2)、有序列表項標記
有序列表項標記默認使用數字樣式顯示，即 list-style-type:decimal，也可以將標記項修改為其他類型，cjk-ideographic 則指定漢語數字(表意數字)作為標記。decimal-leading-zero 指定以0開頭的數字作為標記，如 01, 02, 03, 等。lower-roman 指定以小寫羅馬數字作為標記，如 i, ii, iii, iv, v, 等。upper-roman 指定以大寫羅馬數字作為標記，如 I, II, III, IV, V, 等。lower-alpha 指定以小寫英文字母作為標記。upper-alpha 指定以大寫英文字母作為標記。
(3)、圖像作為列表項標記
要指定列表項標記的圖像，可以使用 list-style-image 屬性，只需要簡單地設置一個 url() 值，就可以將圖像作為標記類型。
<head>
<style>
ul{
list-style-image:url('images/ul-icon.jpg');
}
</style>
</head>
<body>
<ul>
<li>HTML 超文本標記語言</li>
<li>CSS 層疊樣式表</li>
<li>JavaScript 賦予 HTML 動態交互</li>
<li>jQuery 最好用的JS庫</li>
<li>Bootstrap 前端開發框架</li>
</ul>
</body>
(4)、列表項標記的位置
list-style-position 屬性可以設置列表中列表項標記的位置。默認值為 outside 保持標記位於文本的左側，列表項標記放置在文本以外，且環繞文本不根據標記對齊。inside 則指定列表項目標記放置在文本以內，且環繞文本根據標記對齊。如下：
<head>
<style>
.ul1{
list-style-position:outside;
}
.ul2{
list-style-position:inside;
}
li{
margin:5px;
border:2px solid red;
}
</style>
</head>
<body>
<ul class="ul1">
<li>HTML 超文本標記語言</li>
<li>CSS 層疊樣式表</li>
<li>JavaScript 賦予 HTML 動態交互</li>
<li>jQuery 最好用的JS庫</li>
<li>Bootstrap 前端開發框架</li>
</ul>
<ul class="ul2">
<li>HTML 超文本標記語言</li>
<li>CSS 層疊樣式表</li>
<li>JavaScript 賦予 HTML 動態交互</li>
<li>jQuery 最好用的JS庫</li>
<li>Bootstrap 前端開發框架</li>
</ul>
</body>
在上面例子中，使用了2個無序列表，第一個列表項標記位置為默認，第二個列表項標記被放置在文本以內，為了增強演示效果，給每個列表項都設置外邊距和邊框，在浏覽器中可以很直觀的看到二者的不同，默認值的標記在邊框外，而 inside 則在邊框內，還有一點需要注意：在 Chrome 和 Firefox 中這兩個值的標記位置與列表項之間的空白都是相等的，而在 IE 中可以很明顯的看到，使用 inside 值後，標記位置與列表項之間的空白比默認值寬。
(5)、列表屬性簡寫
在單個屬性中可以指定所有的列表屬性，可以將以上 3 個列表樣式屬性合並為一個方便的屬性：list-style。
當使用簡寫屬性時，屬性值的順序依次為：
list-style-type --> list-style-position --> list-style-image
可以不設置其中的某個值，比如 list-style:square inside 也是允許的，未設置的屬性將使用默認值。
無序列表項的標記在隱藏時，使用簡寫屬性，且考慮到浏覽器的兼容性，可以定義為：list-style:none outside none; 或者不設置第三個值也好。
使用 CSS 可以大大的提高 HTML 表格的外觀。
(1)、表格邊框
給表格設置邊框，可以使用 CSS 的 border 屬性定義，也可以使用表格標簽的 border 屬性定義。如下：
<head>
<style>
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>粗糧</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td>大豆</td>
<td>黃瓜</td>
<td>香蕉</td>
</tr>
<tr>
<td>高粱</td>
<td>菠菜</td>
<td>檸檬</td>
</tr>
</table>
</body>
注意，這樣設置的表格具有雙線條邊框，這是由於 table、th 以及 td 元素都有獨立的邊框。為了顯示一個單線條邊框的表格，就使用 border-collapse 屬性。
(2)、折疊邊框
border-collapse 屬性設置是否將表格邊框合並為單一線條的邊框。該屬性的默認值為 separate 邊框會分開顯示，不會忽略 border-spacing 和 empty-cells 屬性。collapse 如果可能，邊框會合並為一個單一的邊框，該值會忽略 border-spacing 和 empty-cells 屬性，即設置這兩個屬性無效。如下：
<head>
<style>
table{
border-collapse:collapse;
}
table,th,td{
border:1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>粗糧</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td>大豆</td>
<td>黃瓜</td>
<td>香蕉</td>
</tr>
<tr>
<td>高粱</td>
<td>菠菜</td>
<td>檸檬</td>
</tr>
</table>
</body>
border-spacing 屬性用於設置相鄰單元格的邊框間的距離，僅用於邊框分離模式，即雙線條邊框表格。使用 px、cm 等單位指定距離，不允許使用負值。如果定義一個參數，那麼定義的是水平和垂直間距。如果定義兩個參數，那麼第一個設置水平間距，而第二個設置垂直間距。
empty-cells 屬性設置是否顯示表格中的空單元格，僅用於邊框分離模式，即雙線條邊框表格。該屬性用於定義不包含任何內容的表格單元格如何顯示，如果顯示，就會繪制出單元格的邊框和背景。該屬性的默認值為 show 在單元格周圍繪制邊框，hide 不在單元格周圍繪制邊框。
除非表格的邊框顯示為雙線條邊框，否則這兩個屬性都無效。
<head>
<style>
.tab1{
empty-cells:hide;
border-spacing:10px;
}
.tab2{
border-spacing:20px 50px;
margin-top:20px;
}
</style>
</head>
<body>
<table border="1" class="tab1">
<tr>
<th>粗糧</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td></td>
<td>黃瓜</td>
<td></td>
</tr>
<tr>
<td>高粱</td>
<td></td>
<td>檸檬</td>
</tr>
</table>
<table border="1" class="tab2">
<tr>
<th>粗糧</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
<tr>
<td></td>
<td>黃瓜</td>
<td></td>
</tr>
<tr>
<td>高粱</td>
<td></td>
<td>檸檬</td>
</tr>
</table>
</body>
(3)、表格寬度和高度
width 和 height 屬性定義表格的寬度和高度。
(4)、表格對齊
text-align 和 vertical-align 屬性用於設置表格中文本的對齊方式。
①、text-align 屬性設置水平對齊方式，比如左對齊，右對齊和居中。
②、vertical-align屬性設置垂直對齊方式，比如頂部對齊，底部對齊或中間對齊。
vertical-align:top; 頂部對齊。vertical-align:middle; 中間對齊。vertical-align:bottom; 底部對齊。
caption-side 屬性可以設置表格標題的位置，默認值為 top 將標題定位在表格之上，bottom 可以把表格標題定位在表格之下。
(5)、表格內邊距
如果需要控制表格中內容與邊框的距離，就應該增加內容的內邊距，即為 td 和 th 元素設置 padding 屬性。
(6)、表格顏色
可以為表格的邊框指定邊顏色，也可以為表頭以及單元格指定背景顏色，還可以設置文本的顏色。
綜合實例：
<head>
<style>
#tab{
width:50%;
font-family:"微軟雅黑";
border-collapse:collapse;
}
#tab th,#tab td{
border:1px solid #7AC942;
padding:5px 10px;
}
#tab th{
color:white;
background-color:#9C3;
font-size:1.125em;
text-align:left;
padding-top:4px;
padding-bottom:8px;
}
#tab .list td{
color:#000;
background-color:#FFC;
}
caption{
margin-bottom:10px;
font-weight:bold;
font-size:1.5em;
}
</style>
</head>
<body>
<table id="tab">
<caption>食物類別</caption>
<thead>
<tr class="list">
<th>粗糧</th>
<th>蔬菜</th>
<th>水果</th>
</tr>
</thead>
<tbody>
<tr>
<td>大豆</td>
<td>黃瓜</td>
<td>香蕉</td>
</tr>
<tr class="list">
<td>高粱</td>
<td>菠菜</td>
<td>檸檬</td>
</tr>
<tr>
<td>玉米</td>
<td>辣椒</td>
<td>芒果</td>
</tr>
<tr class="list">
<td>燕麥片</td>
<td>白菜</td>
<td>西瓜</td>
</tr>
</tbody>
</table>
</body>
(1)、分組選擇器
在樣式表中有很多具有相同樣式的元素，比如標題和段落的文字都顯示為灰色，如下：
h1{color:gray;}
p{color:gray;}
為了盡量減少代碼，讓樣式表更加簡潔，就可以使用分組選擇器，每個選擇器用逗號分隔，這樣就定義了一個規則，如下：
h1, p{color:gray;}
上面代碼中，右邊的樣式屬性將會應用到這兩個選擇器指定的元素，逗號是在告訴浏覽器，規則中包含兩個不同的選擇器，如果沒有這個逗號，那麼規則的含義將完全不同，為後代選擇器，也叫包含選擇器，這時候選擇的就是作為某元素後代的元素，即包含在某元素中的所有指定的後代元素，且包括子元素、孫元素、曾孫元素等等。
可以將任意多個選擇器分組在一起，如下：
h1, h2, h3, h4, h5, h6, p{color:red;}
如果需要為 HTML 中多個標簽元素設置同一個樣式時，就可以使用分組選擇符（,）。
(2)、通配符選擇器
通配符選擇器是在 CSS2 中定義的一種簡單選擇器，用 * 表示，該選擇器可以與任何元素匹配，通常在做頁面測試時可用於初始化頁面樣式，如下：
*{
padding:0;
margin:0;
}
還可以加入其他需要初始化的樣式，這個樣式聲明等同於列出了頁面中所有元素的一個分組選擇器，利用通配符選擇器，只需要一個 * 就能將文檔中所有元素的樣式設置為自定義。
(3)、嵌套選擇器
使用嵌套選擇器，他能夠應用於選擇器內部的選擇器的樣式。如下：
<head>
<style>
p{
color:blue;
text-align:center;
}
.div1{
background-color:red;
}
.div1 p{
color:white;
}
.div1 p a{
color:yellow;
font-weight:bold;
}
</style>
</head>
<body>
<p>元素選擇器</p>
<div class="div1">
<p>嵌套選擇器
<a href="#">深層嵌套選擇器</a>
</p>
</div>
<p>元素選擇器</p>
</body>
在上面的例子，創建了4個 CSS 樣式規則，所有 p 元素的字體設置為藍色並居中顯示。再將所有 class 為 "div1" 的元素背景設置為紅色。第三項聲明是把這個 class 類中的 p 元素字體設置為白色，並且還擁有兩個樣式，一個是為所有 p 元素設置的居中顯示，另一個是父元素 div 設置的紅色背景。最後一項聲明，是為類中 p 元素的子元素設置字體為黃色且加粗顯示，並擁有祖先元素的紅色背景樣式。
使用嵌套選擇器的好處就是不需要單獨給 class 為 div1 的元素內的 p 元素內的 a 元素單獨定義 class 選擇器或者 ID 選擇器，這樣代碼就少了，並達到了優化代碼的目的。嵌套選擇器也可以叫做後代選擇器。
屬性選擇器可以為具有特定屬性的 HTML 元素樣式，而不僅僅是 class 和 id。
(1)、屬性選擇器
屬性選擇器使用：[attr]
下面的例子是把所有帶有 title 屬性的元素的字體設置為紅色：
<head>
<style>
[title]{
color:red;
}
</style>
</head>
<body>
<h1>h1 標題不帶有 title 屬性</h1>
<h2 title="標題">h2 可以設置樣式</h2>
<a href="#" title="鏈接">超鏈接可以設置樣式</a>
</body>
(2)、屬性和值選擇器
屬性選擇器使用：[attr=value]
下面的例子是把所有 title='Hello' 的元素的字體設置為藍色：
<head>
<style>
[title=Hello]{
color:blue;
}
</style>
</head>
<body>
<h1 title="Hello world">h1 標題 title="Hello world"</h1>
<h2 title="Hello">h2 可以設置樣式</h2>
<a href="#" title="Hello">超鏈接可以設置樣式</a>
</body>
(3)、屬性和多個值的選擇器
屬性和多個值的選擇使用有兩種情況：
屬性值用空格分隔使用：[attr~=value]
屬性值用連字符分隔則使用：[attr|=value]
下面的例子是把包含 title='Hello' 的元素的字體設置為綠色，使用 ~ 分隔屬性和值：
<head>
<style>
[title~=Hello]{
color:green;
}
</style>
</head>
<body>
<h1 title="world">h1 標題 title="world"</h1>
<h2 title="Hello">h2 可以設置樣式</h2>
<h3 title="Hello Web">h3 可以設置樣式</h2>
<a href="#" title="Hello world">超鏈接可以設置樣式</a>
</body>
下面的例子是把包含 lang=zh 屬性的元素的字體設置為灰色，使用 | 分隔屬性和值：
<head>
<style>
[lang|=zh]{
color:gray;
}
</style>
</head>
<body>
<h1 lang="en">h1 語言屬性 lang="en"</h1>
<h2 lang="zh-CN">h2 可以設置樣式</h2>
<h3 lang="zh-HK">h3 可以設置樣式</h3>
<a href="#" lang="zh-TW">超鏈接可以設置樣式</a>
</body>
(4)、表單樣式
屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用。如下：
<head>
<style>
input[type="text"]{
width:150px;
display:block;
margin-bottom:5px;
background-color:yellow;
}
input[type="button"]{
width:120px;
margin-top:5px;
background-color:green;
}
</style>
</head>
<body>
<form name="input" action="demo.php" method="get">
用戶名：<input type="text" name="user" placeholder="請輸入登錄名">
昵 稱：<input type="text" name="name" placeholder="請輸入角色名">
<input type="button" value="查詢">
</form>
</body>
CSS 組合選擇符是包括各種簡單選擇器的組合方式，組合選擇符說明了兩個選擇器直接的關系。
在 CSS3 中包含了四種組合方式：
①：後代選擇器，以空格分隔。
②：子元素選擇器，以 > 分隔。
③：相鄰兄弟選擇器，以 + 分隔。
④：普通兄弟選擇器，以 ~ 分隔。
(1)、後代選則器
後代選則器又稱為包含選擇器，可以選擇作為某元素後代的元素，並且包括子元素、孫元素、曾孫元素等等。
下面的實例是把所有包含在 div 元素內的 a 元素的字體設置為紅色：div a
<head>
<style>
div a{
color:red;
}
</style>
</head>
<body>
<a href="">鏈接不在 div 中</a>
<div>
<a href="">div 中第一個子元素 a，顯示為紅色</a>
<p>div 中第二個子元素 p<br/>
<a>p 元素的子元素 a，該元素是 div 元素的孫元素，顯示為紅色</a>
</p>
<a href="">div 中第三個子元素 a，顯示為紅色</a>
</div>
<a href="">鏈接不在 div 中</a>
</body>
(2)、子元素選擇器
與後代選擇器相比，子元素選擇器只能選擇作為某元素子元素的元素，不包括孫元素、曾孫元素等等。如果不希望選擇任意的後代元素，而是只選擇某個元素的子元素，那麼就使用子元素選擇器。
下面的實例是把 div 元素中所有直接子元素 a 的字體設置為紅色：div>a
<head>
<style>
div>a{
color:red;
}
</style>
</head>
<body>
<div>
<a href="">div 中第一個子元素 a，顯示為紅色</a>
<p>div 中第二個子元素 p<br/>
<a>p 元素的子元素 a，該元素是 div 元素的孫元素</a>
</p>
<a href="">div 中第三個子元素 a，顯示為紅色</a>
</div>
</body>
總結：> 作用於元素的第一代後代，空格 作用於元素的所有後代。
(3)、相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另一元素後的元素，且二者有相同父元素。如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，就可以使用相鄰兄弟選擇器。
下面的實例選取了所有位於 div 元素後的第一個 p 元素：div+p
<head>
<style>
div+p{
background-color:red;
}
</style>
</head>
<body>
<p>body 的第一個子元素 p</p>
<div>body 的第二個子元素 div
<p>div 中第一個子元素 p</p>
<div>
<p>div 中第二個子元素 div 的子元素 p</p>
</div>
<p>div 中第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 div</p>
</div>
<p>body 的第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 body</p>
<p>body 的第四個子元素 p，是 div 的普通兄弟元素</p>
</div>
</body>
(4)、普通相鄰兄弟選擇器
普通兄弟選擇器選取所有指定元素的相鄰兄弟元素。
下面的實例選取了所有 div 元素的所有相鄰兄弟元素 p : div~p
<head>
<style>
div~p{
background-color:red;
}
</style>
</head>
<body>
<p>body 的第一個子元素 p</p>
<div>body 的第二個子元素 div
<div>div 元素下的第一個子元素 div</div>
<p>div 的相鄰兄弟元素</p>
<p>div 的普通兄弟元素</p>
<p>div 的普通兄弟元素</p>
</div>
<p>body 下 div 的相鄰兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
<p>body 下 div 的普通兄弟元素</p>
</body>
(5)、選擇器組合
多種選擇器可以結合起來使用，如下：
html>body div+p{
color:gray;
}
這個選擇器解釋為：選擇緊接在 div 元素後出現的所有兄弟 p 元素，該 div 元素包含在一個 body 元素中，即是 body 元素的子元素，body 元素本身屬於 html 元素的子元素。
div.list p>a{
color:red;
}
這個選擇器解釋為：選擇作為 p 元素的所有子元素 a，這個 p 元素本身是 div 元素的後代，該 div 元素包含一個 class 為 list 的屬性。簡單說就是選擇包含在 class 為 list 的 div 元素內的所有後代 p 元素內的所有直接子元素 a。
CSS 偽類是用來向一些選擇器添加特殊的效果。
偽類的語法：選擇器:偽類{attr:value;}
CSS 類也可以使用偽類：選擇器.class:偽類{attr:value;}
注意：偽類的名稱不區分大小寫。
(1)、超鏈接偽類
在浏覽器中，鏈接的不同狀態都可以以不同的方式顯示：
a:link{color:#FF0000;} /* 未訪問的鏈接顯示為紅色 */
a:visited{color:#00FF00;} /* 已訪問的鏈接顯示為綠色 */
a:hover{color:#FF00FF;} /* 鼠標劃過鏈接顯示為紫紅色 */
a:active{color:#0000FF;} /* 已選中的鏈接顯示為藍色 */
注意： 在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，a:active 必須被置於 a:hover 之後，才是有效的。
鏈接的默認樣式為：未訪問過的顯示為藍色，已訪問的顯示為紫色，已選中的鏈接顯示為紅色。
(2)、偽類和 CSS 類
偽類可以與 CSS 類配合使用，下面的實例，設置已訪問過的鏈接為紅色：
<head>
<style>
a.tint:visited{
color:red;
}
</style>
</head>
<body>
<a href="#">超鏈接</a>
<a class="tint" href="#">超鏈接</a>
</body>
(3)、CSS2 - :first - child 偽類
可以使用 :first-child 偽類來選擇元素的第一個子元素。
①、選擇作為任何元素的第一個子元素 p。選擇器使用 p:first-child
<head>
<style>
p:first-child{
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p>第一個 p 元素</p>
<p>第二個 p 元素</p>
<p>第三個 p 元素</p>
</body>
②、選擇所有 p 元素中的第一個子元素 b。選擇器使用 p>b:first-child
<head>
<style>
p>b:first-child{
color:red;
}
</style>
</head>
<body>
<p>第<b>一個</b> p <b>元素</b></p>
<p>第<b>二個</b> p <b>元素</b></p>
<p>第<b>三個</b> p <b>元素</b></p>
</body>
③、選擇所有作為第一個子元素 p 中的所有 b 元素。選擇器使用 p:first-child b
<head>
<style>
p:first-child b{
color:red;
}
</style>
</head>
<body>
<p>第<b>一個</b> p <b>元素</b></p>
<p>第<b>二個</b> p <b>元素</b></p>
<p>第<b>三個</b> p <b>元素</b></p>
</body>
(4)、CSS2 - :lang 偽類
使用 :lang 偽類可以為不同的語言定義特殊的規則。如下：
html:lang(zh-CN){
color:blue;
}
:lang(en)>p{
color:gray;
}
上面例子中的 :lang 偽類，定義了 HTML 文檔為 zh-CN 的語言的文字樣式，以及任何元素的 p 元素內為 en 的語言的樣式。
CSS 偽元素是用來為一些選擇器添加特殊的效果。
偽元素的語法：選擇器:偽元素{attr:value;}
CSS 類也可以使用偽元素：選擇器.class:偽元素{attr:value;}
(1)、CSS2 - :before 偽元素
:before 偽元素可以在元素的內容前面插入新內容。
下面的例子在每個 h1 元素前面插入一幅圖片：
h1:before{
content:url(images/logo.gif);
}
(2)、CSS2 - :after 偽元素
:after 偽元素可以在元素的內容之後插入新內容。
下面的例子在每個 h1 元素後面插入一幅圖片：
h1:after{
content:url(images/logo.gif);
}
content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容，該屬性用於定義元素之前或之後放置的生成內容。默認的，這往往是行內內容，不過該內容創建的框類型可以用 display 屬性控制。content 的內容一般可以為以下四種：
①、content:none 該值是默認值，不插入內容。
②、content:"string" 插入文本。
③、content:attr(屬性) 插入標簽屬性值。
④、content:url(路徑) 使用指定的絕對或相對地址插入一個外部資源，可以是圖像，音頻，視頻或浏覽器支持的其他任何資源。
實例：
①、插入文本：
<head>
<style>
h1:after{
content:"我是 h1 標題";
}
h2:after{
content:"(我是 h2 標題)";
}
</style>
</head>
<body>
<h1>插入文本</h1>
<h2>插入文本</h2>
</body>
注意：在插入文本時，可以給插入的內容帶上括號。
②、插入屬性值：
<head>
<style>
a:after{
content:"("attr(href)")";
}
h1:after{
content:attr(title);
}
</style>
</head>
<body>
<a href="https://www.demo.com">插入屬性值</a>
<h1 title="h1 標題">插入屬性值</h1>
</body>
注意：在插入屬性值時，可以給插入的內容帶上括號。
使用插入屬性值，還可以實現圖片滑過展示屬性值的動畫效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片動畫效果</title>
<style>
#demo li{
float:left;
overflow:hidden;
list-style:none outside;
margin-right:20px;
position:relative;
}
#demo li a:after{
content:attr(title);
position:absolute;
top:0;
left:0;
width:100%;
line-height:30px;
text-align:center;
color:white;
background-color:rgba(0,0,0,0.3); /* rgba 前三個參數為顏色值，最後一個值 a 代表透明度值。背景色為黑色，透明度值為 0.3 */
text-shadow:0 0 2px red; /* 文字陰影效果 */
opacity:0; /* 初始透明度為 0 */
transition:all 0.5s ease; /* 過渡效果 */
}
#demo li a:hover:after{
top:50%;
margin-top:-20px;
opacity:1;
}
</style>
</head>
<body>
<ul id="demo">
<li><a href="#" title="彼岸流年"><img src="images/one.jpg" alt="12"></a></li>
<li><a href="#" title="時光清淺"><img src="images/two.jpg" alt="22"></a></li>
</ul>
</body>
</html>
③、可以使用 content 屬性的 open-quote 屬性值和 close-quote 屬性值在字符串兩邊添加如括號、單引號、雙引號之類的嵌套文字符號。
open-quote 用於添加開始的文字符號，close-quote 用於添加結束的文字符號。
no-open-quote 如果指定該屬性值，則移除內容的開始符號，no-close-quote 如果指定該屬性值，則移除內容的結束符號。
<head>
<style>
h1{
quotes:"(" ")"; /* 利用 quotes 屬性指定文字符號 */
}
h1:before{
content:open-quote;
}
h1:after{
content:close-quote;
}
h2{
quotes:"\"" "\""; /* 添加雙引號需要轉義 */
}
h2:before{
content:open-quote;
}
h2:after{
content:close-quote;
}
</style>
</head>
<body>
<h1>插入文本</h1>
<h2>插入文本</h2>
</body>
④、利用 content 的 counter 屬性值可以設定計數內容，針對多個項目追加連續編號。
<head>
<style>
h1:before{
content:counter(num)"."; /* 設置計數器內容 */
}
h1{
counter-increment:num; /* 設置計數內容每次出現的計數器增量，默認增量是 1 */
}
</style>
</head>
<body>
<h1>h1 標題</h1>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
</body>
默認插入的項目編號是數字型：1,2,3... 自動遞增，也可以給項目編號設置文字和樣式：
h1:before{
content:"我是第" counter(num) "節內容："; /* 設置計數器內容 */
color:red;
}
h1{
counter-increment:num; /* 設置計數內容每次出現的計數器增量，默認增量是 1 */
}
也可以指定編號類型，語法：content:counter(name, list-style-type);
h1:before{
content:counter(num,upper-roman)'、'; /* 設置計數器編號為大寫羅馬數字 */
color:red;
}
h1{
counter-increment:num; /* 設置計數器每次出現的計數器增量，默認增量是 1 */
}
⑤、編號還可以實現嵌套，即大編號中嵌套中編號，中編號中嵌套小編號。
<head>
<style>
h1:before{
content:counter(h)'.'; /* 設置計數器編號為大寫羅馬數字 */
color:red;
}
h1{
counter-increment:h; /* 設置計數器每次出現的計數器增量，默認增量是 1 */
}
p:before{
content:counter(p)'.';
}
p{
counter-increment:p;
margin-left:20px;
}
</style>
</head>
<body>
<h1>h1 標題</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
注意，在上面的實例中，所有段落的編號是連續的，這樣的顯示效果並不理想，對每一個標題都的段落重新編號可以使用 counter-reset 屬性重置，該屬性用於設置計數器出現次數的計數器的值，默認為 0。
h1:before{
content:counter(h)'.'; /* 設置計數器編號為大寫羅馬數字 */
color:red;
}
h1{
counter-increment:h; /* 設置計數器每次出現的計數器增量，默認增量是 1 */
counter-reset:p; /* 設置計數器出現次數，默認為 0 */
}
p:before{
content:counter(p)'.';
}
p{
counter-increment:p;
margin-left:20px;
}
還可以實現更復雜的嵌套，如下面的例子，三層嵌套編號：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>計數器深層嵌套</title>
<style>
h1:before{
content:counter(h1) '、';
color:blue;
}
h1{
counter-increment:h1;
counter-reset:h2;
}
h2:before{
content:counter(h1) '.' counter(h2) '、';
color:gray;
}
h2{
counter-increment:h2;
counter-reset:h3;
margin-left:20px;
}
h3::before{
content:counter(h1) '.' counter(h2) '-' counter(h3) '、';
color:red;
}
h3{
counter-increment:h3;
counter-reset:p;
margin-left:60px;
}
p:before{
content:counter(p) '.';
font-weight:bold;
}
p{
counter-increment:p;
margin-left:80px;
}
</style>
</head>
<body>
<h1>h1 標題</h1>
<h2>h2 標題</h2>
<h3>h3 標題</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<h2>h2 標題</h2>
<h3>h3 標題</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<h2>h2 標題</h2>
<h3>h3 標題</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<h2>h2 標題</h2>
<h3>h3 標題</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<h1>h1 標題</h1>
<h2>h2 標題</h2>
<h3>h3 標題</h3>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</body>
</html>
(3)、:first-line 偽元素
:first-line 偽元素用於向文本的首行設置特殊樣式。
下面的例子，浏覽器會根據 :first-line 偽元素中的樣式對 p 元素的第一行文本進行格式化：
p:first-line{
color:white;
background-color:green;
font:18px '宋體';
}
注意：:first-line 偽元素只能用於塊級元素，下面的屬性可應用於 :first-line 偽元素：
①、font
②、color
③、background
④、line-height
⑤、clear
⑥、vertical-align
⑦：text-decoration
⑧：text-transform
⑨、letter-spacing
⑩、word-spacing
(4)、:first-letter 偽元素
:first-letter 偽元素用於向文本的首字母設置特殊樣式。
p:first-letter{
color:red;
font-size:18px;
text-transform:uppercase;
}
注意：:first-letter 偽元素只能用於塊級元素，下面的屬性可應用於 "first-letter" 偽元素：
①、font、color、background、line-height、clear、vertical-align (only if "float" is "none")、text-decoration、text-transform
以上8個屬性和 :first-line 偽元素相同，除了 letter-spacing 和 word-spacing 之外。
②、float
③、margin
④：padding
⑤：border
(5)、偽元素和 CSS 類
偽元素可以與 CSS 類配合使用。
下面的例子，會對所有 class 為 active 的段落的首行進行格式化：
p.active:first-line{
color:red;
font-size:18px;
}
(6)、多偽元素
多重偽元素即可以結合多個偽元素來使用。
下面的例子，段落的第一個字母將顯示為紅色，其字體大小為 20px。第一行中的其余文本將為藍色，並帶有下劃線裝飾效果。段落中的其余文本將以默認字體大小和顏色顯示：
<head>
<style>
p:first-letter{
color:red;
font-size:20px;
}
p:first-line{
color:blue;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1>
<p>The moon belongs to everyone，best things in life they're free，stars belong to everyone，they cling there for you and for me.Love can come to everyone，best things in life they're free，all of the good things，every one of the better things.</p>
<p>The best things in life are free, and the second best things are very, very expensive.</p>
</body>