3. CSS

在上一章中，我們學習了HTML的基本寫法，也知道了網頁內容的基本寫法。在本章中，我們將學習如何讓網頁上的內容按照我們的想法去呈現。

如果說HTML指定了網頁的內容，那麼CSS控制的就是這些內容的顯示形式。

CSS是Cascading Style Sheets，層疊樣式表的簡稱。所謂樣式表，就是一種對網頁上各個元素顯示樣式的設置。在W3School上同樣有非常全面詳實的教程，各位可以自行查看：https://www.w3school.com.cn/css/index.asp 本篇教程會選擇性地挑出一些重點來講。CSS指定的網頁樣式極其靈活，如果日後製作網頁的時候有不懂的或者不會的，可以嘗試百度解決，或者尋求大佬的幫助。

讓我們開始吧！

樣式表

在我們學習CSS之前，我們需要首先了解怎麼樣寫樣式表。

樣式表通過若干條樣式聲明來實現對某個HTML元素的樣式控制。每一條樣式說明具有以下格式（注意英文半角冒號和分號）：

屬性名稱: 屬性值;

屬性名稱是一些CSS約定的固定內容，屬性值則是該屬性被設定的值。同樣，樣式表會忽略空格和轉行符，但按照優美的代碼規範寫會更容易理解。

舉個例子，下面就是一份樣式表：

height: 100px;
width: 200px;
color: white;
background-color: black;

在這個例子當中，有四條樣式聲明，分別指定了元素的高度、寬度、（文字）顏色、背景顏色。

更多關於樣式聲明和屬性的介紹，將在本章後半部分介紹，現在先讓我們看一看，這樣的樣式表怎麼才能作用在HTML的某個元素上。

行內樣式表

第一種作用方法，那就是直接寫在HTML的對應元素上。具體的寫法是，在HTML元素的開始標籤上加入屬性style，值爲樣式表的內容（排成一行，所以叫行內嘛），記得加引號哦！例子：

<div style="height: 100px; width: 200px; color: white; background-color: black;">這是一個塊元素</div>

可以實踐一下哦！

行內樣式表是所有樣式表作用方式中優先級最高的方法，也就是說，即便通過別的作用方式設定的樣式，如果與行內樣式表中的樣式有所衝突，依然會遵循行內樣式表中的設置。

問題在於，如果某個樣式表內容很多，或者同樣的樣式表需要作用在很多的元素上，全部使用行內樣式表寫在HTML的開始標籤上，整個HTML文件就顯得非常臃腫，也不方便維護。爲了實現樣式表和HTML元素的相對分離，我們還需要學習接下來幾個內容。

內聯樣式表

內聯樣式表是指，我們不把樣式表直接寫在HTML元素上，但是將它放在HTML文件中單獨的一個位置，方便統一管理。

你可以嘗試一下以下代碼（這是一份完整的代碼）：

