CHAPTER 1 CSS and Documents
CHAPTER 2 Selectors
CHAPTER 3 Specifcity and the Cascade
CHAPTER 4 Values and Units
CHAPTER 5 Fonts
CHAPTER 6 Text Properties
CHAPTER 7 Basic Visual Formatting
CHAPTER 8 Padding, Borders, Outlines, and Margins
CHAPTER 9 Colors, Backgrounds, and Gradients

写在前面，本来是想做翻译的。后来算了吧，能看懂几章就不错了，另外也有道德的至高者来指责。豆瓣知乎说中版本的翻译惨不忍睹（主要是没钱，一百大几，我连lol皮肤都是白嫖的，还有就是书太重，笨笨的），遂看英文版的好了，别问，问就是划词翻译，生肉难啃。不过也算老书了，第一章是2012年写的，github的例子都是四年前的了。前端真的是最好的年代，也是最坏的年代。

CHAPTER 1 CSS and Documents

A Brief History of (Web) Style

简述了css的发展史，兼容性啊，巴啦啦。但是，我没怎么看到过脱离web环境来使用css的。多媒体什么的，没见过。

Elements

说了替换和非替换元素，块级和行内元素，还有合不合规的问题

Bringing CSS and HTML Together

css引入到html的方式，除了link啊，写在头里面，内联样式，还有下面这种

<style type="text/css">
@import url(styles.css); /* @import comes first */
h1 {color: gray;}
</style>

与其他不同这个@import必须写在顶部
还有两点值得注意
一：Alternate stylesheets，可选择的样式，我理解算是解决主题色的一样方式
二：

<link rel="stylesheet" type="text/css"
 href="sheet1.css" title="Default Layout">
<link rel="stylesheet" type="text/css"
 href="sheet2.css" title="Default Text Sizes">
<link rel="stylesheet" type="text/css"
 href="sheet3.css" title="Default Colors">

像这种加上title的，会被首选，但是都加上了title，就不知道会用哪个了。因为HTML不提供确定应忽略哪些首选样式表以及应使用哪些样式表的方法。这让人很诧异。

Stylesheet Contents

浏览器前缀，都是hacker的方式来解决兼容性问题的。
空白不影响
css的注释有且只有一种/**/,嵌套会报错。

Media Queries

媒体查询，不做移动端的话，反正很少用的。

Feature Queries

特征查询，第一次见，有点dom编程艺术说的渐进增强的味道了。

Summary

我理解除了去完善功能外，增加体验，搞这些巴啦啦的都是好管理。但是搞出这一套的人们真的厉害，也不知道是不是事物发展的必然趋势。

CHAPTER 2 Selectors

Basic Style Rules

元素选择器
声明块中有错，整条规则都被忽略。
CSS 关键字通常使用空白分隔。在 CSS2.1 中有个例外：font属性值可以使用正斜杠（/）分隔两个特殊的关键字，例如：

h2 {font: large/150% sans-serif;}

backgroundborder-image
border-radius
grid
grid-area
grid-column
grid-row
grid-template
mask-border
斜杠还可以用于以上属性值中，讲真，好像见过，好久好久以前了。

Grouping

,并集选择
*通配符

Class and ID Selectors

选择器的权重值为特度0-0-0-0
与类选择器不同，ID 选择器不能联合使用，因为 ID 属性不允许使用空白分隔的单词列表。
完全匹配，大小写区分

Attribute Selectors

属性选择器：简单属性选择器、准确属性值选择器、部分匹配属性选择器和头值属性选择器。
精细化匹配

Using Document Structure

利用文档模型-父子结构，祖先后代
后代选择器没有紧密程度的概念。

Pseudo-Class Selectors

只要记住，伪类的作用是给它们绑定的元素添加一些“影子类”，就不容易犯（前面的）错误了。
这是结构简单性的精髓：伪类选择器:root选择文档的根元素。
有点问题伪类:root、body和html选择器，这三种怎么说？

img:only-child {border: 1px solid black;}

这个选择器会匹配所有符合标准的图片，因此，如果有一个段落元素（p）包含一个图片并且没有其他子元素，这个图片也会被匹配，而会忽略图片周围的文本。

<a href="http://w3.org/"><img src="w3.png" alt="W3C"></a> 
<a href="http://w3.org/"><img src="w3.png" alt=""> The W3C</a> 
<a href="http://w3.org/"><img src="w3.png" alt=""> <em>The W3C</em></a>

Pseudo-Element Selectors

