標籤：

全棧 - 20 Web 基礎 網頁的血肉 CSS

02-04

這是全棧數據工程師養成攻略系列教程的第二十期：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 {n font-size: 24px;n color: blue;n}nnp {n font-size: 20px;n color: red;n}n

使用CSS

使用CSS的方法主要有三種：

  • 引入外部.css文件；
  • 在HTML中定義CSS；
  • 在DOM元素中使用內聯CSS。

在我的Github上全棧數據工程師養成攻略的項目中，data文件夾里提供了一個template.html，裡面包含以下內容，可以在此基礎上進一步編寫代碼。其中的六個meta標籤定義了網頁的一些基本信息，title標籤用於設置網頁的標題，而rel="shortcut icon"的link標籤可用於指定網頁所使用的瀏覽器圖標。

<!DOCTYPE html>n<html>n<head>n <meta charset="UTF-8" />n <meta http-equiv="X-UA-Compatible" content="IE=edge">n <meta name="viewport" content="width_=device-width, initial-scale=1">n <title></title>n <meta name="description" content="" />n <meta name="keywords" content="" />n <meta name="author" content="" />n <link rel="shortcut icon" href="">n</head>n<body>n</body>n</html>n

第一種方法是新建一個.css文件，例如style.css，在裡面編寫所需的CSS代碼，就像之前設定h1和p的樣式一樣，然後在HTML的head中用link標籤引入寫好的樣式文件。rel="stylesheet"指定了引入的是CSS樣式文件，href屬性則使用相對路徑指明樣式文件所在位置。

<link rel="stylesheet" href="style.css">n

第二種方法直接在HTML中寫CSS代碼，需要使用style標籤包含起來，style標籤可以放在HTML中的任意位置，不過推薦放在head標籤中。

<style>n h1 {n font-size: 24px;n color: blue;n }nn p {n font-size: 20px;n color: red;n }n</style>n

第三種方法直接在DOM元素的開始部分中通過style屬性指定CSS樣式。

<h1 stylex="font-size:30px;color:green;">這裡是一級標題</h1>n<p stylex="font-size:24px;background-color:blue;">這裡是一段內容</p>n

以上三種方法都可以對目標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 {n color: red;n}n

為了使樣式生效，在HTML的body中需要有對應的DOM元素。

<p id="main">這是一段內容</p>n

還可以使用class作為選擇器，適用於同時控制多個DOM元素的樣式，只需將它們設為同一個class即可，以下將class為content的全部元素color值都設為red。

.content {n color: red;n}n

這樣一來，在HTML中的DOM元素，如果class等於content，都會受到CSS樣式的作用。

<h1 class="content">這是一級標題</h1>n<h2 class="content">這是二級標題</h2>n<p class="content">這是一段內容</p>n

標籤名、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 {n color: red;n}n

常用樣式

CSS中的常用樣式包括背景、大小、文本、邊距、邊框、顯示、定位等幾大類。

背景指DOM元素所顯示的背景。任何DOM元素都可以設置背景樣式，例如文字、按鈕等，但我們一般僅為大範圍的DOM元素設置背景，例如整個html或body等，從而實現一種底層襯托的效果。

  • background-color：用於設置背景顏色，RGB、十六進位、顏色名都可以；
  • background-image：用於設置背景圖片，需要用url()函數提供圖片鏈接，使用相對路徑或互聯網上可訪問的圖片鏈接都行；
  • background-repeat：當圖片不足以覆蓋DOM元素時，是否重複平鋪；
  • background-size：使用圖片作為背景時，背景圖片的大小；
  • background-position：使用圖片作為背景圖，如果圖片大於背景，優先顯示圖片的哪一塊。

