什么是CSS

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>


保存該文件并刷新您的瀏覽器。該樣式表將首字母顯示為紅色,如下所示: 
![](http://upload-images.jianshu.io/upload_images/1717809-4ab22441ebfd9a5e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
#####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結構#####
...

#####層疊與繼承#####
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容