层叠样式表 (Cascading Style Sheets)，常缩写为 CSS， 是一门 样式表 (stylesheet) 语言，用来描述 HTML、XML（包括各种 XML 语言如 SVG、XHTML）文档的呈现。CSS 描述了在屏幕、电子纸、音频或其它媒体上如何渲染元素。 CSS 是开放网络 open web 的核心语言之一，由 W3C 规范 进行标准化。CSS 分为不同等级，CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块，正在标准化中。

CSS 和文档

DOCTYPE

验证有效性，决定浏览器模式(标准模式和混杂模式)

元素

• 替换元素(img / input…)和非替换元素(span…)
• 元素类型 : 块级元素(p / div…)和行内元素(strong / em…) 行内元素可继承块级元素，反之不允许
• display none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column | table-column-group | table-cell | table-caption inherit

结合 CSS 和 HTML

• link

CSS 规则和注释，不能有标记。

link 必须放在 head 元素中，但不能放在其他元素内部。 rel 代表关系，默认只加载 rel=stylesheet 的样式表，rel=’alternate stylesheet’候选样式表。 title Default 默认。没有指定 title 将作为一个永久样式表。 type=text/css.href=URL media=all/screen/print/…逗号分隔。

• style 元素

• @import 指令

@import 在 style 容器中，放在其他 CSS 规则之前。多个 @import 每个样式表都会加载使用。

• 内联样式

• link 与 @import 区别 : 命令的具体语法和位置

选择器

选择器分组 声明分组

h2, p {...}
h2 {...}

基本选择器

• 元素选择器 elementname
• 类选择器 .classname
• ID 选择器 #idname
• 通配选择器 * ns|* *|*
• 属性选择器
  • [attr1][attr2]
  • [attr=value]
  • [attr~=value](~=表示根据属性值中出现的一个用空格分隔的词来完成选择)
  • ^= $= *= 开头 结尾 包含
• 组合选择器
• 相邻兄弟选择器 A + B
• 普通兄弟选择器 A ~ B
• 子元素选择器 A > B
• 后代选择器 A B

伪元素

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop
• ::placeholder
• ::marker
• ::spelling-error
• ::grammar-error

伪类

• :active
• :any
• :checked
• :default
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :focus
• :hover
• :indeterminate
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :valid
• :visited

结构和层叠

• 通用选择器（*）
• 元素(类型)选择器（type selectors）
• 类选择器
• 属性选择器
• 伪类
• ID 选择器
• 内联样式
• !important
• :not 伪类例外

特殊性、继承和层叠之间的关联

• 特殊性 : 内联 * (1,0,0,0) + id * (0,1,0,0) + 类/属性/伪类 * (0,0,1,0) + 元素和伪元素 * (0,0,0,1) + 结合/通配 * (0,0,0,0) !improtant

• 继承 : 大多数匡模型属性(内外边距、背景、边框)都不能继承。 继承的值无特殊性(0特殊性比无特殊性要强)。应避免不加区别的使用通配符选择器而优于继承的问题。

• 层叠 : 特殊性相等，越后权重越大。

读者 !important > 创作人员 !important > 创作人员普通样式 > 用户普通样式 > 用户代理声明

值和单位

