CSS與HTML的關係
Cascading Style Sheet 即層疊樣式表
在上一篇文中，已經介紹了一些非常常用的HTML標籤，接下來將步入CSS的學習，如果將單純HTML構成的頁面當做是一副素描畫，那麼CSS就是為這幅畫進行上色的。
當然，CSS也可以對HTML文件進行佈局，在最早沒有出現CSS的時候，HTML佈局大多都採用<table>標籤進行佈局，那麼CSS誕生之後就不用那麼做了，使用CSS進行佈局非常方便。
CSS的學習非常簡單，我們可以大體給他分為2部分：
1.選擇標籤元素（選擇器）
2.操縱標籤元素（element）
而這篇文章主要是講的如何選擇一個標籤元素。
引入CSS的四種方式
行內式
直接在HTML元素中新增style屬性並寫入CSS樣式即為行內式，並不推薦這樣做，因為後期維護非常麻煩！
行內式匯入CSS有一個特點，即只是為當前設定了style屬性的HTML元素生效。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> </head> <body> <p style="background-color:red">行內式匯入CSS樣式"</p> <p>未匯入CSS樣式</p> </body> </html>
嵌入式
在<head>標籤中內嵌子標籤<style> ，再在其中寫入CSS樣式即為嵌入式，嵌入式的使用可以在初期為編寫頁面的時候使用，但是投入到實際生產中應該將CSS程式碼與HTML程式碼做好分離，這樣才能便於後期維護。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> p{ color:red; } </style> </head> <body> <p>嵌入式匯入CSS樣式</p> <p>嵌入式匯入CSS樣式</p> </body> </html>
連結式
在<head>標籤中內嵌子標籤<link>，用HTML中的語法來連結一個已經寫好樣式的CSS檔案，即為連結式。連結式是實際生產中最常用的匯入CSS樣式的方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <link rel="stylesheet" href="你的css檔案" type="text/css"> </head> <body> <p>連結式匯入CSS樣式</p> <p>連結式匯入CSS樣式</p> </body> </html>
匯入式
在<head>標籤中內嵌子標籤<style>，用CSS中的語法來@import "路徑"匯入一個已經寫好樣式的CSS檔案，即為匯入式。匯入式並不常見，但不排除有人會這樣使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> @import"你的css檔案路徑" </style> </head> <body> <p>匯入式匯入CSS樣式</p> <p>匯入式匯入CSS樣式</p> </body> </html>
CSS選擇器之基本選擇器
* 通用選擇器
* 代表所有，我們可以用它來清除掉所有HTML元素本身就具有的一些屬性，如內邊距，外邊距等等。
padding：內邊距
margin：外邊距
我們可以使用通用選擇器*來將他們全部設定成0，但是不建議這麼做。因為有一個專門的CSS reset清除預設樣式的程式碼來做這件事，程式碼我放在下面了。
*{ padding:0; margin:0; }
E 名字選擇器
名字選擇器是選擇多個同名的HTML元素，我們可以用它來清除列表元素本身具有的一些樣式。
ul{ list-style:none; }
# ID選擇器
ID選擇器以#作為關鍵字，後面跟上HTML元素的id，因為元素id具有唯一的性質，故該選擇器一次只能選擇一個。
#div_1{
background-color:red;
}
. 類選擇器
類選擇器以.作為關鍵字，後面跟上HTML元素的class，因為元素class屬性不具備唯一性，故一次性可選擇多個。
補充：一個元素可以有多個class，用 空格隔開。
.bbb{ background-color:red; }
CSS選擇器之組合選擇器
E 特徵 交集選擇器
交集選擇器可以用於從某一具有特性的共同的元素中取出一個具有獨特特徵的元素，這麼說可能有點繞。我們來看下面圖中的程式碼，如果我們只想讓class為bbb的<div>的背景色變紅應該怎麼做呢？這個時候就需要用到交集選擇器了。
如果只選擇<div>標籤的話，那麼有2個<div>。
如果只選擇class為bbb的標籤的話，那麼就有3個標籤。
所以我們只能用交集選擇器。
div.bbb{ background-color:red; } /* 先選出所有div標籤，然後再到選中的div標籤中選出class為bbb的標籤 */
E,F 並集選擇器
我們可以使用元素E,元素F這樣的語法選擇出多個元素。中間以逗號,分割。
#div_1,.p-1{ background-color:red; }
E F 後代選擇器
我們可以使用元素E 元素F這樣的語法選擇出元素E下的所有元素F。中間以空格分割。
PS：向下找多層
#content a{ background-color:red; } /* 先找到id為content的元素，再找到該元素下的所有a標籤 */
E>F 子代選擇器
我們可以使用元素E>元素F這樣的語法選擇出元素E下一級的所有元素F。中間以>分割。
PS：向下找一層
#content>ul>div>a{ background-color:red; } /* 先找到id為content的元素，再找到該元素下一級的所有ul標籤，再找到ul標籤下一級的div標籤，在找到div下一級的a標籤 */
E+F 同級毗鄰選擇器
我們可以使用元素E+元素F這樣的語法選擇出緊隨元素E後的同級的所有元素F。中間以+分割。
PS：同級向後找，元素F的上一個必須是元素E
div+p{ background-color:red; }
E~F 同級多跨選擇器
該選擇器與毗鄰選擇器有2點最大的不同，第一點，不用必須挨著，第二點，元素F的上一個元素不用是元素E。
PS:同級向後找所有，元素F的上一個可以不是元素E
div~p{ background-color:red; }
偽類選擇器
動態偽類選擇器
動態偽類選擇器是比較常用的一種偽類選擇器，因此需要介紹一下。
| 選擇器 | 型別 | 功能描述 |
|---|---|---|
| E:link | 連結偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超連結並未被訪問過。常用於連結描點上 |
| E:visited | 連結偽類選擇器 | 選擇匹配的E元素，而且匹配元素被定義了超連結並已被訪問過。常用於連結描點上 |
| E:active | 使用者行為選擇器 | 選擇匹配的E元素，且匹配元素被啟用。常用於連結描點和按鈕上 |
| E:hover | 使用者行為選擇器 | 選擇匹配的E元素，且使用者滑鼠停留在元素E上。IE6及以下瀏覽器僅支援a:hover |
| E:focus | 使用者行為選擇器 | 選擇匹配的E元素，而且匹配元素獲取焦點 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> a:link { background-color: red; } a:visited { background-color: blue; } a:active { background-color: green; } a:hover { font-size: "22px"; } a:focus { color: white; } </style> </head> <body> <a href="#">點我</a> </body> </html>
目標偽類選擇器
不常用，可忽略。
| 選擇器 | 功能描述 |
|---|---|
| E:target | 選擇匹配E的所有元素，且匹配元素被相關URL指向 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } </style> </head> <body> <h1>這是標題</h1> <p><a href="#news1">跳轉至內容 1</a></p> <p><a href="#news2">跳轉至內容 2</a></p> <p>請點選上面的連結，:target 選擇器會突出顯示當前活動的 HTML 錨。</p> <p id="news1"><b>內容 1...</b></p> <p id="news2"><b>內容 2...</b></p> <p><b>註釋：</b> Internet Explorer 8 以及更早的版本不支援 :target 選擇器。</p> </body> </html>
狀態偽類選擇器
狀態偽類選擇器還比較常用。可以記一下，它主要處理表單按鈕的一些狀態。
| 選擇器 | 型別 | 功能描述 |
|---|---|---|
| E:checked | 選中狀態偽類選擇器 | 匹配選中的核取按鈕或者單選按鈕表單元素 |
| E:enabled | 啟用狀態偽類選擇器 | 匹配所有啟用的表單元素 |
| E:disabled | 不可用狀態偽類選擇器 | 匹配所有禁用的表單元素 |
這個就不寫演示程式碼了，非常簡單。checked就是對單選框啊，核取方塊啊這些選中了的狀態，enabled就是能被填寫的所有表單元素，而disabled是不能被填寫的所有表單元素。
結構偽類選擇器
很少使用，看一下就行，感興趣的可以自己敲一下程式碼。
| 選擇器 | 功能描述 |
|---|---|
| E:first-child | 作為父元素的第一個子元素的元素E。與E:nth-child(1)等同 |
| E:last-child | 作為父元素的最後一個子元素的元素E。與E:nth-last-child(1)等同 |
| E:root | 選擇匹配元素E所在文件的根元素。在HTML文件中，根元素始終是html，此時該選擇器與html型別選擇器匹配的內容相同 |
| E F:nth-child(n) | 選擇父元素E的第n個子元素F。其中n可以是整數（1，2，3）、關鍵字（even，odd）、可以是公式（2n+1）,而且n值起始值為1，而不是0. |
| E F:nth-last-child(n) | 選擇父元素E的倒數第n個子元素F。此選擇器與E:nth-child(n)選擇器計算順序剛好相反，但使用方法都是一樣的，其中：nth-last-child(1)始終匹配最後一個元素，與last-child等同 |
| E:nth-of-type(n) | 選擇父元素內具有指定型別的第n個E元素 |
| E:nth-last-of-type(n) | 選擇父元素內具有指定型別的倒數第n個E元素 |
| E:first-of-type | 選擇父元素內具有指定型別的第一個E元素，與E:nth-of-type(1)等同 |
| E:last-of-type | 選擇父元素內具有指定型別的最後一個E元素，與E:nth-last-of-type(1)等同 |
| E:only-child | 選擇父元素只包含一個子元素，且該子元素匹配E元素 |
| E:only-of-type | 選擇父元素只包含一個同型別子元素，且該子元素匹配E元素 |
| E:empty | 選擇沒有子元素的元素，而且該元素也不包含任何文字節點 |
注意事項：
（1），“
ul>li:nth-child(3)”表達的並不是一定選擇列表<ul>元素中的第3個子元素<li>，僅有列表<ul>中第3個<li>元素前不存在其他的元素，命題才有意義，否則不會改變列表第3個<li>元素的樣式。（2），
:nth-child(n)中引數只能是n，不可以用其他字母代替。（3），
:nth-child(odd)選擇的是奇數項，而使用:nth-last-child(odd)選擇的卻是偶數項
這裡還是寫兩個，上面的這些選擇器其實對列表相關的標籤十分好操作。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> ul li:nth-child(1){ color:red; } ul>li:last-child{ color:blue; } ul li:nth-child(odd){ font-size:20px; } </style> </head> <body> <ul> <li>li-1</li> <li>li-2</li> <li>li-3</li> <li>li-4</li> <li>li-5</li> </ul> </body> </html>
否定偽類選擇器
不常用，可忽略。
| 選擇器 | 功能描述 |
|---|---|
| E:not(F) | 匹配所有除元素F外的E元素 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> .action:not(h1){ color:red; } </style> </head> <body> <div class="action">div</div> <p class="action">p</p> <span class="action">span</span> <h1 class="action">h1</h1> <h2 class="action">h2</h2> </body> </html>
屬性選擇器
屬性選擇器常用到。使用它的時候應該考慮到和其他選擇器一起使用，如交集選擇器。
| 選擇器 | 功能描述 |
|---|---|
| [attribute] | 用於選取帶有指定屬性的元素。 |
| [attribute=value] | 用於選取帶有指定屬性和值的元素。 |
| [attribute~=value] | 用於選取屬性值中包含指定詞彙的元素。 |
| [attribute|=value] | 用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。 |
| [attribute^=value] | 匹配屬性值以指定值開頭的每個元素。 |
| [attribute$=value] | 匹配屬性值以指定值結尾的每個元素。 |
| [attribute*=value] | 匹配屬性值中包含指定值的每個元素。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> [class="action"]{ color:red; } </style> </head> <body> <div class="action">div</div> <p class="action">p</p> <span class="action">span</span> <h1 class="action">h1</h1> <h2 class="action">h2</h2> </body> </html>
偽元素選擇器
| 選擇器 | 功能描述 |
|---|---|
| ::first-line | 匹配文字首行 |
| ::first-letter | 匹配文字首字母 |
| ::before | 使用 contnet 屬性生成額外的內容並插入在標記中，插在前面 |
| ::after | 使用 content 屬性生成額外的內容並插入在標記中，插在後面 |
| ::selection | 匹配突出顯示的文字 |
注意：使用::after與::before一定要在content中加內容！但是這可能會影響到整個網頁的佈局排版！慎重！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title>CSS學習</title> <style type="text/css"> body div:first-child::first-line{ color: red; } body div:nth-child(2)::first-letter{ font-size: 29px; color: orange; } body div:nth-child(3)::before{ content: "insert before"; color: brown; } body div:last-child::after{ content: "insert after"; color: orchid; } </style> </head> <body> <div>::first-line 匹配文字首行..</div> <div> X ::first-letter 匹配文字首字母..</div> <div><----- ::before是在之前插入</div> <div>::after是在之後插入-----></div> </body> </html>
擴充套件：CSS reset
在介紹通用選擇器的時候，說過在開始佈局頁面之前，一定要將原本的一些標籤的屬性給重置為0，比如列表系列，輸入框<input>等等，所以我們需要在開始佈局頁面的時候就加入一段CSS程式碼，這裡我給搬運了過來。
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}