此文章我們專門錄製了對應的視頻教學，傳送門：

https://www.bilibili.com/video/BV1ng4y1v75q

接下來，我們開始學習 CSS 樣式表有關的知識點，通過 CSS 來控制 HTML 標籤和元素的樣式的方法和規範。

3.1 CSS樣式的語法

CSS 和 HTML 不是同一種代碼語言，所以自然語法書寫的形式上也有差異。比如下面是一段標準的 CSS 代碼，作用是指定 h1 標籤內容爲紅色。

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

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

上面我們添加了三條聲明，每條聲明的結尾由 “;” 分號分隔，一定要記得如果不加分號的話，那麼這條聲明就沒有結束，後續的內容都會無效。

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

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

這會在後面有更確切的演示。

3.2 CSS的引用方式

瞭解完語法，並不是直接就可以開始寫 CSS 代碼併產生作用了，需要學會 HTML 如何引用 CSS，換句話講，就是 CSS 代碼要寫在什麼地方。主要有三種形式：

•     外部樣式表

•     內部樣式表

•      內聯樣式

3.2.1 外部樣式表

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

而我們要讓這兩個獨立的文檔之間產生關聯，就需要在 HTML 中引用這個 CSS 樣式表。通常，引用樣式表的代碼會寫在 head 標籤中，比如：

這種做法的好處是，多個 HTML 文檔可以共同讀取一個樣式表，這樣當我們定義一個 CSS 文件後，整個網站的頁面都可以共同遵守這個規則，而不是每個 HTML 文檔定義一套單獨的樣式。

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

3.2.2 內部樣式表

除了獨立一個 CSS 文件外，我們也可以單獨在 HTML 文檔內添加 CSS 代碼塊，那就是在頁面內添加 style 標籤，來開闢一個專門寫 CSS 的地方。通常，我們會將內部樣式表寫在 head 標籤內：

在我們的學習過程中主要採取這個方式來添加 CSS 代碼，它的好處是添加起來在同一個文檔內方便，但是每次只作用一個 HTML 文檔，不能重複應用。

3.2.3 內聯樣式

內聯樣式，也叫行內樣式，是一個將樣式直接寫進 HTML 標籤中的做法，用來比較針對性的控制某個標籤的樣式。

使用的方法是在標籤中添加 style 屬性，然後在裏面添加聲明：

3.2.4 聲明的優先級順序

提前瞭解一個概念，這三種引用方法，可以單獨使用，也可以共同使用，而在共同使用的時候，它們的優先級是有區別的。

內聯樣式 > 內部樣式表 > 外部樣式表

也就是你在三種模式下都聲明瞭 h1 標籤的不同顏色，那麼最後顯示以內聯樣式的爲準。優先級在實際操作中有很重要的地位，在後續的操作裏也會有說明。

3.3 選擇器的具體認識

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

•    標籤選擇器

•    Class、id 選擇器

•    僞類、僞元素

3.3.1 標籤選擇器

前面案例中應用的選擇器，都是以標籤爲對象的，假設我們把選擇器定義成 p 標籤，那麼整個頁面中所有的 p 標籤都會共同受到影響。

3.3.2 Class、Id選擇器

當我們不想同一標籤樣式完全保持一致的時候，於是就用到了 Class 和 id 選擇器。區別是，class “類選擇器” 是複數選擇器，可以作用在多個標籤上，而 id 則是單數選擇器，只作用在一個標籤上，學習中主要採用 class 選擇器。

使用方式是首先在標籤中添加class屬性，然後在樣式表中使用這個選擇器，並聲明樣式即可：

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

•    只能使用英文數字

•    首字符不能是數字

•    不能和HTML標籤名重複

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

我們還可以指定特定的標籤來實現類的功能，即 ”標籤“ + ”.“ + ”類名“，即可完成選擇，大家可以輸入下方案例查看效果：

同時在標籤中的 class，也可以添加多個命名，通過空格來分隔，那麼它就可以應用兩個 css 中類的樣式了。

