Cascading Style Sheets(CSS)是一門指定文檔該如何呈現(xiàn)給用戶的語言。
文檔是信息的集合，他使用一門標(biāo)記語言作為結(jié)構(gòu)。
將一篇文檔 呈現(xiàn) 給用戶是指將文檔轉(zhuǎn)化成你的聽眾能夠使用的一種形式。
為用戶 展現(xiàn) 文檔意味著將其轉(zhuǎn)換成一個(gè)可讀性良好的格式。
創(chuàng)建一個(gè)文檔#####
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
在你的瀏覽器中開啟一個(gè)新的標(biāo)簽頁或窗口，打開文件。你會(huì)看到一串開頭字母大寫的文本，像這樣：
Cascading Style Sheets
為何使用CSS#####
CSS幫助您將文檔信息的內(nèi)容 和如何展現(xiàn)它的細(xì)節(jié)相分離。眾所周知，如何展現(xiàn)文檔的細(xì)節(jié)即為樣式(style)。您可以將樣式從它的內(nèi)容分離出來，以便您能夠：
- 避免重復(fù)
- 更容易維護(hù)
- 為不同的目的，使用不同的樣式而內(nèi)容相同
總之，在HTML中，您使用標(biāo)記語言來描述文檔的內(nèi)容而不是它的樣式。您可以使用CSS來指定它的樣式而不是它的內(nèi)容。 (在本教程后續(xù)內(nèi)容中，您會(huì)看到此種的例外情況。)
更多的細(xì)節(jié)
像HTML之類的標(biāo)記語言也會(huì)提供指定樣式的方法。
例如，在HTML中，您可以使用<b>標(biāo)簽來加粗文字，同時(shí)，您也可以在頁面的<body>標(biāo)記中指定背景顏色。
當(dāng)您使用CSS時(shí)，您通常要避免使用標(biāo)記語言的這些特性，以便您所有的文檔樣式信息保存在同一地方。```
#####創(chuàng)建樣式表#####
在與前面相同的目錄中，新建另一個(gè)文本文件。該文件將成為您的樣式表。請將它命名為：style1.css
在您的CSS文件中，復(fù)制、粘貼下面的行，并保存該文件:
```strong {color: red;}```
######連接您的文檔和樣式表######
為將您的文檔和樣式表相連，請編輯您的HTML文件。并添加下面高亮的行：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
保存該文件并刷新您的瀏覽器。該樣式表將首字母顯示為紅色，如下所示：
#####CSS如何工作#####
現(xiàn)代瀏覽器在展現(xiàn)一個(gè)文檔的時(shí)候，必須把文檔內(nèi)容和相應(yīng)的樣式信息結(jié)合起來展示。這個(gè)處理過程一般分兩個(gè)階段：
1. 瀏覽器先將標(biāo)記語言和CSS轉(zhuǎn)換成DOM(文檔對象模型)。這時(shí)DOM就代 表了電腦內(nèi)存中的相應(yīng)的文檔文件，因?yàn)樗呀?jīng)融合了文檔內(nèi)容和相應(yīng)的樣式表。
2. 最后瀏覽器把 DOM的內(nèi)容展示出來。
標(biāo)記語言通過使用“元素”來定義文檔結(jié)構(gòu)。你需要使用一些以'<'開頭和以'>'結(jié)尾的字符串，俗稱*tags，*來構(gòu)成元素。這些元素一般是在'< >
'里加上元素名來作為起始tag，在'< >
'里加上'/'和元素名的組合來構(gòu)成結(jié)束tag。標(biāo)記語言中規(guī)定，一些元素可以只有一個(gè)起始tag，或者構(gòu)成元素的tag只有一個(gè)，但是這個(gè)tag里的名稱后面必須要加個(gè)'/'。
元素也可以作為容器而存在，這樣可以把其他元素放到這個(gè)元素的起始tag和結(jié)束tag之間。
DOM是一種樹形結(jié)構(gòu)。 每個(gè)元素和非空文本都可以看做是樹形結(jié)構(gòu)上的一個(gè)結(jié)點(diǎn)。DOM結(jié)點(diǎn)不再是容器，但是，它可以作為子結(jié)點(diǎn)的父類結(jié)點(diǎn)而存在。
示例(在示例代碼中， 我們使用 ```<p>```標(biāo)簽和它的結(jié)束標(biāo)簽 ```</p>```構(gòu)造了一個(gè)容器)：
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
在這個(gè) DOM中， P 結(jié)點(diǎn)是一個(gè)父結(jié)點(diǎn)，它的子結(jié)點(diǎn)包含了一些STRONG結(jié)點(diǎn)和文本結(jié)點(diǎn)。同時(shí)，STRONG結(jié)點(diǎn)各自也是父結(jié)點(diǎn)，它們也分別包含了一些文本結(jié)點(diǎn)作為子結(jié)點(diǎn)。
P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"
理解 DOM 結(jié)構(gòu)可以幫助你更好的去設(shè)計(jì)、調(diào)試、維護(hù)CSS，因?yàn)?DOM 結(jié)構(gòu)就是你的CSS和文檔內(nèi)容融合而成的。
#####分析DOM結(jié)構(gòu)#####
...
#####層疊與繼承#####