css 和 文檔

• 層疊： css中解決樣式沖突的規則，稱為層疊
• 元素：

      替換、非替換元素
      替換元素： 用來替換元素的內容部分，并非由文檔內容直接表示。<img src='xxx'> 標記片段中不包含任何具體內容，只有一個屬性
      非替換元素：大多數元素都是非替換元素。
     元素顯示角色：
     塊級(block-level)，行內(inline-level)
     display: none, inline, block, inline-block, list-item, run-in
  

• css and html:
  1. link 標記： <link rel='stylesheet' type='text/css' href='sheet1.css' media='all' />
  2. media 屬性： all, aural(語音合成器), braille, print, screen, tty, tv <link rel='stylesheet' type='text/css' href='sheet1.css' media='screen, tv'/> 在tv， 屏幕設備上使用共同的css樣式。
  3. style元素， <style type='text/css'> xxxxx </style>
  4. @import 指令： @import url(style.css) screen, tv; @import 必須寫在樣式表中，2.， 必須寫在文檔開頭，，出現在樣式表中其他規則的前面.

選擇器

• 規則結構： 選擇器 + 聲明塊 h1(選擇器) {color: red; background: yellow}(聲明塊)
• 聲明和關鍵字： 格式：屬性： 關鍵字\數值;關鍵字在多個的情況下，由空格分隔
• 選擇器：
  1. 元素： html { color: red}
  2. 選擇器分組： 使用，分隔 選擇器 h1, p {color: grey}
  3. 通配選擇器: * {color: red;}
  4. 類選擇器: p.warning 多類選擇器， class='urgent warning' 選擇器如下: .urgent.warning
  5. ID選擇器: #ID
  6. 屬性選擇器:
     1.簡單屬性選擇器： <h1 class='people'> hello </h1> , h1[class] {color: red;} img[alt] {border: 1px solid red;}， 可以多個屬性同時選擇： a[href][title] {color: red; font-weight: bold;}
     2. 屬性值選擇器： planet[name="1" {color: red;}]
     3. 部分屬性值選擇：主要應用在class上，因為class可能為多個， 不能直接p[class='name'] 當p以后有多個class時候，而是需要p[class~='name']
     4. 特定屬性選擇器： *[lang!="en"] {color: "white";}
  7. 使用文檔結構：
     1. 后代選擇器： h1 em {color: gray;}
     2. 子元素選擇器： h1 > em {color: gray;}
  8. 偽類和偽元素：（可以為文檔中不一定具體存在的結構制定樣式， 會根據某種條件來應用部分樣式）
     1, 偽類： a 特有的 :link, :visited, 其他的都存在的 :focus, :hover, :active, 其中a 的樣式聲明順序為 :linkm, :visited, :hover, :active
     2. 偽元素選擇器(動態的給html改變內容，樣式，可以修改文檔本身)： first-letter, :first-line, :before, :after,例如：h2:before{}content: '||'}

結構和層疊

> 繼承是　從一個元素向其后代元素傳遞屬性所采用的機制，樣式沖突的解決機制：通過考慮聲明的特殊性，聲明來源，特殊性，這個決策過程就稱為層疊(cascade)

• 特殊性：

  1. 對于選擇器中所給定的各個ＩＤ屬性：0, 1, 0, 0
  2. 對于選擇器中的各個類屬性值　屬性選擇、偽類: 0, 0, 1, 0
  3. 選擇器中各個元素和偽元素：0, 0, 0, 1
  4. 通配符選擇器對特殊性沒有任何貢獻
  5. 內聯樣式的特殊性: 1, 0, 0, 0

  id 與　p[id='id'] 中，第一個貢獻的為：0, 1, 0, 0第二個貢獻為 0, 0, 1, 0

• 重要性: !important p.dark {color: red !important; background: white !important}
  !important　沒有特殊性，不過要與其他的分開考慮，所有!important的會分組在一起考慮，其中的沖突在內部解決。重要聲明與非沖要聲明相比，總是勝出。

• 繼承沒有特殊性，通配符大于繼承的特殊性。注意：不應該不加區別的使用通配符選擇器。