具體的應用原因和方法在後續的案例中有機會我們也會進行說明的。

3.3.2 僞類/元素

除了普通的類作爲選擇器，CSS 中還爲類本身提供了一個特殊的概念 —— ”僞類/元素“，簡單說起來，就是將對象不同的狀態直接通過僞類進行選擇。

比如，一個正常的鏈接，它包含了四種狀態：未訪問 link、已訪問 visited、鼠標懸停 hover、點擊 active ，我們就可以通過僞類來控制。

在下方案例，鏈接默認是黑色，鼠標懸停到上方的時候，就切換成 “red” 顏色：

僞類/元素，就是 CSS 中默認幫我們確定好的一些標籤的狀態，或者內部元素的一些範圍，我們無需再寫一個 class 命名出來，直接使用僞類/元素即可。

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

3.4 CSS的盒模型

CSS 的盒模型 （box model），是實現元素排版佈局的核心概念，下圖就是盒模型的標準示意圖：

裏面標註的英文都是 CSS 可以聲明的屬性，我們分別解釋一下：

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

Border ：描邊，約等於我們設計軟件中的描邊邊框

Padding ：內邊距，從描邊到元素制定的空白區域

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

接下來，我們可以添加下列的代碼，看看三個屬性的對應使用情況，其中爲了便於大家的理解，將內容區域背景設置成灰色，並且應用 flot 左對齊的聲明（確保 margin 生效，後面再介紹這個屬性）：

3.4.1 margin屬性

Margin 屬性是外邊距，可以通過設置具體像素數來指定外邊距的距離，但是，外邊距也可以針對上下左右獨立進行定義，它包含四個下級屬性：margin-top、margin-right、marign-bottom、margin-left，對應上右下左。

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

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

但是，margin 除了設置數值以外，還有個很重要的值，就是 ”auto“，它是讓瀏覽器自己計算邊距的數值，也是自適應佈局裏非常重要的參數，幫助元素實現居中的效果。

3.4.2 border屬性

border 屬性，除了一次性設置4個方向以外，也可以通過 border-top / right / bottom / left 四個方向進行獨立控制。

但同學們應該發現了，它不止有設置數字而已，是因爲它還有三個可以獨立設置的屬性：

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

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

border-style ：描邊的風格，常用的有 solid（實線）、dotted（點）、dashed（虛線）。

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

3.4.3 padding屬性

padding 作爲內間距，定義起來和 margin 是完全一樣的，包括上右下左的定義。

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

3.5 標籤尺寸的認識

接下來，我們就要講講有關頁面展示中，寬高的定義方式了。在 CSS 屬性中，是提供了 wight、height 兩個屬性的，用來定義標籤的寬和高尺寸。

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

這是我們手動設置的一個 “固定尺寸”，但是，在 HTML 頁面佈局中，還有一個重要的概念 —— “自適應尺寸”。即一開始我們沒辦法確定它的寬或高是多少，於是採取根據內容進行伸縮的操作。

比如，在新聞詳情頁面的正文區域，不同文章的高度是不一樣的，我們不可能一開始直接指定一個固定的高，所以，我們會將高度設置成 auto，那麼這個標籤的高度就會根據內容進行拉伸，比如：

在這個基礎上，如果我們設置了padding爲10，border爲5，那麼增加的數值會計算到這個元素本身的尺寸以內，p實際的尺寸就會變爲：

寬 = 默認寬+ padding左/右 + border左/右

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

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

通過內部元素的大小影響標籤的實際尺寸，再影響標籤的父級尺寸，是 CSS 排版佈局中的常用方式，也是主要難點之一。

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

所以，爲了解決尺寸沒有根據我們預想的方式展示出來，我們可以用一個比較通用的方式，就是通過添加 ” display:block; “ 這段聲明，將標籤固定轉化成塊。這可以幫助我們在實際的操作中避免非常多不必要的錯誤。

這一節中，我們來講講 CSS 的具體應用細則，也就是 CSS 的屬性。

