因为公司前端需要救火队员，所以临危受命，摆正心态，阅读第一手资料，从MDN文档入手。
定义
CSS： (Cascading Style Sheets) 是用来样式化和排版你的网页的，是一种用于向用户指定文档如何呈现的语言 — 它们如何被指定样式、布局等
CSS是如何工作的？
当浏览器显示文档时，它分为两个阶段处理文档：
- 浏览器将HTML和 CSS 转化成 DOM。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。
-
浏览器显示 DOM 的内容
CSS引用方式
- 外部样式表
保存为.css文件，如何用<link>元素引用。这种方法可以说是最好的，因为你可以使用一个样式表来设置多个文档的样式，并且需要更新 CSS 的时候只要在一个地方更新。 - 内部样式表
CSS 放置在<style>元素中，该元素包含在 HTML head 内。 - 内联样式
<p style="color:red;">This is my first CSS example</p> 如非必要不要这样做，很难维护。
CSS语法 (这部分需要动手练 + 随时查询文档)
CSS声明
如果使用了未知属性，或者给属性赋予了无效值，该声明会被视为无效，浏览器的 CSS 引擎会完全忽略它
CSS声明块
CSS 选择器和规则
如果链或组中的某个选择器无效，比如使用了未知的伪元素或伪类，整个组的选择器仍然是有效的，除了这个无效的将被忽略的选择器。
CSS 语句
CSS 规则是样式表的主要组成块 —— 是你在 CSS 中最常见的块。但这有一些其它类型的块，你以后偶尔会碰上 —— CSS 规则只是被称为 CSS 语句中的一种
@-规则(At-rules)在CSS中被用来传递元数据、条件信息或其它描述性信息。它由（@）符号开始，紧跟着一个表明它是哪种规则的描述符，之后是这种规则的语法块，并最终由一个半角分号（;）结束。每种由描述符定义的@-规则，都有其特有的内部语法和语义。一些例子如下：
@charset 和 @import （元数据）
@media 或 @document （条件信息，又被称为嵌套语句，见下方。)
@font-face （描述性信息）
简写
比如 font ,background,padding,border,magin允许一行设置多个属性，使代码简洁。
/* 在padding和margin这样的简写属性中，值赋值的顺序是top、right、bottom、left。它们还有其他简写方式，例如给padding两个值，则第一个值表示top/bottom，第二个值表示left/right */
padding: 10px 15px 15px 5px;
等同于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
再比如：
background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
等同于
background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;
选择器
- 简单选择器（Simple selectors）：通过元素类型、class或者id匹配一个或多个元素。
- 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。
[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr
[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素（注意，这里的 “-” 不是一个错误，这是用来处理语言编码的）。
[attr^=val] : 选择attr属性的值以 val 开头（包括 val）的元素。
[attr$=val] : 选择attr属性的值以 val 结尾（包括 val）的元素。
[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）。
值包含的被空格分隔的取值列表里中的一个。
- 伪类（Pseudo-classes）：匹配处于确定状态的一个或多个元素，比如被鼠标指针悬停的元素，或当前被选中或未选中的复选框，或元素是DOM树中一父节点的第一个子节点。
a:link { color: blue } /* 未访问链接 */
a:visited { color: purple } /* 已访问链接 */
a:hover { font-weight: bold } /* 用户鼠标悬停 */
a:active { color: lime } /* 激活链接 */
- 伪元素（Pseudo-elements）:匹配处于相关的确定位置的一个或多个元素，例如每个段落的第一个字，或者某个元素之前生成的内容。
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
- 组合器（Combinators）：这里不仅仅是选择器本身，还有以有效的方式组合两个或更多的选择器用于非常特定的选择的方法。例如，你可以只选择divs的直系子节点的段落，或者直接跟在headings后面的段落。
| 名称 | 组合器 | 选择 |
|---|---|---|
| 选择器组 | A,B | 匹配满足A（和/或）B的任意元素 |
| 后代选择器 | A B | 匹配B元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点） |
| 子选择器 | A > B | 匹配B元素，满足条件：B是A的直接子节点 |
| 相邻兄弟选择器 | A + B | 匹配B元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面） |
| 通用兄弟选择器 | A ~ B | 匹配B元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A） |
- 多重选择器（Multiple selectors）：这些也不是单独的选择器；这个思路是将以逗号分隔开的多个选择器放在一个CSS规则下面， 以将一组声明应用于由这些选择器选择的所有元素。
h1, h2, h3, h4, h5, h6 {
font-family: helvetica, 'sans serif';
}
CSS数值与单位
数值
像素 (px) 是一种绝对单位（absolute units）， 因为无论其他相关的设置怎么变化，像素指定的值是不会变化的。其他的绝对单位如下：
- mm, cm, in: 毫米（Millimeters），厘米（centimeters），英寸（inches）
- pt, pc: 点（Points (1/72 of an inch)）， 十二点活字（ picas (12 points.)）
也有相对单位，他们是相对于当前元素的字号（ font-size ）或者视口尺寸。
-
em:1em与当前元素的字体大小相同（更具体地说，一个大写字母M的宽度）。CSS样式被应用之前，浏览器给网页设置的默认基础字体大小是16像素，这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小，所以如果在父元素上设置了不同的字体大小，em的像素值就会变得复杂。现在不要过于担心这个问题，我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。 -
ex,ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。 -
rem: REM（root em）和em以同样的方式工作，但它总是等于默认基础字体大小的尺寸；继承的字体大小将不起作用，所以这听起来像一个比em更好的选择，虽然在旧版本的IE上不被支持（查看关于跨浏览器支持 Debugging CSS.) -
vw,vh: 分别是视口宽度的1/100和视口高度的1/100，其次，它不像rem那样被广泛支持。
- 0为无单位数值
百分比
针对父元素的百分比
颜色
- 关键词
- 十六进制值 如：#e0b0ff
- RGB 如 rgb(255,0,0)
- HSL 如 hsl(0,100%,50%)
- RGBA 和 HSLA 多了透明度 如rgba(255,0,0,0.5) hsla(240,100%,50%,0.5);
- 不透明度（Opacity）
函数
每当你看到一个名字后跟着括号,括号里包含用逗号分隔的一个或多个值,那么你所使用的就是一个函数。例如:
/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');
层叠和继承
层叠性 ： 就近原则
一般情况下，如果出现样式冲突，则会按照CSS书写的顺序，以最后的样式为准。
- 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
- 样式不冲突，不会层叠
- 贡献值
关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：
specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
| 继承或者* 的贡献值 | 0,0,0,0 |
|---|---|
| 每个元素（标签）贡献值为 | 0,0,0,1 |
| 每个类，伪类贡献值为 | 0,0,1,0 |
| 每个ID贡献值为 | 0,1,0,0 |
| 每个行内样式贡献值 | 1,0,0,0 |
| 每个!important贡献值 重要的 | ∞ 无穷大 |
权重是可以叠加的
比如的例子：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover -----—> 0,0,1,1
.nav a ------> 0,0,1,1
#nav p -----> 0,1,0,1
继承性： 子承父业
所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）
CSS为处理继承提供了四种特殊的通用属性值：
-
inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。 -
initial：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为inherit。 -
unset：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像inherit，否则就是表现得像initial。 -
revert：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。
注意: initial 和 unset 不被IE支持。
网友评论