CSS 和 HTML 不是同一種代碼語(yǔ)言，所以自然語(yǔ)法書(shū)寫(xiě)的形式上也有差異。比如下面是一段標(biāo)準(zhǔn)的 CSS 代碼，作用是指定 h1 標(biāo)簽內(nèi)容為紅色。
一段 CSS 代碼中通常包含兩樣?xùn)|西 —— 選擇器、聲明。選擇器就是前面所寫(xiě)的 h1，它是需要控制樣式的對(duì)象，而每條聲明則是聲明了一則 CSS 的具體樣式調(diào)整，通過(guò)一對(duì)花括號(hào)來(lái)容納。
比如上面案例，聲明了對(duì)顏色的修改，但每條聲明中，還包含了屬性和值。同理，對(duì)一個(gè)標(biāo)簽要做多種樣式類(lèi)型的修改，那么我們就可以添加多條聲明，比如：
上面我們添加了三條聲明，每條聲明的結(jié)尾由 「;」分號(hào)分隔，一定要記得如果不加分號(hào)的話(huà)，那么這條聲明就沒(méi)有結(jié)束，后續(xù)的內(nèi)容都會(huì)無(wú)效。
而光看上面這樣的寫(xiě)法，肯定覺(jué)得特別亂，閱讀起來(lái)很難受，所以通用的 CSS 代碼書(shū)寫(xiě)方式，是類(lèi)似下面這樣的，將每條聲明獨(dú)立成一行：
還有一個(gè)細(xì)節(jié)，就是一條聲明中，可以為一個(gè)屬性設(shè)置多種值。比如我們?cè)谠O(shè)置字體的時(shí)候，使用 font 屬性可以同時(shí)聲明字體、大小、字重等參數(shù)，用空格將值分隔開(kāi)，也可以把它們拆開(kāi)來(lái)聲明。
這會(huì)在后面的細(xì)節(jié)說(shuō)明中講到，暫且知道有這么一回事即可。
了解完語(yǔ)法，并不是直接就可以開(kāi)始寫(xiě) CSS 代碼并產(chǎn)生作用了，需要學(xué)會(huì) HTML 如何引用 CSS，換句話(huà)講，就是 CSS 代碼要寫(xiě)在什么地方。主要有三種形式：
- 外部樣式表
- 內(nèi)部樣式表
- 內(nèi)聯(lián)樣式
1. 外部樣式表
外部樣式表，就是我們?cè)谶@個(gè) HTML 文檔之外，創(chuàng)建一個(gè) CSS 文檔，專(zhuān)門(mén)用來(lái)存放 CSS 代碼。創(chuàng)建它的方式和 HTML 一樣，通過(guò)創(chuàng)建一個(gè)記事本，然后將名稱(chēng)改成 「文檔英文名.css」 即可。
而我們要讓這兩個(gè)獨(dú)立的文檔之間產(chǎn)生關(guān)聯(lián)，就需要在 HTML 中引用這個(gè) CSS 樣式表。通常，引用樣式表的代碼會(huì)寫(xiě)在 head 標(biāo)簽中，比如：
這種做法的好處是，多個(gè) HTML 文檔可以共同讀取一個(gè)樣式表，這樣當(dāng)我們定義一個(gè) CSS 文件后，整個(gè)網(wǎng)站的頁(yè)面都可以共同遵守這個(gè)規(guī)則，而不是每個(gè) HTML 文檔定義一套單獨(dú)的樣式。
和我們?cè)?Sketch、Figma 中使用的外部調(diào)用樣式文檔的原理是一樣的。
2. 內(nèi)部樣式表
除了獨(dú)立一個(gè) CSS 文件外，我們也可以單獨(dú)在 HTML 文檔內(nèi)添加 CSS 代碼塊，那就是在頁(yè)面內(nèi)添加 style 標(biāo)簽，來(lái)開(kāi)辟一個(gè)專(zhuān)門(mén)寫(xiě) CSS 的地方。通常，我們會(huì)將內(nèi)部樣式表寫(xiě)在 head 標(biāo)簽內(nèi)：
在我們的學(xué)習(xí)過(guò)程中主要采取這個(gè)方式來(lái)添加 CSS 代碼，它的好處是添加起來(lái)在同一個(gè)文檔內(nèi)方便，但是每次只作用一個(gè) HTML 文檔，不能重復(fù)應(yīng)用。
3. 內(nèi)聯(lián)樣式
內(nèi)聯(lián)樣式，也叫行內(nèi)樣式，是一個(gè)將樣式直接寫(xiě)進(jìn) HTML 標(biāo)簽中的做法，用來(lái)比較針對(duì)性的控制某個(gè)標(biāo)簽的樣式。
使用的方法是在標(biāo)簽中添加 style 屬性，然后在里面添加聲明：
4. 聲明的優(yōu)先級(jí)順序
提前了解一個(gè)概念，這三種引用方法，可以單獨(dú)使用，也可以共同使用，而在共同使用的時(shí)候，它們的優(yōu)先級(jí)是有區(qū)別的。
內(nèi)聯(lián)樣式 > 內(nèi)部樣式表 > 外部樣式表
也就是你在三種模式下都聲明了 h1 標(biāo)簽的不同顏色，那么最后顯示以?xún)?nèi)聯(lián)樣式的為準(zhǔn)。優(yōu)先級(jí)在實(shí)際操作中有很重要的地位，在后續(xù)的操作里也會(huì)有說(shuō)明。
選擇器是讓 CSS 定位到具體的某個(gè)或某些元素，來(lái)修改它們的樣式，是我們開(kāi)始編寫(xiě)具體樣式代碼前要優(yōu)先確保正確的地方，常見(jiàn)選擇器包含：
- 標(biāo)簽選擇器
- Class、id 選擇器
- 偽類(lèi)、偽元素
1. 標(biāo)簽選擇器
前面案例中應(yīng)用的選擇器，都是以標(biāo)簽為對(duì)象的，假設(shè)我們把選擇器定義成 p 標(biāo)簽，那么整個(gè)頁(yè)面中所有的 p 標(biāo)簽都會(huì)共同受到影響。
2. Class、Id選擇器
當(dāng)我們不想同一標(biāo)簽樣式完全保持一致的時(shí)候，于是就用到了 Class 和 id 選擇器。區(qū)別是，class 「類(lèi)選擇器」是復(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ù)
- 除了下劃線_不要使用其他符號(hào)
我們還可以指定特定的標(biāo)簽來(lái)實(shí)現(xiàn)類(lèi)的功能，即 「標(biāo)簽」 + 「.」 + 「類(lèi)名」，即可完成選擇，大家可以輸入下方案例查看效果：
同時(shí)在標(biāo)簽中的 class，也可以添加多個(gè)命名，通過(guò)空格來(lái)分隔，那么它就可以應(yīng)用兩個(gè) css 中類(lèi)的樣式了。
具體的應(yīng)用原因和方法在后續(xù)的案例中有機(jī)會(huì)我們也會(huì)進(jìn)行說(shuō)明的。
3. 偽類(lèi)/元素
除了普通的類(lèi)作為選擇器，CSS 中還為類(lèi)本身提供了一個(gè)特殊的概念 —— 「?jìng)晤?lèi)/元素」，簡(jiǎn)單說(shuō)起來(lái)，就是將對(duì)象不同的狀態(tài)直接通過(guò)偽類(lèi)進(jìn)行選擇。
比如，一個(gè)正常的鏈接，它包含了四種狀態(tài)：未訪問(wèn) link、已訪問(wèn) visited、鼠標(biāo)懸停 hover、點(diǎn)擊 active ，我們就可以通過(guò)偽類(lèi)來(lái)控制。
在下方案例，鏈接默認(rèn)是黑色，鼠標(biāo)懸停到上方的時(shí)候，就切換成 「red」 顏色：
偽類(lèi)/元素，就是 CSS 中默認(rèn)幫我們確定好的一些標(biāo)簽的狀態(tài)，或者內(nèi)部元素的一些范圍，我們無(wú)需再寫(xiě)一個(gè) class 命名出來(lái)，直接使用偽類(lèi)/元素即可。
我們最常使用的就是對(duì)鏈接不同狀態(tài)的聲明，如果想要了解還有什么其它可以使用的內(nèi)容，可以參考 CSS 手冊(cè)。
CSS 的盒模型 （box model），是實(shí)現(xiàn)元素排版布局的核心概念，下圖就是盒模型的標(biāo)準(zhǔn)示意圖：
里面標(biāo)注的英文都是 CSS 可以聲明的屬性，我們分別解釋一下：
- Margin：外邊距，可以撐開(kāi)元素和其它元素的距離
- Border：描邊，約等于我們?cè)O(shè)計(jì)軟件中的描邊邊框
- Padding：內(nèi)邊距，從描邊到元素制定的空白區(qū)域
光這么看大家肯定會(huì)覺(jué)得很難理解，我們拿個(gè) UI 中的案例舉例：
做個(gè)類(lèi)似的簡(jiǎn)單卡片，包含描邊，然后標(biāo)記處右側(cè)的外邊距、內(nèi)邊距、描邊
接下來(lái)，我們可以添加下列的代碼，看看三個(gè)屬性的對(duì)應(yīng)使用情況，其中為了便于大家的理解，將內(nèi)容區(qū)域背景設(shè)置成灰色，并且應(yīng)用 flot 左對(duì)齊的聲明（確保 margin 生效，后面再介紹這個(gè)屬性）：
1. margin 屬性
Margin 屬性是外邊距，可以通過(guò)設(shè)置具體像素?cái)?shù)來(lái)指定外邊距的距離，但是，外邊距也可以針對(duì)上下左右獨(dú)立進(jìn)行定義，它包含四個(gè)下級(jí)屬性：margin-top、margin-right、marign-bottom、margin-left，對(duì)應(yīng)上右下左。
我們可以單獨(dú)使用這些屬性來(lái)做聲明，但是更簡(jiǎn)便的方法是，我們可以在 margin 一個(gè)屬性中設(shè)置 4 個(gè)數(shù)值來(lái)完成不同外邊距的設(shè)置，比如下面：
這四個(gè)數(shù)字就依次對(duì)應(yīng)上、右、下、左四個(gè)方向，如果只設(shè)置兩個(gè)數(shù)字，則對(duì)應(yīng)上下、左右，大家可以自己在前面的代碼中嘗試一下，我就不具體演示了。
但是，margin 除了設(shè)置數(shù)值以外，還有個(gè)很重要的值，就是 「auto」，它是讓瀏覽器自己計(jì)算邊距的數(shù)值，也自適應(yīng)布局里非常重要的參數(shù)，我們會(huì)在后續(xù)演示中講解。
2. border 屬性
border 屬性，除了一次性設(shè)置4個(gè)方向以外，也可以通過(guò) 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è)值分別填入屬性?xún)?nèi)就可以做出定義，如果想要單獨(dú)設(shè)置一個(gè)列表底部的分割虛線：
3. padding屬性
padding 作為內(nèi)間距，定義起來(lái)和 margin 是完全一樣的，包括上右下左的定義。
它在正常效果下和 margin 效果非常接近，而我們需要注意的是在元素的實(shí)際實(shí)現(xiàn)過(guò)程中盡量根據(jù)實(shí)際的情形來(lái)使用，而不是無(wú)差別對(duì)待 margin 和 padding。
接下來(lái)，我們就要講講有關(guān)頁(yè)面展示中，寬高的定義方式了。在 CSS 屬性中，是提供了 wight、height 兩個(gè)屬性的，用來(lái)定義標(biāo)簽的寬和高尺寸。
比如我們可以定義一個(gè) div 的寬高都是 100px，用屬性 width 和 height 表示：
這是我們手動(dòng)設(shè)置的一個(gè) 「固定尺寸」，但是，在 HTML 頁(yè)面布局中，還有一個(gè)重要的概念 —— 「自適應(yīng)尺寸」。即一開(kāi)始我們沒(méi)辦法確定它的寬或高是多少，于是采取根據(jù)內(nèi)容進(jìn)行伸縮的操作。
比如，在新聞詳情頁(yè)面的正文區(qū)域，不同文章的高度是不一樣的，我們不可能一開(kāi)始直接指定一個(gè)固定的高，所以，我們會(huì)將高度設(shè)置成 auto，那么這個(gè)標(biāo)簽的高度就會(huì)根據(jù)內(nèi)容進(jìn)行拉伸，比如：
比如這段案例，p標(biāo)簽固定寬度為200，高為auto，那么p標(biāo)簽的實(shí)際高度就會(huì)根據(jù)換行后產(chǎn)生的高度來(lái)計(jì)算
在這個(gè)基礎(chǔ)上，如果我們?cè)O(shè)置了padding為10，border為5，那么增加的數(shù)值會(huì)計(jì)算到這個(gè)元素本身的尺寸以?xún)?nèi)，p實(shí)際的尺寸就會(huì)變?yōu)椋?/p>
- 寬 = 默認(rèn)寬+ padding左/右 + border左/右
- 高 = 文字總高 + padding左/右+border左/右
而 magrin，只是元素外部的間距，無(wú)論我們?cè)O(shè)置了什么數(shù)值，它都對(duì)元素本身的尺寸沒(méi)有影響。
通過(guò)內(nèi)部元素的大小影響標(biāo)簽的實(shí)際尺寸，再影響標(biāo)簽的父級(jí)尺寸，是 CSS 排版布局中的常用方式，也是主要難點(diǎn)之一。
還有個(gè)抽象的概念，就是 CSS 的寬和高， 只對(duì)有 「塊」 化的元素產(chǎn)生作用，比如 a 標(biāo)簽就無(wú)法直接通過(guò) height、width 設(shè)置尺寸，這是一個(gè)很難簡(jiǎn)單解釋清楚的問(wèn)題。
所以，為了解決尺寸沒(méi)有根據(jù)我們預(yù)想的方式展示出來(lái)，我們可以用一個(gè)比較通用的方式，就是通過(guò)添加 「 display:block; 」 這段聲明，將標(biāo)簽固定轉(zhuǎn)化成塊。這可以幫助我們?cè)趯?shí)際的操作中避免非常多不必要的錯(cuò)誤。
為了加快學(xué)習(xí)的效率，我們?cè)谶@章并沒(méi)有選擇用很緩慢的速度一點(diǎn)點(diǎn)講 CSS 的屬性和相關(guān)案例，而是直接把我們需要學(xué)習(xí)的重要基礎(chǔ)一次性說(shuō)完，希望大家不會(huì)被這些邏輯繞暈。而具體的應(yīng)用，我們會(huì)留在后面進(jìn)行演示，幫助大家鞏固這些知識(shí)點(diǎn)。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。