總網頁瀏覽量

2016年9月29日 星期四

[HTML] 學習 003 DOM和CSS

MDN 的第三個教學 - How CSS works

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) 文件物件模型

沒有留言:

張貼留言