這一節(jié)中，我們來講講 CSS 的具體應(yīng)用細(xì)則，也就是 CSS 的屬性。

CSS 包含了非常多的屬性和規(guī)則，學(xué)習(xí) CSS 就是學(xué)習(xí)這些屬性的用法，本篇內(nèi)容中我們會挑選出最常用的屬性做說明。

上一篇鏈接：?

課程視頻：

4.1.1 文本屬性

在 CSS 中，文本指的是標(biāo)簽中的文字內(nèi)容，我們可以控制一些特定的文本屬性，常用的包含：

color：標(biāo)簽中的文本顏色，使用顏色名或 #212131 這樣的編碼

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

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

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

word-spacing：字間距，用像素單位設(shè)置

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

text-align 這個屬性有向下繼承的特性，即我們在父標(biāo)簽中定義了對齊方向，那么子標(biāo)簽也會遵守這個方向。

4.1.2 字體屬性

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

font-family:?設(shè)置文字的字體

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

font-style：字體風(fēng)格，包含 normal（默認(rèn)）、italic（斜體）、oblique（傾斜）

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

在字體設(shè)置的規(guī)則上，并不是我們想怎么設(shè)置都可以，而是考慮用戶有什么字體。

因?yàn)闉g覽器對文字的渲染是通過用戶本地的字庫來完成的，這也是為什么我們設(shè)計 UI 和網(wǎng)頁的時候不能隨心所欲用字體的原因之一。

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

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

4.1.3 ?列表屬性

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

list-style-image：列表項(xiàng)符號替換成圖片的設(shè)置；

list-style-postion：列表項(xiàng)符號圖片所處的位置；

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

list-style 這個屬性只能作用在 ul、ol、li 標(biāo)簽，對其它標(biāo)簽無效。對于列表項(xiàng)的圖像設(shè)置我們先撇開不談，我們設(shè)置最多的數(shù)值就是采用 none，否則瀏覽器會自帶列表項(xiàng)符號（很丑）。

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

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

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

background-position：定義背景圖片的x、y軸距離標(biāo)簽左上角的距離

backgorund-repeat：定義圖片重復(fù)的規(guī)則

背景色我們已經(jīng)知道，關(guān)鍵就在背景圖的使用上。比如淘寶中包含了各種酷炫的圖片，雖然多數(shù)圖片是內(nèi)容圖，但是，也有少部分圖片是網(wǎng)站本來的基礎(chǔ)設(shè)計內(nèi)容之一，也就是——切圖。

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

換句話說，我們通過長寬制定了一個矩形區(qū)域，然后對這個矩形區(qū)域采取類似 Sketch 填充中的圖片填充。

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

除了直接定義一張完整的圖片外，background 還有個特別有用的設(shè)置，就是重復(fù)屬性。比如我們要定義一個整屏寬的背景，要使用漸變色，那么我們就可以調(diào)用一個1像素寬的圖片背景，然后讓它水平方向平鋪:

在正常情況下，background 屬性是默認(rèn) x、y 軸都有 repeat 的平鋪效果，所以如果不想出現(xiàn)重復(fù)，就可以添加 no-repeat 值。

背景屬性的應(yīng)用，就是我們網(wǎng)站設(shè)計稿切圖進(jìn)行實(shí)現(xiàn)的具體步驟之一，和設(shè)計師有密切的關(guān)聯(lián)，值得大家更深入的去認(rèn)識。

如果我們通過瀏覽器的檢查功能去查看界面的框架，就會發(fā)現(xiàn)實(shí)際上一個完整的網(wǎng)頁是由無數(shù)矩形拼接起來的，我在自己的教學(xué)中為了方便大家理解稱其為 —— 矩陣視圖。

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

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

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

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

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

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

4.3.1 定位類型

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

position:static??是定位的默認(rèn)值，也就是沒有定位

position:relative?相對定位，對于該元素原本的位置進(jìn)行定位

position:absolute?絕對位置，對于上一級父元素的位置進(jìn)行定位

position:fixed?固定定位，是對于瀏覽器畫布區(qū)域進(jìn)行定位

這么簡單的解釋大家肯定已經(jīng)被繞暈了，所以我們換個角度，有過一定 AE 基礎(chǔ)的同學(xué)一定都知道，一個元素的坐標(biāo)軸數(shù)值，完全是由其 ”中心點(diǎn)“ 來確定，但是這個中心點(diǎn)并不是只固定在畫布左上定點(diǎn) （fixed），有可能是畫布中任意一點(diǎn)（relative），也可能是關(guān)聯(lián)了上級圖層（absolute）。

不同中心點(diǎn)制定邏輯，就會造成不同的元素運(yùn)動效果，但這和網(wǎng)頁布局有什么關(guān)系？

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

于是我們就必須采取定位的措施，確保元素的顯示正?！?/p>

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

它可以制定元素間堆疊的順序，因?yàn)楫?dāng)我們使用特殊的定位類型以后，元素之間就可以相交，比如我們在 Sketch 中添加了很多圖層，這些圖層也能相交，但上方的圖層會覆蓋下方的圖層，包括上面的蘋果官網(wǎng)案例也是，安卓 MD 規(guī)范中也有應(yīng)用。

Z-index 就是就是由正常的數(shù)字序號決定優(yōu)先級，它可以是正數(shù)，也可以是負(fù)數(shù)（負(fù)數(shù)就處于頁面水平層下方，優(yōu)先級比正常標(biāo)簽更低）。

