之前文章：

建議本篇文章結(jié)合視頻觀看，效果更佳??

CSS 和 HTML 不是同一種代碼語言，所以自然語法書寫的形式上也有差異。比如下面是一段標(biāo)準(zhǔn)的 CSS 代碼，作用是指定 h1 標(biāo)簽內(nèi)容為紅色。

一段 CSS 代碼中通常包含兩樣?xùn)|西 —— 選擇器、聲明。選擇器就是前面所寫的 h1，它是需要控制樣式的 “對象”，而每條聲明則是聲明了一則 CSS 的具體樣式調(diào)整，通過一對花括號來容納。

比如上面案例，聲明了對顏色的修改，但每條聲明中，還包含了屬性和值。同理，對一個(gè)標(biāo)簽要做多種樣式類型的修改，那么我們就可以添加多條聲明，比如：

上面我們添加了三條聲明，每條聲明的結(jié)尾由 “;” 分號分隔，一定要記得如果不加分號的話，那么這條聲明就沒有結(jié)束，后續(xù)的內(nèi)容都會無效。

而光看上面這樣的寫法，肯定覺得特別亂，閱讀起來很難受，所以通用的 CSS 代碼書寫方式，是類似下面這樣的，將每條聲明獨(dú)立成一行：

還有一個(gè)細(xì)節(jié)，就是一條聲明中，可以為一個(gè)屬性設(shè)置多種值。比如我們在設(shè)置字體的時(shí)候，使用 font 屬性可以同時(shí)聲明字體、大小、字重等參數(shù)，用空格將值分隔開，也可以把它們拆開來聲明。

這會在后面的細(xì)節(jié)說明中講到，暫且知道有這么一回事即可。

了解完語法，并不是直接就可以開始寫 CSS 代碼并產(chǎn)生作用了，需要學(xué)會 HTML 如何引用 CSS，換句話講，就是 CSS 代碼要寫在什么地方。主要有三種形式：

- 外部樣式表

- 內(nèi)部樣式表

- 內(nèi)聯(lián)樣式

3.2.1 外部樣式表

外部樣式表，就是我們在這個(gè) HTML 文檔之外，創(chuàng)建一個(gè) CSS 文檔，專門用來存放 CSS 代碼。創(chuàng)建它的方式和 HTML 一樣，通過創(chuàng)建一個(gè)記事本，然后將名稱改成 “文檔英文名.css” 即可。

而我們要讓這兩個(gè)獨(dú)立的文檔之間產(chǎn)生關(guān)聯(lián)，就需要在 HTML 中引用這個(gè) CSS 樣式表。通常，引用樣式表的代碼會寫在 head 標(biāo)簽中，比如：

這種做法的好處是，多個(gè) HTML 文檔可以共同讀取一個(gè)樣式表，這樣當(dāng)我們定義一個(gè) CSS 文件后，整個(gè)網(wǎng)站的頁面都可以共同遵守這個(gè)規(guī)則，而不是每個(gè) HTML 文檔定義一套單獨(dú)的樣式。

和我們在 Sketch、Figma 中使用的外部調(diào)用樣式文檔的原理是一樣的。

3.2.2 內(nèi)部樣式表

除了獨(dú)立一個(gè) CSS 文件外，我們也可以單獨(dú)在 HTML 文檔內(nèi)添加 CSS 代碼塊，那就是在頁面內(nèi)添加 style 標(biāo)簽，來開辟一個(gè)專門寫 CSS 的地方。通常，我們會將內(nèi)部樣式表寫在 head 標(biāo)簽內(nèi)：

在我們的學(xué)習(xí)過程中主要采取這個(gè)方式來添加 CSS 代碼，它的好處是添加起來在同一個(gè)文檔內(nèi)方便，但是每次只作用一個(gè) HTML 文檔，不能重復(fù)應(yīng)用。

3.2.3 內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式，也叫行內(nèi)樣式，是一個(gè)將樣式直接寫進(jìn) HTML 標(biāo)簽中的做法，用來比較針對性的控制某個(gè)標(biāo)簽的樣式。

使用的方法是在標(biāo)簽中添加 style 屬性，然后在里面添加聲明：

3.2.4 聲明的優(yōu)先級順序

提前了解一個(gè)概念，這三種引用方法，可以單獨(dú)使用，也可以共同使用，而在共同使用的時(shí)候，它們的優(yōu)先級是有區(qū)別的。

內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表

也就是你在三種模式下都聲明了 h1 標(biāo)簽的不同顏色，那么最后顯示以內(nèi)聯(lián)樣式的為準(zhǔn)。優(yōu)先級在實(shí)際操作中有很重要的地位，在后續(xù)的操作里也會有說明。

選擇器是讓 CSS 定位到具體的某個(gè)或某些元素，來修改它們的樣式，是我們開始編寫具體樣式代碼前要優(yōu)先確保正確的地方，常見選擇器包含：

