前言

CSS 的全称为层叠样式表(英文全称：Cascading Style Sheets)，是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的样式表语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。它是开放 Web 的核心语言之一，并根据 W3C 规范在 Web 浏览器中进行了标准化 。

语言特点

CSS 为 HTML 标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS 在 Web 设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，CSS 具有以下特点：

1. 丰富的样式定义

CSS 提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2. 易于使用和修改

CSS 可以将样式定义在 HTML 元素的 style 属性中，也可以将其定义在 HTML 文档的 header 部分，也可以将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用。总之，CSS 样式表可以将所有的样式声明统一存放，进行统一管理。 另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的 HTML 标签中，也可以将一个 CSS 样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

3. 多页面应用

CSS 样式表可以单独存放在一个 CSS 文件中，这样我们就可以在多个页面中使用同一个 CSS 样式表。CSS 样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

4. 层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套 CSS 样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

5. 页面压缩

在使用 HTML 定义页面效果的网站中，往往需要大量或重复的表格和 font 元素形成各种规格的文字样式，这样做的后果就是会产生大量的 HTML 标签，从而使页面文件的大小增加。而将样式的声明单独放到 CSS 样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS 样式表的复用更大程序的缩减了页面的体积，减少下载的时间。

工作原理

CSS 是一种定义样式结构如字体、颜色、位置等的语言，被用于描述网页上的信息格式化和现实的方式。CSS 样式可以直接存储于 HTML 网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名 .css 的外部样式单文档中。

样式规则是可应用于网页中元素，如文本段落或链接的格式化指令。样式规则由一个或多个样式属性及其值组成。内部样式单直接放在网页中，外部样式单保存在独立的文档中，网页通过一个特殊标签链接外部样式单。

名称 CSS 中的“层叠（cascading）”表示样式单规则应用于 HTML 文档元素的方式。具体地说，CSS 样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由 CSS 根据这个层次结构决定，从而实现级联效果。

基础概念

属性（Properties）

CSS 属性是描述 HTML 元素的外观和格式的指令。它们通常用于定义颜色、字体、位置、边框等样式属性。通常由属性名称和属性值组成。

属性名称

属性的名字是一个合法的标识符，它们是 CSS 语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color 是文本的颜色属性，而 text-indent 则规定了段落的缩进。

要掌握一个属性的用法，有六个方面需要了解。具体叙述如下：

1. 该属性的合法属性值（legal value）。显然段落缩进属性 text-indent 只能赋给一个表示长度的值，而表示背景图案的 background．image 属性则应该取一个表示图片位置链接的值或者是关键字 none 表示不用背景图案。
2. 该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属性不能从它的父级元素那儿继承的时候，则浏览器将认为孩属性取它的默认值。
3. 该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如 white-space 属性就只适用于块级元素。white-space 属性可以取 normal、pre 和 nowrap 三个值。当取 normal 的时候，浏览器将忽略掉连续的空白字符，而只显示一个空白字符。当取 pre 的时候，则保留连续的空白字符。而取 nowrap 的时候，连续的空白字符被忽略，而且不自动换行。
4. 该属性的值是否被下一级继承（inherited）。
5. 如果该属性能取百分值（percentage），那么该百分值将如何解释。也就是百分值所相对的标准是什么。如 margin 属性可以取百分值，它是相对于 margin 所存元素的容器的宽度。
6. 该属性所属的媒介类型组（media groups）。

属性值

1. 整数和实数 这和普通意义上的整数和实数没有多大区别。在 CSS 中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即 1.2E3 在 CSS 中将是不合法的。下面是几个正确的例子，整数：128、-313，实数：12.20、1415、-12.03。
2. 长度量 一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。另一点值得注意的是，子级元素不继承父级元素的相对长度值，只继承它们的实际计算值。
3. 百分数量（percentages） 百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

选择器（Selectors）

选择器是 CSS 语言中用于选择 HTML 文档中元素的一种模式。通过选择器，我们可以定位到页面上的特定元素，并为其应用样式规则。以下是一些常用的 CSS 选择器：

1. 基本选择器

• 通配选择器 (*): 选择所有元素。

  * {
    margin: 0;
    padding: 0;
  }

• 类型选择器: 根据元素的类型（标签名）选择元素。

  p {
    color: blue;
  }

• 类选择器 (.): 根据元素的class属性值选择元素。

  .highlight {
    background-color: yellow;
  }

• ID 选择器 (#): 根据元素的id属性选择元素，一个 ID 在页面中是唯一的。

  #header {
    font-size: 2em;
  }

2. 属性选择器

• 根据元素的属性及其值选择元素。

  input[type='text'] {
    border: 1px solid #ccc;
  }

• 选择具有特定属性的元素，不论其值如何。

  img[alt] {
    border: 1px solid #000;
  }

3. 伪类选择器

• 动态伪类: 如:hover、:active、:focus等，用于选择用户与元素交互时的状态。

  a:hover {
    color: red;
  }

• 结构伪类: 如:first-child、:last-child、:nth-child()等，用于选择基于其在文档结构中位置的元素。

  li:first-child {
    font-weight: bold;
  }

