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

文字相關(guān)屬性

1. 文本屬性

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

color：標簽中的文本顏色，使用顏色名或 #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 這個屬性有向下繼承的特性，即我們在父標簽中定義了對齊方向，那么子標簽也會遵守這個方向。

2. 字體屬性

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

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

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

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

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

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

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

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

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

3. 列表屬性

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

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

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

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

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

背景設(shè)置

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

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

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

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

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

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

排版定位屬性

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

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

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

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

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

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

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

1. 定位類型

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

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

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

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

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

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

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

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

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

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

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

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

2. 浮動元素

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

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

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

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

動畫相關(guān)設(shè)置

1. 過渡效果

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

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

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

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

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

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

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

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

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

2. 動畫屬性

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

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

animation-name：定義動畫事件名

animation-duration：動畫完成時間

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

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

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

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

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

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

其它常用樣式屬性

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

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

前面我們使用的 color、background-color 等屬性，都是用來指定色彩的屬性。但是設(shè)置色彩本身，不僅僅只是 16 進制色或者已經(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是不透明

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ù)值，來實現(xiàn)圓角矩形的效果，尤其在按鈕的實現(xiàn)中。例如：

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

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

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

4. 盒子屬性

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

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

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

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

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

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

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

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

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