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