• 数字 : 整数和实数
• 百分数 : xx%
• 颜色 : 命名颜色 / #xxx / rgb(xxx)
• 长度单位 : in/cm/mm/pt/pc / em/ex(小写 x 的高度) / px
• URL / URI : url(protocol://server/pathname)
• 关键字 : none / inherit(所有属性共有) / ..
• 角度值 : deg / grad / rad
• 时间值 : ms / s
• 频率值 : Hz / MHz

字体

• 通用字体系列 : Serif Sans-serif Monospace Cursive Fantasy

• font-family : [[<family-name> | <generic-family>],]* [<family-name> | <generic-family>] | inherit

• font-weight : normal | bold | bolder | lighter | 100 - 900 | inherit

• font-size : xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <length> | <percentage> | inherit

• font-style : italic | oblique | normal | inherit 风格

• font-variant : small-caps | normal | inherit 变形

• font : [[<font-style> || <font-variant> || <font-weight>]?<font-size>[/<line-height>]?<font-family>] | caption | icon | menu | message-box | small-caption | status-bar | inherit

• @font-face …

文本属性

• 块级元素缩进(可继承) text-indent : <length> | <percentage> | inherit
• 水平缩进(两端对齐如何拉伸由用户代理确定而不是 CSS) text-align : left | center | right | justify | inherit
• 垂直对齐 行高(通常是字体大小的1.2倍) line-height : <length> | <percentage> | <number> | normal | inherit 文本行基线之间的距离(块级元素为元素中文本基线的最小距离) 指定数字缩放因子将是继承值而不是计算值
• 行间距、[行内框] (line-height - font-size)[/2]
• vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit 不影响块级元素对齐
• 字间隔 word-spacing : <length> | normal | inherit
• 字母间隔 letter-spacing : <length> | normal | inherit
• 文本转换 text-transform : uppercase | lowercase | capitalize | none | inherit
• 文本装饰 text-decoration : none | [underline || overline || line-through || blink] | inherit 不能继承；显示的声明其装饰以使装饰颜色与一个元素匹配
• 文本阴影 text-shadow : none | [<color> || <length><length><length>?,]* [<color> || <length><length><length>?] | inherit
• 处理空白符 white-space : normal | nowrap | pre | pre-wrap | pre-line | inherit
• 文本方向 direction : ltr | rtl | inherit unicode-bidi : normal | embed | bide-override | inherit

基本视觉格式化

• 基本框 元素框，内容区，内边距，边框，外边距…

• auto :

  • 如果 width 、 margin-left 或 margin-right 中的某个值为 auto，其余两个为特定值，那么 auto 的属性会确定所需的长度，使元素框的宽度等于父元素的 width。
  • 如果三者都为特定值(过分受限, overconstrained)，浏览器将把右边距(ltr)重置为 auto。
  • 如果有两个 auto，会设置成相等的长度。
  • 三个 auto，margin 为 0, width 100%。

• 替换元素 width / height 为 auto，元素宽为内容的固有宽度或随另一半成比例变化。

• inline-block 元素的底端默认位于文本行的基线上。

• run-in 元素可以使某些块级元素成为下一个元素的行内部分。

• IE 在混杂模式中使用自己的非标准盒子模型(width = content + padding + border)

• box-sizing 定义使用哪种盒模型

内边距、边框和外边距

• width : <length> | <percentage> | auto | inherit

• height : <length> | auto | inherit

• margin : [<length> | <percentage> | auto]{1,4} | inherit

• border-style : [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset]{1,4} | inherit

• border : [<border-width> || <border-style> || <border-color>] | inherit

• 对于只包含文本的行(行内非替换元素)，改变行间距离的属性只有 : line-height / font-size / vertical-align

颜色和背景

• color : <color> | inherit
• background-color : <color> | transparent | inherit
• background-image : <uri> | none | inherit
• background-repeat : repeat | repeat-x | repeat-y | no-repeat | inherit
• background-position : [[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | bottom]?] || [[left | center | right] || [top | center | bottom]] |inherit
• background-attachment : scroll | fixed | inherit
• background : [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit

浮动和定位

• float : left | right | none | inherit
• clear : left | right | both | none | inherit
• position : static | relative | absolute | fixed | inherit
• top right bottom left : <length> | <percentage> | auto | inherit
• min-width min-height max-width max-height
• overflow : visible | hidden | scroll | auto | inherit
• clip : rect(top, right, bottom, left) | auto | inheirt
• visibility : visible | hidden | collapse | inherit
• z-index : <integer> | atuo | inherit

表布局

列表与生成内容

• list-style-type

• list-style-image : <uri> | none | inherit

• list-style-position : inside | outside | inherit

• content : normal | [<string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote]+ | inherit

• 如果 :before / :after 的主体是块级元素，则 display 属性只接受 none / inline / block / marker，其他值处理成 block。

• 如果 :before / :after 的主体是行内元素，则 display 属性只接受 none / inline，其它所有值处理为 inline。

• counter-reset : [<identifier> <integer>?]+ | none | inherit

• counter-increment : [<identifier> <integer>?]+ | none | inherit

用户界面样式

• cursor
• outline

CSS媒体查询

语法

<!-- link元素中的CSS媒体查询 仍将被下载 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

逻辑操作符

• and 操作符用来把多个 媒体属性 组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。

• not 操作符用来对一条媒体查询的结果进行取反。

• only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。

• 若使用了 not 或 only 操作符，必须明确指定一个媒体类型。

• 将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

权重 (specificity) 与 继承 (inheritance)

盒模型 (box model) 与 外边距合并 (margin collapsing)

堆叠 (stacking) 与 块格式化上下文 (block-formattin contexts)

初始值 (initial)、 计算值 (computed) 与 应用值 (used) 与 实际值 (actual values)

速记（简写）属性 (shorthand properties)

CSS 文档和教程

参考

• 《CSS 权威指南》
• 《精通 CSS 高级 Web 标准解决方案》
• MDN