CSS 指的是層疊樣式表（Cascading StyleSheet），在網(wǎng)頁制作時(shí)采用層疊樣式表技術(shù)，可以有效地對(duì)頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制，本文對(duì) css 一些基本內(nèi)容及常用功能進(jìn)行一下總結(jié)，總結(jié)的內(nèi)容主要是來自實(shí)驗(yàn)樓的 CSS 速成教程 ，這篇文章會(huì)實(shí)時(shí)更新，后續(xù)如果遇到什么好的有用功能，也會(huì)更新到這篇文章中。

css 基礎(chǔ)語法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

選擇器通常是需要改變的 HTML 元素，每條聲明都由一個(gè)屬性和一個(gè)值組成，每個(gè)屬性都有一個(gè)值，屬性和值被冒號(hào)分開。

css 基本樣式

介紹 css 的一些基本樣式，這些都是 css 中一些常用的設(shè)置。

背景

css 是允許使用純色作為背景，也允許使用背景圖像實(shí)現(xiàn)一些相當(dāng)復(fù)雜的效果。

舉個(gè)例子，如下所示

效果如下下圖所示：

文本

css 文本可定義文本的外觀，通過文本的屬性，可以改變文本的顏色、字符間距、對(duì)齊方式等等。

應(yīng)用時(shí)，可以進(jìn)行以下設(shè)置

在網(wǎng)頁展現(xiàn)時(shí)，標(biāo)簽 body 和 p 中元素就會(huì)按照設(shè)置進(jìn)行顯示。

鏈接

在 css 的鏈接屬性中，可以對(duì)其顏色、字體、背景進(jìn)行相應(yīng)的設(shè)置，不同的狀態(tài)我們可以設(shè)置對(duì)應(yīng)的樣式。

4種鏈接狀態(tài)

css 共有以下幾種鏈接狀態(tài)：

1. a:link ：普通的、未被訪問的鏈接；
2. a:visited ：用戶已訪問的鏈接；
3. a:hover ：鼠標(biāo)指針位于鏈接的上方；
4. a:active ：鏈接被點(diǎn)擊的時(shí)刻。

在進(jìn)行設(shè)置中，有以下兩種要求：

• a:hover 必須位于 a:link 和 a:visited 之后；
• a:active 必須位于 a:hover 之后。

修改鏈接下劃線

只需要在鏈接屬性中添加 text-decoration 屬性，將對(duì)應(yīng)的值設(shè)置為空即可。

列表

在 html 中學(xué)習(xí)過列表的一些設(shè)置，這里主要講述的是如何通過 css 進(jìn)行列表的設(shè)置。

簡(jiǎn)單的列表類型

列表有無序、有序之分，無序列表又可以用不同的標(biāo)記來區(qū)分，而 list-style-type 這個(gè)屬性我們就可以用來控制標(biāo)記類型。

列表項(xiàng)圖片

在無序列表中，除了進(jìn)行一些默認(rèn)的設(shè)置外，并沒有其他可選的內(nèi)容，但是 css 可以提供圖片來作為標(biāo)記。

表格

在 css 表格的設(shè)置中，需要先了解一下屬性：

這里也以一個(gè)例子來說明：

顯示效果如下圖

輪廓

輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。涉及到的屬性有：

顯示效果如下圖所示：

css 選擇器

選擇器是 css 中最常用的組件，本節(jié)就介紹一下 css 中最常見的幾種選擇器。

元素選擇器

最常見的選擇器就是元素選擇器，文檔的元素的就是最基本的選擇器。比如 h1 、 a 等，在 css 中可以這樣實(shí)現(xiàn)：

類選擇器

類選擇器允許以一種獨(dú)立與文檔元素的方式來制定樣式。 .class{} 這是類選擇器的標(biāo)志，點(diǎn)后面是屬性名，大括號(hào)里面就是具體的設(shè)置，如：

id 選擇器

id 選擇器類似于類選擇器，id 選擇器的引入是用 # ，就和類選擇器的 . 是一樣的效果，它與類選擇器的區(qū)別是：

• id 顧名思義只能在文檔中使用一次，而類可以使用多次；
• id 選擇器不能像剛才類選擇器一樣結(jié)合使用。

屬性選擇器

