CSS 简介

CSS（Cascading Style Sheets，层叠样式表）是用于描述网页如何显示的语言：它能控制文字的颜色、大小、背景、间距、排版乃至动画。HTML 负责内容和结构，CSS 负责外观和表现，两者配合才能做出美观的网页。CSS 规则简单、上手快，是每一位前端开发者的必修课。

CSS 是什么

• HTML：网页的"骨架"，负责内容，比如标题、段落、图片、链接。
• CSS：网页的"皮肤"，负责外观，比如颜色、字体、边框、布局。
• CSS 不能独立运行，必须配合 HTML 使用：先"选中"某个元素，再给它套上样式。

可以这样理解：同样一份 HTML，套上不同的 CSS，就能呈现完全不同的视觉效果。

第一个例子

下面这段 CSS 让所有一级标题变红并居中：

h1 {
    color: red;          /* 文字颜色设为红色 */
    text-align: center;  /* 文本水平居中 */
}

对应的 HTML 结构：

<h1>你好，CSS！</h1>

效果说明：浏览器读到上述规则后，页面中每个 h1 标题都会显示为红色、居中。规则由"选择器 h1"和花括号内的若干条"声明"组成。

CSS 能做什么

• 文本：颜色、字号、字体、对齐、行高、文字阴影。
• 背景：背景颜色、背景图片、渐变背景。
• 盒模型：边框、内边距、外边距，控制元素的大小与间距。
• 布局：浮动、定位、弹性布局 flex、网格布局 grid。
• 特效：圆角、过渡、2D/3D 变换、动画。
• 响应式：通过媒体查询让页面适配手机、平板、电脑等屏幕。

三种书写方式（预览）

• 外部样式表：写在独立的 .css 文件里，用 <link> 引入，最推荐。
• 内部样式表：写在 HTML 的 <style> 标签内，只影响当前页面。
• 内联样式：写在标签的 style 属性里，优先级最高，但不便复用。

三种方式的详细写法在《CSS 创建》一节中会展开讲解。

CSS 的发展

CSS1 奠定了颜色、字体等基础能力；CSS2 加入了定位和媒体类型；CSS3 开始"模块化"演进，引入了圆角、渐变、动画、flex、grid 等现代特性。如今我们常说的 CSS 基本指 CSS3 及之后的版本，主流浏览器均已良好支持。

小结

CSS 是负责网页外观的"层叠样式表"，与 HTML 分工明确。抓住"选择器 + 声明"这一基本规则，配合动手练习，就能一步步把网页装扮得美观又专业。