我們已經知道了css是做什麼的以及怎麼寫簡單的樣式這樣基礎的css，
接下來我將了解到瀏覽器如何獲取css、html和將他們載入成網頁。
前置知識:
基礎計算機知識、基本軟體安裝、簡單檔案知識、html基礎
目標:理解瀏覽器如何載入css和html、瀏覽器遇到無法解析的css會發生什麼
當瀏覽器展示乙個檔案的時候，它必須兼顧檔案的內容和檔案的樣式資訊，下面我們會了解到它處理檔案的標準的流程。
需要知道的是，下面的步驟是瀏覽載入網頁的簡化版本，而且不同的瀏覽器在處理檔案的時候會有不同的方式，
但是下面的步驟基本都會出現。
瀏覽器載入html檔案（比如從網路上獲取）。
將html檔案轉化成乙個dom（document object model），dom是檔案在計算機記憶體中的表現形式，下一節將更加詳細的解釋dom。
瀏覽器拉取到css之後會進行解析，根據選擇器的不同型別（比如element、class、id等等）把他們分到不同的「桶」中。瀏覽器基於它找到的不同的選擇器，將不同的規則（基於選擇器的規則，如元素選擇器、類選擇器、id選擇器等）應用在對應的dom的節點中，並新增節點依賴的樣式（這個中間步驟稱為渲染樹）。
上述的規則應用於渲染樹之後，渲染樹會依照應該出現的結構進行布局。
網頁展示在螢幕上（這一步被稱為著色）。
結合下面的圖示更形象：
乙個dom有乙個樹形結構，標記語言中的每乙個元素、屬性以及每一段文字都對應著結構樹中的乙個節點（node/dom或dom node）。
節點由節點本身和其他dom節點的關係定義，有些節點有父節點，有些節點有兄弟節點（同級節點）。
對於dom的理解會很大程度上幫助你設計、除錯和維護你的css，因為dom是你的css樣式和檔案內容的結合。
當你使用瀏覽器f12除錯的時候你需要操作dom以檢視使用了哪些規則。
不同於很長且枯燥的案例，這裡我們通過乙個html片段來了解html怎麼轉化成dom
以下列html**為例：
<在這個dom中，p>
let's use:
<
span
>cascading
span
>
<
span
>style
span
>
<
span
>sheets
span
>
p>
它的子節點是乙個text節點和三個對應了元素的節點，
span節點同時也是他們中的text節點的父節點。
p
├─ "let's use:"
├─ span
| └─ "cascading"
├─ span
| └─ "style"
└─ span
└─ "sheets"
接下來讓我們看看新增一些css到檔案裡加以渲染，同樣的html**：
<以下為css**：p>
let's use:
<
span
>cascading
span
>
<
span
>style
span
>
<
span
>sheets
span
>
p>
span瀏覽器會解析html並創造乙個dom，然後解析css。
可以看到唯一的選擇器就是span元素選擇器，瀏覽器處理規則會非常快！把同樣的規則直接使用在三個標籤上，然後渲染出影象到螢幕。
現在的顯示如下：
在我們下乙個模組的 debugging css 文章中我們將會使用f12除錯css的問題並且更進一步的了解瀏覽器如何解析css。
在之前的文章中我們提到了瀏覽器並不會同時實現所有的新css，此外很多人也不會使用最新版本的瀏覽器。
鑑於css一直不斷的開發，因此領先於瀏覽器可以識別的範圍，那麼你也許會好奇當瀏覽器遇到無法解析的css選擇器或宣告的時候會發生什麼呢？
答案就是瀏覽器什麼也不會做，繼續解析下乙個css樣式！
如果乙個瀏覽器在解析你所書寫的css規則的過程中遇到了無法理解的屬性或者值，它會忽略這些並繼續解析下面的css宣告。
在你書寫了錯誤的css**（或者誤拼寫），又或者當瀏覽器遇到對於它來說很新的還沒有支援的css**的時候上述的情況同樣會發生（直接忽略）。
相似的，當瀏覽器遇到無法解析的選擇器的時候，他會直接忽略整個選擇器規則，然後解析下乙個css選擇器。
在下面的案例中，我使用會導致屬性錯誤的英式拼寫來書寫"color"，所以我的段落沒有被渲染成藍色，而其他的css**會正常執行，只有錯誤的部分會被忽略。
<這樣做好處多多，代表著你使用最新的css優化的過程中瀏覽器遇到無法解析的規則也不會報錯。p> i want this text to be large, bold and blue.
p>
p
當你為乙個元素指定多個css樣式的時候，瀏覽器會載入樣式表中的最後的css**進行渲染（樣式表，優先順序等請讀者自行了解），
也正因為如此，你可以為同乙個元素指定多個css樣式來解決有些瀏覽器不相容新特性的問題（比如指定兩個width）。
這一特點在你想使用乙個很新的css特性但是不是所有瀏覽器都支援的時候（瀏覽器相容）非常有用，
舉例來說，一些老的瀏覽器不接收calc()(calculate的縮寫，css3新增，為元素指定動態寬度、長度等，注意此處的動態是計算之後得乙個值)作為乙個值。
我可能使用它結合畫素為乙個元素設定了動態寬度（如下），老式的瀏覽器由於無法解析忽略這一行；
新式的瀏覽器則會把這一行解析成畫素值，並且覆蓋第一行指定的寬度。
.box後面的課程我們會討論更多關於瀏覽器相容的問題。
恭喜你完成本模組，下面的文章你將會使用你的新知識來完成覆蓋樣式的案例，在這個過程中測試一些css樣式。
C 中 include的工作原理
大多數人可能對 include 比較熟悉，因為我們寫c c 程式的時候都會寫的字串之一，但是它是具體怎麼工作的？或者它的原理是什麼呢？可能不太熟悉，也有可能沒有去關心過。我們只關心程式能否正確執行，或者程式怎麼實現等等一些問題。這裡筆者就為介紹下我們熟悉又不太熟悉的 include 首先我們了解下c...
簡述hdfs工作原理 HDFS的工作原理
hdfs 的工作原理 hadoop 分布式檔案系統 hdfs 是一種被設計成適合執行在通用硬體上的分布式檔案系統。hdfs 是乙個高度容錯性的系統，適合部署在廉價的 機器上。它能提供高吞吐量的資料訪問，非常適合大規模資料集上的應用。要理解 hdfs 的內部工作原理，首先要理解什麼是分布式 檔案系統。...
mysql nfs原理 nfs工作原理
nfs其最大功能時可以通過網路讓不同作業系統的計算機可以共享資料，所以也可以將其看作時一台檔案伺服器.nfs有屬於自己的協議與使用的埠號，但是在傳送資料或者其他相關資訊時候，nfs伺服器使用乙個稱i 遠端過程呼叫 rpc 的協議來協助nfs伺服器本身的執行 nfs協議 使用nfs，客戶端可以透明地訪...