CSS基礎

什麼是 CSS?

• CSS 指層疊樣式表 (Cascading Style Sheets)
• 樣式定義如何顯示 HTML 元素
• 樣式一般存儲在樣式表中
• 把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
• 外部樣式表能夠極大提升工做效率
• 外部樣式表一般存儲在 CSS 文件中
• 多個樣式定義可層疊爲一

CSS 實例

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:

選擇器一般是您須要改變樣式的 HTML 元素。

每條聲明由一個屬性和一個值組成。

屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開。

CSS Id 和 Class

---

id 和 class 選擇器

若是你要在HTML元素中設置CSS樣式，你須要在元素中設置"id" 和 "class"選擇器。

---

id 選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。

class 選擇器

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class能夠在多個元素中使用。

class 選擇器在HTML中以class屬性表示, 在 CSS 中，類選擇器以一個點"."號顯示：

在如下的例子中，全部擁有 center 類的 HTML 元素均爲居中

如何插入樣式表

插入樣式表的方法有三種:

• 外部樣式表
• 內部樣式表
• 內聯樣式

CSS 背景

CSS 背景屬性用於定義HTML元素的背景。

CSS 屬性定義背景效果:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

CSS Text文本格式

CSS 字體

CSS 連接

連接樣式

連接的樣式，能夠用任何CSS屬性（如顏色，字體，背景等）。

特別的連接，能夠有不一樣的樣式，這取決於他們是什麼狀態。

這四個連接狀態是：

• a:link - 正常，未訪問過的連接
• a:visited - 用戶已訪問過的連接
• a:hover - 當用戶鼠標放在連接上時
• a:active - 連接被點擊的那一刻

實例

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

全部的CSS列表屬性

屬性	描述
list-style	簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中
list-style-image	將圖象設置爲列表項標誌。
list-style-position	設置列表中列表項標誌的位置。
list-style-type	設置列表項標誌的類型。

 

 

CSS 盒子模型

---

CSS 盒子模型(Box Model)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。

下面的圖片說明了盒子模型(Box Model)：

不一樣部分的說明：

• Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
• Border(邊框) - 圍繞在內邊距和內容外的邊框。
• Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
• Content(內容) - 盒子的內容，顯示文本和圖像。

爲了在全部瀏覽器中的元素的寬度和高度設置正確的話，你須要知道的盒模型是如何工做的。

 

CSS 組合選擇符

---

CSS 組合選擇符

	組合選擇符說明了兩個選擇器直接的關係。

CSS組合選擇符包括各類簡單選擇符的組合方式。

在 CSS3 中包含了四種組合方式:

• 後代選取器(以空格分隔)
• 子元素選擇器(以大於號分隔）
• 相鄰兄弟選擇器（以加號分隔）
• 普通兄弟選擇器（以破折號分隔）