CSS核心（上）

CSS

介绍

层叠样式表（英语：Cascading Style Sheets, 缩写:CSS; 又叫串样式列表，级联样式表，串接样式表，阶层式样式表）是一种用来为结构化文档（HTML或XML应用）添加样式（字体，间距和颜色）的计算机语言，由W3C维护。CSS3是目前最新的版本，已经被大多的浏览器所支持。（部分属性在低版本或者IE浏览器中存在兼容性问题）。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力（通过修改添加类名或属性或者是id名,来更换样式表，切换样式）。

样式表

1. 用户代理样式表**（User - Agent Styles）**| 默认样式表

• 定义：这是浏览器默认提供的样式。浏览器有自己内置的一套样式规则，用于在没有其他样式定义的情况下呈现 HTML 元素。这些样式确保了网页在最基本的层面上具有一定的可读性和可用性。不同的浏览器可能有不同的用户代理样式，不过它们通常都遵循一定的标准，如 HTML 和 CSS 规范。
• 示例：例如，在大多数浏览器中，<h1>标签默认会有较大的字号和加粗的字体样式，<ul>（无序列表）标签会有项目符号的样式。这些默认样式是用户代理样式的体现，还有一些内外边距，我们在开发过程中常常会使用通配选择器直接将这部分样式清除掉，以保证我们后续的布局更加清晰。
• 应用场景：在网页没有定义任何作者样式时，用户代理样式发挥作用，保证网页元素能以一种基本合理的方式显示。同时，在开发过程中，开发者也需要考虑用户代理样式，避免自己定义的样式与默认样式产生冲突或不符合预期的叠加效果。

用户样式表（User Styles）

• 定义：这是用户自己定义的样式，用于覆盖网页原有的样式。用户可以通过浏览器扩展或者在浏览器的用户样式设置选项中添加自定义的 CSS 规则。

内联样式

• 定义：在标签内部使用style属性来定义样式，这种样式只对当前的标签生效，优先级最高。
• 特点： 这种样式会与html结构紧密耦合在一起，过多使用会造成html代码变得臃肿且难以维护，实际开发中应该减少使用内联样式。

内部样式表

• 定义：内部样式表是在html文档中的标签内部，使用

外部样式表

• 定义： 外部样式表是将样式定义在一个独立的.css文件中，然后通过html文档中的标签将该样式表链接到html文档中.这种方式可以让多个html页面共享同一种样式。也是开发中最常用的，便于维护。
• 使用：可以定义公共样式在需要的地方直接引入就行。

选择器

介绍

CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

• 选择器（Selector）：多个选择器可以半角逗号,隔开。
• 属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
• 值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号:隔开，属性和值合称为“特性”。多个特性间用;隔开，最后用大括号{ }括起来。

CSS里现在共有5种基本选择器（Basic Selectors）和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。

基本选择器

• 标签选择器（h1、p等）——elementname
• 类别选择器（class）——.elementname
• ID选择器（ID）——#elementname
• 万用选择器——* ns|* *|*（ns表示命名空间，会选中这个命名空间里的所有元素）
• 属性选择器（也翻译为“通配符选择器”）——[attribute]

属性选择器

属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。属性选择器共有7种。

组合选择器

CSS里现在共有4种组合选择符（Combinators）

其他选择器

CSS中还提供了伪元素选择器和虚拟类别选择器（并不是css的术语，常用伪类选择器实现虚拟类别的功能），但用途单一一些，常与其它选择器组合在一起使用。伪元素的元素主要用于选取与另一个选择器选中对象临近的元素。虚拟类别选择器用于选中处于特定状态或具有特定性质的元素。

伪元素选择器（Pseudo-elements）

伪元素选择器用于选择元素的特定部分，而不是选择元素本身。它们通常用于在不添加额外HTML标记的情况下，对元素的特定部分进行样式化。伪元素选择器以两个冒号（::）开始。

常见的伪元素选择器包括：

• ::before：在元素的内容前面插入内容。
• ::after：在元素的内容后面插入内容。
• ::first-line：选择元素的第一行。
• ::first-letter：选择元素的第一个字母。
• ::selection：选择用户选中的元素部分。

伪类选择器（Pseudo-classes）

伪类选择器用于选择元素的不同状态或基于特定条件的元素。它们以单个冒号（:）开始。

常见的伪类选择器包括：

• :hover：当鼠标悬停在元素上时。
• :focus：当元素获得焦点时。
• :nth-child()：选择其父元素的特定子元素。
• :not()：选择不符合指定条件的元素。
• :checked：选择被选中的表单元素。

引入CSS规则的多种方式及其层叠性

介绍

CSS可以有多种引入方式，一个网页可以引入多个CSS文件，同一种CSS规则可以被反复多次添加。这使得CSS的使用方式非常灵活，但也会频繁地出现规则冲突。同时对一个网页元素设定无法并存的2种样式时，就会引起冲突。CSS的特色之一就是其解决规则冲突的方案。CSS的规则冲突可以分为不同来源之间的规则冲突和同一来源内部的规则冲突。CSS分层次、立体化的比较不同规则的优先级的方式，就是所谓层叠性(cascading)的体现。

来源多样

• 作者样式

  • 作者可以在他的HTML文件中确定一个外来的、独立的CSS文件（外部样式表），其优先级最低
  • 作者可以将CSS信息包含在HTML文件内（内部样式表）
  • 作者可以在一个HTML指令内结合CSS指令（内联样式），其优先级最高。一般这样做是为了在特殊情况下，把上面来源的CSS抵消掉