<!DOCTYPE HTML>
<html>
<head>
  <title>內聯樣式表</title>
  <style>
    div {
      height: 100px;
      width: 200px;
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
  <div>Hello</div>
</body>
</html>

我們可以看到，在第5-12行，我們在HTML的head元素中加入了一個style元素，並在其中寫了一段樣式表（似乎還有些別的東西？不要急，過幾節就知道啦）。head中的style元素就是專門用於在HTML文件中加入內聯樣式表的。

然而，事實上內聯樣式表在真正的網頁應用的開發中使用的並不多。考慮一下，如果你有好幾個HTML文件中都需要用到類似的樣式表，就需要在每個HTML文件中都加入一個style元素，效率依然很低。同時，在HTML文件中寫CSS的代碼，本身就是一件讓人看着很不舒服的事情。

那麼，最常用的樣式表作用方式是什麼呢？請看下一節！

外聯樣式表

~~有內聯當然也要有外聯啦！~~所謂外聯樣式表，就是把樣式表單獨保存爲一個文件，在HTML的head元素中引用進來。

現在，我們在index.html文件旁邊新建一個index.css文件，後綴名.css說明了該文件爲css文件。使用sublime打開index.css並輸入以下內容：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

保存並關閉，接下來，在HTML文件（也就是index.html）中輸入以下內容：

<!DOCTYPE HTML>
<html>
<head>
  <title>外聯樣式表</title>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body>
  <div>Hello</div>
</body>
</html>

此時用瀏覽器打開index.html，如果你的文件沒有放錯位置，就應該可以看到黑底白字的hello方塊了。也就是說，在上面HTML代碼的第五行，我們使用了link標籤引入了一個css文件作爲樣式表。

在link標籤當中，rel屬性表示引入的文件和當前HTML的關係（這裏是樣式表），type屬性說明了引入文件的類型，href屬性是需要引入的文件的路徑（路徑的表達方式見1. 基礎章節）

但是直到現在我們都沒有解決一個問題：在CSS文件中，除了那四句樣式聲明，別的東西是什麼呢？

CSS選擇器

選擇器是CSS的重要概念，它的作用就好比是一個接線員，把樣式表作用在指定的HTML元素上。本節內容是CSS的一個難點，希望大家認真思考！

選擇器定義

每個CSS選擇器是一小段文字描述，描述了一種條件，滿足這個條件的HTML元素都會被配置爲這個選擇器對應的樣式表。選擇器和樣式表的聯合使用，也就產生了我們的層疊樣式表。

讓我們來看一下上一節的CSS代碼：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

在這裏，大括號包裹了四句樣式聲明，它們形成了一份樣式表，div則是這份樣式表對應的選擇器，它選擇到了頁面上的塊元素，使得樣式表對它生效。

選擇器規則

CSS選擇器有如下幾個規則（更多的選擇器規則見W3School，這裏列舉了常用的規則）：

直接以HTML元素爲名稱的選擇器：選擇頁面上所有該類型的元素。例如在上面的例子當中，選擇器div使得這份樣式表對頁面上所有的div元素同時生效。
以#開頭的選擇器（id選擇器）：選擇所有具有特殊id屬性的元素。例如，選擇器#abc會讓樣式表對所有設置有id="abc"的HTML元素生效。通常來說，頁面上的id屬性最好不要重複。
以.開頭的選擇器（類選擇器）：選擇所有具有特殊class屬性的元素。例如，選擇器.ddd會讓樣式表對所有設置有class="ddd"的HTML元素生效。類選擇器經常用於控制某個樣式表對一部分相似的HTML元素同時生效，頁面上經常會有多個元素具有同樣的class屬性。
注意，class屬性可以包含多個值，用空格隔開，它們均可單獨被選擇器選中。例如，具有屬性class="mmm nnn"的元素，既可以被.mmm選中，也可以被.nnn選中。
多個選擇器交集：對於直接相連的選擇器，需要同時滿足才能被選擇。例如，div.efg會選擇頁面上所有具有class="efg"屬性的div元素，但不會選擇任何其他類型元素。
多個選擇器並集：用逗號隔開的選擇器，只需要滿足其中任何一個即可被選擇。例如，h1, h2會選擇頁面上所有的h1和h2元素。
空格隔開的兩個選擇器（後代選擇器）：根據後一個選擇器選擇HTML元素，但必須滿足以下條件：被選擇的元素必須是前一個選擇器能夠選擇的某個HTML元素的內部。（這句話慢慢理解，可以看下面的例子。）後代選擇器在大型網頁中很常用，因爲它可以讓CSS代碼更加有條理，解決因爲頁面元素過多而導致class屬性重名的問題。

例子

<!DOCTYPE HTML>
<html>
<head>
  <title>CSS選擇器</title>
</head>
<body>
  <div id="app">
    <div class="top">
      <h1>這裏是標題</h1>
      <p class="subtitle">這裏是一段文字。</p>
    </div>
    <p class="content">這裏是另一段文字。</p>
    <div class="content">這裏又有一段文字。</div>
  </div>
</body>
</html>

對於這一段HTML代碼，我們考慮如下一些選擇器的作用情況：

#app：樣式表只作用於第7行開始的div元素。（規則2）
.top：樣式表只作用於第8行開始的div元素。（規則3）
div.content：樣式表只作用於第13行的div元素。（規則4）
h1, p：樣式表作用於所有p和h1元素。（規則5）
div.top p：樣式表只作用於第10行的p元素，因爲前一個選擇器可以選擇第8行開始的div元素，它的內部（後代元素）中的p元素纔可以被選擇，第12行的p元素不能被選擇。（規則6）

僞類

對於一個優秀的網頁，爲了提高網頁的交互性，往往會對頁面元素的不同狀態應用不同的樣式表。在這種情況下，我們可能會用到僞類。僞類的格式是在選擇器後添加冒號開頭的狀態，例如選擇器div:hover的樣式表會應用在全頁所有的div元素被鼠標懸浮的時候。

通過這種方法我們可以實現複雜的網頁CSS設置，增強頁面的交互性。詳細教程見W3School

常用的僞類後綴有：

:link：未訪問過的鏈接
:visited：已經訪問過的鏈接
:hover：鼠標懸浮

僞元素

僞元素是指不在HTML中明寫的元素。僞元素的格式是在選擇器後面加兩個冒號開頭的僞元素名稱。例如選擇器p::first-line表示樣式表作用於p元素的第一行。

相關的其他僞元素使用請大家自己研究！

CSS選擇器的相關知識就到這裏，這部分非常複雜，希望大家在以後的實踐中慢慢摸索和學習！

CSS 屬性

初步瞭解樣式表如何作用於HTML的元素以後，我們就要開始學習樣式表的寫法了。不可避免地，我們要學習各種CSS屬性。CSS屬性非常多，使用起來也非常複雜，細節也很繁複。通過巧妙地設置CSS屬性，我們基本可以實現所有網頁上需要的顯示形式。W3School上依然有CSS的全面屬性說明，這裏我挑出一些常用的屬性做一些解釋。當你們以後遇到不會寫的樣式或者看不懂的樣式，可以直接百度，網上都有詳細的說明。

注意：CSS中的有些屬性具有繼承（inherit）的性質，也就是：當一個元素的某個屬性被設置的時候，它的子元素都會默認具有同樣的屬性值。你可以通過再次設置子元素的屬性來避免這一點。例如：當父元素有text-align: center;時（文字居中），所有子元素的文字也會自動居中。

寬高

相關屬性：height、width。僅適用於塊級元素和少部分內聯元素，用於控制“框”的大小。

注意設置的寬度和高度的單位，通常情況下有以下幾種：

絕對單位px（像素）：瀏覽器對不同設備的像素支持可能不同，但基本來說，如果一個元素的寬高使用絕對單位設置，那麼它在不同設備、不同大小的瀏覽器上看起來是一樣大的。
相對單位%（百分比）：通過百分比單位設置寬度和高度，可以讓元素的寬高按照父元素（上一級元素）的寬高來動態調整。父元素的大小改變會相對於地改變當前元素的大小。
屏幕單位vw和vh：瀏覽器約定：100vw是屏幕的寬度，100vh是屏幕的高度，也就是說，vw和vh分別是屏幕寬度和高度的百分之一。這個單位在做移動端網頁的時候非常好用。

同時，也要介紹CSS提供的calc函數：你可以使用calc()，並在括號裏使用不同的單位進行加減乘除計算，瀏覽器會自動完成計算並找出正確的寬高尺寸。例如：height: calc(50% - 10px);，意思是當前元素的高度是父元素高度的一半再減去10個像素。

你可以拿之前的代碼嘗試一下！

邊距

相關屬性：margin、padding。用於控制若干個框的間隔距離，這個概念可能有些難以理解。

margin（外邊距）：通過設置margin屬性，我們可以給元素的“框”在外面加上一個無形的“保護罩”。元素在排列的時候，“框”的外邊會留出一定的距離，而不是和別的元素緊貼在一起。
padding（內邊距）：通過設置padding屬性，我們可以給元素的“框”在內側添加一層無形的“軟墊”。元素內部有其他內容的時候，其他內容將自動與外層元素的邊框保持距離，而不是緊貼在元素邊框上。

簡單的講，如果有兩層元素嵌套：

<div class="outer">
  <div class="inner">內部</div>
</div>

那麼，就這種情況而言，如下兩個設置是等效的：

div.outer { padding: 10px; } 外層元素在內部留一個“墊子”。
div.inner { margin: 10px; } 內層元素在外面加了“保護罩”。

在設置邊距的時候，我們可以針對不同的方向設置不同的邊距。一共有四種屬性：

margin-top、padding-top ：上邊距
margin-right、padding-right ：右邊距
margin-bottom、padding-bottom ：下邊距
margin-left、padding-left ：左邊距

margin和padding其實也可以接受多個值，來分別設定四個方向的邊距。例如：

margin: 10px 20px 30px 40px;

表示設置元素的外邊距分別爲10px（上）、20px（右）、30px（下）、40px（左），注意，它們按照上面四個方向的固定順序。

如果只有三個值，默認右邊距和左邊距相同（爲第二個值），上下邊距分別爲第一和第三個值；如果只有兩個值，則默認上下邊距相同（爲第一個值），左右邊距也相同（爲第二個值）；如果只有一個值，則表示四個方向的邊距均相同。

小知識1：body元素默認有8px的外邊框，如果需要網頁真正的覆蓋全屏：

body {
  margin: 0;
}

小知識2：通過設置左右邊距爲auto，可以把塊級元素居中，例如：margin: 0 auto;
小知識3：當兩個元素同時設置有margin的元素並列時，margin屬性可能會發生合併現象，這一點各位可以自行研究。

嘗試一下吧！

背景

相關屬性：background系列屬性。

background屬性也可以接受很多個值，但通常我們最多寫兩個值：一個顏色、一張圖片。如果有顏色值，則表示設置背景顏色；如果有圖片，則表示設置背景圖片；如果兩個都有，則表示在一個顏色上使用背景圖片。

注意，顏色在CSS中可以用以下幾種方法設置：

#開頭的六位十六進制，每兩位爲一個數字，分別表示RGB（紅綠藍）的值，例如白色爲#FFFFFF（大小寫無所謂）

rgb函數，括號內用逗號隔開三個十進制數字，例如白色爲rgb(255, 255, 255)

rgba函數，與rgb函數相同，但多一個參數表示透明度，例如半透明黑色爲rgba(0, 0, 0, 0.5)

自帶的顏色名稱，例如black、red等。

在CSS中引用圖片等，需要使用url函數。圖片的路徑應該以CSS文件爲基礎尋找相對路徑，或者使用絕對路徑。例如，引入index.css文件旁邊的bg.png圖片作爲某個div元素的背景圖片，可以寫：（注意引號）
div { background: url("./bg.png");}

其實，background系列屬性還包含以下常用屬性：

屬性名稱	說明
background-color	背景顏色
background-image	背景圖片
background-position	背景圖像的位置
background-size	背景圖片的尺寸
background-repeat	如何重複背景圖像

它們具體的使用方法可以自行百度，可以給div元素設置背景，但通常我們使用絕對定位的img元素來實現背景（見下面的定位），因爲在CSS文件中引入圖片時，引用路徑往往比較難以維護。

邊框

相關屬性：border系列屬性。雖然是系列屬性，但我們通常不會分開使用。例如：

border: 5px solid red;

表示按順序設置元素的邊框寬度爲5px，類型爲實線，顏色爲紅色。邊框粗細、類型和顏色屬性（特別是類型）相關的內容可以使用的時候再進行百度，摸索一下就會了。

同時有一個非常好用的屬性：border-radius，用於設置元素的邊框爲圓角。border-radius的值是圓角半徑，通常用像素單位。

技巧：要做出兩頭爲半圓的元素，只需要讓border-radius的值大於height的一半即可。例如：

div {
  height: 40px;
  border-radius: 30px;
}

文字

相關屬性：text和font相關屬性。

常用屬性如下（更多屬性請學習W3School）：

text-align：控制文字在框內的對齊情況
text-decoration：控制文字的修飾（例如下劃線），經常使用text-decoration: none;來取消a元素的默認下劃線。
font-family：指定字體。字體概念比較複雜，也需要考慮訪問網頁的設備上有沒有對應的字體。但通常來說，有sans-serif和serif兩類字體，即襯線字體和非襯線字體。
font-size：字體大小。通常來說字體大小的設定使用一種特殊的單位rem，瀏覽器約定1rem爲當前設備的默認字體大小，因此，如果你想把字放大爲1.5倍，即可設定爲1.5rem。
font-weight：通常用於加粗字體，值爲bold。也可以設定爲數值，請自行查閱。
color：與之前的background-color相對，color屬性可以設置字體的顏色。

定位

相關屬性：position等。可以參見菜鳥教程上關於定位的教程。

在上一章介紹HTML時，我們說過元素會默認按照文檔流的順序排列，瀏覽器會自動找到元素的位置並顯示。在這一節中，我們將學習如何去改變元素的位置。

我們首先需要設置一個position屬性，然後通過調整left、right、top、bottom四個距離，來實現定位。四個方向的距離往往不需要都指定，瀏覽器會根據元素的大小自動決定。position的默認值爲static，即按照HTML文檔流定位。但同時還有以下幾種定位方法：

相對定位：通過設置position: relative;可以實現元素相對於默認位置重新定位元素將保留原來所佔的空間不變，平移元素到相對於原來位置的新位置。例如，同時設置left: 10px;表示讓元素左邊框和原來所佔空間的左邊框距離爲10px，也就是向右平移10px。
固定定位：通過設置position: fixed;可以實現元素相對於整個瀏覽器窗口定位。例如，同時設置left: 0px; top: 0px;可以上元素一直處於窗口的左上角，無視頁面滾動。固定定位會讓元素脫離文檔流，也就是說，元素不會再佔用頁面上的空間，而是“漂浮”在窗口上。
絕對定位：通過設置position: absolute;可以實現元素相對於最近的已定位父元素定位（若沒有則根據html元素定位）。例如，同時設置bottom: 0px; right: 0px;可以將當前元素定位在父元素的右下角。絕對定位同樣會讓元素脫離文檔流，“懸浮”於父元素上。常用於讓某些圖標、按鈕等覆蓋於別的元素之上，以及讓img元素佔滿塊元素以充當背景圖片。
粘性定位：通過設置position: sticky;可以實現粘性定位，粘性定位是指當元素處於瀏覽器窗口內時，完全等於相對定位（不脫離文檔流）；但當頁面滾動元素將要離開窗口時，其自動轉化爲固定定位，固定在瀏覽器窗口上忽略滾動。（各位可以去菜鳥教程頁面上體驗一下）

在元素脫離文檔流時，通常會與別的元素重疊，此時可以通過設置不同元素的z-index值來控制元素的覆蓋情況。z-index可以設置爲任意整數，數值越大表示元素處於更“高”的地方，可以覆蓋數值較低的元素。

佈局

相關屬性：display等。

在上一章中，我留了一個問題：如何讓img元素從上到下排列，這裏我給出的HTML答案是：用若干個div元素將它們分別包裹起來，這樣若干個並列的塊元素會默認從上到下排列，其中包含的圖片元素自然也就從上到下排列了。

在本節內，我們將要介紹CSS中對元素佈局（排列）的解決方案，這裏着重講一講flex佈局。flex佈局允許若干個並列的元素自動滿足某種對齊方式，從而實現對網頁無數個“框”的組織。其他佈局方案包括float屬性和表格佈局，在現代化的網頁當中往往用的不多。

隆重推薦菜鳥教程上關於flex佈局的文章，寫的非常清晰易懂（圖也畫的很好）：https://www.runoob.com/w3cnote/flex-grammar.html 所以這裏我就對幾個屬性做一下簡要介紹，以供大家複習好了。

首先必須明確，有一個容器元素（不妨認爲是一個塊元素），內部有許多個並列的子元素（不妨假設是若干個圖片元素）。對於容器元素有以下常用的屬性：

display: flex;設置容器內的佈局方式爲flex佈局
flex-direction設置容器內主軸的方向（默認是row橫向）
justify-content設置子元素在主軸方向上的對齊情況
align-items設置子元素在交叉軸上的對齊情況

需要注意的是，如果容器的寬高沒有設定，對應方向的軸上的元素不能正常對齊。對於子元素來說，通常會用到的屬性有：

align-self設置當前元素在交叉軸上的單獨的對齊情況

好像也沒有別的會經常用到了，要用到的時候再查吧！

過渡

相關屬性：transition。

在CSS選擇器一節當中，我們有提到僞類，讓我們可以實現鼠標懸停的時候採用不同的樣式表（例如變個背景顏色之類的）。然而我們發現，鼠標懸停的時候元素的樣式會瞬間轉變，感覺有些突兀，怎麼辦呢？用CSS過渡屬性。

transition屬性通常接受三個值，第一個表示需要緩慢過渡的屬性，如果爲all則表示全部屬性；第二個表示過渡動畫的時間，通過單位s表示秒數；第三個屬性表示過渡的時間函數（平滑過渡、先快後慢等），常用的有ease，或者ease-in。

例子：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
  transition: all 1s ease;
}
div:hover {
  width: 500px;
}

