CSS Active

万维网的发展得益于层叠样式表 (CSS)。自 20 世纪 90 年代末首次推出以来，CSS 一直在积极开发和采用，以改进网页的设计和布局。本书将深入探讨 CSS 的背景、现状和未来前景。

CSS 简介

什么是 CSS？

层叠样式表，也称为 CSS，是一种用于创建样式表的语言，用于描述文档在 HTML 或 XML 中的显示方式。CSS 规定了网页元素的显示方式，包括布局、颜色、字体和其他视觉特征。它使网页设计师和开发人员能够将网页的呈现与其结构和内容分离开来，从而鼓励更灵活、更易于维护的网页设计方法。

CSS 的发展

自创建以来，CSS 已经经历了多次改进。CSS 的发展可分为多个版本和规范，每个版本都包含新功能。下一节将探讨这一进程。

CSS 对 Web 开发的重要性

1. 分离关注点

关注点分离是 Web 开发的基本原则之一。CSS 在实现这一分离方面发挥着关键作用，它使网页设计师能够专注于表示层，而 Web 开发人员可以专注于网站的结构和功能。这种划分简化了维护，并促进了开发人员和设计师之间的协作。

2. 浏览器支持

在互联网的早期，要在不同浏览器中实现一致的设计并非易事。CSS 通过提供一种统一的网页布局方法，在解决此问题方面发挥了至关重要的作用。现代浏览器遵循 CSS 规范，这最大限度地减少了跨浏览器兼容性问题，并提高了 Web 创建的可访问性。

3. 移动优先设计和响应式设计

智能手机和平板电脑的出现使得响应式 Web 设计变得必不可少。网页设计师可以使用 CSS 和媒体查询来构建响应式布局，这些布局可以适应不同的屏幕尺寸。这种策略通常称为“移动优先设计”，它确保网站在台式机和移动设备上看起来都很棒，并且运行正常。

CSS 的版本和细节

1. CSS1

CSS1 是第一个官方 CSS 规范，于 1996 年 12 月发布。它提供了基本的样式功能，如文本对齐、字体设置和边距。CSS1 是一项重大进步，但缺少许多现代网页设计师必需的功能。

2. CSS2

CSS2 于 1998 年 5 月发布，极大地扩展了 CSS 的功能。它引入了 z-index 支持、绝对和相对定位以及打印样式支持等功能。CSS2 改进了表格处理，并能够更精确地管理元素。

3. CSS3

21 世纪初，CSS3 这一模块化且雄心勃勃的定义开始成形。CSS3 被分解为模块，每个模块处理不同的样式组件，而不是一个单一的整体规范。选择器、颜色、背景和边框以及过渡和动画是 CSS3 中的一些主要模块。CSS3 引入了圆角、渐变、阴影和其他现代设计元素。

4. CSS4 及更高版本

据我所知，截至 2021 年 9 月，CSS4 仍在开发中。CSS4 的目标是通过支持变量、嵌套和高级布局选项来进一步增强在线样式功能。此外，CSS 工作组一直在寻求新的增强功能和功能，以满足网页设计师和开发人员不断变化的需求。

CSS 的语法和选择器

简单的语法

CSS 的语法很简单，由属性-值对组成。下面是一个简单的示例

此示例中的“属性：值”对通过“选择器”定位 HTML 元素，并描述它们的样式设置方式。例如

此 CSS 代码将所有 `

` 元素的字体大小设置为 24 像素，文本颜色设置为蓝色（#0073e6）。

选择器

选择器是 CSS 的一个重要组成部分，因为它们指定了将应用哪些 HTML 元素样式。CSS 提供了各种选择器，从像 `h1` 这样的简单选择器到更复杂的属性选择器、伪类和伪元素。

• 元素选择器：按元素类型匹配 HTML 元素。例如，`p` 选择所有 `

  ` 元素。

• 类选择器：匹配具有特定 class 属性的元素。例如，`button` 选择所有 class 为“button”的元素。
• ID 选择器：匹配具有特定 ID 属性的单个元素。例如，`#header` 选择 ID 为“header”的元素。
• 通用选择器：选择页面上的所有元素。例如，`*` 选择所有元素。
• 属性选择器：选择具有特定属性值的元素。例如，`[type="text"]` 选择所有 type 为“text”的元素。

伪类和伪元素

使用伪类和伪元素，您可以根据项目在页面上的状态或位置来定位它们。

• 伪类：用于通过用户交互或元素状态选择元素。常用的示例有 `:hover`、`:active`、`:focus` 和 `:nth-child()`。
• 伪元素：它们针对元素的特定方面，例如段落的开头短语或字母。`::before`、`::after` 和 `::first-line` 是示例。