• 客户端自定义样式（client-side style sheet）

  • 浏览网页的用户可以自己在本地计算机上自己写1个CSS文件，然后就可以在浏览器内通过设置好特定选项，来加载自己的CSS文件。这个CSS文件可以用在所有的HTML文件上。当网页作者没有设定某项规则，但存在对应的用户自定义规则时，用户的规则就会起作用。假如作者的CSS文件与读者的相冲突，浏览器会采用作者的规则。如果读者有特殊要求，可以通过在自定义规则末尾添加!important提升自定义规则的显示优先权。(网页作者也可以使用!important给规则提升权限，但是优先级别比不过由用户写的!important声明，!important对于网页作者的意义仅在于网页开发阶段的规则冲突测试)

• 浏览器样式

  • 假如外部没有特别指定一个样式的话，一般浏览器自己有一个内在的样式。由于不同浏览器的默认样式并不一致，所以讲究美观的网页的设计者一般喜欢去掉这个默认的样式。

规则特殊性

某个规则的特殊性也常被称为该规则的具体程度。规则特殊性的高低次序如下（依次递减）：

1. 行内样式
2. ID选择器
3. class选择器
4. 标签选择器
5. 通用选择器（也就是通配符选择器，用得少）

特殊性优先原则

特殊性优先原则是最重要的优先级比较规则。当引起冲突的2种规则的特殊性存在差异时（例如一个是通过ID选择器指定样式，另一个是通过class选择器指定样式），引擎将优先采用特殊性更高的样式。规则的特殊性的比较是最优先的。如果能直接判断出特殊性的差异，就无需考虑其它规则了。

不同来源的规则优先性

不同来源的规则之间的优先原则是第二重要的。当规则来源相同时（同为外部样式或同为内部样式），下一步就需要比较不同类型来源的优先级别。

总地来说，记住“行内样式优先于内部样式，内部样式又优先于外部样式”即可应对多数常见的情形。

像网页浏览者自定义样式表的优先级别如何，只有浏览器的设计者才需要考虑，与网页设计者的关系不大。

如果考虑有可能出现的更复杂的来源冲突，内容就比较多了。

但一般在写样式时，应尽可能避免这些复杂情形的出现。具体来说，一般情形下的采纳样式效果的优先级顺序为：

1. 行内样式
2. 内部样式
3. 在HTML中通过<link>标签直接引入的外部样式表
4. 在CSS中通过@import语句间接引入的外部样式表
5. 浏览网页的用户自己定义的样式表（需要手动加载）
6. 浏览器默认的样式（如标题有默认大小、段落之间有默认间距等，不同浏览器的默认样式不完全一样）

CSS中还有用!important修饰的重要性声明。如果计入重要性声明，那么在以上规则的最前面还需要加上2条规则：

1. 用户从本地加载的重要自定义样式
2. 网页设计者设定的重要样式

权重分数比较机制

有时还会遇到选择器优先级无法直接判断，而且规则的来源也相同的情形。如果网页设计者很少使用层次比较复杂的选择器（比如多级的后代选择器），那么必须比较权重的情况一般不会遇到（一般要么是可以直接根据前面的规则判断出优先性结果，或者是起冲突的2条规则的权重完全一样，只能继续去看后一条比较出现次序的机制）。此时，CSS还有一套分数加权(或者说是分数累积)的机制用于解决此类规则冲突。先列出基本的分值：

• 1个行内样式占1000分
• 1个id选择器占100分
• 1个class选择器占10分
• 1个标签选择器占1分

组合使用多个基本选择器时，不同选择器的得分会累加到一起。最终得分高的选择器，其指定的样式会胜出

靠后者优先原则

当权重比较仍然不能分出优先级胜负时，最后就是把守关底的“靠后优先”的原则了，也就是后定义的样式优先级较高。如果起冲突的规则来源相同，而且得分也相同，那么最后的冲突解决法则就是看CSS代码出现的先后顺序。后出现的规则会覆盖掉与之优先级相当的先出现的规则。也可称作“后发制人”、“后来者居上”或“后浪推前浪”原则，随便你怎么称呼。这种原则的适用情形很常见，所以此规则也很重要。

视觉格式化模型

介绍

CSS的核心就是视觉格式化模型和属性值的计算。视觉格式化模型包含盒子生成，以及定位，浮动和一些特殊盒子模型，溢出等。CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一

内容

1. 盒子的生成

视觉格式化模型会根据 CSS 盒子模型将文档中的元素转换为一个个盒子，每个盒子的布局由以下因素决定：

• 盒子的尺寸：精确指定、由约束条件指定或没有指定
• 盒子的类型：行内盒子（inline）、行内级盒子（inline-level）、原子行内级盒子（atomic inline-level）、块盒子（block）
• 定位方案（positioning scheme）：普通流定位、浮动定位或绝对定位
• 文档树中的其他元素：即当前盒子的子元素或兄弟元素
• 视口尺寸与位置
• 所包含的图片的尺寸
• 其他的某些外部因素

该模型会根据盒子的包含块（containing block）的边界来渲染盒子。通常，盒子会创建一个包含其后代元素的包含块，但是盒子并不由包含块所限制，当盒子的布局跑到包含块的外面时称为溢出（overflow）。