CSS 包含了非常多的屬性和規則，學習 CSS 就是學習這些屬性的用法，本篇內容中我們會挑選出最常用的屬性做說明。

4.1 文字相關屬性

4.1.1 文本屬性

在 CSS 中，文本指的是標籤中的文字內容，我們可以控制一些特定的文本屬性，常用的包含：

colo r ：標籤中的文本顏色，使用顏色名或 #212131 這樣的編碼

line-height ：每行文本的高度，用像素單位設置

text-align ：文本的對齊屬性，包含 left、right、center（居中）

text-decoration ：文本的修飾內容，包含 none、underline（下劃線）、line-through（刪除線） 等設置

word-spacing ：字間距，用像素單位設置

這裏就不每個屬性都演示一次了，大家可以自己動手試試。我們主要關注 text-align 這個屬性。

text-align 這個屬性有向下繼承的特性，即我們在父標籤中定義了對齊方向，那麼子標籤也會遵守這個方向。

4.1.2 字體屬性

在 CSS 中，字體屬性和本文屬性時分開的，這是很容易搞混的東西。字體屬性用的是 font 屬性，而在 font 下還包含若干常用的屬性：

font-family : 設置文字的字體

font-size ：文字的字號，用像素表示

font-style ：字體風格，包含 normal（默認）、italic（斜體）、oblique（傾斜）

font-weight ：字體的字重，可以用數字也可以字體自帶字種

在字體設置的規則上，並不是我們想怎麼設置都可以，而是考慮用戶有什麼字體。

因爲瀏覽器對文字的渲染是通過用戶本地的字庫來完成的，這也是爲什麼我們設計 UI 和網頁的時候不能隨心所欲用字體的原因之一。

在中文界面中，通常我們不用去設置中文字體，但可以爲英文或數字文本設置一些常見的英文字體，例如 “Arial”，“Futura” 等。

並且可以設置多個字體，通過逗號隔開，如果第一個字體用戶沒有，那麼會自動替換成下一個字體。

4.1.3  列表屬性

列表在實際應用中非常的普遍，CSS 有專門針對列表的屬性設置，即 list-style 屬性，它還包含下面一些屬性類型：

list-style-image ：列表項符號替換成圖片的設置；

list-style-postion ：列表項符號圖片所處的位置；

list-style-type ：列表項符號的類型，包含none、disc（實心圓）、circle（空心圓）、suqare（方形）、decimal（數字）等；

list-style 這個屬性只能作用在 ul、ol、li 標籤管用，對其它標籤無效。對於列表項的圖像設置我們先撇開不談，我們設置最多的數值就是採用 none，否則瀏覽器會自帶列表項符號（很醜）。

4.2 背景設置

前面爲了展示模塊實際區域，我們應用過很多次 background 屬性來定義背景色，相信大家已經有所瞭解。但是，background 的作用可不僅僅只是定義背景色而已，它包含：

background-color ：定義背景色的屬性

background-image ：定義背景圖片的屬性，使用 "url ( img/logo.png )"  的方法

background-position ：定義背景圖片的x、y軸距離標籤左上角的距離

backgorund-repeat ：定義圖片重複的規則

背景色我們已經知道，關鍵就在背景圖的使用上。比如淘寶中包含了各種酷炫的圖片，雖然多數圖片是內容圖，但是，也有少部分圖片是網站本來的基礎設計內容之一，也就是——切圖。

比如在上圖案例中，右上角個人頭像卡片的底圖，就是頁面切圖元素，這種圖片的引用，並不是通過 image 標籤來完成的，而是通過設置 background 屬性來完成。

換句話說，我們通過長寬制定了一個矩形區域，然後對這個矩形區域採取類似 Sketch 填充中的圖片填充

而如果填充圖片本身的尺寸和定義的矩形尺寸不同，我們就可以通過 background-postion 屬性來設置它的位置，可以是指定 x y 軸距離，也可以使用居中的方法：

