CSS权威指南读书笔记

《CSS权威指南》读书笔记总结分享！下图主要梳理了本书中的前六个章节，分别是CSS和文档、选择器、结构和层叠、值和单位、字体、文本属性。不论你是懵懂的初学者还是老道的Web开发人员，《CSS权威指南》都是你的CSS学习源泉。

CSS权威指南

• 第一章：CSS和文档
  • 元素：是文档结构的基础。P,SPAN,A DIV等都是元素
    • 可替换元素:如img等
    • 不可替换元素
    • 块级元素：block-level
    • 行内元素：inline-level
  • CSS属性：display的主要值
    • block:
    • inline（默认）
    • list-item
  • link标记：
    • 利用link外接外部样式表
      • rel:关系,一般为stylesheet
      • type:text/css
      • herf:url
      • media:all
    • 一个文件可以多个link标记。
  • style元素
  • @import指令
    • 与link类似，加载外部样式表
    • 可以在URL之后加入样式的媒体：@import url(ss.css) all;
    • @import 只能存在于样式表的开头
  • css的注释： /* 注释　*/
• 第二章：选择器
  • 每个CSS规则
    • h1{color:red;background:#000;}
    • h1：就是选择器
    • {}中间的就是声明块
      • color:red 就是声明，声明块可以多个声明
      • color为属性
      • reg为值
    • 如果一个属性可以多个值p{ font:medium helvetica;}
  • 分组
    • 选择器分组：h2,p{color:#000}
    • 通配选择器：*{color:#fff;}
    • 结合选择器和声明的分组
  • 类选择器和ID选择器
    • 类选择器：
      • p.warning{font-weight:bold}
      • 多类选择器：p.warning.hel{font-weight:bold}
    • ID选择器：
      • #para {font-weight:bold}
      • 使用ID有什么不同？
        • 唯一
    • 属性选择器：
      • 简单属性选择器：h1[class]{font-size:12px;}
      • 根据具体属性值选择：a[href="www.css.com"]{font-weight:bold;}
      • 根据部分属性值选择：
        • [foo^="bar"]表示一bar开头的所有元素
        • [foo$="bar"]表示一bar结尾的所有元素
        • [foo^="bar"]表示包含有bar的所有元素
      • 特定属性的选择类型：img[src|="mm"]{border:1px solid gray;}
  • 父子关系
    • 后代选择器
      • h1 em{color:#333;} 作为h1元素后代任何em元素
      • 两个元素之间的层次间隔可以是无限的
    • 选择子元素
      • h1>em{color:#333;}
      • p>a>strong的父子结构，写成p>strong是不行的
    • 选择相邻的兄弟元素
      • h1+p{color:#333;}
  • 伪类和伪元素
    • 伪类选择器
      • 连接伪类
        • :link
        • :visited
      • 动态伪类
        • :focus
        • :hover
        • :active
      • 伪类顺序
        • 1:link
        • 2:visited
        • 3:hover
        • 4:active
      • 第一个子元素
        • first-child
      • 根据语言选择
        • :lang(cn){color:#333;}
      • 综合伪类
        • a:link:hover{color:red;}
    • 伪元素选择器
      • 设置首字母样式
        • p:first-letter{color:red;}
      • 设置第一行的样式
        • p:first-line{color:red;}
      • :first-letter 和:first-line的限制
        • 不能应用于超链接行内元素
        • 所有的伪元素都必须放在该伪元素的最后面。p:first-line em{}不合法
      • :before和:after
        • body:after{content:"The End."}
• 第三章：结构和层叠
  • 特殊性
    • 如果选择器多个属性发生冲突，最高特殊性的声明才会胜出
    • 选择器值的表述分为4个部分，如0,0,0,0
      • 对于选择器中给定的各个ID属性值：0,1,0,0
      • 对于选择器给定各个类属性值,属性选择为伪类：0,0,1,0
      • 对于选择器中给定的各个元素和伪元素0,0,0,1
    • 声明特殊性
    • 通配选择器特殊性：选择器中包括通配选择器和其他选择器，该选择器的特殊性不会因为通配选择器的出现而改变。
    • ID和属性选择器的特殊性:html>body table tr[id="totls"] td ul>li{color:#333;} (0,0,1,7)li#answer{color:#444}(0,1,0,1)
    • 内联样式特殊性：内联样式特殊性最高（1,0,0,0）。测试
  • 重要性
    • !important标志
    • 标志总是放在声明最后，分号之前，否则无效。
  • 继承
    • 样式不仅会应用到指定元素，还会应用到它的后代元素。
    • 有些属性不能继承
      • border
  • 层叠
    • 按权重和来源排序
      • 两个规则应用到同一元素，有!important标志胜出
    • 按特殊性排序
      • p#ii{color:red:}大于p{color:#333;}
    • 按顺序排序
      • 如果权重、特殊性、来源都一致，最后只能排在文件后面的获胜
• 第七章：基本视觉格式化
• 第四章：值和单位
  • 数字
    • 整数
    • 实数
  • 百分比
  • 颜色
    • 命名颜色：gray、black等
    • RGB颜色：
      • 十六进RGB颜色 color:#EF0000;
      • 函数式RGB颜色rgb(100%,100%,100%)=rgb(255,255,255)
  • 长度单位
    • 绝对长度单位
      • in英尺
      • cm厘米
      • mm毫米
      • pt点
      • pc 派卡
    • 相对长度单位
      • em和ex单位
      • 像素长度px
    • 如何取舍
      • 最好的度量可能是em,也可以是PX
  • URL
    • 相对路径
    • 绝对路径
  • 关键字：有时一些值需要用关键词来描述
  • CSS2单位
    • 角度值
      • 度：deg
      • 梯度：grad
      • 弧度：rad
    • 时间值
      • 毫秒 ms
      • 秒 s
    • 频率值
• 第五章：字体
  • 指定字体：font-family:
  • 字体加粗：font-weight：bold
  • 字体大小：font-size
    • 绝对大小：
    • 相对大小：
    • 百分比和大小
      • p{font-size:12px}
      • em{font-size:120%;}
  • 字体风格:font-style
    • 斜体：italic
    • 倾斜：obliqique
  • 字体变形：font-variant
    • small-caps:小型大写
  • font属性，一种缩写方式。
  • 行高：line-height:
• 第六章：文本属性
  • 缩进和水平对齐
    • text-indent:3em;段落首行缩进3em
    • text-align水平对齐
  • 垂直对齐
    • 行高：line-height
    • 行高和继承
    • 垂直对齐文本：vertical-align
      • 基线对齐：baseline
      • 上标：super 下标：sub
      • 底端对齐：bottom
      • 居中对齐：middle
      • 百分比：vertical-align:50%;
      • 长度对齐：vertical-align：5px;
  • 字间隔和字母间隔
    • word-spacing:3px;
    • letter-spacing:3px;
  • 文本转换：text-transform
    • uppercase:全大写
    • lowercase:全小写
    • capitalize:每个单词首字大写
  • 文本装饰：text-decoration
    • underline 下划线
    • line-through 中间贯穿线
    • blink会闪烁文本
    • none会关闭所有的装饰
  • 文本阴影text-shadow:green 5px 0.5em;
  • 处理空白符：white-space
    • 特殊用法：nowrap 禁止文本换行