- 標(biāo)簽選擇器

- Class、id 選擇器

- 偽類、偽元素

3.3.1 標(biāo)簽選擇器

前面案例中應(yīng)用的選擇器，都是以標(biāo)簽為對象的，假設(shè)我們把選擇器定義成 p 標(biāo)簽，那么整個(gè)頁面中所有的 p 標(biāo)簽都會共同受到影響。

3.3.2 Class、Id選擇器

當(dāng)我們不想同一標(biāo)簽樣式完全保持一致的時(shí)候，于是就用到了 Class 和 id 選擇器。區(qū)別是，class “類選擇器” 是復(fù)數(shù)選擇器，可以作用在多個(gè)標(biāo)簽上，而 id 則是單數(shù)選擇器，只作用在一個(gè)標(biāo)簽上，學(xué)習(xí)中主要采用 class 選擇器。

使用方式是首先在標(biāo)簽中添加class屬性，然后在樣式表中使用這個(gè)選擇器，并聲明樣式即可：

在 class 內(nèi)給的值 “iam_class ”就是它的名字，這個(gè)名字由我們自己定義，但需要了解幾個(gè)主要限制：

- 只能使用英文數(shù)字

- 首字符不能是數(shù)字

-?不能和HTML標(biāo)簽名重復(fù)

- 除了下劃線_不要使用其他符號

我們還可以指定特定的標(biāo)簽來實(shí)現(xiàn)類的功能，即 ”標(biāo)簽“ + ”.“ + ”類名“，即可完成選擇，大家可以輸入下方案例查看效果：

同時(shí)在標(biāo)簽中的 class，也可以添加多個(gè)命名，通過空格來分隔，那么它就可以應(yīng)用兩個(gè) css 中類的樣式了。

具體的應(yīng)用原因和方法在后續(xù)的案例中有機(jī)會我們也會進(jìn)行說明的。

3.3.3 偽類/元素

除了普通的類作為選擇器，CSS 中還為類本身提供了一個(gè)特殊的概念 —— ”偽類/元素“，簡單說起來，就是將對象不同的狀態(tài)直接通過偽類進(jìn)行選擇。

比如，一個(gè)正常的鏈接，它包含了四種狀態(tài)：未訪問 link、已訪問 visited、鼠標(biāo)懸停 hover、點(diǎn)擊 active ，我們就可以通過偽類來控制。

在下方案例，鏈接默認(rèn)是黑色，鼠標(biāo)懸停到上方的時(shí)候，就切換成 “red” 顏色：

偽類/元素，就是 CSS 中默認(rèn)幫我們確定好的一些標(biāo)簽的狀態(tài)，或者內(nèi)部元素的一些范圍，我們無需再寫一個(gè) class 命名出來，直接使用偽類/元素即可。

我們最常使用的就是對鏈接不同狀態(tài)的聲明，如果想要了解還有什么其它可以使用的內(nèi)容，可以參考 CSS 手冊。

CSS 的盒模型 （box model），是實(shí)現(xiàn)元素排版布局的核心概念，下圖就是盒模型的標(biāo)準(zhǔn)示意圖：

里面標(biāo)注的英文都是 CSS 可以聲明的屬性，我們分別解釋一下：

Margin：外邊距，可以撐開元素和其它元素的距離

Border：描邊，約等于我們設(shè)計(jì)軟件中的描邊邊框

Padding：內(nèi)邊距，從描邊到元素制定的空白區(qū)域

光這么看大家肯定會覺得很難理解，我們拿個(gè) UI 中的案例舉例：

做個(gè)類似的簡單卡片，包含描邊，然后標(biāo)記處右側(cè)的外邊距、內(nèi)邊距、描邊

接下來，我們可以添加下列的代碼，看看三個(gè)屬性的對應(yīng)使用情況，其中為了便于大家的理解，將內(nèi)容區(qū)域背景設(shè)置成灰色，并且應(yīng)用 flot 左對齊的聲明（確保 margin 生效，后面再介紹這個(gè)屬性）：

3.4.1 margin屬性

Margin 屬性是外邊距，可以通過設(shè)置具體像素?cái)?shù)來指定外邊距的距離，但是，外邊距也可以針對上下左右獨(dú)立進(jìn)行定義，它包含四個(gè)下級屬性：margin-top、margin-right、marign-bottom、margin-left，對應(yīng)上右下左。

我們可以單獨(dú)使用這些屬性來做聲明，但是更簡便的方法是，我們可以在 margin 一個(gè)屬性中設(shè)置 4 個(gè)數(shù)值來完成不同外邊距的設(shè)置，比如下面：

這四個(gè)數(shù)字就依次對應(yīng)上、右、下、左四個(gè)方向，如果只設(shè)置兩個(gè)數(shù)字，則對應(yīng)上下、左右，大家可以自己在前面的代碼中嘗試一下，我就不具體演示了。

