這是全棧資料工程師養成攻略系列教程的第二十期：20 Web基礎 網頁的血肉CSS。
HTML決定了網頁中包含哪些內容，而CSS則決定了這些內容所呈現的樣式。
什麼是CSS
CSS全拼是Cascading Style Sheets，即層疊樣式表。之所以將CSS比作網頁的血肉，是因為CSS決定了網頁中的元素以何種樣式呈現，例如頁面內容的整體佈局、DOM元素的寬度和高度、標籤文字的大小和顏色等。CSS可以使原本單調難看的DOM元素變得靈動而美觀，CSS3中新增的一些新功能更是可以進一步增強網頁的動畫效果和感染力。
在Chrome瀏覽器中網頁元素上開啟開發者工具，Elements標籤頁下左半部分中會自動高亮對應的DOM元素，右半部分中則會顯示該元素對應的全部CSS樣式。
基本結構
CSS語法的基本結構由兩部分組成：選擇器（selector）、樣式（style）。選擇器指定了CSS作用的目標DOM元素，而樣式決定了在目標元素上應用何種樣式，包括樣式名（property）和樣式值（value）。
舉例來說，如果希望改變頁面中全部一級標題以及段落的字型大小和顏色，使用以下CSS即可。選擇器為h1和p，即直接使用目標DOM元素的名稱，樣式由大括號括起來，裡面可以包含一行或多行樣式，每行樣式使用key: value即鍵值對的形式指定並且以分號結束。這裡將字型大小即font-size分別設定為24和20，單位為畫素px，字型顏色設定為藍色和紅色。
h1 {
font-size: 24px;
color: blue;
}
p {
font-size: 20px;
color: red;
}複製程式碼使用CSS
使用CSS的方法主要有三種：
- 引入外部.css檔案；
- 在HTML中定義CSS；
- 在DOM元素中使用內聯CSS。
在我的Github上全棧資料工程師養成攻略的專案中，data資料夾裡提供了一個template.html，裡面包含以下內容，可以在此基礎上進一步編寫程式碼。其中的六個meta標籤定義了網頁的一些基本資訊，title標籤用於設定網頁的標題，而rel="shortcut icon"的link標籤可用於指定網頁所使用的瀏覽器圖示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="">
</head>
<body>
</body>
</html>複製程式碼第一種方法是新建一個.css檔案，例如style.css，在裡面編寫所需的CSS程式碼，就像之前設定h1和p的樣式一樣，然後在HTML的head中用link標籤引入寫好的樣式檔案。rel="stylesheet"指定了引入的是CSS樣式檔案，href屬性則使用相對路徑指明樣式檔案所在位置。
<link rel="stylesheet" href="style.css">複製程式碼第二種方法直接在HTML中寫CSS程式碼，需要使用style標籤包含起來，style標籤可以放在HTML中的任意位置，不過推薦放在head標籤中。
<style>
h1 {
font-size: 24px;
color: blue;
}
p {
font-size: 20px;
color: red;
}
</style>複製程式碼第三種方法直接在DOM元素的開始部分中通過style屬性指定CSS樣式。
<h1 style="font-size:30px;color:green;">這裡是一級標題</h1>
<p style="font-size:24px;background-color:blue;">這裡是一段內容</p>複製程式碼以上三種方法都可以對目標DOM元素應用指定的CSS樣式，並且優先順序依次提高，即當定義同一條CSS屬性時，後者中的屬性值會覆蓋前者。
因此，如果CSS樣式較多，不妨選擇引入外部.css檔案，從而實現CSS程式碼和HTML程式碼分離，更加便於開發和維護；如果CSS樣式較少，不妨直接選擇在HTML中定義CSS，避免新建過多專案檔案。如果希望將樣式應用於多個DOM元素，使用第一種和第二種方法都更為便捷和高效；如果希望僅將樣式應用於某一個DOM元素，則使用第三種方式更加直接簡單。
常用選擇器
CSS中支援多種選擇器，使得可以根據需求從不同的維度進行選擇，靈活地控制網頁中DOM元素的樣式。
最簡單的選擇器是DOM元素的標籤名稱，例如我們之前使用的h1和p，這類選擇器適用於同時更改某一種DOM元素的樣式。
也可以使用id作為選擇器，適用於只控制某一個DOM元素的樣式。應當注意，每個id在整個網頁中都應只出現一次，以下將id為main的對應元素color值設為red。
#main {
color: red;
}複製程式碼為了使樣式生效，在HTML的body中需要有對應的DOM元素。
<p id="main">這是一段內容</p>複製程式碼還可以使用class作為選擇器，適用於同時控制多個DOM元素的樣式，只需將它們設為同一個class即可，以下將class為content的全部元素color值都設為red。
.content {
color: red;
}複製程式碼這樣一來，在HTML中的DOM元素，如果class等於content，都會受到CSS樣式的作用。
<h1 class="content">這是一級標題</h1>
<h2 class="content">這是二級標題</h2>
<p class="content">這是一段內容</p>複製程式碼標籤名、id、class可以組合使用，例如h1#main表示id為main的h1標籤，p.content表示class為content的p標籤。
如果某個DOM元素符合多個選擇器，則會對CSS樣式進行合併覆蓋操作。不同的屬性名進行合併，其對應的屬性值疊加作用於DOM元素之上；相同的屬性名進行覆蓋，僅應用優先順序最高的選擇器所對應的屬性值。標籤名、class、id選擇器優先順序依次提高，並且它們組合之後的選擇器優先順序更高。總而言之，選擇器越具體越細化、條件越嚴格，則對應的優先順序越高。
除此之外，還有後代選擇器、子元素選擇器、相鄰兄弟選擇器、普通相鄰兄弟選擇器四種組合選擇器，舉例來說：
h1 p為後代選擇器，表示h1標籤中的p標籤，樣式作用於所有符合要求的p；h1>p為子元素選擇器，表示h1標籤直接子元素中的p標籤，h1必須是p的直接父元素，限制條件比後代選擇器更嚴格，樣式作用於所有符合要求的p；h1+p為相鄰兄弟選擇器，表示和h1標籤處於同一層級並且直接相鄰的p標籤，樣式作用於所有符合要求的p，至多一前一後兩個；h1~p為普通相鄰兄弟選擇器，表示和h1標籤處於同一層級的全部p標籤，兩者處於同一級別即可，限制條件不及相鄰兄弟選擇器嚴格，樣式作用於所有符合要求的p。
從以上選擇器的概念中也可以看出DOM的作用，DOM的層級樹形結構可以清楚地描述HTML標籤之間的父代、後代、子代、兄弟等關係，只有理解了DOM的概念和各類選擇器的定義，才能根據需求快速選出最恰當而簡潔的選擇器。另外，以上四種組合選擇器也可以和標籤名、id、class三種基礎選擇器進行自由組合，從而實現更加複雜和靈活的選擇器。
最後還有一類稱為偽類的選擇器，這裡介紹其中最常用的一種:hover，表示當滑鼠懸浮時才生效的樣式。相對於其他幾種選擇器，:hover所定義的樣式並非靜態，而是響應滑鼠懸浮事件才會生效，因此可以用來實現一些動態互動效果。
h1:hover {
color: red;
}複製程式碼常用樣式
CSS中的常用樣式包括背景、大小、文字、邊距、邊框、顯示、定位等幾大類。
背景指DOM元素所顯示的背景。任何DOM元素都可以設定背景樣式，例如文字、按鈕等，但我們一般僅為大範圍的DOM元素設定背景，例如整個html或body等，從而實現一種底層襯托的效果。
background-color：用於設定背景顏色，RGB、十六進位制、顏色名都可以；background-image：用於設定背景圖片，需要用url()函式提供圖片連結，使用相對路徑或網際網路上可訪問的圖片連結都行；background-repeat：當圖片不足以覆蓋DOM元素時，是否重複平鋪；background-size：使用圖片作為背景時，背景圖片的大小；background-position：使用圖片作為背景圖，如果圖片大於背景，優先顯示圖片的哪一塊。
body {
background-color: rgb(150, 234, 213);
background-image: url(http://zhanghonglun.cn/blog/wp-content/uploads/2015/09/bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center;
}複製程式碼如果使用圖片作為背景，則在不影響清晰度的前提下儘量選擇小檔案圖片，避免載入緩慢影響使用者體驗。同時需要恰當地組合設定以上樣式，使得圖片背景對於不同解析度的瀏覽器都能達到滿意的展示效果。
每個DOM元素都有自己的寬和高，即width和height。對於文字類標籤則可以設定字型大小，即font-size。大小的單位有畫素px和百分比%等，前者為絕對值，後者為相對於父元素的相對值。預設情況下，html的寬和高都是瀏覽器大小的100%。DOM元素的預設高度為其所佔內容所需的高度，預設寬度則取決於是塊級元素還是內聯元素，前者寬度預設為父元素的100%，而後者寬度預設為其所佔內容所需的寬度。
文字類標籤可設定的樣式包括：
- color：文字的顏色，RGB、十六進位制、顏色名都可以；
- text-align：文字居向，可以是
left、right或center； - text-decoration：文字是否有下劃線，設為
none可以取消掉連結的預設下劃線； - text-indent：文字首行縮排寬度；
- line-height：文字段落的行距；
- font-size：文字的大小，一般以畫素
px為單位； - font-family：文字的字型，可以同時設定多個值，瀏覽器將逐一嘗試直到字型可用。
h1 {
color: #ddd;
text-align: center;
text-decoration: none;
text-indent: 1em;
line-height: 1.2;
font-size: 22px;
font-family: Microsoft Yahei;
}複製程式碼邊距主要包括margin和padding，前者是DOM元素四周外部的邊距，後者是DOM元素四周內部的邊距，預設情況下DOM元素的寬高包括padding但不包括margin。邊距的單位可以是畫素px或百分比%，如果提供一個值則代表上下左右四個方向，提供兩個值則第一個值代表上下、第二個值代表左右，提供四個值則依次代表上、右、下、左。
p {
margin: 30px 40px;
padding: 5px;
}複製程式碼margin和padding之間還存在一個邊框即border，可以設定邊框的粗細、線型、顏色、圓角和陰影。
div {
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.4);
}複製程式碼margin、border和padding構成了DOM元素的盒模型（Box Model）。在開發者工具Element標籤頁下，右半部分底部即可看到當前高亮元素所對應的盒模型，從外到內依次是橙色的margin、黃色的border、綠色的padding和藍色的內容部分。
display屬性可以決定DOM元素的顯示方式，可以設定為inline、block、inline-block等，分別對應內聯元素、塊級元素、內聯塊級元素，使用以下程式碼即可將span設定為塊級元素。
<span style="display:block;">塊級元素span</span>
<span style="display:block;">塊級元素span</span>複製程式碼position即定位，是CSS中非常重要的一項屬性，決定了HTML頁面中DOM元素的位置和佈局。DOM元素會遵循預設的文件流進行排版，即從上到下依次排列，並且都佔據相應的空間。塊級元素單獨佔據一行，內聯元素排列於同一行中直到超出瀏覽器寬度，並且所有DOM元素預設居左對齊。如果我們希望網頁內容按照預期的設計進行佈局，例如將DOM元素居中顯示、在特定位置新增一個按鈕或圖示等，則需要靈活地使用多種定位方式。
position可取的值包括static、fixed、relative、absolute和float，其中static即為預設遵循的文件流定位方式。
fixed是指固定在瀏覽器視窗中的某個位置，需要結合top、bottom、left、right使用，例如將DOM元素固定在相對瀏覽器視窗上端40個畫素、左端50個畫素的位置。
p {
position: fixed;
top: 40px;
left: 50px;
}複製程式碼relative同樣需要結合top等屬性使用，不同的是參照物不是瀏覽器視窗的四端，而是static定位方式所對應的預設位置，因此可以理解為在預設的位置上疊加一些偏移。
absolute即絕對定位，需要結合top等屬性使用，以其直接父元素為參照物進行定位。可以將某一個DOM元素A設為position:absolute，同時將其直接父元素B設為position:relative，從而可以自由任意地將A放置在B中的任何位置。
float即浮動定位，可以將一個或多個DOM元素浮動至瀏覽器視窗的最左端或最右端。浮動定位雖然很自由，可以實現瀑布流之類的佈局效果，但是破壞了預設的文件流，並且在操作不當時容易導致意料之外的結果，因此並不推薦。
<h2 style="float:right;">浮動的內容</h2>複製程式碼以上定位方式中，static和relative對應的DOM元素佔據相應的頁面空間，而fixed、absolute、float對應的DOM元素不佔據任何空間，只是疊加在已有的頁面內容上，並且可以通過z-index屬性設定多元素疊加時的顯示順序。
CSS3
CSS3是CSS的最新版本，引入了許多更為豐富的新屬性，並且已經被大多數主流瀏覽器所支援，例如漸變、變換、過渡、動畫等，還包括之前提及的邊框圓角和陰影。如果說CSS給DOM元素賦予了豐富的樣式，那麼CSS3帶來的則是更為炫酷的特效。
漸變包括線性漸變和徑向漸變，可以作為DOM元素的背景效果，不過比較雞肋，在實際情況中使用並不多。
transform即變換，包括平移、旋轉、縮放、斜切等二維變換，以及3D旋轉、3D縮放、透視等3D變換。可以將變換直接應用於DOM元素，用於修改其顯示效果，也可以僅將變換應用於被滑鼠懸浮下的狀態，從而實現滑鼠懸浮動畫效果。需要注意的是，CSS3屬性需要在屬性名前加上相應的字首，用於適應不同的瀏覽器。
/*滑鼠懸浮後變換*/
#transform {
width: 200px;
height: 120px;
}
#transform:hover {
cursor: pointer;
/* Safari and Chrome */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
transform: rotate(180deg);
}複製程式碼另一項極為常用的CSS3屬性是transition即過渡，用於在CSS屬性變化時提供一段過渡效果。例如以上的滑鼠懸浮變換，結合使用過渡可以實現更好的互動體驗。
#transform {
width: 200px;
height: 120px;
/* 過渡 */
-webkit-transition: -webkit-transform .4s;
-moz-transition: -moz-transform .4s;
-ms-transition: -ms-transform .4s;
-o-transition: -o-transform .4s;
transition: transform .4s;
}
#transform:hover {
cursor: pointer;
/* Safari and Chrome */
-webkit-transform: rotate(180deg);
/* Firefox */
-moz-transform: rotate(180deg);
/* IE */
-ms-transform: rotate(180deg);
/* Opera */
-o-transform: rotate(180deg);
transform: rotate(180deg);
}複製程式碼transition後面可以提供4個引數，分別表示需要過渡的CSS屬性、過渡持續時間、過渡的時間變化曲線、過渡效果開始的延時時間，後兩項可以省略，預設值分別為線性過渡和無延時。需要注意，所有的CSS3屬性前都需要加上相應的瀏覽器字首。由於transition是DOM元素始終具備的屬性，所以應當直接應用於DOM元素，而不是僅應用於懸浮狀態下。
animation即動畫，可以為DOM元素新增豐富而流暢的動畫效果。使用之前需要先用@keyframes定義一個動畫，其中包括多個關鍵幀，用於說明動畫的不同時間節點所呈現的屬性。以下動畫定義了四個關鍵幀，不同幀所對應的位置和背景顏色不同。這樣一來，動畫執行之後便會從每一幀過渡到下一幀，直到回到最初的狀態。
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}複製程式碼定義好動畫之後再使用animation屬性將動畫繫結至DOM元素即可。animation可以使用6個引數，分別對應動畫的名稱、動畫持續時間、動畫的時間曲線、動畫開始的延時、動畫播放的輪數、相鄰輪數之間的動畫方向，後四項可以省略，預設值分別為線性動畫、無延時、播放1輪、正常播放。
#animation {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}複製程式碼關於CSS3的更多內容，可以參考以下連結：www.runoob.com/css3/css3-t…。
CSS例項
HTML中button的預設樣式十分難看，現在讓我們用CSS的強大功能對其進行美化，並新增滑鼠懸浮效果。
首先，給button周圍一些邊距，將背景色設為透明，設定邊框樣式，並將字型調大一些。
button {
padding: 16px 20px;
margin: 10px;
outline: none;
background-color: transparent;
border: 1px solid #000;
font-size: 30px;
}複製程式碼然後，通過開發者工具互動地調整顏色，得到一個看起來還不錯的顏色#6ebade，作為邊框和文字的顏色，並設定邊框圓角和文字字型，同時加上過渡。
button {
padding: 16px 20px;
margin: 10px;
outline: none;
background-color: transparent;
border: 1px solid #6ebade;
font-size: 30px;
color: #6ebade;
border-radius: 5px;
font-family: Microsoft Yahei;
-webkit-transition: color, background-color .4s;
-ms-transition: color, background-color .4s;
-moz-transition: color, background-color .4s;
-o-transition: color, background-color .4s;
transition: color, background-color .4s;
}複製程式碼最後，新增滑鼠懸浮後的樣式，包括改變滑鼠樣式、背景色和文字顏色。
button:hover {
background-color: #6ebade;
color: #fff;
cursor: pointer;
}複製程式碼補充學習
CSS的基本內容無非選擇器和樣式，但由於選擇器型別豐富，選擇器之間也可以自由靈活地進行組合，CSS可設定的樣式屬性名非常之多，每個屬性名又對應許多種可選的屬性值，這些都使得CSS相對HTML而言更加博大精深。同樣的HTML、不同的CSS，最後呈現的效果可能差之千里。只有通過不斷的練習，觀察不同CSS程式碼組合之後的效果，才能更好地感受和理解每一項CSS屬性的作用。以下連結提供了關於CSS的更多內容，www.runoob.com/css/css-int…，裡面提供了更為詳細和系統的講解，並結合大量例項程式碼加以鞏固，推薦完整地瀏覽和嘗試一遍。
視訊連結：