CSS 基本知識
一、CSS 簡介
CSS 指層疊樣式表 (Cascading Style Sheets)，是一種用來表現 HTML 文檔樣式的語言，樣式定義如何顯示 HTML 元素，是可以真正作到網頁表現與結構分離的一種樣式設計語言。樣式一般存儲在樣式表中，外部樣式表一般存儲在 CSS 文件中，多個樣式定義可層疊爲一。php
HTML 標籤被設計爲用於定義文檔內容，也就是文檔結構，爲了加強代碼的可讀性，實現網頁結構與表現相分離的原則，萬維網聯盟（W3C），肩負起了 HTML 標準化的使命，並在 HTML4 以外創造出樣式（Style）。CSS 目前最新版本是 CSS3，相對於傳統 HTML 的表現而言，CSS 可以對網頁中對象的位置排版進行像素級的精確控制，擁有對網頁對象編輯的能力，易於維護和改版，提升頁面瀏覽速度，使用 CSS 佈局頁面更符合 W3C 標準，他是目前基於文本展現最優秀的表現設計語言。css
CSS 樣式表極大地提升了工做效率：樣式一般保存在外部的 .css 文件中，經過僅僅編輯一個簡單的 CSS 文檔，外部樣式表有能力同時改變站點中全部頁面的佈局和外觀。html
二、CSS 語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。以下：前端
1 p{ 2 color:red; 3 text-indent:2em; 4 }
選擇器就是須要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每一個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明老是以分號 ; 結束，聲明組以大括號 {...} 括起來。爲了讓 CSS 可讀性更強，能夠每行只描述一個屬性。算法
CSS 註釋是用來解釋代碼，而且能夠隨意編輯，瀏覽器會忽略它。CSS註釋以 "/*" 開始，以 "*/" 結束。以下：api
1 p{ 2 color:red; 3 text-indent:2em; /* 段落縮進2個字，即段落開頭空2個漢字的位置。 */ 4 }
三、建立 CSS
當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。CSS 建立樣式表有三種方法：內聯樣式、內部樣式、外部樣式。瀏覽器
(1)、內聯樣式框架
內聯樣式也叫行內樣式或者行間樣式，即在相關標籤內使用樣式（style）屬性定義。以下：編輯器
<div style="width:200px;height:100px;border:1px solid black;"></div>
因爲要將表現和內容混雜在一塊兒，內聯樣式會損失掉樣式表的許多優點。所以須要慎用這種方法，例如當樣式僅須要在一個元素上應用一次時，可使用內聯樣式。要使用內聯樣式，須要在相關的標籤內使用樣式屬性定義，style 屬性能夠包含任何 CSS 屬性。ide
(2)、內部樣式
內部樣式也叫內嵌樣式，即在文檔中建立內嵌的樣式表，須要使用 <style> 標籤在文檔頭部定義內部樣式表，以下：
1 <head> 2 <style> 3 div{ 4 width:200px; 5 height:100px; 6 border:1px solid black; 7 } 8 p{ 9 color:blue; 10 font-size:14px; 11 } 12 span{ 13 color:black; 14 font-weight:bold; 15 } 16 </style> 17 </head>
當單個文檔須要特殊的樣式時，就應該使用內部樣式表。
(3)、外部樣式
外部樣式也叫作外聯樣式，即便用 <link> 標籤連接到外部樣式表，以下：
1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css"> 3 </head>
當樣式須要應用於不少頁面時，外部樣式表將是理想的選擇，在使用外部樣式表的狀況下，能夠經過改變一個文件來改變整個站點的外觀。每一個頁面使用 <link> 標籤連接到樣式表，瀏覽器會從文件 style.css 中讀到樣式聲明，並根據它來格式化文檔。注意：<link> 標籤中 rel="stylesheet" type="text/css" 是固定代碼格式，不可更改。
外部樣式表能夠在任何文本編輯器中進行編輯，樣式文件不能包含任何的 HTML 標籤，樣式表以 .css 擴展名進行保存。注意：不要在屬性值與單位之間留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，那麼它在不一樣的瀏覽器中可能沒法正常工做，致使意向不到的結果。
(4)、樣式優先級
樣式優先級，也能夠稱爲層疊次序，即同一個 HTML 元素不止被一個樣式定義時，會優先使用哪一個樣式。通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中：
內聯樣式 > 內部樣式 > 外部樣式
內聯樣式（在 HTML 元素內部）擁有最高的優先權，即優先採用在元素內部定義的樣式信息，而後是內部樣式表（位於 <head> 標籤內部），最後是外部樣式表中的樣式聲明，瀏覽器中的樣式聲明（缺省值）同外部樣式處於同一層次。
優先級的順序是有一個前提的，即內聯樣式、內部樣式、外部樣式表中 CSS 樣式是在的相同權值的狀況下。
可是內部樣式 > 外部式也有一個前提，即內部樣式的位置必定在外部樣式的後面。以下：
1 <link rel="stylesheet" type="text/css" href="css/style.css"> 2 <style> 3 ... 4 </style>
(5)、多重樣式
樣式表容許以多種方式規定樣式信息，樣式能夠規定在單個的 HTML 元素中，或在 HTML 頁的 <head> 元素中，亦或在一個外部的 CSS 文件中，甚至能夠在同一個 HTML 文檔內部引用多個外部樣式表，可是最終多重樣式將被層疊爲一個。那就意味着：若是你使用了外部文件的樣式，在 <head> 中也定義了該樣式，那麼內部樣式會取代外部文件中的樣式。
四、id 和 class 選擇器
若是要給 HTML 元素設置 CSS 樣式，則須要在元素中設置 "id" 和 "class" 屬性，該屬性用做選擇器。
(1)、id 選擇器
id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式，id 屬性和身份證同樣具備惟一性。HTML元素以 id 屬性來設置 id 選擇器，CSS 中 id 選擇器以 "#" 來定義。注意： id 屬性不能以數字開頭。
1 <head> 2 <style> 3 #heading{ 4 color:red; 5 text-align:center; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 id="heading">CSS 選擇器</h1> 11 </body>
(2)、class 選擇器
class 選擇器用於描述一組元素的樣式，也叫作類選擇器，class 選擇器有別於 id 選擇器，class 能夠在多個元素中使用，而且一個元素也能夠指定多個類名。class 選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個點 "." 號來定義。能夠設置全部帶有指定 class 的 HTML 元素，也能夠指定特定的 HTML 元素使用 class。注意：類名的第一個字符也不能使用數字。
實例：全部擁有 center 類的 HTML 元素均爲居中顯示。
1 <head> 2 <style> 3 .center{ 4 text-align:center; 5 } 6 .col{ 7 color:red; 8 } 9 .font{ 10 font-size:18px; 11 font-family:"Microsoft YaHei"; 12 } 13 </style> 14 </head> 15 <body> 16 <h1 class="center">class 選擇器</h1> 17 <p class="center col">我是一個段落。</p> 18 <p class="center font">我是另外一個段落。</p> 19 </body>
實例：全部的 p 元素使用 class="center"，讓該元素的文本居中。
1 <head> 2 <style> 3 .center{ 4 color:blue; 5 } 6 p.center{ 7 text-align:center; 8 } 9 p.col{ 10 color:red; 11 } 12 .font{ 13 font-size:18px; 14 font-weight:bold; 15 font-family:"Microsoft YaHei"; 16 } 17 </style> 18 </head> 19 <body> 20 <h1 class="center col">class 選擇器</h1> 21 <p class="center col">我是一個段落。</p> 22 <p class="center col font">我是另外一個段落。</p> 23 <h2 class="center">h2 標題</h2> 24 </body>
(3)、ID 選擇器和類（class）選擇器的區別
相同點：能夠應用於任何元素。
不一樣點：
①、ID 選擇器只能在文檔中使用一次。與類選擇器不一樣，在一個 HTML 文檔中，ID 選擇器只能使用一次，並且僅一次。而類選擇器可使用屢次。
②、可使用類選擇器詞列表方法爲一個元素同時設置多個樣式。在一個 HTML 文檔中，能夠爲一個元素同時設置多個樣式，但只能夠用類選擇器的方法實現，ID 選擇器是不能夠的，不能使用 ID 詞列表，即一個元素能夠指定多個類名，如 <span class="one two three">文本</span>，而 ID 只能指定一個。
五、CSS 元素選擇器
最多見的 CSS 選擇器就是元素選擇器，即標籤選擇器，也就是說 HTML 的元素就是最基本的選擇器。
若是使用元素選擇器設置 HTML 的樣式，選擇器一般將是某個 HTML 元素，好比 body、h一、p、a，也能夠是 html 自己。
在 W3C 標準中，元素選擇器也叫作類型選擇器，類型選擇器匹配文檔中元素類型的名稱，類型選擇器匹配文檔樹中該元素類型的每個實例，也就是若是使用元素選擇器，好比 h1{color:red;}，他會匹配文檔中全部的 h1 元素，即頁面上全部的 h1 標題都顯示爲紅色。
六、CSS 背景
background 屬性用於定義 HTML 元素的背景。
定義元素背景效果的 CSS 屬性有如下五種：
①：background-color
②：background-image
③：background-repeat
④：background-position
⑤：background-attachment
(1)、background-color：背景顏色
background-color 屬性定義了元素的背景顏色。頁面的背景顏色可使用 body 元素選擇器進行定義：
1 body{ 2 background-color:gray; 3 }
CSS 中，顏色值一般使用如下方式定義：
①：十六進制，如："#ff0000"，相似這樣的形式，能夠縮寫爲："#f00"。
②：RGB，如："rgb(255,0,0)"。
③：顏色名稱，如："red"。
(2)、background-image：背景圖像
background-image 屬性描述了元素的背景圖像。默認狀況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體，頁面背景圖片設置以下：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 }
(3)、background-repeat：背景圖像設置水平或垂直平鋪或不平鋪
默認狀況下，background-image 屬性會在頁面的水平或者垂直方向平鋪。一些圖像若是在水平方向與垂直方向平鋪，這樣看起來很不協調，若是圖像只在水平方向平鋪 (repeat-x), 頁面背景會更好些：background-repeat:repeat-x，定義垂直方向平鋪語法：background-repeat:repeat-y。
在使用背景圖像時，默認會平鋪重複顯示，這樣不只不具備美感，還會影響文本的排版。若是不想讓圖像平鋪，而且只顯示一次，那麼就這樣定義：background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url('images/wallpaper.jpg'); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="center col">class 選擇器</h1> 11 <p class="center col">我是一個段落。</p> 12 <p class="center col font">我是另外一個段落。</p> 13 <h2 class="center">h2 標題</h2> 14 </body>
(4)、background-position：背景圖像設置定位
在上面的例子中，背景圖像與文本顯示在同一個位置，這樣不利於文本的閱讀，爲了讓頁面排版更加合理，能夠利用 background-position 屬性改變圖像在背景中的位置：
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 background-repeat:no-repeat; 4 background-position:right top; 5 }
此時，背景圖像會顯示在頁面的右上角。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，定義背景圖像是固定的，以下：
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url('images/fix.gif'); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style> 10 </head> 11 <body> 12 <p>我是一個段落,我是一個段落</p> 13 <p>我是一個段落,我是一個段落</p> 14 <p>我是一個段落,我是一個段落</p> 15 <p>我是一個段落,我是一個段落</p> 16 <p>我是一個段落,我是一個段落</p> 17 <p>我是一個段落,我是一個段落</p> 18 <p>我是一個段落,我是一個段落</p> 19 <p>我是一個段落,我是一個段落</p> 20 <p>我是一個段落,我是一個段落</p> 21 <p>我是一個段落,我是一個段落</p> 22 <p>我是一個段落,我是一個段落</p> 23 <p>我是一個段落,我是一個段落</p> 24 <p>我是一個段落,我是一個段落</p> 25 <p>我是一個段落,我是一個段落</p> 26 <p>我是一個段落,我是一個段落</p> 27 <p>我是一個段落,我是一個段落</p> 28 <p>我是一個段落,我是一個段落</p> 29 <p>我是一個段落,我是一個段落</p> 30 <p>我是一個段落,我是一個段落</p> 31 <p>我是一個段落,我是一個段落</p> 32 <p>我是一個段落,我是一個段落</p> 33 </body>
(6)、背景屬性簡寫
在上面實例中，設置頁面的背景效果時，經過不少的單個屬性來進行定義，這樣代碼就顯得很繁瑣，爲了簡化這些屬性的代碼，能夠將這些屬性合併在同一個屬性中，以下：
1 body{ 2 background:green url('images/fix.gif') no-repeat fixed 12px 24px; 3 }
background 屬於複合屬性，也叫快捷屬性，他能夠簡化代碼，提升頁面的運行效率，可是在使用 JS 時卻不能使用複合屬性來獲取元素的樣式，須要使用單個屬性精確獲取，若是一個元素定義了多個背景樣式，那麼使用複合屬性獲取，瀏覽器並不知道你到底須要哪一個樣式，就出錯了。相似這樣的複合屬性還有：font、border、padding 和 margin 等。
當使用簡寫屬性時，屬性值的順序依次爲：
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上屬性無需所有使用，能夠按照頁面的實際須要使用，好比只定義背景顏色，就能夠這樣設置：background:#90C;
七、CSS 文本格式
(1)、文本顏色
color 屬性被用來設置文字的顏色，可使用合理的背景顏色和文本顏色搭配，這樣有利於提升文本的可讀性。
1 <head> 2 <style> 3 body{ 4 background-color:#d5f3f4; 5 } 6 h1{ 7 color:#00c; /* color:#0000cc; */ 8 } 9 </style> 10 </head> 11 <body> 12 <h1>文字顏色</h1> 13 <p>可使用合理的背景顏色和文本顏色搭配，這樣有利於提升文本的可讀性。</p> 14 </body>
(2)、文本對齊方式
text-align 文本排列屬性能夠用來設置文本的水平對齊方式，文本能夠居中或對齊到左或右，兩端對齊。
該屬性有4個值，默認值爲 left，由瀏覽器決定，把文本排列到左邊，即對齊到左。center 則爲文本居中，right 爲文本對齊到右邊。
1 <head> 2 <style> 3 h1{ 4 text-align:center; 5 } 6 h3{ 7 text-align:right; 8 } 9 </style> 10 </head> 11 <body> 12 <h1>標題 1 居中顯示</h1> 13 <h2>標題 2 居左默認顯示</h2> 14 <h3>標題 3 居右顯示</h3> 15 </body>
當 text-align 屬性的值設置爲 justify 時，則表示文本兩端對齊，每一行將被展開爲寬度相等，左、右外邊距對齊，就像雜誌和報紙那樣，常應用於書刊雜誌排版。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上，而後，調整單詞和字母間的間隔，使各行的長度剛好相等。那就是說對於英文這樣定義是能夠的，可是對於中文兩端對齊支持並非很好。解決辦法就是再定義 text-justify 屬性，將其值設置爲 inter-ideograph，用表意文原本對齊內容，他增長或減小表意字和詞間的空格。表意字顧名思義，就是字形有必定表達意思性的文字，漢字屬於表意文字，他是文字萌芽時期的產物，是漢語造成歷史中最先的一種文字。該屬性值的默認值爲 auto，讓瀏覽器決定兩端對齊算法。實例：
1 <head> 2 <style> 3 .part{ 4 color:red; 5 text-align:justify; 6 text-justify:inter-ideograph; 7 } 8 .p1{ 9 width:300px; 10 } 11 .p2{ 12 width:300px; 13 } 14 .p3{ 15 width:400px; 16 } 17 .p4{ 18 width:300px; 19 } 20 </style> 21 </head> 22 <body> 23 <h1>text-align 實例</h1> 24 <p class="part p1">當 text-align 屬性的值設置爲 justify 時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p> 25 <p class="part p2">當 text-align 屬性的值設置爲 justify 時,每一行將被展開爲寬度相等,左,右外邊距是對齊的,即文本兩端對齊,如雜誌和報紙那樣.在兩端對齊文本中,文本行的左右兩端都放在父元素的內邊界上.而後,調整單詞和字母間的間隔,使各行的長度剛好相等.也就是說對於英文這樣定義就能夠了,可是對於中文這樣定義是不行的.解決辦法就是使用 text-justify 屬性.</p> 26 <p class="part p3">當 text-align 屬性的值設置爲 justify 時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用 text-justify 屬性。</p> 27 <p class="part p4">當屬性的值設置爲時，每一行將被展開爲寬度相等，左、右外邊距是對齊的，即文本兩端對齊，如雜誌和報紙那樣。在兩端對齊文本中，文本行的左右兩端都放在父元素的內邊界上。而後，調整單詞和字母間的間隔，使各行的長度剛好相等。也就是說對於英文這樣定義就能夠了，可是對於中文這樣定義是不行的。解決辦法就是使用屬性。</p> 28 </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 屬性用來設置或刪除文本的修飾。從設計角度來說該屬性主要是用來刪除超連接的下劃線，以下：
1 <head> 2 <style> 3 .a1{ 4 text-decoration:none; 5 } 6 </style> 7 </head> 8 <body> 9 <a href="#" target="_blank">默認帶有下劃線的超連接</a><br/><br/> 10 <a class="a1" href="#" target="_blank">text-decoration:none; 刪除超連接下劃線</a> 11 </body>
也可使用其餘值來設置文本的修飾，text-decoration:overline; 設置文本上劃線。text-decoration:line-through; 設置文本中間劃線。text-decoration:underline; 設置文本下劃線。該屬性還有一個值爲 blink 定義閃爍的文本，可是全部瀏覽器都不支持。
1 <head> 2 <style> 3 .p1{ 4 text-decoration:overline; 5 } 6 .p2{ 7 text-decoration:line-through; 8 } 9 .p3{ 10 text-decoration:underline; 11 } 12 a{ 13 color:black; 14 } 15 </style> 16 </head> 17 <body> 18 <p class="p1">text-decoration:overline; 定義文本上的一條線。</p> 19 <p class="p2">text-decoration:line-through; 定義穿過文本的一條線。</p> 20 <p class="p3">text-decoration:underline; 定義文本下的一條線。</p> 21 22 <br/><br/><br/> 23 <a href="#">設置文本下的一條線，會被混淆爲超連接。</a> 24 25 <p>設置穿過文本 和 文本下的一條線，相似於 HTML 標籤，<del> del 元素定義已刪除的文本</del> 和 <ins> ins 元素定義新插入的文本</ins>！</p> 26 </body>
注意：給文本添加修飾，會給用戶帶來困擾，所以建議只將文本修飾屬性用於清除超連接的下劃線，其他值要慎用，特別是添加文本下的一條線，用戶會誤認爲超連接，因此不要強調指出不是連接的文本，設置穿過文本和文本上的一條線，也經常會混淆用戶，不明就裏。
①、文本陰影
文本陰影是在 CSS3 中定義的一個文本修飾效果，text-shadow 屬性應用於陰影文本。該屬性有兩個做用，產生陰影和模糊主體。
語法：text-shadow: x y shadow color;
該屬性能夠有4個值，其中前2個是必需的值，用來指定陰影的延伸距離，值爲長度值，而且容許負值，其中 x 是水平陰影的偏移值，y 是垂直陰影的偏移值。最後2個值都是可選的，shadow 用於指定陰影的模糊值，即模糊效果的做用距離，不容許負值。color 指定陰影的顏色。
1 <head> 2 <style> 3 body{ 4 font-family:"Microsoft YaHei"; 5 } 6 .demo1{ 7 text-shadow:2px 2px #f00; 8 } 9 .demo2{ 10 text-shadow:2px 2px; 11 } 12 .demo3{ 13 text-shadow:2px 2px 10px #f00; 14 } 15 .demo4{ 16 color:white; 17 text-shadow:2px 2px 4px #000; 18 } 19 .demo5{ 20 text-shadow:0 0 4px #f00; 21 } 22 </style> 23 </head> 24 <body> 25 <p class="demo1">基本文字陰影效果</p> 26 <p class="demo2">只定義2個必需值</p> 27 <p class="demo3">文字陰影模糊效果</p> 28 <p class="demo4">白色文本上的陰影</p> 29 <p class="demo5">霓虹燈效果</p> 30 <p class="demo5 demo4">霓虹燈效果</p> 31 </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，若是這兩個屬性同時使用，那麼既要自動調整字間距，又要按指定的字間距排列，這就相互矛盾了，比如一我的既向左看的同時又向右看，那就神奇了，會出事的。
綜合實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文本格式</title> 6 <style> 7 *{padding:0;margin:0;} 8 div{ 9 width:500px; 10 margin:0 auto; 11 background-color:lightgray; 12 } 13 h1{ 14 color:white; 15 text-align:center; 16 text-shadow:0 0 20px green; 17 } 18 h2{ 19 color:blue; 20 text-align:right; 21 margin:0 50px 10px 0; 22 } 23 p{ 24 text-indent:2em; 25 line-height:1.5; 26 letter-spacing:1px; 27 margin:0 10px; 28 } 29 </style> 30 </head> 31 <body> 32 <div id="" class=""> 33 <h1>匆匆</h1> 34 <h2>做者: 朱自清</h2> 35 <p>燕子去了，有再來的時候；楊柳枯了，有再青的時候；桃花謝了，有再開的時候。可是，聰明的，你告訴我，咱們的日子爲何一去不復返呢？——是有人偷了他們罷：那是誰？又藏在何處呢？是他們本身逃走了罷：如今又到了哪裏呢？</p><br/> 36 <p>我不知道他們給了我多少日子；但個人手確乎是漸漸空虛了。在默默裏算着，八千多日子已經從我手中溜去；像針尖上一滴水滴在大海里，個人日子滴在時間的流裏，沒有聲音，也沒有影子。我不由頭涔涔而淚潸潸了。</p><br/> 37 <p>去的儘管去了，來的儘管來着；去來的中間，又怎樣地匆匆呢？早上我起來的時候，小屋裏射進兩三方斜斜的太陽。太陽他有腳啊，輕輕悄悄地挪移了；我也茫茫然跟着旋轉。因而——洗手的時候，日子從水盆裏過去；吃飯的時候，日子從飯碗裏過去；默默時，便從凝然的雙眼前過去。我覺察他去的匆匆了，伸出手遮挽時，他又從遮挽着的手邊過去，天黑時，我躺在牀上，他便伶伶俐俐地從我身上跨過，從我腳邊飛去了。等我睜開眼和太陽再見，這算又溜走了一日。我掩着面嘆息。可是新來的日子的影兒又開始在嘆息裏閃過了。</p><br/> 38 <p>在逃去如飛的日子裏，在千門萬戶的世界裏的我能作些什麼呢？只有徘徊罷了，只有匆匆罷了；在八千多日的匆匆裏，除徘徊外，又剩些什麼呢？過去的日子如輕煙，被微風吹散了，如薄霧，被初陽蒸融了；我留着些什麼痕跡呢？我何曾留着像遊絲樣的痕跡呢？我赤裸裸來到這世界，轉眼間也將赤裸裸的回去罷？但不能平的，爲何偏要白白走這一遭啊？</p><br/> 39 <p>你聰明的，告訴我，咱們的日子爲何一去不復返呢？</p> 40 </div> 41 </body> 42 </html>
④、文本空白處理
white-space 屬性指定元素內的空白如何處理，默認值爲 normal 空白會被瀏覽器忽略。該屬性還有4個值，nowrap 文本不會換行，禁止換行，文本會在同一行上繼續，直到遇到 <br> 標籤爲止。pre 空白會被瀏覽器保留，這種方式相似 HTML 中的 <pre> 標籤，用於定義預格式文本。pre-wrap 指定保留空白符序列，可是正常地進行換行。pre-line 指定合併空白符序列，可是保留換行符，並容許自動換行。
1 <head> 2 <style> 3 .p1{ 4 white-space:nowrap; 5 } 6 .p2{ 7 white-space:pre; 8 } 9 .p3{ 10 white-space:pre-wrap; 11 } 12 </style> 13 </head> 14 <body> 15 <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> 標籤。。 16 </p> 17 18 <p class="p2"> 19 white-space:pre 20 空白會被瀏覽器保留，該方式相似 HTML 中的 <pre> 標籤。 21 white-space:pre 空白會被瀏覽器保留，該方式 22 相似 HTML 中的 <pre> 標籤。 23 </p> 24 25 <p class="p3"> 26 white-space:pre-wrap 保留空白符序列，可是正常地進行換行。<mark>1——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進 行 換 行。<mark>2——</mark> 保留 空白 符序列，可是 正常地 進行換行。<mark>3——</mark> 保 留 空 白 符 序 列，但 是 正 常 地 進行換行。 27 </p> 28 </body>
(5)、文本轉換
text-transform 屬性控制文本中的字母。文本轉換屬性是用來指定在一個文本中的大寫和小寫字母，可用於將全部字句變成大寫或小寫字母，或每一個單詞的首字母大寫。
text-transform:capitalize; 定義文本中的每一個單詞以大寫字母開頭。text-transform:uppercase; 定義文本僅有大寫字母。text-transform:lowercase; 定義文本僅有小寫字母。
1 <head> 2 <style> 3 .p1{ 4 text-transform:capitalize; 5 } 6 .p2{ 7 text-transform:uppercase; 8 } 9 .p3{ 10 text-transform:lowercase; 11 } 12 </style> 13 </head> 14 <body> 15 <p class="p1">this is some text. 單詞以大寫字母開頭。</p> 16 <p class="p2">this is some text. 僅有大寫字母。</p> 17 <p class="p3">This IS SOme Text. 僅有小寫字母。</p> 18 </body>
八、CSS 字體
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
實例：
1 <head> 2 <style> 3 .p1{ 4 font-size:2.5em; /* 40px/16=2.5em */ 5 } 6 .p2{ 7 font-size:1.25em; /* 20px/16=1.25em */ 8 } 9 .p3{ 10 font-size:0.875em; /* 14px/16=0.875em */ 11 } 12 </style> 13 </head> 14 <body> 15 <p class="p1">我是第一個段落</p> 16 <p class="p2">我是第二個段落</p> 17 <p class="p3">我是最後一個段落</p> 18 </p> 19 </body>
上面的例子，文字大小設置爲 em， 註釋中是像素的轉換，使用 em 單位，能夠在全部瀏覽器中調整文本大小。
③、使用 % 和 em 組合設置字體大小
在全部瀏覽器的解決方案中，設置 <body> 元素的默認字體大小是 100%，能夠顯示相同的文本大小，並容許全部瀏覽器縮放文本的大小。
1 <head> 2 <style> 3 body{ 4 font-size:100%; 5 } 6 .p1{ 7 font-size:2.5em; /* 40px/16=2.5em */ 8 } 9 .p2{ 10 font-size:1.25em; /* 20px/16=1.25em */ 11 } 12 .p3{ 13 font-size:0.875em; /* 14px/16=0.875em */ 14 } 15 </style> 16 </head> 17 <body> 18 <p class="p1">我是第一個段落</p> 19 <p class="p2">我是第二個段落</p> 20 <p class="p3">我是最後一個段落</p> 21 </p> 22 </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 瀏覽器會顯示小型大寫字母的字體。
1 <head> 2 <style> 3 .p1{ 4 font-variant:normal; 5 } 6 .p2{ 7 font-variant:small-caps; 8 } 9 </style> 10 </head> 11 <body> 12 <p class="p1">Why are you so diao ?</p> 13 <p class="p2">Why are you so diao ?</p> 14 <p>Why are you so diao ?</p> 15 </body>
九、CSS 連接
不一樣的連接能夠設置不一樣的樣式，設置連接樣式能夠用任何 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 僞類，在鼠標移動到元素上時添加的特殊樣式，可用於全部元素，不僅是連接，常被用來作鼠標滑過動畫。當應用到連接上時，可使用列表佈局導航欄菜單，也叫選項卡，當鼠標移動到連接菜單上時，能夠顯示特殊的樣式。
實例建立連接框：
1 <head> 2 <style> 3 *{padding:0;margin:0;font:bold 18px '微軟雅黑';} 4 a{ 5 color:black; 6 background-color:green; 7 text-decoration:none; 8 display:block; 9 width:120px; 10 padding:10px; 11 margin:20px; 12 text-align:center; 13 } 14 a:hover{ 15 color:white; 16 background-color:lightgray; 17 text-shadow:0 0 4px red; 18 } 19 </style> 20 </head> 21 <body> 22 <a href="#" >CSS 基礎知識</a> 23 </body>
十、CSS 列表
從某種意義上講，不是描述性的文本的任何內容均可以認爲是列表，好比家譜、人口普查、太陽系，甚至你的全部朋友均可以表示爲一個列表或者是列表的列表。因爲列表如此多樣，這使得列表至關重要，在 HTML 中，有兩種類型的列表：①：無序列表 - 列表項標記用特殊圖形，默認以小黑點樣式顯示。②：有序列表 - 列表項的標記默認以數字樣式顯示。
CSS 列表屬性做用以下：①：設置不一樣的列表項標記。②：設置列表項標記爲圖像。
經過 CSS，能夠列出進一步的樣式，並可用圖像做列表項標記。修改列表項標記使用 list-style-type，使用圖像做爲標記能夠利用 list-style-image 屬性完成。
(1)、無序列表項標記
無序列表可被用來作導航欄菜單，一般都須要隱藏無序列表項的標記，那麼就使用 list-style-type:none，表示無標記。list-style-type 屬性的默認值爲 disc 實心圓，即小黑點。
1 <head> 2 <style> 3 ul{ 4 list-style-type:none; 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本標記語言</li> 11 <li>CSS 層疊樣式表</li> 12 <li>JavaScript 賦予 HTML 動態交互</li> 13 <li>jQuery 最好用的JS庫</li> 14 <li>Bootstrap 前端開發框架</li> 15 </ul> 16 </body>
無序列表除了能夠無標記以外，還能夠修改標記類型，如 circle 空心圓，square 實心方塊。實例：
1 <head> 2 <style> 3 .ul1{ 4 list-style-type:circle; 5 } 6 .ul2{ 7 list-style-type:square; 8 } 9 </style> 10 </head> 11 <body> 12 <ul class="ul1"> 13 <li>HTML 超文本標記語言</li> 14 <li>CSS 層疊樣式表</li> 15 <li>JavaScript 賦予 HTML 動態交互</li> 16 </ul> 17 <ul class="ul2"> 18 <li>jQuery 最好用的JS庫</li> 19 <li>Zepto 兼容 jQuery 語法的移動端JS庫</li> 20 <li>Bootstrap 前端開發框架</li> 21 </ul> 22 </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() 值，就能夠將圖像做爲標記類型。
1 <head> 2 <style> 3 ul{ 4 list-style-image:url('images/ul-icon.jpg'); 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本標記語言</li> 11 <li>CSS 層疊樣式表</li> 12 <li>JavaScript 賦予 HTML 動態交互</li> 13 <li>jQuery 最好用的JS庫</li> 14 <li>Bootstrap 前端開發框架</li> 15 </ul> 16 </body>
(4)、列表項標記的位置
list-style-position 屬性能夠設置列表中列表項標記的位置。默認值爲 outside 保持標記位於文本的左側，列表項標記放置在文本之外，且環繞文本不根據標記對齊。inside 則指定列表項目標記放置在文本之內，且環繞文本根據標記對齊。以下：
1 <head> 2 <style> 3 .ul1{ 4 list-style-position:outside; 5 } 6 .ul2{ 7 list-style-position:inside; 8 } 9 li{ 10 margin:5px; 11 border:2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 <ul class="ul1"> 17 <li>HTML 超文本標記語言</li> 18 <li>CSS 層疊樣式表</li> 19 <li>JavaScript 賦予 HTML 動態交互</li> 20 <li>jQuery 最好用的JS庫</li> 21 <li>Bootstrap 前端開發框架</li> 22 </ul> 23 <ul class="ul2"> 24 <li>HTML 超文本標記語言</li> 25 <li>CSS 層疊樣式表</li> 26 <li>JavaScript 賦予 HTML 動態交互</li> 27 <li>jQuery 最好用的JS庫</li> 28 <li>Bootstrap 前端開發框架</li> 29 </ul> 30 </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 表格
使用 CSS 能夠大大的提升 HTML 表格的外觀。
(1)、表格邊框
給表格設置邊框，可使用 CSS 的 border 屬性定義，也可使用表格標籤的 border 屬性定義。以下：
1 <head> 2 <style> 3 table,th,td{ 4 border:1px solid black; 5 } 6 </style> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <th>粗糧</th> 12 <th>蔬菜</th> 13 <th>水果</th> 14 </tr> 15 <tr> 16 <td>大豆</td> 17 <td>黃瓜</td> 18 <td>香蕉</td> 19 </tr> 20 <tr> 21 <td>高粱</td> 22 <td>菠菜</td> 23 <td>檸檬</td> 24 </tr> 25 </table> 26 </body>
注意，這樣設置的表格具備雙線條邊框，這是因爲 table、th 以及 td 元素都有獨立的邊框。爲了顯示一個單線條邊框的表格，就使用 border-collapse 屬性。
(2)、摺疊邊框
border-collapse 屬性設置是否將表格邊框合併爲單一線條的邊框。該屬性的默認值爲 separate 邊框會分開顯示，不會忽略 border-spacing 和 empty-cells 屬性。collapse 若是可能，邊框會合併爲一個單一的邊框，該值會忽略 border-spacing 和 empty-cells 屬性，即設置這兩個屬性無效。以下：
1 <head> 2 <style> 3 table{ 4 border-collapse:collapse; 5 } 6 table,th,td{ 7 border:1px solid black; 8 } 9 </style> 10 </head> 11 <body> 12 <table> 13 <tr> 14 <th>粗糧</th> 15 <th>蔬菜</th> 16 <th>水果</th> 17 </tr> 18 <tr> 19 <td>大豆</td> 20 <td>黃瓜</td> 21 <td>香蕉</td> 22 </tr> 23 <tr> 24 <td>高粱</td> 25 <td>菠菜</td> 26 <td>檸檬</td> 27 </tr> 28 </table> 29 </body>
border-spacing 屬性用於設置相鄰單元格的邊框間的距離，僅用於邊框分離模式，即雙線條邊框表格。使用 px、cm 等單位指定距離，不容許使用負值。若是定義一個參數，那麼定義的是水平和垂直間距。若是定義兩個參數，那麼第一個設置水平間距，而第二個設置垂直間距。
empty-cells 屬性設置是否顯示錶格中的空單元格，僅用於邊框分離模式，即雙線條邊框表格。該屬性用於定義不包含任何內容的表格單元格如何顯示，若是顯示，就會繪製出單元格的邊框和背景。該屬性的默認值爲 show 在單元格周圍繪製邊框，hide 不在單元格周圍繪製邊框。
除非表格的邊框顯示爲雙線條邊框，不然這兩個屬性都無效。
1 <head> 2 <style> 3 .tab1{ 4 empty-cells:hide; 5 border-spacing:10px; 6 } 7 .tab2{ 8 border-spacing:20px 50px; 9 margin-top:20px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1" class="tab1"> 15 <tr> 16 <th>粗糧</th> 17 <th>蔬菜</th> 18 <th>水果</th> 19 </tr> 20 <tr> 21 <td></td> 22 <td>黃瓜</td> 23 <td></td> 24 </tr> 25 <tr> 26 <td>高粱</td> 27 <td></td> 28 <td>檸檬</td> 29 </tr> 30 </table> 31 <table border="1" class="tab2"> 32 <tr> 33 <th>粗糧</th> 34 <th>蔬菜</th> 35 <th>水果</th> 36 </tr> 37 <tr> 38 <td></td> 39 <td>黃瓜</td> 40 <td></td> 41 </tr> 42 <tr> 43 <td>高粱</td> 44 <td></td> 45 <td>檸檬</td> 46 </tr> 47 </table> 48 </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)、表格顏色
能夠爲表格的邊框指定邊顏色，也能夠爲表頭以及單元格指定背景顏色，還能夠設置文本的顏色。
綜合實例：
1 <head> 2 <style> 3 #tab{ 4 width:50%; 5 font-family:"微軟雅黑"; 6 border-collapse:collapse; 7 } 8 #tab th,#tab td{ 9 border:1px solid #7AC942; 10 padding:5px 10px; 11 } 12 #tab th{ 13 color:white; 14 background-color:#9C3; 15 font-size:1.125em; 16 text-align:left; 17 padding-top:4px; 18 padding-bottom:8px; 19 } 20 #tab .list td{ 21 color:#000; 22 background-color:#FFC; 23 } 24 caption{ 25 margin-bottom:10px; 26 font-weight:bold; 27 font-size:1.5em; 28 } 29 </style> 30 </head> 31 <body> 32 <table id="tab"> 33 <caption>食物類別</caption> 34 <thead> 35 <tr class="list"> 36 <th>粗糧</th> 37 <th>蔬菜</th> 38 <th>水果</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>大豆</td> 44 <td>黃瓜</td> 45 <td>香蕉</td> 46 </tr> 47 <tr class="list"> 48 <td>高粱</td> 49 <td>菠菜</td> 50 <td>檸檬</td> 51 </tr> 52 <tr> 53 <td>玉米</td> 54 <td>辣椒</td> 55 <td>芒果</td> 56 </tr> 57 <tr class="list"> 58 <td>燕麥片</td> 59 <td>白菜</td> 60 <td>西瓜</td> 61 </tr> 62 </tbody> 63 </table> 64 </body>
十二、CSS 分組和嵌套選擇器
(1)、分組選擇器
在樣式表中有不少具備相一樣式的元素，好比標題和段落的文字都顯示爲灰色，以下：
h1{color:gray;} p{color:gray;}
爲了儘可能減小代碼，讓樣式表更加簡潔，就可使用分組選擇器，每一個選擇器用逗號分隔，這樣就定義了一個規則，以下：
h1, p{color:gray;}
上面代碼中，右邊的樣式屬性將會應用到這兩個選擇器指定的元素，逗號是在告訴瀏覽器，規則中包含兩個不一樣的選擇器，若是沒有這個逗號，那麼規則的含義將徹底不一樣，爲後代選擇器，也叫包含選擇器，這時候選擇的就是做爲某元素後代的元素，即包含在某元素中的全部指定的後代元素，且包括子元素、孫元素、曾孫元素等等。
能夠將任意多個選擇器分組在一塊兒，以下：
h1, h2, h3, h4, h5, h6, p{color:red;}
若是須要爲 HTML 中多個標籤元素設置同一個樣式時，就可使用分組選擇符（,）。
(2)、通配符選擇器
通配符選擇器是在 CSS2 中定義的一種簡單選擇器，用 * 表示，該選擇器能夠與任何元素匹配，一般在作頁面測試時可用於初始化頁面樣式，以下：
1 *{ 2 padding:0; 3 margin:0; 4 }
還能夠加入其餘須要初始化的樣式，這個樣式聲明等同於列出了頁面中全部元素的一個分組選擇器，利用通配符選擇器，只須要一個 * 就能將文檔中全部元素的樣式設置爲自定義。
(3)、嵌套選擇器
使用嵌套選擇器，他可以應用於選擇器內部的選擇器的樣式。以下：
1 <head> 2 <style> 3 p{ 4 color:blue; 5 text-align:center; 6 } 7 .div1{ 8 background-color:red; 9 } 10 .div1 p{ 11 color:white; 12 } 13 .div1 p a{ 14 color:yellow; 15 font-weight:bold; 16 } 17 </style> 18 </head> 19 <body> 20 <p>元素選擇器</p> 21 <div class="div1"> 22 <p>嵌套選擇器 23 <a href="#">深層嵌套選擇器</a> 24 </p> 25 </div> 26 <p>元素選擇器</p> 27 </body>
在上面的例子，建立了4個 CSS 樣式規則，全部 p 元素的字體設置爲藍色並居中顯示。再將全部 class 爲 "div1" 的元素背景設置爲紅色。第三項聲明是把這個 class 類中的 p 元素字體設置爲白色，而且還擁有兩個樣式，一個是爲全部 p 元素設置的居中顯示，另外一個是父元素 div 設置的紅色背景。最後一項聲明，是爲類中 p 元素的子元素設置字體爲黃色且加粗顯示，並擁有祖先元素的紅色背景樣式。
使用嵌套選擇器的好處就是不須要單獨給 class 爲 div1 的元素內的 p 元素內的 a 元素單獨定義 class 選擇器或者 ID 選擇器，這樣代碼就少了，並達到了優化代碼的目的。嵌套選擇器也能夠叫作後代選擇器。
1三、CSS 屬性選擇器
屬性選擇器能夠爲具備特定屬性的 HTML 元素樣式，而不只僅是 class 和 id。
(1)、屬性選擇器
屬性選擇器使用：[attr]
下面的例子是把全部帶有 title 屬性的元素的字體設置爲紅色：
1 <head> 2 <style> 3 [title]{ 4 color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <h1>h1 標題不帶有 title 屬性</h1> 10 <h2 title="標題">h2 能夠設置樣式</h2> 11 <a href="#" title="連接">超連接能夠設置樣式</a> 12 </body>
(2)、屬性和值選擇器
屬性選擇器使用：[attr=value]
下面的例子是把全部 title='Hello' 的元素的字體設置爲藍色：
1 <head> 2 <style> 3 [title=Hello]{ 4 color:blue; 5 } 6 </style> 7 </head> 8 <body> 9 <h1 title="Hello world">h1 標題 title="Hello world"</h1> 10 <h2 title="Hello">h2 能夠設置樣式</h2> 11 <a href="#" title="Hello">超連接能夠設置樣式</a> 12 </body>
(3)、屬性和多個值的選擇器
屬性和多個值的選擇使用有兩種狀況：
屬性值用空格分隔使用：[attr~=value]
屬性值用連字符分隔則使用：[attr|=value]
下面的例子是把包含 title='Hello' 的元素的字體設置爲綠色，使用 ~ 分隔屬性和值：
1 <head> 2 <style> 3 [title~=Hello]{ 4 color:green; 5 } 6 </style> 7 </head> 8 <body> 9 <h1 title="world">h1 標題 title="world"</h1> 10 <h2 title="Hello">h2 能夠設置樣式</h2> 11 <h3 title="Hello Web">h3 能夠設置樣式</h2> 12 <a href="#" title="Hello world">超連接能夠設置樣式</a> 13 </body>
下面的例子是把包含 lang=zh 屬性的元素的字體設置爲灰色，使用 | 分隔屬性和值：
1 <head> 2 <style> 3 [lang|=zh]{ 4 color:gray; 5 } 6 </style> 7 </head> 8 <body> 9 <h1 lang="en">h1 語言屬性 lang="en"</h1> 10 <h2 lang="zh-CN">h2 能夠設置樣式</h2> 11 <h3 lang="zh-HK">h3 能夠設置樣式</h3> 12 <a href="#" lang="zh-TW">超連接能夠設置樣式</a> 13 </body>
(4)、表單樣式
屬性選擇器在爲不帶有 class 或 id 的表單設置樣式時特別有用。以下：
1 <head> 2 <style> 3 input[type="text"]{ 4 width:150px; 5 display:block; 6 margin-bottom:5px; 7 background-color:yellow; 8 } 9 input[type="button"]{ 10 width:120px; 11 margin-top:5px; 12 background-color:green; 13 } 14 </style> 15 </head> 16 <body> 17 <form name="input" action="demo.php" method="get"> 18 用戶名：<input type="text" name="user" placeholder="請輸入登陸名"> 19 暱 稱：<input type="text" name="name" placeholder="請輸入角色名"> 20 <input type="button" value="查詢"> 21 </form> 22 </body>
1四、CSS 組合選擇符
CSS 組合選擇符是包括各類簡單選擇器的組合方式，組合選擇符說明了兩個選擇器直接的關係。
在 CSS3 中包含了四種組合方式：
①：後代選擇器，以空格分隔。
②：子元素選擇器，以 > 分隔。
③：相鄰兄弟選擇器，以 + 分隔。
④：普通兄弟選擇器，以 ~ 分隔。
(1)、後代選則器
後代選則器又稱爲包含選擇器，能夠選擇做爲某元素後代的元素，而且包括子元素、孫元素、曾孫元素等等。
下面的實例是把全部包含在 div 元素內的 a 元素的字體設置爲紅色：div a
1 <head> 2 <style> 3 div a{ 4 color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <a href="">連接不在 div 中</a> 10 <div> 11 <a href="">div 中第一個子元素 a，顯示爲紅色</a> 12 <p>div 中第二個子元素 p<br/> 13 <a>p 元素的子元素 a，該元素是 div 元素的孫元素，顯示爲紅色</a> 14 </p> 15 <a href="">div 中第三個子元素 a，顯示爲紅色</a> 16 </div> 17 <a href="">連接不在 div 中</a> 18 </body>
(2)、子元素選擇器
與後代選擇器相比，子元素選擇器只能選擇做爲某元素子元素的元素，不包括孫元素、曾孫元素等等。若是不但願選擇任意的後代元素，而是隻選擇某個元素的子元素，那麼就使用子元素選擇器。
下面的實例是把 div 元素中全部直接子元素 a 的字體設置爲紅色：div>a
1 <head> 2 <style> 3 div>a{ 4 color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <div> 10 <a href="">div 中第一個子元素 a，顯示爲紅色</a> 11 <p>div 中第二個子元素 p<br/> 12 <a>p 元素的子元素 a，該元素是 div 元素的孫元素</a> 13 </p> 14 <a href="">div 中第三個子元素 a，顯示爲紅色</a> 15 </div> 16 </body>
總結：> 做用於元素的第一代後代，空格 做用於元素的全部後代。
(3)、相鄰兄弟選擇器
相鄰兄弟選擇器可選擇緊接在另外一元素後的元素，且兩者有相同父元素。若是須要選擇緊接在另外一個元素後的元素，並且兩者有相同的父元素，就可使用相鄰兄弟選擇器。
下面的實例選取了全部位於 div 元素後的第一個 p 元素：div+p
1 <head> 2 <style> 3 div+p{ 4 background-color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>body 的第一個子元素 p</p> 10 <div>body 的第二個子元素 div 11 <p>div 中第一個子元素 p</p> 12 <div> 13 <p>div 中第二個子元素 div 的子元素 p</p> 14 </div> 15 <p>div 中第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 div</p> 16 </div> 17 <p>body 的第三個子元素 p，是 div 的相鄰兄弟元素，相同父級 body</p> 18 <p>body 的第四個子元素 p，是 div 的普通兄弟元素</p> 19 </div> 20 </body>
(4)、普通相鄰兄弟選擇器
普通兄弟選擇器選取全部指定元素的相鄰兄弟元素。
下面的實例選取了全部 div 元素的全部相鄰兄弟元素 p : div~p
1 <head> 2 <style> 3 div~p{ 4 background-color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>body 的第一個子元素 p</p> 10 <div>body 的第二個子元素 div 11 <div>div 元素下的第一個子元素 div</div> 12 <p>div 的相鄰兄弟元素</p> 13 <p>div 的普通兄弟元素</p> 14 <p>div 的普通兄弟元素</p> 15 </div> 16 <p>body 下 div 的相鄰兄弟元素</p> 17 <p>body 下 div 的普通兄弟元素</p> 18 <p>body 下 div 的普通兄弟元素</p> 19 </body>
(5)、選擇器組合
多種選擇器能夠結合起來使用，以下：
1 html>body div+p{ 2 color:gray; 3 }
這個選擇器解釋爲：選擇緊接在 div 元素後出現的全部兄弟 p 元素，該 div 元素包含在一個 body 元素中，便是 body 元素的子元素，body 元素自己屬於 html 元素的子元素。
1 div.list p>a{ 2 color:red; 3 }
這個選擇器解釋爲：選擇做爲 p 元素的全部子元素 a，這個 p 元素自己是 div 元素的後代，該 div 元素包含一個 class 爲 list 的屬性。簡單說就是選擇包含在 class 爲 list 的 div 元素內的全部後代 p 元素內的全部直接子元素 a。
1五、CSS 僞類
CSS 僞類是用來向一些選擇器添加特殊的效果。
僞類的語法：選擇器:僞類{attr:value;}
CSS 類也可使用僞類：選擇器.class:僞類{attr:value;}
注意：僞類的名稱不區分大小寫。
(1)、超連接僞類
在瀏覽器中，連接的不一樣狀態均可以以不一樣的方式顯示：
1 a:link{color:#FF0000;} /* 未訪問的連接顯示爲紅色 */ 2 a:visited{color:#00FF00;} /* 已訪問的連接顯示爲綠色 */ 3 a:hover{color:#FF00FF;} /* 鼠標劃過連接顯示爲紫紅色 */ 4 a:active{color:#0000FF;} /* 已選中的連接顯示爲藍色 */
注意： 在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，a:active 必須被置於 a:hover 以後，纔是有效的。
連接的默認樣式爲：未訪問過的顯示爲藍色，已訪問的顯示爲紫色，已選中的連接顯示爲紅色。
(2)、僞類和 CSS 類
僞類能夠與 CSS 類配合使用，下面的實例，設置已訪問過的連接爲紅色：
1 <head> 2 <style> 3 a.tint:visited{ 4 color:red; 5 } 6 7 </style> 8 </head> 9 <body> 10 <a href="#">超連接</a> 11 <a class="tint" href="#">超連接</a> 12 </body>
(3)、CSS2 - :first - child 僞類
可使用 :first-child 僞類來選擇元素的第一個子元素。
①、選擇做爲任何元素的第一個子元素 p。選擇器使用 p:first-child
1 <head> 2 <style> 3 p:first-child{ 4 font-weight:bold; 5 color:blue; 6 } 7 </style> 8 </head> 9 <body> 10 <p>第一個 p 元素</p> 11 <p>第二個 p 元素</p> 12 <p>第三個 p 元素</p> 13 </body>
②、選擇全部 p 元素中的第一個子元素 b。選擇器使用 p>b:first-child
1 <head> 2 <style> 3 p>b:first-child{ 4 color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>第<b>一個</b> p <b>元素</b></p> 10 <p>第<b>二個</b> p <b>元素</b></p> 11 <p>第<b>三個</b> p <b>元素</b></p> 12 </body>
③、選擇全部做爲第一個子元素 p 中的全部 b 元素。選擇器使用 p:first-child b
1 <head> 2 <style> 3 p:first-child b{ 4 color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <p>第<b>一個</b> p <b>元素</b></p> 10 <p>第<b>二個</b> p <b>元素</b></p> 11 <p>第<b>三個</b> p <b>元素</b></p> 12 </body>
(4)、CSS2 - :lang 僞類
使用 :lang 僞類能夠爲不一樣的語言定義特殊的規則。以下：
1 html:lang(zh-CN){ 2 color:blue; 3 } 4 5 :lang(en)>p{ 6 color:gray; 7 }
上面例子中的 :lang 僞類，定義了 HTML 文檔爲 zh-CN 的語言的文字樣式，以及任何元素的 p 元素內爲 en 的語言的樣式。
1六、CSS 僞元素
CSS 僞元素是用來爲一些選擇器添加特殊的效果。
僞元素的語法：選擇器:僞元素{attr:value;}
CSS 類也可使用僞元素：選擇器.class:僞元素{attr:value;}
(1)、CSS2 - :before 僞元素
:before 僞元素能夠在元素的內容前面插入新內容。
下面的例子在每一個 h1 元素前面插入一幅圖片：
1 h1:before{ 2 content:url(images/logo.gif); 3 }
(2)、CSS2 - :after 僞元素
:after 僞元素能夠在元素的內容以後插入新內容。
下面的例子在每一個 h1 元素後面插入一幅圖片：
1 h1:after{ 2 content:url(images/logo.gif); 3 }
content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容，該屬性用於定義元素以前或以後放置的生成內容。默認的，這每每是行內內容，不過該內容建立的框類型能夠用 display 屬性控制。content 的內容通常能夠爲如下四種：
①、content:none 該值是默認值，不插入內容。
②、content:"string" 插入文本。
③、content:attr(屬性) 插入標籤屬性值。
④、content:url(路徑) 使用指定的絕對或相對地址插入一個外部資源，能夠是圖像，音頻，視頻或瀏覽器支持的其餘任何資源。
實例：
①、插入文本：
1 <head> 2 <style> 3 h1:after{ 4 content:"我是 h1 標題"; 5 } 6 h2:after{ 7 content:"(我是 h2 標題)"; 8 } 9 </style> 10 </head> 11 <body> 12 <h1>插入文本</h1> 13 <h2>插入文本</h2> 14 </body>
注意：在插入文本時，能夠給插入的內容帶上括號。
②、插入屬性值：
1 <head> 2 <style> 3 a:after{ 4 content:"("attr(href)")"; 5 } 6 h1:after{ 7 content:attr(title); 8 } 9 </style> 10 </head> 11 <body> 12 <a href="https://www.demo.com">插入屬性值</a> 13 <h1 title="h1 標題">插入屬性值</h1> 14 </body>
注意：在插入屬性值時，能夠給插入的內容帶上括號。
使用插入屬性值，還能夠實現圖片滑過展現屬性值的動畫效果：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圖片動畫效果</title> 6 <style> 7 #demo li{ 8 float:left; 9 overflow:hidden; 10 list-style:none outside; 11 margin-right:20px; 12 position:relative; 13 } 14 #demo li a:after{ 15 content:attr(title); 16 position:absolute; 17 top:0; 18 left:0; 19 width:100%; 20 line-height:30px; 21 text-align:center; 22 color:white; 23 background-color:rgba(0,0,0,0.3); /* rgba 前三個參數爲顏色值，最後一個值 a 表明透明度值。背景色爲黑色，透明度值爲 0.3 */ 24 text-shadow:0 0 2px red; /* 文字陰影效果 */ 25 opacity:0; /* 初始透明度爲 0 */ 26 transition:all 0.5s ease; /* 過渡效果 */ 27 } 28 #demo li a:hover:after{ 29 top:50%; 30 margin-top:-20px; 31 opacity:1; 32 } 33 </style> 34 </head> 35 <body> 36 <ul id="demo"> 37 <li><a href="#" title="彼岸流年"><img src="images/one.jpg" alt="12"></a></li> 38 <li><a href="#" title="時光清淺"><img src="images/two.jpg" alt="22"></a></li> 39 </ul> 40 </body> 41 </html>
③、可使用 content 屬性的 open-quote 屬性值和 close-quote 屬性值在字符串兩邊添加如括號、單引號、雙引號之類的嵌套文字符號。
open-quote 用於添加開始的文字符號，close-quote 用於添加結束的文字符號。
no-open-quote 若是指定該屬性值，則移除內容的開始符號，no-close-quote 若是指定該屬性值，則移除內容的結束符號。
1 <head> 2 <style> 3 h1{ 4 quotes:"(" ")"; /* 利用 quotes 屬性指定文字符號 */ 5 } 6 h1:before{ 7 content:open-quote; 8 } 9 h1:after{ 10 content:close-quote; 11 } 12 13 h2{ 14 quotes:"\"" "\""; /* 添加雙引號須要轉義 */ 15 } 16 h2:before{ 17 content:open-quote; 18 } 19 h2:after{ 20 content:close-quote; 21 } 22 </style> 23 </head> 24 <body> 25 <h1>插入文本</h1> 26 <h2>插入文本</h2> 27 </body>
④、利用 content 的 counter 屬性值能夠設定計數內容，針對多個項目追加連續編號。
1 <head> 2 <style> 3 h1:before{ 4 content:counter(num)"."; /* 設置計數器內容 */ 5 } 6 h1{ 7 counter-increment:num; /* 設置計數內容每次出現的計數器增量，默認增量是 1 */ 8 } 9 </style> 10 </head> 11 <body> 12 <h1>h1 標題</h1> 13 <p>段落</p> 14 <h1>h1 標題</h1> 15 <p>段落</p> 16 <h1>h1 標題</h1> 17 <p>段落</p> 18 <h1>h1 標題</h1> 19 <p>段落</p> 20 <h1>h1 標題</h1> 21 <p>段落</p> 22 </body>
默認插入的項目編號是數字型：1,2,3... 自動遞增，也能夠給項目編號設置文字和樣式：
1 h1:before{ 2 content:"我是第" counter(num) "節內容："; /* 設置計數器內容 */ 3 color:red; 4 } 5 h1{ 6 counter-increment:num; /* 設置計數內容每次出現的計數器增量，默認增量是 1 */ 7 }
也能夠指定編號類型，語法：content:counter(name, list-style-type);
1 h1:before{ 2 content:counter(num,upper-roman)'、'; /* 設置計數器編號爲大寫羅馬數字 */ 3 color:red; 4 } 5 h1{ 6 counter-increment:num; /* 設置計數器每次出現的計數器增量，默認增量是 1 */ 7 }
⑤、編號還能夠實現嵌套，即大編號中嵌套中編號，中編號中嵌套小編號。
1 <head> 2 <style> 3 h1:before{ 4 content:counter(h)'.'; /* 設置計數器編號爲大寫羅馬數字 */ 5 color:red; 6 } 7 h1{ 8 counter-increment:h; /* 設置計數器每次出現的計數器增量，默認增量是 1 */ 9 } 10 p:before{ 11 content:counter(p)'.'; 12 } 13 p{ 14 counter-increment:p; 15 margin-left:20px; 16 } 17 </style> 18 </head> 19 <body> 20 <h1>h1 標題</h1> 21 <p>段落</p> 22 <p>段落</p> 23 <p>段落</p> 24 <h1>h1 標題</h1> 25 <p>段落</p> 26 <p>段落</p> 27 <p>段落</p> 28 <h1>h1 標題</h1> 29 <p>段落</p> 30 <p>段落</p> 31 <p>段落</p> 32 <h1>h1 標題</h1> 33 <p>段落</p> 34 <p>段落</p> 35 <p>段落</p> 36 <h1>h1 標題</h1> 37 <p>段落</p> 38 <p>段落</p> 39 <p>段落</p> 40 </body>
注意，在上面的實例中，全部段落的編號是連續的，這樣的顯示效果並不理想，對每個標題都的段落從新編號可使用 counter-reset 屬性重置，該屬性用於設置計數器出現次數的計數器的值，默認爲 0。
1 h1:before{ 2 content:counter(h)'.'; /* 設置計數器編號爲大寫羅馬數字 */ 3 color:red; 4 } 5 h1{ 6 counter-increment:h; /* 設置計數器每次出現的計數器增量，默認增量是 1 */ 7 counter-reset:p; /* 設置計數器出現次數，默認爲 0 */ 8 } 9 p:before{ 10 content:counter(p)'.'; 11 } 12 p{ 13 counter-increment:p; 14 margin-left:20px; 15 }
還能夠實現更復雜的嵌套，以下面的例子，三層嵌套編號：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計數器深層嵌套</title> 6 <style> 7 h1:before{ 8 content:counter(h1) '、'; 9 color:blue; 10 } 11 h1{ 12 counter-increment:h1; 13 counter-reset:h2; 14 } 15 h2:before{ 16 content:counter(h1) '.' counter(h2) '、'; 17 color:gray; 18 } 19 h2{ 20 counter-increment:h2; 21 counter-reset:h3; 22 margin-left:20px; 23 } 24 h3::before{ 25 content:counter(h1) '.' counter(h2) '-' counter(h3) '、'; 26 color:red; 27 } 28 h3{ 29 counter-increment:h3; 30 counter-reset:p; 31 margin-left:60px; 32 } 33 p:before{ 34 content:counter(p) '.'; 35 font-weight:bold; 36 } 37 p{ 38 counter-increment:p; 39 margin-left:80px; 40 } 41 </style> 42 </head> 43 <body> 44 <h1>h1 標題</h1> 45 <h2>h2 標題</h2> 46 <h3>h3 標題</h3> 47 <p>段落</p> 48 <p>段落</p> 49 <p>段落</p> 50 <h1>h1 標題</h1> 51 <h2>h2 標題</h2> 52 <h3>h3 標題</h3> 53 <p>段落</p> 54 <p>段落</p> 55 <p>段落</p> 56 <h1>h1 標題</h1> 57 <h2>h2 標題</h2> 58 <h3>h3 標題</h3> 59 <p>段落</p> 60 <p>段落</p> 61 <p>段落</p> 62 <h1>h1 標題</h1> 63 <h2>h2 標題</h2> 64 <h3>h3 標題</h3> 65 <p>段落</p> 66 <p>段落</p> 67 <p>段落</p> 68 <h1>h1 標題</h1> 69 <h2>h2 標題</h2> 70 <h3>h3 標題</h3> 71 <p>段落</p> 72 <p>段落</p> 73 <p>段落</p> 74 </body> 75 </html>
(3)、:first-line 僞元素
:first-line 僞元素用於向文本的首行設置特殊樣式。
下面的例子，瀏覽器會根據 :first-line 僞元素中的樣式對 p 元素的第一行文本進行格式化：
1 p:first-line{ 2 color:white; 3 background-color:green; 4 font:18px '宋體'; 5 }
注意：: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 僞元素用於向文本的首字母設置特殊樣式。
1 p:first-letter{ 2 color:red; 3 font-size:18px; 4 text-transform:uppercase; 5 }
注意：: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 的段落的首行進行格式化：
1 p.active:first-line{ 2 color:red; 3 font-size:18px; 4 }
(6)、多僞元素
多重僞元素便可以結合多個僞元素來使用。
下面的例子，段落的第一個字母將顯示爲紅色，其字體大小爲 20px。第一行中的其他文本將爲藍色，並帶有下劃線裝飾效果。段落中的其他文本將以默認字體大小和顏色顯示：
1 <head> 2 <style> 3 p:first-letter{ 4 color:red; 5 font-size:20px; 6 } 7 p:first-line{ 8 color:blue; 9 text-decoration:underline; 10 } 11 </style> 12 </head> 13 <body> 14 <h1>The best things in life are free, like hugs, smiles, friends, kisses, family, love and good memories.</h1> 15 <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> 16 <p>The best things in life are free, and the second best things are very, very expensive.</p> 17 </body>
- 1. CSS基本知識介紹
- 2. CSS樣式基本知識
- 3. css佈局基本知識
- 4. CSS Tutorial(一)：基本知識
- 5. CSS基本知識3-CSS盒模型
- 6. CSS基本知識5-CSS對齊
- 7. CSS基本知識2-CSS選擇
- 8. CSS基本知識8-CSS定位
- 9. CSS基本知識4-CSS行模型
- 10. CSS基本知識6-CSS字體
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Lua 基本語法 - Lua 教程
- • Kotlin學習（二）基本類型
- • Kotlin學習（一）基本語法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CSS基本知識介紹
- 2. CSS樣式基本知識
- 3. css佈局基本知識
- 4. CSS Tutorial(一)：基本知識
- 5. CSS基本知識3-CSS盒模型
- 6. CSS基本知識5-CSS對齊
- 7. CSS基本知識2-CSS選擇
- 8. CSS基本知識8-CSS定位
- 9. CSS基本知識4-CSS行模型
- 10. CSS基本知識6-CSS字體