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

張巨集倫發表於2017-04-25
全棧Web網頁CSS

這是全棧資料工程師養成攻略系列教程的第二十期：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和藍色的內容部分。

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

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…，裡面提供了更為詳細和系統的講解，並結合大量例項程式碼加以鞏固，推薦完整地瀏覽和嘗試一遍。

視訊連結：

如果覺得文章不錯，不妨點一下左下方的喜歡～

相關文章