跳转至

3.0 CSS

Purpose of CSS

CSS（Cascading Style Sheets）是一种用于 Web 的样式表语言。它的主要目的是指定标记语言（如 HTML 或任何 XML 文档）的呈现（布局和样式）。通过使用 CSS，可以将内容的呈现与内容本身分离开来。它取代了许多将呈现与内容混合在一起的 HTML 属性。

Advantages of separating CSS from HTML

将 CSS 与 HTML 分离带来许多优势:

  • Speed（速度）: 样式表只需下载一次，而不是每页都下载（如果内容和样式信息混合在一起）。
  • Maintainability（可维护性）: 可以“集中”维护，更容易更新。
  • Accessibility（可访问性）: 页面在不同的浏览器和设备上显示相似。
  • Portability（可移植性）: 在所有支持浏览器的设备上保持一致的样式。
  • Reduced work（减少工作量）: 例如，不必为每个元素指定对齐方式。
  • Consistency（一致性）: 可以使组织的网页具有一致的“外观和感觉”，与企业形象和品牌匹配。

Different ways of specifying styles

有三种级别的样式表:

  1. Inline styles（内联样式）: 应用于单个标签。样式规范作为 style 属性的值出现在几乎任何标签中。形式为 style="property_1: value_1; property_2: value_2; …"。警告：内联样式违背了样式表的统一样式目的，仅用于调试，不宜多用。
  2. Document style sheets（文档样式表）: 出现在文档的 <head> 元素中，应用于整个文档。样式规范是一系列规则，是 <style> 标签的内容，包含在文档 <head> 中。形式为 <style> rule1 rule2 ... </style>。
  3. External style sheets（外部样式表）: 是独立的文件，可以位于互联网上的任何服务器上，并可以通过文档的 <head> 元素应用于任意数量的文档。使用 <head> 中的 <link> 标签来指定浏览器获取并使用外部样式表文件。形式为 <link rel="stylesheet” type="text/css” href="http://tiny.url/some.css"> </link>。其格式与文档级样式表的 <style> 标签内容相同。

The purpose of the different selectors and common styles

CSS selectors

Selector（选择器）决定了样式应用于哪些元素。选择器的目的是精确地匹配 HTML 文档中的特定元素，以便应用样式。有基本的选择器类型和组合器。

Basic selectors（基本选择器）基于一个特定标准进行选择:

  • Universal selector *: 匹配所有元素。
  • Element selector element: 匹配特定类型的元素。例如，p 匹配所有 <p> 元素。
  • Attribute selector [attribute=value]: 匹配具有指定属性和值的任何元素。值可以省略，以选择具有该属性（任何值）的元素。
  • Class selector .class: 允许对一组元素进行分组。通过 class 特殊属性设置类。例如，.important 匹配具有 class="important" 的元素。
  • ID selector #id: 选择具有特殊 id 属性的元素。与 class 不同，每个 id 值在文档中只能出现一次。例如，#heading1 匹配具有 id="heading1" 的元素。
  • Pseudo-class selector :state: 允许根据元素的状态（例如 hover 悬停、focus 聚焦、valid 有效、visited 已访问）选择元素。例如，p:hover 匹配鼠标悬停在其上的段落元素。
  • Pseudo-element selector ::pseudo-element: 允许对元素的特定部分（例如 first-line 第一行、first-letter 第一个字母、backdrop 背景）进行样式设置。例如，p::first-letter 匹配每个段落元素的第一个字母。

Selector combinators（选择器组合器）允许将多个标准组合在一起:

  • Group selector s1, s2, s3: 充当逻辑“或”，将样式应用于匹配 s1 或 s2 或 s3 的元素。例如，h2, b 匹配所有 <h2> 元素和 <b> 元素。
  • Descendant selector s1 s2: 选择树中位于匹配 s1 的元素下面的所有匹配 s2 的元素。例如，p b 匹配所有位于 <p> 元素下面的 <b> 元素。
  • Direct descendant selector s1 > s2: 选择树中直接位于匹配 s1 的元素下面的所有匹配 s2 的元素。例如，p > b 匹配所有直接位于 <p> 元素下面的 <b> 元素。
  • Sibling selector s1 ~ s2: 选择树中与匹配 s1 的元素共享同一父元素的所有匹配 s2 的元素。例如，h1 ~ h2 匹配位于 <h1> 元素之后（在同一父元素下）的所有 <h2> 元素。
  • Direct sibling selector s1 + s2: 选择树中紧接在匹配 s1 的元素之后（在同一父元素下）的第一个匹配 s2 的元素。例如，h1 + h2 匹配紧接在 <h1> 元素之后（在同一父元素下）的第一个 <h2> 元素。

编写能够扩展到大型网页且不会冲突的 CSS 选择器集合是一项技能。

Common styles

