CSS 是什么？
設(shè)想這樣一個(gè)場景，我們要用 Word 寫一篇文檔。首先，打開 Word，然后輸入內(nèi)容，再根據(jù)需要把內(nèi)容的題目居中、字體變大，最后還會(huì)調(diào)整各段的字體、大小、顏色、行間距等。修改完成后，我們會(huì)把這篇文檔保存成為一個(gè)后綴名為 doc 或 docx 的文件。這個(gè)Word 文件可以說是由兩大部分組成的：內(nèi)容和樣式。同樣地，我們?yōu)g覽網(wǎng)頁所看到的 HTML 文件也是由內(nèi)容和樣式組成的。網(wǎng)頁上的文字和圖片是內(nèi)容，文字的字體、大小、顏色等都是樣式。CSS 就是控制網(wǎng)頁樣式的技術(shù)。
CSS 是 Cascading Style Sheets（層疊樣式表）的縮寫，是一種用來表現(xiàn) HTML 或 XML 等文件樣式的計(jì)算機(jī)語言。CSS 不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動(dòng)態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
CSS 基本語法
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN; }
選擇器通常是需要改變樣式的 HTML 元素。每條聲明由一個(gè)屬性和一個(gè)值組成，屬性是希望設(shè)置的樣式屬性，每個(gè)屬性都有一個(gè)與之對應(yīng)的值且屬性和值之間被冒號(hào)分隔。
selector {property: value;}
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為藍(lán)色，同時(shí)將字體大小設(shè)置為 12 像素。
在這個(gè)例子中，h1 是選擇器，color 和 font-size 是屬性，blue 和 12px 是值。
h1 {color:blue; font-size:12px;}
下圖展示了上面這段代碼的結(jié)構(gòu)：
CSS 使用方法
當(dāng)瀏覽器讀到一個(gè)樣式表，它就會(huì)按照這個(gè)樣式表來對文檔進(jìn)行格式化。樣式表的使用方法有三種：外部樣式表，內(nèi)部樣式表和內(nèi)聯(lián)樣式表。
- 外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，可以僅通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，可以使用內(nèi)部樣式表。在 <head> 中通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {
background-color: #FF0000;
}
p {
margin-left: 20px;
}
</style>
</head>
- 內(nèi)聯(lián)樣式表
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，可以使用內(nèi)聯(lián)樣式表。 使用內(nèi)聯(lián)樣式表的方法是在相關(guān)的標(biāo)簽中使用樣式屬性，樣式屬性可以包含任何 CSS 屬性，以下實(shí)例為如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px;">
This is a paragraph.
</p>
介紹過以上三種樣式表后，可能有人會(huì)提出這樣的問題：若同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)優(yōu)先使用哪個(gè)樣式呢？
一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
- 瀏覽器缺省設(shè)置
- 外部樣式表
- 內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）
- 內(nèi)聯(lián)樣式表（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式表（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
