2025/3/28?
向全棧工程師邁進！
一、CSS的作用
簡單一句話——美化網頁
<p>Let's use:<span>Cascading</span><span>Style</span><span>Sheets</span>
</p>?對于如上代碼來說，其顯示效果如下：
當加上CSS樣式之后如下所示：（這里不需要明白CSS怎么寫，怎么運作，只需要明白加了CSS后，網頁會變的好看）
二、CSS究竟如何工作
當瀏覽器展示一個文件的時候，它必須兼顧文件的內容（HTML）和文件的樣式信息（CSS），下面我們會了解到它處理文件的標準的流程。需要知道的是，下面的步驟是瀏覽加載網頁的簡化版本，而且不同的瀏覽器在處理文件的時候會有不同的方式，但是下面的步驟基本都會出現。
2.1 載入 HTML 文件
瀏覽器會首先載入HTML文件（比如向服務器訪問，網絡獲取等）
2.2 構建HTML對應的DOM樹
<!DOCTYPE html>
<html>
<head><title>示例頁面</title>
</head>
<body><h1>歡迎來到我的網站</h1><p>這是一個示例段落。</p>
</body>
</html>其對應的DOM樹如下：Document||---<html>---|| |---<head>---|| |---<title>||---<body>---||---<h1>|---<p>所以首先，會將html文件構建成一個DOM樹，然后根據樹結構的每個節點依次的添加CSS樣式。以下是上面的一個案例：
<p>Let's use:<span>Cascading</span><span>Style</span><span>Sheets</span>
</p>
在這個 DOM 中，<p>元素對應了父節點，它的子節點是一個 text 節點和三個對應了<span>元素的節點，<SPAN>節點同時也是他們中的 Text 節點的父節點。
P
├─ "Let's use:"
├─ SPAN
| └─ "Cascading"
├─ SPAN
| └─ "Style"
└─ SPAN└─ "Sheets"上圖就是瀏覽器怎么解析之前那個 HTML 片段——它生成上圖的 DOM 樹形結構，然后解析 CSS，其CSS如下：
span {border: 1px solid black;background-color: lime;
}可以看到唯一的選擇器就是span元素選擇器，瀏覽器會非常快速的把同樣的規則直接使用在三個<span>標簽上，然后渲染出圖像到屏幕。
三、如果CSS編寫出錯，會怎么樣？?
其實現在瀏覽器并不會實現所有新的CSS樣式，使用新CSS樣式開發了一個炫酷網頁，然后是一個版本特別老的瀏覽器訪問的話，其CSS樣式是會顯示不出來的，當瀏覽器遇到無法解析的 CSS 選擇器或聲明的時候會發生什么呢？答案就是瀏覽器什么也不會做，繼續解析下一個 CSS 樣式！即直接忽略。
相似的，當瀏覽器遇到無法解析的選擇器的時候，他會直接忽略整個選擇器規則，然后解析下一個 CSS 選擇器。
四、何為選擇器？
如下圖中的 span 就是一個選擇器，他是用來告訴瀏覽器HTML元素應當是被選為應用規則中的CSS屬性值的方式。
所以上述的span選擇器的作用就是選中html的span標簽，將span標簽的樣式按著如下設計。當然選擇器不止這一種方式，在后面我們會單獨的用一篇文章來講解CSS中的選擇器種類，以及其使用規則。這里以探究CSS如何工作為目的解析CSS。
Life is not a track, you can do whatever you want to do.
2025/3/28
?