• 層疊規則：

  1. 找出所有規則，這些規則都包含與一個給定元素匹配的選擇器
  2. 按照權重對應用到該元素的所有聲明排序，標志!important的規則的權重高于沒有的，按來源進行對應用到元素的所有聲明排序，３中來源，　創作人員，讀者，用戶代理。排序為：　讀者的重要聲明，　２：創作人員的重要聲明，３：創作人員的正常聲明，　４：讀者的正常聲明，　５：用戶代理聲明
  3. 按特殊性對應用到給定元素的所有聲明排序，　有較高特殊性的元素權重大與較低權重的元素
  4. 按出現順序對應用到元素的所有聲明排序，一個聲明在樣式表或者文檔中越后出現，他的權重越大，如果樣式表中有導入的樣式表，一般認為出現在導入樣式表中的聲明在前，主樣式表中的所有樣式表聲明在后。（沒有比較　多個導入樣式表中的樣式權重）

值和單位：

em ex為相對單位長度，　em定義為　一種給定字體的font-size的值，如果一個元素的font-size 為１４px，　那em為14px,　1ex = 0.5em

字體(先略過)

文本屬性

文本是內容，　而字體用于顯示內容

• text-indent: 數值： length, percentage, inherit，應用于： 塊，繼承： 有，百分數：相對于包含塊的寬度
• text-align: 數值: left, right, center, justify, inherit, 應用于：塊，繼承性：有
• line-height: 值：length, percentage, number, normal, inherit，初始值: normal, 應用于：所有元素，繼承性：有

基本視覺格式化：（書中的css 版本為 2.１　其中大量的規則已經不能使用了）

• 基本框：css假定每個元素都會生成一個或多個矩形框，這成為元素框。包含：內邊框, 邊框，外邊框，內容

• 包含塊：包含塊是一個元素的上下文

• 塊元素：

  1. 水平格式化：元素的寬度：指的是　左外邊界到右外邊界的距離，可見區域：width + 內邊距，規則：正常流中的塊級元素框的水平部分總和等于　父元素的width,
  2. 水平屬性：　margin-left, border-left, padding-left, width, padding-right, border-right, margin-right
  3. width,, margin-left, margin-right中的某個值設定為auto，其余兩個就會計算指定為特定值，使元素的框寬度等于副元素的width,　如果三個都設定為非auto，會產生過分受限，這時候從會把　margin-right強制為auto。margin-left, margin-right 設定為auto, 會將元素居中。border不能使用白分數
  4. 一個元素的默認的高度由其內容決定，　高度還會受內容寬度影響。　段落越窄，相應的高度就會越高。
     5.　垂直屬性：margin-top, border-top, padding-top, height, padding-bottom, border-bottom, margin-bottom, 屬性值　之和必須等于　包含塊的height, 如果一個正常流中的一個塊元素的margin-top, margin-bottom設置為auto,他會自動計算為０，并不會讓塊垂直居中
  5. auto 如果height 為auto，　其高度正好為包含內容的高度，
  6. 合并垂直外邊框：這種合并行為只應用于外邊距，如果元素有內邊距和邊框，他們絕對不會合并。

• 行內元素－－行內布局：

  1. 基本概念：　匿名文本，em框,　內容區，行間距((font-size - line-height) / 2)，行內框（非替換元素，行內框的高度等于line-height，　替換元素，行內框高度等于內容區的高度　替換元素沒有行間距）
  2. 規則：
     1. 內容區類似于一個塊級元素的內容框
     2. 行內元素的背景應用于內容區　以及所有　內邊距
     3. 行內元素的邊框要包圍內容區　及所有　內邊距和邊框
     4. 非替換元素的內邊距，邊框和外邊距對汗內元素或者其生成的框沒有垂直效果，也就是說，　他們呢不會影響元素行內框的高度
     5. 替換元素的外邊距和邊框　會影響該元素行內框的高度，相應的影響該元素行框的高度

• 行內　非替換元素：

  1. font-size：定義內容（字體）高度，　line-height: 定義框高度，　(line-height - font-size) / 2 為行間距，　line-height 可以小于font-size導致行內框小于內容區，行間距為負數，造成行間重疊。
  2. 行框定義為　行中最高行內框的頂端到最低行內框低端之間的距離，為了避免行間重疊。
  3. vertical-align: top, bottom, middle etc,　描述基準線的位置。
  4. line-height: 數值的話：為font-size的縮放比例。該屬性是可以繼承的，從而在不同的ｆｏｎｔ-size中存在不同的line-height,
     5.　內邊距，外邊距，邊框　可以應用到行內非替換元素，但是卻不會影響行框的高度，可能會造成重疊。實際上，外邊距不會應用到元素上，但是可以應用到兩側。可以將文本推離到兩側。