结构性伪类，与文档相关
动态伪类，与自身属性相关

Summary

总结了个寂寞

CHAPTER 3 Specifcity and the Cascade

Specifcity

通用选择器对specificity没有贡献，换句话说，他的specificity为0,0,0,0但是，并不意味着他不存在，这个会在继承里面解释。有点懵，不能说一点不懂，只能说完全不理解。
行内、ID、class、标签、通用

Inheritance

border是不继承的
Second, inherited values have no specificity at all, not even zero specificity.

这里通配选择器具有零度的specificity ，而继承过来的属性，没有specificity 特性。所以样式是灰的。承接了上文0不代表不存在，也不代表无意义。

查了w3c，color的取值

不愧是权威指南，书名狂，人也够细。
我也细一点，如果可以的话color的取值最好写rgb形式，因为可以减少浏览器的转换。

The Cascade

没看懂这个
1.Reader important declarations
2.Author important declarations
3.Author normal declarations
4.Reader normal declarations
5.User agent declarations
差了一下，懂了
5. 用户代理声明，这里的“用户代理”一般就是指浏览器了，即浏览器对一元素的默认的样式设置，由于不同浏览器对同种样式的默认值设定不同，所以就造成了所谓的CSS的不同浏览器兼容性问题（当然兼容性的产生还有其他原因）；
4. 读者的正常声明，“读者”就是查看网页的人，他们可能会有些自己的偏好，如设置字体、颜色，而且是正常声明的，不带“!important”
3. 创作人员的正常声明，“创作人员”就是网页的开发者
2. 创作人员的重要声明，就是声明样式时加了“!important”
1. 读者的重要声明，这个就参考上面的了。至于读者怎么声明样式，我觉得可能是用一些浏览器辅助插件之类的，如有插件可以调整浏览器的背景颜色来保护视力。
这个让我想起来上周看阮一峰的周刊，他吐槽ABP禁止显示广告，说浏览器要保护作者广告的权利。这个玩意嘛，最终还是用js 在浏览器上斗法。不可能抹灭读者的意志，如果读者最终选择关闭网页，那创作者还创作给谁看呢。还是软广告牛的，这波啊，只能说格局小了~。（2021年7月29日17:55:35，好家伙，阮大师已经开启检测模式了，急了急了）
后面说了a链接的规则，可访问特殊，还有就是一些Non-CSS Presentational Hints，不明白。

Summary

总结的好啊，真好啊。

CHAPTER 4 Values and Units

Keywords, Strings, and Other Text Values

全局关键字：inherit, initial, and unset.
all，浏览器兼容有问题
字符串值的这节没耍明白，感觉不得劲
url是相对于自身文件，而不是html
image的取值 url image-set gradient

Numbers and Percentages

我的理解是有min和max值的，超出了，以最大范围为准
整型、浮点数、百分数、分数（fr为单位，flex和grid布局用）

Distances

绝对单位长度：6种

Calculation values

calc()

Attribute Values

attr() 少数 CSS 属性允许使用当前元素 HTML 属性的值：p::before {content: “[“ attr(id) “]”;}
input[type=”text”] {width: attr(maxlength em);}
Color
颜色名称=>依赖于颜色表
十六进制值
rgb、rgba
十六进制的rgba
HSL、HSLA

There are two special keywords that can be used anywhere a color value is permitted.These are transparent and currentColor.
我不觉得这个currentColor怎么样。

Angles

deg
grad
rad
turn
我就用过deg

Time and Frequency

数字加时间单位
常用过转换和动画，或者间隔和延迟

Position

这个我好像是大学的时候看到过
默认是上右下左的顺序
然后值会对应的，上下，左右的

如果只声明一个值，第二个值默认设置为 center
如果声明两个值且第一个值为长度或百分比，则第一个值 always 被当做水平值
如果声明四个值，必须有两个值是长度或百分比，每个值前面有一个关键字，right 10px bottom 30px 表示从右边向左 10px 和从底边向上 30px
如果定义三个值，与四个值一样，最后一个值默认为 0

Custom Values
变量值，有用是有用，也确实好用，比如说主题色这块，但总感觉哪里不对。
以 – 开始，区分大小写
可以 scope 覆盖
记得使用 @supports() 验证哦
浏览器支持尚不确定

@supports (color: var(—custom)) { / variable-dependent styles go here / }
@supports (—custom: value) { / alternate query pattern / } html { —gutter: 3ch; —offset: 1; }