第一章：css和文檔

• 替換元素/非替換元素
  • 替換內(nèi)容
  • 例如input、img，本身沒有意義，標(biāo)簽內(nèi)容指向一個(gè)外部?jī)?nèi)容
  • 非替換內(nèi)容
    • 大部分的元素 div、p、span
• 塊級(jí)元素/行內(nèi)元素
  • 塊級(jí)元素
    • 會(huì)生成一個(gè)元素框，填充父元素內(nèi)容區(qū)域，旁邊不能有其他元素
    • 常見p div
    • 特殊塊級(jí) 列表，前面會(huì)有標(biāo)記符
  • 行內(nèi)元素
    • 會(huì)在文本行內(nèi)生成元素框，
    • 不會(huì)生成分割。破壞顯示
  • 行內(nèi)元素可以繼承塊級(jí)，反之不行（實(shí)際可以，可能瀏覽器變高級(jí)了。。）
• 選擇器
  • 空格分割和>分割的區(qū)別
    • >一定為子元素
  • +選擇兄弟元素
    • 必須是相鄰的，且為下一個(gè)
  • 偽類選擇器
    • a:visited :hover
      • a(錨元素)會(huì)創(chuàng)建一個(gè)頁(yè)面到另一個(gè)頁(yè)面的鏈接，瀏覽器會(huì)比較歷史紀(jì)錄和創(chuàng)建的鏈接，例如:visited清除瀏覽器訪問記錄后會(huì)被清除。
  • 鏈接偽類
    • 鏈接偽類應(yīng)用于錨元素a，:link
      • :link 可用于body，表示body里面有l(wèi)ink的元素的樣式，例如a
  • 動(dòng)態(tài)偽類
    • 根據(jù)用戶行為來(lái)改變文檔外觀:focus:hover:active
  • 元素選擇child、lang before after
    • lang是根據(jù)元素里面的lang來(lái)選擇樣式，而不是根據(jù)文字語(yǔ)言

第二章 ： 結(jié)構(gòu)層疊

• 特殊性

  • 樣式匹配到多個(gè)，特殊性最高的規(guī)則勝出

    
    
    css權(quán)威指南
• 重要性
  • !important
• 繼承
  • 樣式會(huì)應(yīng)用到子元素中
  • 邊框不能繼承
  • 繼承的值沒有特殊性
  • table的繼承bug
    • 字體大小比繼承的字體要小

• 層疊規(guī)則

  
  
  權(quán)威指南

值和單位

• web安全顏色
  • 指在256色計(jì)算機(jī)系統(tǒng)總能避免抖動(dòng)的顏色
    • RGB 20% 和 51的倍數(shù)（對(duì)應(yīng)十六進(jìn)制33的倍數(shù)）包括0% 0
    • 十六進(jìn)制記分
      • 00、33、66、99、CC、FF
• 長(zhǎng)度單位
  • 絕對(duì)長(zhǎng)度
    • 厘米、英尺、毫米、點(diǎn)（72分之1英尺）、派卡（12點(diǎn)）
  • 相對(duì)長(zhǎng)度
    • px像素
      • 瀏覽器一個(gè)像素點(diǎn)
    • em和ex
      • em相對(duì)于字體大小，元素字體大小14px，1em=14px，根據(jù)元素不同而不同，使用em設(shè)置字體大小會(huì)根據(jù)父元素的字體變化
      • ex小寫字體x的大小，不同字體也會(huì)有影響，約等于0.5em

字體

文本屬性

• 文本縮進(jìn)
  • text-indent 可用百分比

tag

• 瀏覽器加載css，會(huì)進(jìn)行合并
• rel=alternate + title來(lái)設(shè)置候選樣式表
• 較老瀏覽器不支持@import，可以用來(lái)css hack
• 非互斥偽類可以一起使用