组合器

组合器定义选择器之间的关系。CSS 中提供了各种组合器

• 后代组合器（空格）：使用后代组合器（空格）选择特定元素的所有后代元素。例如，`ul li` 选择所有作为 `
  ` 元素子级的 `
  • ` 元素。
  • 子组合器（>）：选择特定元素的直接子元素。例如，`ul > li` 选择所有作为 `
    ` 元素的直接子级的 `li` 元素。
    • 相邻兄弟组合器（+）：使用相邻兄弟组合器（+）选择紧跟在给定元素后面的元素。例如，`h2 + p` 选择所有跟在 `

      ` 元素后面的 `

      ` 元素。

    • 通用兄弟组合器（~）：通用兄弟组合器（~）选择所有以给定元素为兄弟的元素。例如，`h2 ~ p` 选择所有作为 `

      ` 元素的兄弟的 `

      ` 元素。

    CSS 值和属性

    由于 CSS 提供了广泛的属性和值，网页设计师几乎可以控制网页外观的任何方面。以下是一些重要的 CSS 属性类别

    1. 颜色和背景

    • 颜色属性：CSS 包含 `color` 和 `background-color` 属性，可以使用各种颜色表示法（如命名颜色、十六进制值、RGB 和 HSL）来指定文本和背景颜色。
    • 背景属性：要设置元素的背景（包括图像和渐变），您可以调整 `background-image`、`background-size` 和 `background-repeat` 等背景属性。

    2. 排版

    • 字体属性：使用 `font-family`、`font-size`、`font-weight`、`font-style` 和 `font-variant` 等属性，CSS 使您能够指定字体系列、大小、粗细、样式和变体。
    • 文本属性：文本的外观和对齐由 `color`、`line-height`、`text-align` 和 `text-decoration` 等因素控制。

    3. 布局

    • 盒模型：页面上元素的大小和间距由盒模型属性确定，包括 `margin`、`border`、`padding` 和 `width`/`height`。
    • 定位：元素的静态、相对、绝对和固定定位都由 `position`、`top`、`right`、`bottom` 和 `left` 等 CSS 属性控制。
    • 显示：`display` 属性的值（如 `block`、`inline`、`inline-block` 和 `none`）决定了元素的显示方式。
    • Flexbox：CSS 开发了 Flexbox 布局模型，实现了灵活高效的布局。Flexbox 布局使用 `display: flex`、`flex-direction` 和 `justify-content` 等属性。
    • Grid 布局：CSS 中包含的另一种强大的布局方法是 Grid 布局。它提供了 `display: grid`、`grid-template-columns` 和 `grid-gap` 等选项，用于创建复杂的基于网格的布局。

    4. 过渡和动画

    • 过渡：CSS 过渡允许在预定时间内平滑地更改属性值。过渡行为由 `transition-property`、`transition-duration` 和 `transition-timing-function` 等属性控制。
    • 动画：CSS 动画使您可以更精细地控制元素动画。`animation-name`、`animation-duration`、`animation-timing-function` 和关键帧等属性使得复杂的动画成为可能。

    使用 CSS 进行响应式 Web 设计

    媒体查询

    响应式 Web 设计的关键组成部分是媒体查询。它们使您能够根据用户设备的规格（例如屏幕宽度、高度和方向）应用 CSS 样式。例如，对于较小的屏幕，您可以调整布局或使用媒体查询更改字体大小。

    这是基本媒体查询的一个示例

    @media (max-width: 768px) { /* CSS rules for screens with a width of 768 pixels or less */ body { font-size: 16px; } }

    对于宽度小于或等于 768 像素的屏幕，此媒体查询将文本大小减小到 16 像素。

    Grid 和 Flexbox 布局

    Grid 布局和 Flexbox 是创建响应式设计的有效工具。您可以使用它们来创建灵活的、基于网格的布局，这些布局可以自动适应不同的屏幕尺寸。

    Flexbox 非常适合设计导航菜单、卡片布局和其他布局，因为它可以在一个维度（水平或垂直）上排列元素。另一方面，Grid 布局非常适合具有行和列的二维布局，使其适用于复杂的网格结构。

    这是一个简单的 Flexbox 布局示例

    .container { display: flex; justify-content: space-between; } .item { flex: 1; margin: 10px; }

    在此示例中，`.container` 元素使用 Flexbox 以相等的间距排列其子元素。

    CSS 库和框架

    Web 开发人员经常使用 CSS 框架和库来加速创建灵活设计的进程。这些预先组装的 CSS 组件和样式集合为创建网站和在线应用程序提供了强大的框架。

    一些著名的 CSS 框架包括 Bulma、Foundation 和 Bootstrap。这些框架提供了各种响应式排版、网格系统和用户界面元素，可以根据特定的项目需求进行定制。

    CSS 预处理器和后处理器

    CSS 后处理器和预处理器可以提高开发工作流程，并允许更高级别的 CSS 创建。它们引入了增加标准 CSS 范围的方法和功能。

    Sass

    Sass（句法上有吸引力的样式表）是其中最受欢迎的 CSS 预处理器之一。它提供了使 CSS 代码更具可重用性和可维护性的功能，例如变量、嵌套、混合宏和函数。Sass 代码在编译成标准 CSS 时，会写入 `.scss` 或 `.sass` 文件中。

    例如，在 Sass 代码中使用变量

    $primary-color: #0073e6; .button { background-color: $primary-color; color: white; }

    较少

    Less 是另一个 CSS 预处理器，具有变量、混合宏和函数等功能。由于 Less 使用与 CSS 类似的语法，因此开发人员可以轻松地从传统 CSS 切换到 Less。

    这是一个基础的 Less 示例

    @primary-color: #0073e6; .button { background-color: @primary-color; color: white; }

    PostCSS

    Sass 和 Less 等预处理器扩展了 CSS 的功能，而 PostCSS 则采取了不同的方法。它作为一个后处理器来处理普通 CSS，使开发人员能够将不同的转换、优化和插件添加到他们的样式表中。PostCSS 因自动前缀、最小化和自定义 CSS 修改等任务而越来越受欢迎。

    现代 Web 开发中的 CSS

    CSS 与 JavaScript (JS)

    在现代 Web 开发中，CSS-in-JS 是一种新颖的样式维护方法。开发人员使用 JavaScript 代码创建样式，而不是创建单独的 CSS 文件。这种方法的优点包括作用域样式、更快的性能以及与 React 等基于组件的框架更好的互操作性。

    Styled-components、Emotion 和 JSS 是一些著名的 CSS-in-JS 框架。

    基于组件的 CSS

    随着 React、Vue.js 和 Angular 等基于组件的框架的普及，CSS 越来越多地被限制在单个组件内。这种方法促进了样式的封装和重用。基于组件的 CSS 使开发人员能够创建自包含的、带样式的组件，这些组件可以在应用程序的不同部分轻松重用。这是一个使用 Styled-components 的带样式的 React 组件示例

    import styled from 'styled-components'; const Button = styled.button` background-color: #0073e6; color: white; padding: 10px 20px; border: none; border-radius: 5px; `; // Usage <Button>Click me</Button>

    CSS 和性能优化要求

    现代 Web 创建必须考虑 Web 性能。使用关键 CSS（它限制了用于呈现网页可见部分的 CSS 的交付）是一种优化策略。通过这样做，可以减少页面加载时间，并改善用户体验。

    开发人员可以使用 CriticalCSS 和 PostCSS-purgecss 等工具为他们的网页提取和优化关键 CSS。

    CSS 的未来方向和挑战

    Web 组件

    Web Components 是一组 Web 平台 API 和技术，它使开发人员能够构建可重用的自定义 HTML 元素。这些组件结合了功能和样式，因此是可重用和可组合的。预计 Web Components 在未来几年将会增加，而 CSS 对于为它们设置样式至关重要。

    自定义 CSS 属性（变量）

    开发人员可以使用 CSS 自定义属性（也称为 CSS 变量）来构建可重用的 CSS 值，这些值可以在整个样式表中快速更新和应用。它们为 CSS 提供了一定程度的动态行为，使其能够响应用户交互或应用程序设置来更改样式。

    (CSS-in-Wasm) CSS-in-WebAssembly

    随着 WebAssembly (Wasm) 的引入，现在有比以往更多的选项来扩展和改进浏览器中的 CSS 处理。CSS-in-Wasm 项目旨在利用 WebAssembly 的速度和灵活性来快速执行复杂的 CSS 任务，从而有可能提高 Web 性能。

    结论

    自 20 世纪 90 年代末诞生以来，层叠样式表 (CSS) 已经取得了长足的进步。它们已经发展到适应现代 Web 开发的需求，提供了用于创建灵活、可扩展且高效的 Web 设计的方法和工具。

    随着 Web 技术的不断发展，CSS 将继续成为 Web 开发的关键组成部分，并发展以适应万维网不断变化的环境中的新机遇和挑战。在 21 世纪，无论是通过 CSS-in-JS 等前沿方法，还是通过采用 Web Components 等新兴标准，CSS 都将继续影响我们设计和样式化数字内容的方式。

    ---

    下一主题使用 CSS 在图像上添加文本
    
    
    
    ← 上一篇 下一篇 →