除了直接定義一張完整的圖片外，background 還有個特別有用的設置，就是重複屬性。比如我們要定義一個整屏寬的背景，要使用漸變色，那麼我們就可以調用一個1像素寬的圖片背景，然後讓它水平方向平鋪：

在正常情況下，background 屬性是默認 x、y 軸都有 repeat 的平鋪效果，所以如果不想出現重複，就可以添加 no-repeat 值。

背景屬性的應用，就是我們網站設計稿切圖進行實現的具體步驟之一，和設計師有密切的關聯，值得大家更深入的去認識。

4.3 排版定位的屬性

如果我們通過瀏覽器的檢查功能去查看界面的框架，就會發現實際上一個完整的網頁是由無數矩形拼接起來的，我在自己的教學中爲了方便大家理解稱其爲 —— 矩陣視圖。

要把這些矩形框架合理搭建起來，就需要應用到定位相關的屬性，來控制它們的順序和位置，主要應用到的屬性包含下面幾個：

position ：定位類型設置，主要有 static（默認）、 relative（相對定位）、absoulte（絕對定位）、fixed（固定定位） 屬性。

z-index ：頁面的 z 軸層級設置，用數字表示序列。

float ：元素的浮動定位設置，可以設置 left、right。

clear ：清除浮動元素的屬性，包含 left、right、both、none。

top/left/right/bottom ：上左右下方向的偏移距離設置。

4.3.1 定位類型

我們主要在 postion 中會使用的幾種定位類型，是絕對能把新手繞暈的內容，先簡單介紹一下：

position:static 是定位的默認值，也就是沒有定位

position:relative 相對定位，對於該元素原本的位置進行定位

position:absolute 絕對位置，對於上一級父元素的位置進行定位

position:fixed 固定定位，是對於瀏覽器畫布區域進行定位

這麼簡單的解釋大家肯定已經被繞暈了，所以我們換個角度，有過一定 AE 基礎的同學一定都知道，一個元素的座標軸數值，完全是由其 ”中心點“ 來確定，但是這個中心點並不是只固定在畫布左上定點 （fixed），有可能是畫布中任意一點（relative），也可能是關聯了上級圖層（absolute）。

不同中心點制定邏輯，就會造成不同的元素運動效果，但這和網頁佈局有什麼關係？

確實在一個固定了寬高的頁面中，定位沒太多使用的必要，但是，有 ”響應式“ 佈局的概念，我們可以拖動瀏覽器大小修改畫布尺寸，以及類似蘋果詳情頁這種喜歡使用大量動效的騷操作，這些都是 ”運動“ 的過程。

於是我們就必須採取定位的措施，確保元素的顯示正常……

應用 static 以外的定位類型以後，z-index、top/left/right/bottom 等其它屬性才能生效，這四個位置屬性只是設置相對 "中心點" 的移動方向，但是 z-index 就比較有趣了。

它可以制定元素間堆疊的順序，因爲當我們使用特殊的定位類型以後，元素之間就可以相交，比如我們在 Sketch 中添加了很多圖層，這些圖層也能相交，但上方的圖層會覆蓋下方的圖層，包括上面的蘋果官網案例也是，安卓 MD 規範中也有應用。

Z-index 就是就是由正常的數字序號決定優先級，它可以是正數，也可以是負數（負數就處於頁面水平層下方，優先級比正常標籤更低）。

4.3.2 浮動元素

講完定位方式，然後我們就要聊聊浮動屬性 float 了。大家可以放心，它可沒有前面的 Position 屬性複雜（但也沒簡單到哪裏去啊）。

對於網頁標籤來說，多數標籤（具有 block 特性的）有獨佔一行的特徵，即使它的寬度並不是100%，但它們也不會允許別的標籤和自己並列，大家可以自己輸入兩個 h1 標籤，看看它們是不是有了 "換行效果"。

而 float 屬性的主要作用，就是讓它們可以根據某個方向進行對齊，並且不會再排斥有別的元素和自己出現在同一行中。