4.3.2 浮動元素

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

對于網(wǎng)頁標(biāo)簽來說，多數(shù)標(biāo)簽（具有 block 特性的）有獨(dú)占一行的特征，即使它的寬度并不是100%，但它們也不會允許別的標(biāo)簽和自己并列，大家可以自己輸入兩個 h1 標(biāo)簽，看看它們是不是有了 "換行效果"。

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

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

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

我就不做具體演示了，這個屬性妙用無窮，感興趣的同學(xué)可以自己搜索相關(guān)的細(xì)節(jié)分享。

4.4.1 過渡效果

動效在 web 2.0 以后的需求越來越強(qiáng)，尤其是對于交互的反饋表現(xiàn)，在過去，我們只能依托 JS 來實(shí)現(xiàn)操作的動效，但在更新到了 CSS3 以后，就為我們提供了直接操控動效的屬性 —— transition。它包含了 4 個下級屬性，分別是：

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

transition-duration：動畫執(zhí)行的時長，填寫秒數(shù)即可

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

transition-delay：動畫延遲設(shè)置，填寫秒數(shù)即可

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

默認(rèn)和 hover 相當(dāng)于制定了兩個關(guān)鍵幀，而我們把需要制作成補(bǔ)間動畫的參數(shù)在起始幀（div選擇器）進(jìn)行聲明，那么動畫效果就可以實(shí)現(xiàn)。

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

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

4.4.2 動畫屬性

前面的過度，是通過 hover 的定制來實(shí)現(xiàn)兩個關(guān)鍵幀之間的補(bǔ)間。但是，部分情況下我們也會希望什么操作也不做，元素自己會執(zhí)行動畫事件，或者出現(xiàn)更多的關(guān)鍵幀。

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

animation-name：定義動畫事件名

animation-duration：動畫完成時間

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

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

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

也就是說，我們對一個需要發(fā)生動畫的標(biāo)簽進(jìn)行 animation 的設(shè)置，先聲明一個動畫事件的名稱和執(zhí)行規(guī)則，然后通過 @keyframes 來關(guān)聯(lián)這個動畫，并具體定義動畫關(guān)鍵幀的開始和結(jié)束屬性值。

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

這就等于在這兩秒中，我們關(guān)鍵幀制定在了 0秒、0.5秒、1秒、1.5秒、2秒 上，補(bǔ)間動畫就會根據(jù)這些關(guān)鍵幀開始執(zhí)行，這就可以幫助我們制作出豐富多樣的動畫。

復(fù)雜的東西告一段落，最后再整理一些基本的內(nèi)容，讓大家緩緩。

4.5.1 色彩設(shè)置原理

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

RGB設(shè)置：color: rgb(255,255,0); ? 復(fù)制軟件中rgb參數(shù)到小括號內(nèi)即可

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

4.5.2 邊框其它屬性

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

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

我們可以通過增加對應(yīng)的像素數(shù)值，來實(shí)現(xiàn)圓角矩形的效果，尤其在按鈕的實(shí)現(xiàn)中。例如：

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

4.5.3 元素透明度設(shè)置

CSS 中提供了一個 Opacity 屬性專門用來控制元素的透明度，透明度的值和 RGBA 的使用方法一致，并且，這個透明度會影響下級元素，相當(dāng)于我們?yōu)?Sketch 中制作的編組設(shè)置了透明度。

4.5.4 盒子屬性

在頁面的展示中，經(jīng)常要實(shí)現(xiàn)一個遮罩的效果，那么我們就會用到 overflow 盒子屬性，這個屬性主要用來對標(biāo)簽內(nèi)的元素狀態(tài)做應(yīng)對，比如下面這些設(shè)置：

hidden：元素內(nèi)容超出標(biāo)簽盒子大小，那么就被隱藏（裁切）

scroll：為這個標(biāo)簽盒子提供內(nèi)部滾動條的機(jī)制

auto：如果內(nèi)容超出標(biāo)簽盒子的大小，那么自動增加內(nèi)部的滾動條

4.5.5 長寬的具體設(shè)置

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

這樣子，這個 div 的寬就是整個瀏覽器視圖區(qū)域的 50% 寬，我們變更瀏覽器寬度的時候，它的寬也會一起變更。也就是說，百分比設(shè)置，是根據(jù)它的上層標(biāo)簽寬來決定的，50%的寬即上級標(biāo)簽實(shí)際尺寸寬度的一半。

除了百分比外，寬和高都提供了一個最小和最大值的設(shè)定，即 min-width、max-width、min-height、max-height，它可以限定標(biāo)簽的長寬在一個特定的范圍中。

比如上方的設(shè)置中，就是基于瀏覽器視圖50%的情況下，最大的尺寸只到 300px，就不會再超出了。min和max兩個設(shè)置也是自適應(yīng)中的重要環(huán)節(jié)。

對于 CSS 的解釋就在此告一段落了，我們通過兩小節(jié)一口氣把它們解釋完，相信多數(shù)同學(xué)有非常多的疑問，以及對內(nèi)容不能完全的吸收。

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

寫這種教程不容易，大家多轉(zhuǎn)發(fā)和點(diǎn)擊在看來支持一下吧！

我們馬上再賤~

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

往期課程介紹查看???