css世界 读书笔记 -- 第一、二章节

一.概述

1.CSS 全称是 Cascading Style Sheets，翻译成中文就是“层叠样式表”。

所谓“层叠”，顾名 思义，就是样式可以层层累加，

比方说页面元素都继承了 12 像素的大小，某标题就可以设置成 14 像素进行叠加。

2.CSS 世界的诞生就是为图文信息展示服务的。

3.“文档流”：“流”实际上是 CSS 世界中的一种基本的定 位和布局机制，

所谓“流”，就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。

 

二.术语和概念

1.属性：属性对应的是平常我们书面或交谈时对 CSS 的中文称谓。

例如，上面示意 CSS 代码中的 height 和 color 就是属性。

.vocabulary { height: 99px; color: transparent; }

2.值：“值”大多与数字挂钩。下面是一些常用的类型

• 整数值，如 z-index:1 中的 1，属于，同时也属于。

• 数值，如 line-height:1.5 中的 1.5，属于。

• 百分比值，如 padding:50%中的 50%，属于。

• 长度值，如 99px。

• 颜色值，如#999。

此外，还有字符串值、位置值等类型。在 CSS3 新世界中，还有角度值、频率值、时间值 等类型

3.关键字：关键字指的是 CSS 里面很关键的单词，这里的单词特指英文单词

上面示例 CSS 代码中的 transparent 就是典型的关键字，

还有常见的 solid、inherit 等都是关键字，

其中 inherit 也称作“泛 关键字”，所谓泛关键字，可以理解为“公交车关键字”，就是“所有 CSS 属性都可以使用的关 键字”的意思。

4．变量：CSS 中目前可以称为变量的比较有限，CSS3 中的 currentColor 就 是变量，非常有用。

5．长度单位：

CSS 中的单位有时间单位（如 s、ms），

还有角度单位（如 deg、rad 等），

但最常见的自 然还是长度单位（如 px、em 等）。

需要注意的是，诸如 2%后面的百分号%不是长度单位。

再说 一遍，%不是长度单位！

因为 2%就是一个完整的值，就是一个整体，我想你一定认为 0.02 是 值，没错，2%也同样是值。

6．功能符：值以函数的形式指定（就是被括号括起来的那种）

主要用来表示颜色（rgba 和 hsla）、 背景图片地址（url）、元素属性值、计算（calc）和过渡效果等，

如 rgba(0,0,0,.5)、 url('css-world.png')、attr('href')和 scale(-1)。

7.属性值：属性冒号后面的所有内容统一称为属性值。

例如，1px solid rgb(0,0,0)就可以称为 属性值，它是由“值+关键字+功能符”构成的。

属性值也可以由单一内容构成。例如，z-index:1

8．声明:属性名加上属性值就是声明

例如：color: transparent;

9．声明块:声明块是花括号（{}）包裹的一系列声明

{ height: 99px; color: transparent; }

10．规则或规则集:出现了选择器，而且后面还跟着声明块，

比如本小节一开始的那个例子，就是一个规则集：

        .vocabulary { height: 99px; color: transparent; }

11．选择器:选择器是用来瞄准目标元素的东西，例如，上面的.vocabulary 就是一个选择器。

• 类选择器：指以“.”这个点号开头的选择器。很多元素可以应用同一个类选择器。“类”， 天生就是被公用的命。

• ID 选择器：“#”打头，权重相当高。ID 一般指向唯一元素。但是，在 CSS 中，ID 样式出现在多个不同的元素上并不会只渲染第一个，而是雨露均沾。但显然不推荐 这么做。

• 属性选择器：指含有[]的选择器，形如[title]{}、[title= "css-world"]{}、 [title~="css-world"]{}、[title^= "css-world"]{}和[title$="cssworld"]{}等。

• 伪类选择器：一般指前面有个英文冒号（:）的选择器，如:first-child 或:lastchild 等。

• 伪元素选择器：就是有连续两个冒号的选择器，如::first-line::firstletter、::before 和::after。

12．关系选择器：关系选择器是指根据与其他元素的关系选择元素的选择器，

常见的符号有空格、>、~，还 有+等，这些都是非常常用的选择器。

• 后代选择器：选择所有合乎规则的后代元素。空格连接。

• 相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因此又称“子 选择器”。>连接。适用于 IE7 以上版本。

• 兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。适用于 IE7 以上 版本。

• 相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。适用于 IE7 以上版本。

13．@规则:@规则指的是以@字符开始的一些规则，

像@media、@font-face、@page 或者@support， 诸如此类。

14.了解 CSS 世界中的“未定义行为”

当某个浏览器中出现与其他浏览器不一样的行为或样式表现的时候，遇到的表现差异并不是浏览器的 bug，

用 计算机领域的专业术语描述应该是“未定义行为”（undefined behavior）。

规范顾及不到的细枝末节的实现，就称为“未定义行为”。