CSS 是什么撼嗓？
設想這樣一個場景柬采，我們要用 Word 寫一篇文檔。首先且警，打開 Word粉捻，然后輸入內(nèi)容，再根據(jù)需要把內(nèi)容的題目居中斑芜、字體變大肩刃，最后還會調(diào)整各段的字體、大小杏头、顏色盈包、行間距等。修改完成后醇王，我們會把這篇文檔保存成為一個后綴名為 doc 或 docx 的文件续语。這個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 等文件樣式的計算機語言。CSS 不僅可以靜態(tài)地修飾網(wǎng)頁淳地，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進行格式化怖糊。
CSS 基本語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明颇象。
selector {declaration1; declaration2; ... declarationN; }
選擇器通常是需要改變樣式的 HTML 元素伍伤。每條聲明由一個屬性和一個值組成，屬性是希望設置的樣式屬性遣钳，每個屬性都有一個與之對應的值且屬性和值之間被冒號分隔扰魂。
selector {property: value;}
下面這行代碼的作用是將 h1 元素內(nèi)的文字顏色定義為藍色，同時將字體大小設置為 12 像素蕴茴。
在這個例子中劝评，h1 是選擇器，color 和 font-size 是屬性倦淀，blue 和 12px 是值蒋畜。
h1 {color:blue; font-size:12px;}
下圖展示了上面這段代碼的結(jié)構(gòu)：
CSS 使用方法
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化撞叽。樣式表的使用方法有三種：外部樣式表姻成，內(nèi)部樣式表和內(nèi)聯(lián)樣式表插龄。
- 外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇佣渴。使用外部樣式表辫狼，可以僅通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 內(nèi)部樣式表
當單個文件需要特別樣式時辛润，可以使用內(nèi)部樣式表膨处。在 <head> 中通過 <style> 標簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {
background-color: #FF0000;
}
p {
margin-left: 20px;
}
</style>
</head>
- 內(nèi)聯(lián)樣式表
當特殊的樣式需要應用到個別元素時砂竖，可以使用內(nèi)聯(lián)樣式表真椿。 使用內(nèi)聯(lián)樣式表的方法是在相關(guān)的標簽中使用樣式屬性，樣式屬性可以包含任何 CSS 屬性乎澄，以下實例為如何改變段落的顏色和左外邊距突硝。
<p style="color: red; margin-left: 20px;">
This is a paragraph.
</p>
介紹過以上三種樣式表后，可能有人會提出這樣的問題：若同一個 HTML 元素被不止一個樣式定義時置济，會優(yōu)先使用哪個樣式呢解恰？
一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中浙于，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)护盈。
- 瀏覽器缺省設置
- 外部樣式表
- 內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
- 內(nèi)聯(lián)樣式表（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式表（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)羞酗，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明腐宋，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）檀轨。