繼續放在之前做的index.css裏面，打開index.html，鼠標懸浮在那個塊元素上，是不是很神奇呢！

響應式樣式

所謂響應式樣式，是指網頁的樣式根據瀏覽設備的屏幕大小而變化。依靠現在已經掌握的CSS，我們可以構建出一個網頁了。可是，到目前爲止我們的網頁都是在電腦上查看的，如何才能針對手機制作網頁呢？

首先需要在HTML的head元素中加入下面幾行代碼，主要作用是告訴瀏覽器不需要默認縮放：

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

meta元素是元信息元素，主要用於告訴瀏覽器一些信息。

CSS提供了一種方案能夠讓你在不同的屏幕寬度下采用不同的CSS，讓一個網頁可以自動適配瀏覽設備。試一試以下代碼：

div {
  height: 100px;
  width: 200px;
  color: white;
  background-color: black;
}

@media (max-width: 500px) {
  div {
    background-color: red;
  }
}

繼續把這些代碼放入index.css，並打開index.html。打開瀏覽器的調試窗口，在元素控制檯的左邊（調試窗口的左上角）有一個小小的標誌，點擊即可進入移動設備調試狀態。在這個狀態下你可以自由地更改窗口大小和網絡狀況。我們讓窗口的寬度小於500px，就會看到塊元素的背景變成了紅色！

