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