CSS 包含了非常多的屬性和規(guī)則，學(xué)習(xí) CSS 就是學(xué)習(xí)這些屬性的用法，今天我們會(huì)挑選出最常用的屬性做說(shuō)明。

文字相關(guān)屬性

1. 文本屬性

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

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

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

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

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

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

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

text-align 這個(gè)屬性有向下繼承的特性，即我們?cè)诟笜?biāo)簽中定義了對(duì)齊方向，那么子標(biāo)簽也會(huì)遵守這個(gè)方向。

2. 字體屬性

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

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

font-size：文字的字號(hào)，用像素表示

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

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

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

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

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

并且可以設(shè)置多個(gè)字體，通過(guò)逗號(hào)隔開(kāi)，如果第一個(gè)字體用戶沒(méi)有，那么會(huì)自動(dòng)替換成下一個(gè)字體。

3. 列表屬性

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

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

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

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

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

背景設(shè)置

前面為了展示模塊實(shí)際區(qū)域，我們應(yīng)用過(guò)很多次 background 屬性來(lái)定義背景色，相信大家已經(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)站本來(lái)的基礎(chǔ)設(shè)計(jì)內(nèi)容之一，也就是——切圖。

排版定位屬性

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

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

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

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

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

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

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

1. 定位類(lèi)型

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

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

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

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

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

這么簡(jiǎn)單的解釋大家肯定已經(jīng)被繞暈了，所以我們換個(gè)角度，一個(gè)元素的坐標(biāo)軸數(shù)值，完全是由其 「 中心點(diǎn)」來(lái)確定，但是這個(gè)中心點(diǎn)并不是只固定在畫(huà)布左上定點(diǎn) （fixed），有可能是畫(huà)布中任意一點(diǎn)（relative），也可能是關(guān)聯(lián)了上級(jí)圖層（absolute）。

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

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

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

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

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

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

2. 浮動(dòng)元素

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

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

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

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

動(dòng)畫(huà)相關(guān)設(shè)置

1. 過(guò)渡效果

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

transition-property：需要過(guò)渡的 CSS 名稱，填寫(xiě)屬性名

transition-duration：動(dòng)畫(huà)執(zhí)行的時(shí)長(zhǎng)，填寫(xiě)秒數(shù)即可

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

transition-delay：動(dòng)畫(huà)延遲設(shè)置，填寫(xiě)秒數(shù)即可

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

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

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

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

2. 動(dòng)畫(huà)屬性

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

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

animation-name：定義動(dòng)畫(huà)事件名

animation-duration：動(dòng)畫(huà)完成時(shí)間

animation-timing-function：動(dòng)畫(huà)的緩動(dòng)效果

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

然后我們會(huì)用一個(gè)專(zhuān)門(mén)的動(dòng)畫(huà)控制指令 @keyframes 來(lái)對(duì)動(dòng)畫(huà)實(shí)現(xiàn)具體的定義，可以看看下面的代碼案例：

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

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

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

其它常用樣式屬性

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

1. 色彩設(shè)置原理

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

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

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

2. 邊框其它屬性

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

border-top-left-radius：左上角

border-top-right-radius：右上角

border-bottom-left-radius：左下角

border-bottom-right-radius：右下角

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

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

3. 元素透明度設(shè)置

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

4. 盒子屬性

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

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

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

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

5. 長(zhǎng)寬的具體設(shè)置

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

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

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

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