1.1 什么是 CSS

CSS（Cascading Style Sheets，层叠样式表） 是一种用来描述网页文档外观和格式的语言。它与 HTML（超文本标记语言）和 JavaScript 一起构成了网页的核心技术栈。HTML 用来定义网页的结构和内容，JavaScript 用来处理页面上的交互和逻辑，而 CSS 则负责网页的样式和布局。

CSS 的主要功能包括：

定义页面元素的视觉样式：
- 通过 CSS，开发者可以为网页的文本、图片、按钮等元素指定字体、颜色、边距、背景、对齐方式等样式。
- 例如，设置字体的颜色、大小、行高，或设置页面背景颜色等。
控制网页的布局：
- CSS 使得网页元素的位置、大小、排列方式可以精确控制。通过 CSS 布局模型（如 Flexbox、Grid、浮动等），可以创建响应式和灵活的网页布局。
提供样式的层叠性：
- CSS 的“层叠”特性使得不同来源的样式规则可以组合在一起，最终决定某个元素的样式。
- CSS 规则的优先级（根据选择器的特性）决定了不同样式的应用顺序。
增强网页的可访问性和易用性：
- CSS 可以让网页适应不同设备和屏幕尺寸，支持响应式设计（通过媒体查询等）。
- 同时，CSS 也能通过控制颜色、对比度等来提升网页的可访问性，帮助不同需求的用户更好地浏览网站。

CSS 与 HTML 的关系

HTML 定义页面的结构（例如：文本、图片、链接、表单等）。
CSS 控制这些结构的展示方式，比如字体颜色、文本大小、元素间距、布局等。

例如，下面是一个简单的 HTML 文件，结合 CSS 来设置页面的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 示例</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333;
      text-align: center;
    }
    p {
      color: #555;
      font-size: 18px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>欢迎使用 CSS</h1>
  <p>这是一个包含简单 CSS 样式的网页。</p>
</body>
</html>

在这个示例中，CSS 被直接嵌入在 HTML 文档的 <style> 标签中，定义了 body、h1 和 p 元素的样式。

总结

CSS 是一种用于网页样式设计的强大语言，它能使开发者为 HTML 内容赋予美观和专业的外观，同时提供灵活的布局和响应式设计能力。理解 CSS 的基本原理是成为一名前端开发者的基础。

#前端开发分享于 2025-03-03

下一篇：1.2 CSS 的基本语法