比如 @花瓣中這種常見的卡片列表，我們就可以通過 float 屬性來輕易實現。

而 clear 屬性，則是用來清除特定方向浮動元素的屬性，指定左右 left、right，或者兩側 both 都清除浮動元素。

我就不做具體演示了，這個屬性妙用無窮，感興趣的同學可以自己搜索相關的細節分享。

4.4 動畫相關設置

4.4.1 過渡效果

動效在 web 2.0 以後的需求越來越強，尤其是對於交互的反饋表現，在過去，我們只能依託 JS 來實現操作的動效，但在更新到了 CSS3 以後，就爲我們提供了直接操控動效的屬性 —— transition。它包含了 4 個下級屬性，分別是：

transition-property ：需要過渡的 CSS 名稱，填寫屬性名

transition-duration ：動畫執行的時長，填寫秒數即可

transition-timing-function ：動畫緩動設置，如 ease-in、ease-out 等

transition-delay ：動畫延遲設置，填寫秒數即可

看一個鼠標懸浮在按鈕上，背景色在2秒從灰色過渡成紅色的代碼案例：

默認和 hover 相當於制定了兩個關鍵幀，而我們把需要製作成補間動畫的參數在起始幀（div選擇器）進行聲明，那麼動畫效果就可以實現。

當然，這個效果還可以包含寬、高、字號、邊框、角度等其它屬性。一條 transition 屬性中可以聲明多個需要執行過度動畫的元素和對應參數，用逗號隔開：

在設置緩動效果上，transition 除了默認自帶的幾種標準緩動外，還支持創建貝塞爾曲線的函數，其輸入格式爲 —— cubic-bezier(n,n,n,n)，在很多動效軟件中都有提供該數值方便我們直接輸入。

4.4.2 動畫屬性

前面的過度，是通過 hover 的定製來實現兩個關鍵幀之間的補間。但是，部分情況下我們也會希望什麼操作也不做，元素自己會執行動畫事件，或者出現更多的關鍵幀。

於是，就引入了 animation 屬性，它主要包含下面幾種下級屬性：

animation-name ：定義動畫事件名

animation-duration ：動畫完成時間

animation-timing-function ：動畫的緩動效果

animation-iteration-count ：動畫的播放次數，可是是指定數字，也可以是 infinte （無限）

然後我們會用一個專門的動畫控制指令 @keyframes 來對動畫實現具體的定義，可以看看下面的代碼案例：

也就是說，我們對一個需要發生動畫的標籤進行 animation 的設置，先聲明一個動畫事件的名稱和執行規則，然後通過 @keyframes 來關聯這個動畫，並具體定義動畫關鍵幀的開始和結束屬性值。

上方案例的 from 和 to，就是起始關鍵幀和結束關鍵幀的屬性值，補間的內容會自動生成。但除了只設置這兩個幀以外，@keyframes 也允許我們設置一些更具體的關鍵幀出來，通過使用 % 的形式來制定時間線上的關鍵幀，比如：

這就等於在這兩秒中，我們關鍵幀制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上，補間動畫就會根據這些關鍵幀開始執行，這就可以幫助我們製作出豐富多樣的動畫。

4.5 其他常用樣式屬性

複雜的東西告一段落，最後再整理一些基本的內容，讓大家緩緩。

4.5.1 色彩設置原理

前面我們使用的 color、background-color 等屬性，都是用來指定色彩的屬性。但是設置色彩本身，不僅僅只是 16 進制色或者已經給出的顏色命名，還包括可以使用 RGB 和 RGBA 色值。

RGB設置 ：color: rgb(255,255,0);   複製軟件中rgb參數到小括號內即可

RGBA設置 ：color: rgba(255,255,0,0.5); 在rgb後面增加了一個透明度，0.0 是完全透明，1是不透明

4.5.2 邊框其它屬性

boder 除了我們看到的描邊設置外，還可以用來控制元素圓角的大小，雖然字面理解起來它們關聯不是太大，但是 CSS3 中提供了 boder-radius 屬性定義元素的四個邊角，除了它本身外還包含下級：

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

