CSS基本知識介紹

一 前言

目前在作IFE的練習，初步學習到CSS內容，因此作了總結。
本博文 主要分爲兩部分，第一部分介紹HTML的發展，第二部分則介紹了CSS基本概念

二 HTML的發展

2.1 語義化和結構化的重要性

S1 便於搜索引擎創建內容索引;
S2 便於開發和維護;
S3 便於盲人等特殊用戶使用

2.2 爲何要引入CSS

S1 隨着發展， 以前描述結構的HTML同時也須要描述外在表現了
  這就形成了 HTML的結構混亂，和代碼冗餘

S2 CSS提供了更多的 足夠豐富的樣式

S3 減小代碼冗餘，樣式分離後便於代碼維護

S4 能夠實如今多個頁面上覆用同一套基本樣式

S5 獨立了樣式內容，減小了HTML的文件大小

3、CSS基本概念術語

3.1 元素

S1 每一個HTML元素都會生成一個框box,其中包含元素內容

S2 元素分類
  A1 能夠分爲 替換元素/非替換元素
  A2 能夠分爲 塊級元素/行內元素
  塊級元素框默認會填充 父元素的所有內容區;
  在HTML/XHTML中，行內元素不能包含塊級元素，但在CSS中沒有這種限制 (P16)

3.2 引入CSS

S1 外部樣式表: HTML的 <link>元素
  A1 有一個media屬性，值能夠取 screen / print / all ....
  A2 一個樣式表同時用於多個媒體中: <link rel... media="screen, print">
   A3 候選樣式表 <link rel="alternate stylesheet" title="Big text">（P23）

S2 文檔樣式表: HTML的 <style>元素
  A1 @import指令也用於加載外部樣式表， 可是它必須是style的第一行內容，不然會被忽略;
  A2 和link的候選樣式表不一樣，每一個@import指令的樣式都會被加載使用;
  A3 也能夠經過媒體查詢，限制導入的外部樣式表 (P25)
  A4 通常經常使用在 一個外部樣式表中

S3 內聯樣式: HTML的 <xxx元素 style="xxx"屬性>

3.3 CSS實際是如何工做的

S1 CSS的結構是 CSS 語句 -> CSS規則 -> 選擇器+聲明語句塊 -> 每條聲明語句: 屬性和值

S2 處理過程是: 載入HTML -> 解析HTML -> 下載CSS -> 解析CSS -> 建立DOM樹 -> 內存表示

四 文檔類型、DOCTYPE切換和瀏覽器模式

4.1 文檔類型

S1 咱們知道，html和CSS有不一樣的版本，每一個版本的語法內容/有效規則各不相同;
S2 瀏覽器須要有一組規則，從而告訴它如何解析頁面的語法規則/內容，這就是DTD(文檔類型定義)

它用來明確使用的是哪一個版本的解析規則，從而正確處理頁面(有效性驗證)

S3 咱們經過DOCTYPE聲明,來告訴瀏覽器使用哪一個DTD

4.2 DOCTYPE切換

S1 根據DOCTYPE是否存在，瀏覽器選擇呈現模式（標準模式/兼容模式），稱做 DOCTYPE切換

5、參考文檔

  1 CSS權威指南;
  2 MDN的 CSS如何工做;
  3 MDN的 CSS基本語法;
  4 精通CSS;