對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。

其他選擇器

其他的還有：

• 后代選擇器
• 子元素選擇器
• 相鄰兄弟選擇器

下面僅列出一種后代選擇器

css 盒子模型

css 的盒子模型主要適用于網(wǎng)頁的布局。

盒子模型概述

盒子的組成包括：

• margin(外邊距)：邊框以外就是外邊距，默認(rèn)外邊距是透明的（可以為負(fù)）；
• border(邊框)：內(nèi)邊距的邊緣就是邊框；
• padding(內(nèi)邊距)：直接包圍內(nèi)容的部分，它呈現(xiàn)了元素的背景；
• content(內(nèi)容)：正文框的最內(nèi)部分就是實(shí)際的內(nèi)容.

其中，內(nèi)邊距、邊框和外邊距都是可選的，默認(rèn)值是0。下面用一張簡(jiǎn)單的圖來描述它們的結(jié)構(gòu)

內(nèi)邊距

內(nèi)邊據(jù)在正文（content）外、邊框（border）內(nèi)，控制該區(qū)域最簡(jiǎn)單的屬性是 padding 屬性

• padding 屬性接受長(zhǎng)度值或百分比值，但不允許使用負(fù)值；
• 也可以進(jìn)行統(tǒng)一的內(nèi)邊距設(shè)置，也可以進(jìn)行單邊的內(nèi)邊距設(shè)置。
• 設(shè)置某一邊的邊據(jù)時(shí)，可以通過以下四個(gè)屬性： padding-top 、 padding-right 、 padding-bottom 、 padding-left .

舉個(gè)栗子

邊框

元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。

• 邊框的寬度可以通過這幾個(gè)參數(shù)來設(shè)置： border-top-width 、 border-right-width 、 border-bottom-width 、 border-left-width ；
• 同樣可以使用屬性控制各個(gè)邊框的顏色： border-top-color 、 border-right-color 、 border-bottom-color 、 border-left-color 。

外邊距

外邊距就是圍繞在內(nèi)容框的區(qū)域，也可以使用任何長(zhǎng)度的單位、百分?jǐn)?shù)來進(jìn)行設(shè)置。

• 寬度的設(shè)置： margin-top 、 margin-right 、 margin-bottom 、 margin-left ；
• margin 的默認(rèn)值是 0;
• 在寬度設(shè)置時(shí)，可以借助于對(duì)稱復(fù)制；

css 一些高級(jí)用法

這里是 css 中一些高級(jí)的常見用法

定位

定位，就是定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。

在 css 中，有三種基本的定位機(jī)制：

1. 普通流：在位置順序決定排版順序；
2. 浮動(dòng)：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹梗?/li>
3. 絕對(duì)定位：絕對(duì)定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

定位有以下幾個(gè)屬性:

• position：將元素放在一個(gè)靜態(tài)的，相對(duì)的，絕對(duì)的或固定的位置；
• 通過對(duì) top、left、right、bottom 這四個(gè)屬性的賦值讓元素向?qū)?yīng)的方向偏移；
• overflow：設(shè)置元素溢出其區(qū)域發(fā)生的事情；
• clip：設(shè)置元素的顯示形狀，多用于圖片；
• vertical-align：設(shè)置元素的垂直對(duì)其方式；
• z-index：設(shè)置元素的堆疊順序。

position 屬性，有以下四種設(shè)置：

1. relative：就是普通流；
2. absolute：這個(gè)就是絕對(duì)定位，該元素區(qū)域會(huì)與文檔區(qū)域重合，因?yàn)樗褂迷撛嘏c文檔流無關(guān)；
3. fixed：將元素固定下來,就算滾動(dòng)屏幕,它也會(huì)在同一個(gè)地方不會(huì)動(dòng)；
4. static：設(shè)置以后,偏移量什么的就沒用了。

浮動(dòng)

這里涉及到的屬性就是 float ，其值可以賦值為：

• left: 元素向左浮動(dòng)；
• right: 元素向右浮動(dòng)；
• none: 不浮動(dòng)；
• inherit: 從父級(jí)繼承浮動(dòng)的屬性；
• clear: 主要用于去掉向各方向的浮動(dòng)屬性(包括繼承來的屬性)。