我們可以通過增加對應的像素數值，來實現圓角矩形的效果，尤其在按鈕的實現中。例如：

除了圓角，同屬於這個類型的屬性中還有一個陰影的屬性，那就是 box-shadow 屬性。它的設置和 XD 以及 Sketch 的陰影設置是一樣的，下方案例分別是陰影的 X軸距、Y軸距離、BLUR模糊值、色彩：

4.5.3 元素透明度設置

CSS 中提供了一個 Opacity 屬性專門用來控制元素的透明度，透明度的值和 RGBA 的使用方法一致，並且，這個透明度會影響下級元素，相當於我們爲 Sketch 中製作的編組設置了透明度。

4.5.4 盒子屬性

在頁面的展示中，經常要實現一個遮罩的效果，那麼我們就會用到 overflow 盒子屬性，這個屬性主要用來對標籤內的元素狀態做應對，比如下面這些設置：

hidden ：元素內容超出標籤盒子大小，那麼就被隱藏（裁切）

scroll ：爲這個標籤盒子提供內部滾動條的機制

auto ：如果內容超出標籤盒子的大小，那麼自動增加內部的滾動條

4.5.5 長寬的具體設置

之前的演示我們應該都知道了，元素尺寸中寬和高的具體設置屬性是 width 和 heigh，但是這兩個屬性的設置除了使用數值外，同時還可以設置百分比，比如：

這樣子，這個 div 的寬就是整個瀏覽器視圖區域的 50% 寬，我們變更瀏覽器寬度的時候，它的寬也會一起變更。也就是說，百分比設置，是根據它的上層標籤寬來決定的，50%的寬即上級標籤實際尺寸寬度的一半。

除了百分比外，寬和高都提供了一個最小和最大值的設定，即 min-width、max-width、min-height、max-height，它可以限定標籤的長寬在一個特定的範圍中。

比如上方的設置中，就是基於瀏覽器視圖50%的情況下，最大的尺寸只到 300px，就不會再超出了。min和max兩個設置也是自適應中的重要環節。

寫了那麼多 HTML CSS 的學習，終於，要在這篇迎來具體的案例應用了。下面，就是本節課要演示的案例圖，我們要通過 HTML 和 CSS 將它實現出來：

不過用圖文的方式是沒法完整的講解一遍這個頁面的實現過程的，只能儘可能包含我們編寫的順序和重點，需要大家參考視頻教程，以及下載我們的案例源文件進行研究，才能更好的掌握有關知識。

5.1 HTML樣式的語法

在完成設計稿以後，我們着手項目的前端界面佈局，首先要先建立項目有關的文件夾，然後在這個文件夾根目錄中創建 ”index.html“ 文檔，再創建 img、css 兩個文件夾，用來存放對應文件。

然後，通過編輯器打開 index.html，優先完成頁面的標籤結構創建，即預判頁面中包含哪些標籤，以及相應的層級結構（即文檔對象模型 DOM），將它們碼下來。

那麼什麼是 HTML 的代碼結構呢，前面我們有略微提及，下面用一個樹狀圖來理解 HTML 文檔中的結構：

這麼做的目的，是爲了先集中精力建立一個清晰的 HTML 文檔，幫助我們後續在進行樣式調整的時候可以更便捷，而不用一邊寫 HTML 又同時調整 CSS，這樣效率會非常低下。

所以，下面就可以開始動手了，優先將我們前文所說的 HTML 文檔標準結構填充進去，同時在 head 中添加引用外部 CSS 文件的鏈接。

然後我們就要在 body 標籤內，添加有關的內容框架的 div 標籤了，爲了展示直觀，下方的標籤處於 body 標籤內，標準文檔信息我就不展示出來了。

簡單描述一下上面的結構，就是我們將頁面分爲三個大的模塊，並在每個大模塊又拆分成兩個子模塊，用文字解釋起來如下：

•    頁面頂部區域：導航欄、廣告圖

