《CSS权威指南》读书笔记 第一章

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

最近发现自己的CSS基础实在是太弱了，可以说是根本没有系统学习过。平时只是用 antD 等UI库，或者为了应对面试记一记“垂直居中的几种写法”、“圣杯布局写法”这样零散的知识点。这种有一大块知识不清楚的感觉实在是糟透了！

于是就开始找书来学，计划先《CSS权威指南》，看不下去就看《CSS世界》这种比较通俗的缓一缓，交替着看。

首先介绍了CSS诞生的原因和几个节点，CSS1于1996年诞生，CSS2于1998年诞生。到 2012 年初，3 个 CSS3 模块（与 CSS1 和 CSS 2.1 一起）达成了完整推荐状态。所以我们一般也可以说CSS3是2012年诞生的。

但是因为CSS3是模块化的，有些模块还在开发推进中，所以也不能说它完全就是CSS3了。

首先元素有两种分类方法：是否替换和显示方式。

按照是否会被替换，我们可以把HTML元素分为替换元素和非替换元素。

替换元素的典型是img元素，它可以被看做一个简单的占位符，真正显示的是 src 属性指向的图片。而另一个例子则是 input 元素，它会根据 type 值的不同显示为单选按钮、复选框或文本输入框等。

非替换元素则包含了大部分的HTML元素。这意味着元素的内容会被用户代理（通常是浏览器）显示在一个由元素自己生成的“盒子”里。

关于这种分类方式，简单了解即可，因为实际上也没有太多因这种类别上的不同而产生的的问题。

而按照显示方式，则可以把元素分为块级（block-level）元素 和行内级（inline-level）元素。

这两种元素就比较有明显的不同了。

块级元素生成一个（默认情况下）元素框，填充其父元素的内容区域，并且在其两侧不能有其他元素。 换句话说，它在元素框之前和之后生成“断行”。

行内元素在文本行内生成一个元素框，并且不会破坏该行的流。HTML 中最好的例子是a元素。这些元素不会在自身之前或之后生成“断行”，所以它们可以出现在其它元素的内容之中，并且不会破坏其显示。

块级元素和行内元素的最主要区别就在于是否独占一行，或者说会不会形成断行。

注意：在HTML中，不允许行内元素包含块级元素，如

hi

引入外部的CSS文件有两种方式：link标签或者 @import

link标签中，rel代表 relation关系。可以是 stylesheet或者 alternate stylesheet。alternate stylesheet 只有当用户选择时才会使用，如果浏览器能够使用备用的样式表，它会用link元素的title属性值来生成一个可选择的样式列表。可以用它来做一些大字版等适老化处理。

Webkit系列浏览器不支持选择备用样式表,可以用js处理这种需求

type属性始终设置为text/css，这个值描述了被link标签加载的数据的类型。这样，web 浏览器就可以知道这个样式表是一个 CSS 样式表。

当需要使用 SCSS 或者 Less 这样的文件时，

接下来是href属性，这个属性的值是样式表的 URL，可以是绝对地址也可以是相对地址。

最后是media属性，这个属性的值是一个或多个媒体描述符。媒体描述符是关于媒体类型和这些媒体的特性的规则，每个规则之间用逗号分隔。这一部分会在媒体查询这块仔细讲。

@import也可以指示浏览器加载一个外部样式然后把它应用到 HTML 文档渲染中。它和 link 之间主要的区别只是在于语法和命令的位置。@import必须写在 style 标签中，并且必须写在其中的内嵌样式的前面。

同时，这种引入方式也可以设置媒体描述符，如@import url(zany.css) projection, print

如果你想要在一个外部样式表中使用另一个外部样式表，@import非常有用。因为外部样式表不能包含任何文档标记，link元素就无法使用，但@import却可以。

每条规则由两个基本部分构成：选择器和声明块。声明块由一个或多个声明组成，每个声明是一个属性-值对。每个样式表都是由一系列规则组成的。

有时有些些声明块会包含厂商前缀，浏览器厂商在提供试验性或专有（或两者）功能时，用它来标记属性、值或其他CSS内容。一些常见的厂商前缀如下：

对于空格的处理，css和html一样宽容，而css注释的方式也非常简单 /* 注释 */，这些就不展开了。

媒体查询简单的来说就是在特定的媒体上应用特定的样式。

书中给出的媒体形式有：all,print,screen三种，其中all自然是用在所有媒体上，和没写没啥区别，print用于可视用户打印文档以及显示文档的打印预览，screen用于在桌面电脑显示器等屏幕媒体中显示文档。在此类系统上运行的所有 Web 浏览器都是屏幕媒体用户代理。

媒体查询的形式就是在一条规则前加上@media，比如下面的例子：

当然实际上你也可以直接写在html标签或者@import中：

当然，如歌只能区分是screen还是print，那媒体查询页基本没有用了，好在媒体查询还能使用媒体描述符来进行进一步的限定，从而在不同大小的屏幕上（一般限定大小，但也可以是别的）使用不同的样式。

考虑这个规则：@media screen and (min-resolution: 96dpi) {...}，它首先限定了媒体类型为screen，然后又添加了补充条件：min-resolution: 96dpi，只有当都为true时才会使用其中的样式。如果想要使用 or 这样的并列条件，我们可以直接用逗号分隔。

除了and，我们还可以使用not。 not放在查询开头，对整个查询求反，如果所有的条件都为真，样式表则不会被使用。例如，not (color) and (orientation: landscape) and (min- device-width: 800px)表示如果三个条件被满足，则表达式会被否定。因此，当媒体环境具有颜色、横向显示，并且设备显示宽度至少为800像素时，样式表不会被使用；反之在其它任何情况下，样式表都会被使用。

常用媒体查询符的场景是区分手机、平板和电脑屏幕，或者对非常大的电脑屏幕进行特殊适配。这时可以使用到的媒体查询符有：

通过判断用户代理是否支持特定的属性-值组合来应用样式块，被称作特性查询。

结构上它们与媒体查询很相似。比如你只想为支持color属性的元素添加颜色（当然是支持的），可以这样：

效果是这样的：“如果你能识别属性-值组合color: black并能用它做点什么，就使用这些样式，否则忽略这些样式。”对于不能理解@supports的用户代理，整个代码块都会被跳过。

特性查询是实现 渐进增强（progressive enhance） 的完美方式。

本章都是一些简单介绍。其中我个人觉得能够拓展的是块级元素/行内元素的应用、媒体查询的使用这两块。