CSS 有非常多的属性，并且列表持续增长。来源中提到了一些将涵盖的基本属性组:

  • Text（文本）属性: 例如 font-size 字体大小、font-style 字体样式、font-weight 字体粗细、font 字体（简写）、text-decoration 文本修饰、letter-spacing 字母间距、text-indent 文本缩进、text-align 文本对齐。
  • Background（背景）属性: 来源未详细展开。
  • Borders（边框）属性: 例如 border-style 边框样式、border-width 边框宽度、border-color 边框颜色。
  • The box model（盒模型）属性: 包括 margin 外边距、border 边框、padding 内边距、width 宽度、height 高度。
  • Colors（颜色）属性: color 属性指定元素的前景色。颜色可以通过预定义的名称或十六进制值指定。
  • Tables（表格）属性: 来源未详细展开。
  • Lists（列表）属性: 例如 list-style-type 列表项标记类型。

Conflict resolution and precedence rules in CSS

一个元素可能成为多个规则的对象。这通常是不可避免的，因为您的页面通常会包含多个具有冲突定义的样式表。这些样式表可能来自不同的来源:

  • User style sheets（用户样式表）: 用户通过浏览器设置编写的样式表。
  • Author style sheets（作者样式表）: 开发者使用的样式表。
  • User agent style sheets（用户代理样式表）: 浏览器提供的默认样式表。

CSS 通过 conflict resolution（冲突解决）机制来确定最终应用的样式。简化的优先级规则如下:

  1. First break ties by origin and importance

（首先根据来源和重要性打破僵局）:

  • Transition declarations (用于动画，不涵盖)
  • Important user agent declarations (重要的用户代理声明)
  • Important user declarations (重要的用户声明)
  • Important author declarations (重要的作者声明)
  • Normal author declarations (正常的作者声明)
  • Normal user declarations (正常的用户声明)
  • Normal user agent declarations (正常的用户代理声明) CSS priority can be overridden by the !important modifier（CSS 优先级可以通过 !important 修饰符覆盖）。
  1. If still tied, then judge on specificity

（如果仍然僵持，则根据特异性判断）:

Inline styles > style sheet styles

（内联样式 > 样式表样式）。然后按照选择器中以下各项的数量来确定特异性，数量越多，特异性越高（从高到低）:

  • Number of IDs in selector (选择器中的 ID 数量)
  • Number of classes, attributes and pseudo-classes in selector (选择器中的 class、属性和伪类数量)
  • Number of type and pseudo-elements in selector (选择器中的类型和伪元素数量)
  1. If still tied, then choose whichever selector appears last（如果仍然僵持，则选择最后出现的选择器）。

完整的规则可以在 W3C 规范中找到。

Box model

The box model（盒模型）是 CSS 布局的核心概念。每个元素基本上都按照四个框来布局。它用于控制元素在页面上的间距和边框。 这四个部分（从内到外）是:

  1. Content（内容）: 元素实际渲染的地方。
  2. Padding（内边距）: 元素边框和内容之间的空间。内边距始终是透明的。可以使用 padding, padding-left, padding-top 等属性设置大小。
  3. Border（边框）: 位于内边距和外边距之间。可以使用 border-style, border-width, border-color 等属性设置。
  4. Margin（外边距）: 元素边框与其相邻元素之间的空间。外边距始终是透明的。可以使用 margin, margin-left, margin-top 等属性设置大小。

计算元素的总宽度和高度时，必须包含内边距和边框。外边距也会影响框在页面上占用的总空间，但外边距不包含在框的实际尺寸中。框的总宽度和高度在边框处停止。

Document flow model

默认情况下，元素按照文档的 normal flow（正常流）布局。它们按照声明的顺序在页面上顺序显示，一个在另一个上面。

有三种方法可以覆盖正常流:

  1. The float property（浮动属性）: 元素按照正常流布局，然后被移动到前一个元素的左侧或右侧。有 none（默认）、left、right、inherit 四个值。例如，用于使图像和文本在同一行。

  2. The position property（定位属性）使用 

top
left
right
bottom

等偏移属性。有五个值:
  • static（静态）: 默认值，遵循正常流。
  • relative（相对）: 元素相对于其正常流位置进行偏移，但元素不从正常流中移除。
  • absolute（绝对）: 元素相对于其最近的已定位祖先元素进行偏移。元素完全从正常流中移除。
  • fixed（固定）: 元素相对于固定的视口进行偏移。元素完全从正常流中移除。
  • sticky（粘性）: 根据滚动位置在 relative 和 fixed 之间切换。
  1. The display property（显示属性）: 决定元素在正常流中的处理方式。有大约 20 种可能的值，如 block、inline、flex、grid、inline-flex 等。

手动使用原生 CSS 布局网页很困难，尤其是需要考虑不同屏幕尺寸下的响应式布局。更可扩展的方式是使用 CSS framework（框架），它们是 CSS 代码库，可以帮助快速构建视觉吸引人且响应式的网站。

您将被期望能够阅读和修改 CSS 代码，但不会被要求编写 CSS 代码 [Query]。