•    頁面內容區域：特點介紹、分享乾貨

•    頁腳內容區域：站點信息、備案號

在這個過程中，爲了比較好的區分代碼內容，我們可以通過在開頭或結尾添加 <!--註釋區域--> 註釋代碼，提升之後的瀏覽效率。

並且，在通過 div 創建框架的同時，我們可以爲它增加有關的 class 命名，命名的方法大家可以根據自己的習慣定，用拼音也可以，只要沒有在不相關的 div 中應用到相同名稱即可。下面，開始具體演示幾個模塊 HTML 標籤的編寫方式。

首先看頂部模塊，對它具體的內部模塊做一次拆解，然後再開始動手：

然後，我們再開始定義下一個模塊特點介紹：

然後，我們再講講在乾貨分享模塊中，單個卡片定義的方式：

相信通過上面幾個模塊的演示，大家應該能瞭解如何制定 HTML 標籤的結構了吧，節省篇幅，頁腳模塊的樣式我就不添加了。

我會將基礎的文件框架放在素材文件夾中，大家在公衆號回覆 ”前端“ 即可獲取。

5.2 CSS全局預設

完成了 HTML 的結構，我們就要開始創建 CSS 文檔了，創建一個 style.css 樣式表文件存儲到 CSS 文件夾中，然後就可以在編輯器中開始添加樣式了。

通常，我們在 CSS 中添加的第一個選擇器，是一個特殊的選擇器 ” * “ 符號，它代表了所有元素，使用這個選擇器，就等於對所有元素進行了樣式聲明。我們會再 CSS 頭部添加這個選擇器，對標籤的自帶默認樣式進行 ”格式化“，常見的設置如下：

在這個全局預設中，我們分別清除了 margin、padding、list-style 三個屬性的默認數值，將所有元素設置成 block 塊化，可以進行長寬的定義，以及實現整體元素左對齊，寬高自適應。

全局預設的並不代表所有參數的元素被定死了，只是我們給它們先預設了一個默認數值，只要在後續其它選擇器中聲明新的參數，那麼瀏覽器最會按最後設置的聲明作爲標準。

比如title標籤，理論上這個標籤是不會出現在畫布中的，但在新的特性中有些瀏覽器在它 block 了以後就會看見，所以我們還要添加一條隱藏聲明：

然後，我們還可以對 body 標籤進行定義，我們通常會將對頁面文字定義的基本屬性放在 body 上而不是全選擇器上，比如：

這裏面，我們定義了字體依次顯示 helvetica （英文）、蘋方、雅黑，字號使用14像素，行高默認爲字號的 1.6 倍，字色爲黑，整個內容區域背景色爲白色，寬度和瀏覽器區域一致，以及最小寬度。

全局基本樣式的制定，和我們的經驗有關，預判這個項目中哪些需要提前設置，哪些是可以不用強調的，初期大家可以使用和我一樣的設置，下面，就要展開模塊樣式的具體制定了。

5.3 頂部樣式定義

接着，我們來完成頂部樣式的制定。我們可以發現，頂部的導航欄背景實際區域的尺寸寬是 960px，高是 60px，並在畫布中居中顯示，那麼它們的樣式：

然後，我們就要定義導航欄內的元素了，包含兩個部分內容，LOGO 和導航按鈕文字，所以我們可以使用 float 屬性來表現它們，並使用 margin 屬性來增加模塊間距。

然後，爲導航內的列表文字鏈接做具體的設置。其中 ul 沒啥可以做調整的，我們直接從 li 標籤開始定義，將 li 設置成左浮動，並將內部的 a 標籤設置成 100px*60px，等於 li 的長寬也是 100px*60px：

在 a 標籤的樣式中，可以注意到 line-height 這個屬性，只要將它設置成模塊一樣的高度，就可以實現上下居中的效果，而不用使用頂部 margin 或 padding。

同時，因爲 a 標籤呈一個矩形模塊的完整尺寸，我們就可以通過 hover 屬性修改它的選中效果爲背景深灰色，文字白色。

