CSS 教程（2026 超详版）

CSS 是什么？

CSS，全称 “Cascading Style Sheet（层叠样式表）”，它是用来控制网页外观的一门技术。

CSS

从 HTML 的学习可知，前端最核心的 3 个技术是：HTML、CSS、JavaScript。它们之间的关系如下。

HTML：用于控制网页的结构。
CSS：用于控制网页的外观。
JavaScript：用于控制网页的行为。

在互联网发展的初期，网页都是使用 HTML 来做的，这样的页面可想而知会单调成什么样了。为了改造 HTML 标签的默认外观，使得页面变得更加美观，后来就引入了 CSS。

与直接在 HTML 中定义样式相比，CSS 具有以下优点：

结构与样式分离：CSS 可以将网页的样式定义与 HTML 结构分离，从而提高代码的可读性和可维护性。
提高开发效率：CSS 可以对多个元素应用相同的样式，从而避免编写重复的样式代码。
功能强大：CSS 提供了丰富的样式属性，可以实现各种复杂的页面效果，包括复杂布局、动画效果等。

CSS 语法

CSS 不是一门编程语言（如 C/C++、Java 等），而是一门描述性的语言。

语法：

选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;
    ...
}

说明：

其中，CSS 规则的每一部分说明如下。

选择器（Selector）：你想要操作的 HTML 元素。选择器可以是元素名、类名、ID 等。
属性名（Property）：需要修改的样式属性名，比如如 color（颜色）、font-size（字体大小）等。
属性值（Value）：设置的属性值，例如 red、16px 等。

下面我们来看一个简单的例子，让小伙伴们感性认识 CSS 是怎样的一个东西。

示例 1：简单的 CSS 效果

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        h1 { color: red; }
    </style>
</head>
<body>
    <h1>绿叶网</h1>
</body>
</html>

页面效果如下图所示。

CSS 示例

分析：

<style>
    h1 { color: red; }
</style>

CSS 代码需要在 style 标签内编写，h1 {color: red;} 表示选中 h1 标签，然后将其 color 定义为 red。

上面只是定义了一个简单的 CSS 样式。如果你的 CSS 技术比较扎实的话，还可以实现非常酷炫的效果，请看下面例子。

示例 2：酷炫的 CSS 效果

运行代码

<!DOCTYPE HTML>
<html>
<head>    
    <meta charset="utf-8">
    <title></title>
    <style>
		body{
            font-family: "微软雅黑";
            font-size: 30px;
            color: white;
            background-color:black;
            text-align: center;
		}
		h1 {
             /* 设置文字阴影 */
  			text-shadow: 0 0 20px #fefcc9,
            10px -10px 30px #feec85,
            -20px -20px 40px #ffae34,
            20px -40px 50px #ec760c,
            0 -80px 70px #f38e1c;
            /* 设置动画 */
   			animation: flame 2s infinite;
		}
        /* 创建动画 */
		@keyframes flame {
	   		0% {
	      		text-shadow: 0 0 20px #fefcc9,
	            10px -10px 30px #feec85,
	            -20px -20px 40px #ffae34,
	            20px -40px 50px #ec760c,
	            0 -80px 70px #f38e1c;
	   		}
   			30% {
      			text-shadow: 0 0 20px #fefcc9,
                10px -10px 30px #feec85,
                -20px -20px 40px #ffae34,
                20px -40px 50px #ec760c,
                10px -90px 80px #f38e1c;
   			}
   			60% {
      			text-shadow: 0 0 20px #fefcc9,
               	10px -10px 30px #feec85,
               	-20px -20px 40px #ffae34,
               	20px -40px 50px #ec760c,
               	0px -80px 100px #f38e1c;
   			}
   			100% {
      		   text-shadow: 0 0 20px #fefcc9,
               10px -10px 30px #feec85,
               -20px -20px 40px #ffae34,
               20px -40px 50px #ec760c,
               0 -80px 70px #f38e1c;
   			}
		}
    </style>
</head>
<body>
    <h1>绿叶网</h1>
</body>
</html>

页面效果如下图所示。

酷炫的 CSS 效果

分析：

上面是一个比较复杂的 CSS 效果，使用到了阴影效果、动画效果等。至于如何才能做出来，小伙伴们得把 CSS 基础打扎实了！

CSS vs CSS3

CSS 发展至今，历经 CSS1.0、CSS2.0、CSS2.1 以及 CSS3.0 几个版本。其中，CSS2.1 是 CSS2.0 的修订版，CSS3.0 是 CSS 的最新版本。

CSS3

很多初学者都有一个疑问：“现在都 CSS3 的时代了，CSS2 不是被淘汰了吗，为什么还要学 CSS2 呢？”

这是一种非常严重的误解，它曾经误导了大量的初学者。实际上，我们现在所说的 CSS3，一般指的是相对于 CSS2 “新增加的内容”，并不是说 CSS2 被淘汰了。

准确来说，你要学的 CSS 其实等于 CSS2 加上 CSS3。CSS3 在 CSS2 的基础上增加了许多新的特性，例如圆角、阴影、渐变、动画等。

CSS 参考手册

除了 CSS 教程之外，我们还为小伙伴提供超详细的 CSS 参考手册，包括：