但是，margin 除了設(shè)置數(shù)值以外，還有個(gè)很重要的值，就是 ”auto“，它是讓瀏覽器自己計(jì)算邊距的數(shù)值，也自適應(yīng)布局里非常重要的參數(shù)，我們會在后續(xù)演示中講解。

3.4.2 border屬性

border 屬性，除了一次性設(shè)置4個(gè)方向以外，也可以通過 border-top / right / bottom / left 四個(gè)方向進(jìn)行獨(dú)立控制。

但同學(xué)們應(yīng)該發(fā)現(xiàn)了，它不止有設(shè)置數(shù)字而已，是因?yàn)樗€有三個(gè)可以獨(dú)立設(shè)置的屬性：

border-color：描邊的色彩，可以用特殊的色彩英文名也可以用16進(jìn)制色。

border-width：描邊的寬度，可以用數(shù)字和像素單位表示。

border-style：描邊的風(fēng)格，常用的有 solid（實(shí)線）、dotted（點(diǎn)）、dashed（虛線）。

我們只要將三個(gè)值分別填入屬性內(nèi)就可以做出定義，如果想要單獨(dú)設(shè)置一個(gè)列表底部的分割虛線：

3.4.3 padding屬性

padding 作為內(nèi)間距，定義起來和 margin 是完全一樣的，包括上右下左的定義。

它在正常效果下和 margin 效果非常接近，而我們需要注意的是在元素的實(shí)際實(shí)現(xiàn)過程中盡量根據(jù)實(shí)際的情形來使用，而不是無差別對待 margin 和 padding。

接下來，我們就要講講有關(guān)頁面展示中，寬高的定義方式了。在 CSS 屬性中，是提供了 wight、height 兩個(gè)屬性的，用來定義標(biāo)簽的寬和高尺寸。

比如我們可以定義一個(gè) div 的寬高都是 100px，用屬性 width 和 height 表示：

這是我們手動設(shè)置的一個(gè) “固定尺寸”，但是，在 HTML 頁面布局中，還有一個(gè)重要的概念 —— “自適應(yīng)尺寸”。即一開始我們沒辦法確定它的寬或高是多少，于是采取根據(jù)內(nèi)容進(jìn)行伸縮的操作。

比如，在新聞詳情頁面的正文區(qū)域，不同文章的高度是不一樣的，我們不可能一開始直接指定一個(gè)固定的高，所以，我們會將高度設(shè)置成 auto，那么這個(gè)標(biāo)簽的高度就會根據(jù)內(nèi)容進(jìn)行拉伸，比如：

在這個(gè)基礎(chǔ)上，如果我們設(shè)置了padding為10，border為5，那么增加的數(shù)值會計(jì)算到這個(gè)元素本身的尺寸以內(nèi)，p實(shí)際的尺寸就會變?yōu)椋?/p>

寬 = 默認(rèn)寬+ padding左/右 + border左/右

高 = 文字總高 + padding左/右+border左/右

而 magrin，只是元素外部的間距，無論我們設(shè)置了什么數(shù)值，它都對元素本身的尺寸沒有影響。

通過內(nèi)部元素的大小影響標(biāo)簽的實(shí)際尺寸，再影響標(biāo)簽的父級尺寸，是 CSS 排版布局中的常用方式，也是主要難點(diǎn)之一。

還有個(gè)抽象的概念，就是 CSS 的寬和高， 只對有 ”塊“ 化的元素產(chǎn)生作用，比如 a 標(biāo)簽就無法直接通過 height、width 設(shè)置尺寸，這是一個(gè)很難簡單解釋清楚的問題。

所以，為了解決尺寸沒有根據(jù)我們預(yù)想的方式展示出來，我們可以用一個(gè)比較通用的方式，就是通過添加 ” display:block; “ 這段聲明，將標(biāo)簽固定轉(zhuǎn)化成塊。這可以幫助我們在實(shí)際的操作中避免非常多不必要的錯(cuò)誤。

為了加快學(xué)習(xí)的效率，我們在這章并沒有選擇用很緩慢的速度一點(diǎn)點(diǎn)講 CSS 的屬性和相關(guān)案例，而是直接把我們需要學(xué)習(xí)的重要基礎(chǔ)一次性說完，希望大家不會被這些邏輯繞暈。而具體的應(yīng)用，我們會留在后面的課程中進(jìn)行演示，幫助大家鞏固這些知識點(diǎn)。

下一節(jié)中，我們會針對 CSS 的一些屬性展開說明，來看看 CSS 都可以定義出什么厲害的樣式。

下篇會盡快趕出來，再賤~

B端產(chǎn)品設(shè)計(jì)全能班新一期早鳥預(yù)約中，有需要的同學(xué)記得聯(lián)系我～

往期課程介紹查看???