body {n background-color: rgb(150, 234, 213);n background-image: url(http://zhanghonglun.cn/blog/wp-content/uploads/2015/09/bg.jpg);n background-repeat: no-repeat;n background-size: cover;n background-attachment: fixed;n background-position: center;n}n

如果使用圖片作為背景，則在不影響清晰度的前提下盡量選擇小文件圖片，避免載入緩慢影響用戶體驗。同時需要恰當地組合設置以上樣式，使得圖片背景對於不同解析度的瀏覽器都能達到滿意的展示效果。

每個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 {n color: #ddd;n text-align: center;n text-decoration: none;n text-indent: 1em;n line-height: 1.2;n font-size: 22px;n font-family: Microsoft Yahei;n}n

邊距主要包括margin和padding，前者是DOM元素四周外部的邊距，後者是DOM元素四周內部的邊距，默認情況下DOM元素的寬高包括padding但不包括margin。邊距的單位可以是像素px或百分比%，如果提供一個值則代表上下左右四個方向，提供兩個值則第一個值代表上下、第二個值代表左右，提供四個值則依次代表上、右、下、左。

p {n margin: 30px 40px;n padding: 5px;n}n

margin和padding之間還存在一個邊框即border，可以設置邊框的粗細、線型、顏色、圓角和陰影。

div {n border: 1px solid #ddd;n border-radius: 4px;n box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.4);n}n

margin、border和padding構成了DOM元素的盒模型（Box Model）。在開發者工具Element標籤頁下，右半部分底部即可看到當前高亮元素所對應的盒模型，從外到內依次是橙色的margin、黃色的border、綠色的padding和藍色的內容部分。

display屬性可以決定DOM元素的顯示方式，可以設置為inline、block、inline-block等，分別對應內聯元素、塊級元素、內聯塊級元素，使用以下代碼即可將span設置為塊級元素。

<span stylex="display:block;">塊級元素span</span>n<span stylex="display:block;">塊級元素span</span>n

position即定位，是CSS中非常重要的一項屬性，決定了HTML頁面中DOM元素的位置和布局。DOM元素會遵循默認的文檔流進行排版，即從上到下依次排列，並且都佔據相應的空間。塊級元素單獨佔據一行，內聯元素排列於同一行中直到超出瀏覽器寬度，並且所有DOM元素默認居左對齊。如果我們希望網頁內容按照預期的設計進行布局，例如將DOM元素居中顯示、在特定位置添加一個按鈕或圖標等，則需要靈活地使用多種定位方式。

position可取的值包括static、fixed、relative、absolute和float，其中static即為默認遵循的文檔流定位方式。

fixed是指固定在瀏覽器窗口中的某個位置，需要結合top、bottom、left、right使用，例如將DOM元素固定在相對瀏覽器窗口上端40個像素、左端50個像素的位置。

p {n position: fixed;n top: 40px;n left: 50px;n}n

relative同樣需要結合top等屬性使用，不同的是參照物不是瀏覽器窗口的四端，而是static定位方式所對應的默認位置，因此可以理解為在默認的位置上疊加一些偏移。

absolute即絕對定位，需要結合top等屬性使用，以其直接父元素為參照物進行定位。可以將某一個DOM元素A設為position:absolute，同時將其直接父元素B設為position:relative，從而可以自由任意地將A放置在B中的任何位置。

float即浮動定位，可以將一個或多個DOM元素浮動至瀏覽器窗口的最左端或最右端。浮動定位雖然很自由，可以實現瀑布流之類的布局效果，但是破壞了默認的文檔流，並且在操作不當時容易導致意料之外的結果，因此並不推薦。

<h2 stylex="float:right;">浮動的內容</h2>n

以上定位方式中，static和relative對應的DOM元素佔據相應的頁面空間，而fixed、absolute、float對應的DOM元素不佔據任何空間，只是疊加在已有的頁面內容上，並且可以通過z-index屬性設置多元素疊加時的顯示順序。

CSS3

CSS3是CSS的最新版本，引入了許多更為豐富的新屬性，並且已經被大多數主流瀏覽器所支持，例如漸變、變換、過渡、動畫等，還包括之前提及的邊框圓角和陰影。如果說CSS給DOM元素賦予了豐富的樣式，那麼CSS3帶來的則是更為炫酷的特效。

漸變包括線性漸變和徑向漸變，可以作為DOM元素的背景效果，不過比較雞肋，在實際情況中使用並不多。

transform即變換，包括平移、旋轉、縮放、斜切等二維變換，以及3D旋轉、3D縮放、透視等3D變換。可以將變換直接應用於DOM元素，用於修改其顯示效果，也可以僅將變換應用於被滑鼠懸浮下的狀態，從而實現滑鼠懸浮動畫效果。需要注意的是，CSS3屬性需要在屬性名前加上相應的前綴，用於適應不同的瀏覽器。

/*滑鼠懸浮後變換*/n#transform {n width: 200px;n height: 120px;n}n#transform:hover {n cursor: pointer;n /* Safari and Chrome */n -webkit-transform: rotate(180deg);n /* Firefox */n -moz-transform: rotate(180deg);n /* IE */n -ms-transform: rotate(180deg);n /* Opera */n -o-transform: rotate(180deg);n transform: rotate(180deg);n}n

另一項極為常用的CSS3屬性是transition即過渡，用於在CSS屬性變化時提供一段過渡效果。例如以上的滑鼠懸浮變換，結合使用過渡可以實現更好的交互體驗。

#transform {n width: 200px;n height: 120px;n /* 過渡 */n -webkit-transition: -webkit-transform .4s;n -moz-transition: -moz-transform .4s;n -ms-transition: -ms-transform .4s;n -o-transition: -o-transform .4s;n transition: transform .4s;n}n#transform:hover {n cursor: pointer;n /* Safari and Chrome */n -webkit-transform: rotate(180deg);n /* Firefox */n -moz-transform: rotate(180deg);n /* IE */n -ms-transform: rotate(180deg);n /* Opera */n -o-transform: rotate(180deg);n transform: rotate(180deg);n}n

transition後面可以提供4個參數，分別表示需要過渡的CSS屬性、過渡持續時間、過渡的時間變化曲線、過渡效果開始的延時時間，後兩項可以省略，默認值分別為線性過渡和無延時。需要注意，所有的CSS3屬性前都需要加上相應的瀏覽器前綴。由於transition是DOM元素始終具備的屬性，所以應當直接應用於DOM元素，而不是僅應用於懸浮狀態下。

animation即動畫，可以為DOM元素添加豐富而流暢的動畫效果。使用之前需要先用@keyframes定義一個動畫，其中包括多個關鍵幀，用於說明動畫的不同時間節點所呈現的屬性。以下動畫定義了四個關鍵幀，不同幀所對應的位置和背景顏色不同。這樣一來，動畫運行之後便會從每一幀過渡到下一幀，直到回到最初的狀態。

@keyframes myfirstn{n 0% {background:red; left:0px; top:0px;}n 25% {background:yellow; left:200px; top:0px;}n 50% {background:blue; left:200px; top:200px;}n 75% {background:green; left:0px; top:200px;}n 100% {background:red; left:0px; top:0px;}n}nn@-webkit-keyframes myfirst /* Safari and Chrome */n{n 0% {background:red; left:0px; top:0px;}n 25% {background:yellow; left:200px; top:0px;}n 50% {background:blue; left:200px; top:200px;}n 75% {background:green; left:0px; top:200px;}n 100% {background:red; left:0px; top:0px;}n}n

定義好動畫之後再使用animation屬性將動畫綁定至DOM元素即可。animation可以使用6個參數，分別對應動畫的名稱、動畫持續時間、動畫的時間曲線、動畫開始的延時、動畫播放的輪數、相鄰輪數之間的動畫方向，後四項可以省略，默認值分別為線性動畫、無延時、播放1輪、正常播放。

#animation {n width: 100px;n height: 100px;n background: red;n position: relative;n animation: myfirst 5s;n -webkit-animation: myfirst 5s; /* Safari and Chrome */n}n

關於CSS3的更多內容，可以參考以下鏈接：http://www.runoob.com/css3/css3-tutorial.html。

CSS實例

HTML中button的默認樣式十分難看，現在讓我們用CSS的強大功能對其進行美化，並添加滑鼠懸浮效果。

首先，給button周圍一些邊距，將背景色設為透明，設置邊框樣式，並將字體調大一些。

button {n padding: 16px 20px;n margin: 10px;n outline: none;n background-color: transparent;n border: 1px solid #000;n font-size: 30px;n}n

然後，通過開發者工具交互地調整顏色，得到一個看起來還不錯的顏色#6ebade，作為邊框和文本的顏色，並設置邊框圓角和文本字體，同時加上過渡。

button {n padding: 16px 20px;n margin: 10px;n outline: none;n background-color: transparent;n border: 1px solid #6ebade;n font-size: 30px;n color: #6ebade;n border-radius: 5px;n font-family: Microsoft Yahei;n -webkit-transition: color, background-color .4s;n -ms-transition: color, background-color .4s;n -moz-transition: color, background-color .4s;n -o-transition: color, background-color .4s;n transition: color, background-color .4s;n}n

最後，添加滑鼠懸浮後的樣式，包括改變滑鼠樣式、背景色和文本顏色。

button:hover {n background-color: #6ebade;n color: #fff;n cursor: pointer;n}n

補充學習

CSS的基本內容無非選擇器和樣式，但由於選擇器類型豐富，選擇器之間也可以自由靈活地進行組合，CSS可設置的樣式屬性名非常之多，每個屬性名又對應許多種可選的屬性值，這些都使得CSS相對HTML而言更加博大精深。同樣的HTML、不同的CSS，最後呈現的效果可能差之千里。只有通過不斷的練習，觀察不同CSS代碼組合之後的效果，才能更好地感受和理解每一項CSS屬性的作用。以下鏈接提供了關於CSS的更多內容，http://www.runoob.com/css/css-intro.html，裡面提供了更為詳細和系統的講解，並結合大量實例代碼加以鞏固，推薦完整地瀏覽和嘗試一遍。

視頻鏈接：

網頁的血肉CSS（一）

網頁的血肉CSS（二）

網頁的血肉CSS（三）link.juejin.im/?
推薦閱讀：

※css sprite中的sprite應該如何翻譯比較達意？
※如何解決table標籤和col標籤的一系列問題?

TAG:CSS |