• 伪元素: 如:before、:after等，用于在选定元素的内容前后插入生成的内容。

  p::before {
    content: '⇒ ';
  }

4. 组合选择器

• 后代选择器 (): 选择作为某元素后代的元素。

  .container div {
    display: inline-block;
  }

• 子代选择器 (>): 选择作为某元素直接子元素的元素。

  .navigation > li {
    float: left;
  }

• 相邻兄弟选择器 (+): 选择紧随某元素之后的相邻兄弟元素。

  h1 + p {
    font-size: 16px;
  }

• 通用兄弟选择器 (~): 选择某元素之后的所有兄弟元素。

  h2 ~ p {
    color: grey;
  }

5. 分组选择器

• 将多个选择器放在一起，为它们应用相同的样式规则。

  h1,
  h2,
  h3 {
    color: navy;
  }

规则集（Rule Sets）

• 规则集由选择器和一组声明组成，声明是属性和值的组合。
• 例如：p { color: blue; font-size: 14px; }表示为所有<p>标签设置蓝色文本和 14 像素的字体大小。

层叠（Cascading）

• CSS 的“层叠”特性意味着多个样式规则可以应用于同一个元素，浏览器会根据特定的规则来决定哪个样式生效。
• 这些规则包括选择器的优先级（如 ID 选择器优先于类选择器）、样式的来源（内联样式优先于外部样式表）和样式的特异性等。

继承（Inheritance）

• CSS 中的某些属性是可继承的，这意味着子元素会从父元素继承这些属性的值，如 color 和 font-family。
• 而像 border、margin 和 padding 这样的属性则不继承。

盒模型（Box Model）

• CSS 的盒模型定义了每个元素的内容、内边距、边框、外边距等部分。
• 盒模型是布局的基础，它决定了元素的大小和位置。

定位（Positioning）

• CSS 提供了不同的定位方案，如静态定位、相对定位、绝对定位和固定定位。
• 定位允许开发者精确控制元素在页面上的位置。

布局（Layout）

CSS 布局涉及如何安排元素在页面上的分布，包括传统的浮动布局、Flexbox 和 Grid 等现代布局技术。

媒体查询（Media Queries）

媒体查询允许开发者为不同的屏幕尺寸和设备特性创建不同的样式规则，是响应式设计的基础。

优势

网页的读者和作者都可以使用 CSS 来决定文件的颜色、字体、排版等显示特性。CSS 最主要的目的是将文件的内容与显示分隔开来。这有许多好处：

• 文件的可读性加强；
• 文件的结构更加灵活；
• 作者和读者可以自己决定文件的显示；
• 文件的结构简化了；

另外，在 HTML 中：

一个整个网站或其中一部分网页的显示信息被集中在一个地方，要改变它们很方便。不同的读者可以有不同的样式，比如有的读者需要字体比较大。HTML 文件本身的范围变小了，它的结构简单了，它不需要包含显示的信息。CSS 还可以控制其他参数，例如声音（假如浏览器有阅读功能的话）或给视障者用的感受装置。

缺点

CSS 很强大，但任何事物都有两面性，CSS 也有许多明显的缺点：

1. 浏览器不同的支持 浏览器对 CSS 的支持没有统一，造成不同的浏览器显示效果不同。例如在微软 Internet Explorer 的旧版本 6.0，有许多独有的 CSS 2.0 属性，但错误显示很多重要的属性，例如：width，height，和 float。许多 CSS 编写人员为了尽可能在常用的各个浏览器中达到一致的版面编排，要写很多针对各个浏览器的不同的 CSS 代码。当版面编排很复杂时，要在各个浏览器里获取相同效果是不可能的。
2. CSS 没有父选择器 CSS 选择器无法提供元素的继承性。先进的选择器（例如 XPath）有助于复杂的样式设计。然而，浏览器的性能和增加渲染的问题，关系着父层选择器，却是 CSS 的工作组拒绝建议的主要原因。而 CSS4 则计划包括类似功能。
3. 不能明确地指定继承性 样式的继承性，创建在浏览器中 DOM 元素的层级和具体的规则上。
4. 垂直控制的局限 元素的水平放置普遍地易于控制，垂直控制则不然。简单来说，垂直地围绕一个元素、页脚的放置不能高于可见视窗（viewport，视窗或屏幕的可见范围）的底部范围。这需要复杂的样式规则，或是规则简单，但不被广泛支持。
5. 没有算术功能 直至 CSS 2.1 的 CSS 没有办法明确简单地进行计算（例如：margin-left: 10% - 3em + 4px;）。计算功能在很多情况下都是非常有用的，例如：总字段中计算字段的尺寸限制。

总结

CSS 有助于实现负责任的 Web 设计。CSS 对开发者构建 Web 站点的影响很大，并且这种影响可能是无止境的。将网页的大部分甚至是全部的表示信息从（X）HTML 文件中移出，并将它们保留在一个样式表中有诸多优点，如降低文件大小、节省网络带宽以及易于维护等。此外，站点的表现信息和核心内容相分离，使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。

CSS 简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。只要修改保存着网站格式的 CSS 样式表文件就得以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。这就避免了一个个网页的修改，大大减少了工作量。