在我們的代碼裏，1-6行都是之前講過的CSS樣式表，從第八行開始，我們使用了媒體條件查詢：@media (max-width: 500px)，意思是當且僅當窗口的寬度最大不超過500px的時候，大括號內部的CSS樣式表生效。在大括號內部，對背景顏色的配置覆蓋了之前的black屬性值，使得手機版上背景顏色爲紅色。

相似的，還可以通過設置min-width屬性來配置只在寬屏上生效的CSS。

CSS3及其他

與HTML5類似，CSS3是CSS的最新標準，統一併支持了很多新的屬性（例如動畫、漸變等等）。就像本章開頭所講的一樣，CSS的靈活性是真正讓我們的網頁應用五彩繽紛的核心，通過CSS的學習我們可以讓我們的想象力在網頁上起舞。

本章所介紹的CSS只是CSS的一些基礎的部分，如果你在今後網頁的製作中需要用到更加複雜的CSS樣式，可以自己學習和研究。

“駕一葉之扁舟”，在無邊無際的樣式中暢遊！

【九層之臺】Web開發教程：3. CSS

目錄

3. CSS

樣式表

行內樣式表

內聯樣式表

外聯樣式表

CSS選擇器

選擇器定義

選擇器規則

例子

僞類

僞元素

CSS 屬性

寬高

邊距

背景

邊框

文字

定位

佈局

過渡

響應式樣式

CSS3及其他

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

【九層之臺】Web開發教程：2. HTML

【九層之臺】Web開發教程：4. JS

【九層之臺】Web開發教程：6. VueCli

【九層之臺】Web開發教程：0. 準備

【九層之臺】Web開發教程：3. CSS

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結