CSS 入门教程系列

本教程是 CSS 的完整 12 篇入门系列,参考 runoob.com/css3/ 的结构,面向零基础初学者。从 CSS 是什么、语法和选择器一路讲到 Flex/Grid 布局、响应式和 CSS 变量,每一篇都配有可直接复制运行的代码示例。

CSS(Cascading Style Sheets,层叠样式表)是给网页"化妆"的语言。HTML 决定页面有什么内容,CSS 决定这些内容长什么样——颜色、字号、间距、布局、动画,全都由它说了算。同一个 HTML,换一套 CSS,可以做出极简、科技、复古、可爱等截然不同的风格。

先看一段 CSS 长什么样

下面是一段给按钮加样式的 CSS,先感受一下它的写法:

/* 一段最简单的 CSS */
.btn {
  background: #4f8cff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background .2s;
}
.btn:hover {
  background: #3a78e0;
}

全部 12 篇子教程

建议按顺序学习,每天 1~2 篇,一周多即可入门。每篇都包含概念讲解 + 代码示例 + 常见坑。

CSS 简介 — 历史、作用、和 HTML 的关系
CSS 语法与引入方式 — 规则结构、注释、三种引入
CSS 选择器 — 标签、类、ID、伪类、伪元素、优先级
CSS 盒模型 — content、padding、border、margin
CSS 文本与字体 — font-family、字号、行高、对齐
CSS 颜色与背景 — hex、rgb、hsl、渐变
CSS Flexbox 弹性布局 — 一维布局神器
CSS Grid 网格布局 — 二维整页布局
CSS 定位 — static、relative、absolute、fixed、sticky
CSS 过渡与动画 — transition、transform、keyframes
CSS 响应式设计 — 媒体查询、移动优先
CSS 变量 — 自定义属性、主题切换

开始学习

准备好了吗?从第一篇开始 → CSS 简介

✈️💬

CSS 入门教程系列

先看一段 CSS 长什么样

全部 12 篇子教程

推荐学习路径

开始学习