接着，看看 banner 的樣式，它是一個會撐滿全屏的圖片，而我們完成這類效果，就一定要考慮到圖片在瀏覽器進行伸縮時的效果。最常見的做法，就是保持圖片大小不變，高度不變，左右的內容根據局瀏覽寬度的變動而隱藏、顯示。

那麼我們可以這麼定義它們的樣式：

這樣，保持圖片居中的位置，並因爲上級 div 中 overflow 的值爲隱藏，所以無論我們怎麼拖動瀏覽器，圖片的尺寸和位置都會居中。

但因爲，我們導出的1280的寬，在分辨率 1920 寬的情況下兩側就有缺口，所以爲了解決這樣的問題我們通常會再添加一個背景色，保證顯示的效果的合理，下方是實際顯示效果。

在這裏，頁面上方的佈局也就基本實現。

5.4 內容樣式定義

然後，我們再來實現內容區域的樣式，標題這些我就不說了，我們先重點講講卡片模塊。

卡片內部實際上有內邊距的存在，所以我們可以使用 padding 屬性，同時因爲一行有四個卡片，每個卡片間有間距，所以也要使用 float 和 margin 屬性。

要記住在這個定義下，我們使用了 padding，那就等於我們設置的長寬要減去四周的 28px，如果原來是 232px 寬，就要減左右總共 56px 的尺寸，得到 176px。

當這個標籤的寬爲 176px ，那麼下方的其它 div 設置 100% 寬度時，它們的總寬也就只能是 176px。

還要注意的是，中間的卡片總共有4個，如果我們統一制定它們佔用的空間是”寬“+”右邊距“，那麼就會有4個卡片寬和4個右邊距，但實際顯示效果中只有3個間距。

所以這種情況就可以使用行內樣式的方法將第四個卡片的右邊距清零，保證顯示的合理性：

在下方的多文本排列中，一定要重點關注原設計稿中的數值字體定義數值，包括行高、字號、字重，只要數據一致，我們就完全可以使用設計稿中的間距來定義 magin 數值。

往下的獨家分享模塊同理，我們要實現 3*2 的矩陣排列，就要爲卡片標籤設置浮動和右邊距、下邊距，而每一行的最後一個，我們都要清除它的右邊距，才能保證的顯示的正常。

在這個模塊中，底部用了一個 span 標籤做父標籤，b、i  分別表示作者和閱讀量。

這裏要注意的是，b 和 i 作爲調整文本樣式的標籤，並不是一定要遵守它原先的樣式的，我們可以將它的加粗和傾斜去掉，作爲不同字段標識用的標籤。

並且，在閱讀量上，有一個眼睛圖標，我們也並不需要使用 img 標籤去實現，只要在 CSS 中增加一個 padding-left，留出空白區域，然後用 background 的圖片填充這個區域即可。

講完這個模塊，頁腳我就也不再囉嗦下去了，大家可以自己在我們提供的源文件中查看對應的設置和屬性即可。

HTML 和 CSS 的教學到這裏就告一段落了，大家最後的任務，就是根據所學的內容，將本節課的案例完整的實現出來即可。

相信在實現的過程裏大家肯定會碰到不少問題，所以一定要一邊做一邊思考，一邊查看 CSS 手冊或百度解決問題。相關的素材和已經完整實現好的案例在公衆號中回覆 ”前端“ 即可獲取。

只要能把這節課案例完整實現出來，那麼大家就已經掌握了前端的初級水平，沒有特殊的情況也就不再需要深入學習下去了。

再提一次，學習這兩門語言，並不是真的需要我們工作中寫代碼，而是通過了解前端樣式的實現過程和思考邏輯，提升在團隊中和前端工程師的協作效率，降低溝通成本，從而具備更強的職業競爭力。

寫真正有用的乾貨不容易，如果覺得對你有幫助，那別忘記點下方的 ”在看“ 和分享！

我們下篇內容再賤！

Powered by Froala Editor