https://developer.mozilla.org/zh-TW/docs/Web/Guide/CSS/Getting_Started/How_CSS_works
沒有中文翻譯了
所以只好邊看邊到處去找參考資料了
大概以我的翻譯能力 和目前什麼都不懂的情況下去給自己說明
以瀏覽器來顯示文件內容(document)的時候,
文件是和樣式板一起顯示的, 這個文件就會分成兩種情況去執行.
1. 瀏覽器會改變標記式語言和CSS到DOM中.
DOM就表示文件在電腦中的記憶體內.
DOM便結合了文件內容以及其樣式.
2. 瀏覽器只顯示DOM內容.
標記式語言使用element來定義文件的結構.
使用者會標記這個element, 用的就是 tag,
這個 tag 字串開始為 '<' , 結束為 '>'.
許多的element都是成對的,
在結束的 tag 就會先加上 '/'來表示結尾.
<head> </head>
_ _ <---- tag
_ _ _ _ _ _ _ _ _ < ----- element
在DOM中會是一個類似 tree 的結構.
每個 element, attribute 和執行的 text 在 DOM 中都變成樹的節點,
最後變成一棵樹.
了解 DOM 是為了幫助設計者設計網頁,
除錯和維護使用的 css,
因為 css 和 DOM 兩兩相關.
從第一次和第二次的練習網頁中都有的程式碼
<p>
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
在 DOM 中 p 就如同是 parent.
而 chile 就 strong 和其 text.
P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"
the markup language 標記式語言
DOM (Document Object Model) 文件物件模型