《css权威指南》重点摘要

《css权威指南》第三版

第一章 CSS和文档

1.CSS(Cascading style sheet)，层叠样式表。

2.CSS将html中的元素分为替换元素和非替换元素。
- 替换元素：用来替换元素内容的部分并非由文档内容直接表示，如img/input元素
- 非替换元素：内容由用户代理（浏览器）在元素本身生成的框中显示，如span/p等

3.CSS还将html中的元素分为块级元素和行内元素，对应于CSS中的display属性。
- 块级元素:生成一个元素框，填充器父元素的内容区，旁边不能有其他元素。如p和div。
- 行内元素：在一个文本行内生成元素框，不会打断这行文本，如strong和em。

4.link元素用于引用外部CSS；style元素用于包含内如样式，优先级高；还可以在style元素中调用@import。

第二章选择器

1.CSS的规则结构:选择器声明块。声明块由多个声明组成，声明是键值对。

2.选择器：
- 元素选择器：如html {color:black;}
- 选择器分组：支持同时设置多个元素，如h2,p {color:gray;}
- 声明分组：设置多个属性，如h1 {font:18px;colr:purle;}
- 通配选择器：匹配任何元素，如* {color: red;
- 类选择器：例如p.warning选在p元素中class为warning的元素，.warning选择素有class为warning的元素。
- 多类选择器：例如<p class=" a b"></p>，选择该元素是写作.a.b或.b.a
- ID选择器：例如#test {...}选择id为test的元素，不允许结合使用，因为id属性不能以空格分隔
- 属性选择器：例如h1[class][style] {...}选择h1元素含有class和style属性的元素，其中可以设置class="abc"选取class等于abc的元素，如果class的值有多个，则使用class~="abc"选择部分含有属性值abc的元素，类似的还有foo^="bar"选择属性值以”bar”开头，foo$="bar"选择属性以”bar”结尾，foo*="bar"选择属性包含”bar”的所有元素。此外foo|="en"选择foo属性以en开头或者等于en的所有元素。
- 后代选择器：元素之间使用空格分割，会选择器所有后代元素。
- 选择直接子元素：使用>，例如h1>strong{...}选择h1后面子标签为strong的元素
- 相邻兄弟元素：使用+，例如h1+ul {...}选择h1相信的ul元素。
- 伪类和伪元素（详见https://blog.csdn.net/q1056843325/article/details/53560588）：
- 伪类选择器：使用：。例如a:visited {...}
- 伪元素：CSS2.1定义四个伪元素，首字母样式first-letter，第一行样式first-line，设置之前before和之后after元素的样式。

第三章结构和层叠

1.选择器的特殊性决定浏览器最终的元素呈现样式。选择器的特殊性规则如下图，特殊性值最高的样式呈现的优先级高。

2.内联样式的特殊性最高。

3.如果特殊性相同，就需要比较重要性。重要性使用!import来标志。

4.继承性决定子元素会使用父元素的样式，一般的，大多数框模型属性，如边距、边框等不能继承，继承的值没有特殊性，连0都不是，小于特殊性是0的选择器。

5.特殊性和重要性都相同后，比较样式声明的顺序，靠前的权重大。

第四章值和单位

1.CSS支持数字，百分数（相对于另一个元素或者是父元素继承的值），颜色支持英文简写，RGB。
2.长度单位：
- 绝对长度单位：
- 英寸in：1in=2.54cm
- 厘米cm：
- 毫米mm：
- 点pt：1in=72pt
- 派卡pc:印刷术语，1pc=12pt
- 相对长度单位：
- em：元素的字体高度，1em定义为给定字体的font-size值
- ex：字母x的高度
- px：像素长度

3.关键字inherit的意思是属性的值与其父元素的值相同。

第五章字体

1.CSS定义五种通用字体：
- serif：成比例，有上下短线
- sans-serif：成比例，无上下短线
- monospace：不成比例，字符宽度完全相同
- cursive：模仿人的手写体。
- fantasy：

2.一些样式属性：
- font-family指定字体
- font-weight指定字体加粗，变细等
- font-size指定字体大小，可以设定绝对、相对大小
- font-style指定字体风格，例如倾斜
- font-variant指定字体变形，例如小型大写字母small-caps
- font-stretch拉伸字体
- font-size-adjust调整字体
- font合并上述所有属性

第六章文本属性

1.一些文本样式属性：
- 缩进文本：text-indent
- 水平对齐：text-align
- 行高：line-height
- 垂直对齐:vertical-align
- 字间隔：word-spacing
- 字母间隔：letter-spacing
- 文本转换：text-transform，例如大小写
- 文本装饰：text-decoration，例如加下划线
- 文本阴影：text-shadow
- 处理空白符：white-space
- 文本方向：direction

第七章基本视觉格式化 & 第八章内边距、边框和外边距

1.块级元素框模型，如下图。

3D示意图如下：

第九章颜色和背景

1.前景色：color

2.背景色：background-color，背景图：background-image，有方向的重复：background-repeat，背景定位：backround-position，滚动关联：background-attachment，汇总：background。

第十章浮动和定位

1.浮动属性：float。

2.设置一个元素两边无浮动元素：clear属性。

3.定位:position
- static
- relative
- absolute
- fixed
- inherit

4.元素可见性：visibility

5.改变元素的覆盖顺序：z-index

未完待续…