• 行內塊元素(inline-block)：

  1. 類似于　圖像放在行中

邊框：

• 基本元素框：
  1. 元素的width：左內邊　－－　右內邊，　height: 上內邊－－下內邊，　不能應用到行內非替換元素, width: 白分數想對于　包含塊的　width, 正常流中的元素很少設定height，height: 白分數相對于　包含塊的height。
  2. 背景顏色會延伸到內邊距中，而不會到外邊距。
  3. margin: 白分數相對于包含塊的width, margin 的左右，上下都是相對于包含塊width
  4. padding: 白分數相對于包含塊的width, padding 的左右，上下都是相對于包含塊width
  5. 值復制：　top right bottom left, top -> right, top -> bottom, right -> left。
  6. 邊框：border-style: top right bottom left; (none, hidden, dotted, dashed, solid double, grove, ridge, inset, outset, inherit) 注意在邊框指定為none 的時候，設定其他屬性是沒有作用的。可以設定單邊樣式：　border-top-style, border-right-style etc, border-width　同style類似（thin, medium, thick, length, inherit）, 單邊設定border-top-width, border-color 同style 一樣,單邊設定 border-top-color: 簡寫：border-top: thick solid gray;全局邊框: border: thick solid gray;

顏色和背景：（略過）

浮動和定位：

• 屬性：　float: left, right, none, inherit, 應用于：所有元素，
• 浮動會將元素從正常流中　刪除，浮動元素包含塊為　其最近的塊級祖先元素。只要是浮動元素，就會生成一個塊級框，回像塊及元素一樣表現和擺放。簡單規則：
  1. 浮動元素的左右外邊界不能超過其包含塊的　左右內邊界。
     　　　2. 浮動元素的頂端　不能比其父元素的內邊界更高
• 定位：　position: static, relative, absolute, fixed, inherit
• 對于一個非根元素，　如果其position為　relative, static包含塊設定為最近的塊級框、表單元格、行內塊祖先框的內容邊界構成
• 對于非根元素，如果其position 為absolute，包含塊設定為最近的position值不是static　的祖先元素，如果這個祖先是塊級元素，　包含塊設定為該元素的內邊距邊界。
• relative: 元素想對于之前元素偏移位置，它原本所占據的空間仍然保留。
• absolute: 從文檔流中完全刪除，并相對于包含塊定位。元素定位之后會生成一個塊級框。
• fixed: 表現類似與absolute，不過包含塊是視圖本身。
• relative, absolute, fixed, 描述偏移：　top, right, bottom, left, 用來描述　距離包含塊最近邊的偏移距離。width, height，　對于定位元素并不重要，因為可以通過四個屬性來隱形的確定。
• min-width, min-height, max-width, max-height　作用：　可以相對安全的混合使用不同的單位，　使用白分數的時候，可以設定長度限制。
• 內容溢出和可見性：　overflow: visible(超出邊框) | hidden(超出邊框的被剪裁) | scroll(html中添加滾輪展示) | auto | inherit, visibility: visible | hidden | collapse | inherit, visible　設定為展示內容，　hidden 隱藏內容，但是并不從文檔流中刪除，　區別于 display: none, 會從文檔中刪除，不占據位置，　所以 visibility　是可以繼承的，可以設定父元素hidden, 子元素為visible

- [還沒有介紹 collapse呢]

• 絕對定位：包含塊： 最近的position值不為 static 的元素。通常簡單的做法是， 選在一個元素作為絕對定位元素的包含塊，將其position設定為relative，并沒有偏移。元素絕對定位時候，還為其后代元素建立了一個包含塊。文檔可以滾動的話，絕對定位是隨著文檔滾動的，因為定位元素的包含塊是文檔流的一部分。外邊距為 auto可以得到垂直居中的 效果，
• 固定定位： 固定定位與絕對定位相似，只是包含塊是 視窗。
• 相對定位：

家:

海，天空，星辰，公主，王子，烤箱（蛋糕），狗，毛絨玩具