這個系列會用所有人能看懂的講解方式，幫助大家掌握 HTML 和 CSS 的基礎。

往期回顧：

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

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

文字相關屬性

1. 文本屬性

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

• color：標籤中的文本顏色，使用顏色名或 #212131 這樣的編碼
• line-height：每行文本的高度，用像素單位設置
• text-align：文本的對齊屬性，包含 left、right、center（居中）
• text-decoration：文本的修飾內容，包含 none、underline（下劃線）、line-through（刪除線） 等設置
• word-spacing：字間距，用像素單位設置

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

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

2. 字體屬性

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

• font-family: 設置文字的字體
• font-size：文字的字號，用像素表示
• font-style：字體風格，包含 normal（默認）、italic（斜體）、oblique（傾斜）
• font-weight：字體的字重，可以用數字也可以字體自帶字種

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

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

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

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

3. 列表屬性

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

• list-style-image：列表項符號替換成圖片的設置；
• list-style-postion：列表項符號圖片所處的位置；
• list-style-type：列表項符號的類型，包含none、disc（實心圓）、circle（空心圓）、suqare（方形）、decimal（數字）等；

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

背景設置

前面爲了展示模塊實際區域，我們應用過很多次 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 值。

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

排版定位屬性

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

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

• position：定位類型設置，主要有 static（默認）、 relative（相對定位）、absoulte（絕對定位）、fixed（固定定位） 屬性。
• z-index：頁面的 z 軸層級設置，用數字表示序列。
• float：元素的浮動定位設置，可以設置 left、right。
• clear：清除浮動元素的屬性，包含 left、right、both、none。
• top/left/right/bottom：上左右下方向的偏移距離設置。

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

2. 浮動元素

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

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

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

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

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

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

動畫相關設置

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)，在很多動效軟件中都有提供該數值方便我們直接輸入。

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秒 上，補間動畫就會根據這些關鍵幀開始執行，這就可以幫助我們製作出豐富多樣的動畫。

其它常用樣式屬性

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

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是不透明

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模糊值、色彩：

3. 元素透明度設置

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

4. 盒子屬性

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

• hidden：元素內容超出標籤盒子大小，那麼就被隱藏（裁切）
• scroll：爲這個標籤盒子提供內部滾動條的機制
• auto：如果內容超出標籤盒子的大小，那麼自動增加內部的滾動條

5. 長寬的具體設置

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

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

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

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

結語

對於 CSS 的解釋就在此告一段落了，我們通過兩小節一口氣把它們解釋完，相信多數同學有非常多的疑問，以及對內容不能完全的吸收。

但不要緊，下一節中，我們就會通過具體的網頁案例，將 HTML 和 CSS 的知識完整的實踐一遍，更好理解它們的功能和應用場景。

歡迎關注作者的微信公衆號：「超人的電話亭」