CSS 基础入门教程 2026 | 零基础小白学样式

CSS 基础入门教程

HTML 搭好了网页骨架，但页面看起来光秃秃的——没颜色、没字体、没排版。CSS 就是来给网页「化妆」的！这篇教程用大白话带你从零掌握 CSS 的核心基础。

一、CSS 是什么？

1.1 通俗理解

想象一个人：

HTML = 人的身体骨架（头、手、脚）
CSS = 人的衣服、发型、化妆（好不好看全靠它）

一句话总结：CSS 就是给网页「穿衣服、化妆」的语言。

1.2 CSS 长什么样？

css

h1 {
  color: red;
  font-size: 32px;
}

逐行解读：

h1 = 选择器：我要给谁化妆？（这里是所有 <h1> 标签）
{ } = 花括号：化妆的详细内容写在这里面
color: red; = 属性: 值;：把文字颜色设成红色
font-size: 32px; = 把字体大小设成 32 像素
每条规则结尾必须有分号 ;

1.3 怎么把 CSS 用到 HTML 上？

有三种方式（推荐程度从高到低）：

方式 1：外部文件（最推荐）

html

<!-- HTML 文件 -->
<link rel="stylesheet" href="style.css">

css

/* style.css 文件 */
h1 {
  color: red;
}

💡 实际开发都用这种：CSS 单独写在 .css 文件里，HTML 用 <link> 引入。

方式 2：<style> 标签

html

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

方式 3：行内样式（不推荐）

html

<h1 style="color: red;">标题</h1>

💡 新手记住：用方式 1（外部文件），CSS 和 HTML 分开写，代码最清晰。

二、选择器（给谁化妆？）

选择器是 CSS 的核心——它决定「这条样式作用于谁」。

2.1 标签选择器

直接写标签名，作用于所有该标签：

css

p {
  color: #333;        /* 所有段落文字变深灰色 */
  line-height: 1.6;   /* 行高 1.6 倍 */
}

a {
  color: blue;        /* 所有链接变蓝色 */
  text-decoration: none;  /* 去掉下划线 */
}

2.2 class 选择器（最常用！）

用 . 加类名，作用于所有带有该 class 的元素：

html

<p class="highlight">这段是高亮的</p>
<p>这段是普通的</p>
<div class="highlight">这个也是高亮的</div>

css

.highlight {
  background-color: yellow;
  font-weight: bold;
}

💡 class 的特点：
同一个 class 可以给多个元素用
一个元素可以有多个 class（用空格分隔）：class="box card active"
class 名用驼峰命名或短横线命名：userCard 或 user-card

2.3 id 选择器

用 # 加 id 名，作用于唯一一个元素：

html

<div id="header">页头</div>

css

#header {
  background: #1a1a2e;
  color: white;
  height: 60px;
}

💡 id vs class：
id 像身份证号：全国唯一，一个人只能有一个
class 像职业：可以很多人都是「老师」，一个人可以同时是「老师」和「作家」
优先级：#id > .class > 标签名
日常开发默认用 class，只在需要唯一标识时用 id

2.4 组合选择器

css

/* 后代选择器：div 里面所有的 p */
div p {
  color: gray;
}

/* 直接子元素选择器：div 的直接子级 p（不包含更深层） */
div > p {
  color: red;
}

/* 同时给多个选择器相同的样式（用逗号分隔） */
h1, h2, h3 {
  color: #333;
}

/* 既是 .box 又是 .active 的元素 */
.box.active {
  border-color: green;
}

/* 紧跟在 h1 后面的 p */
h1 + p {
  font-size: 18px;
}

2.5 伪类选择器

伪类用 : 表示元素的某种状态：

css

/* 鼠标悬停时 */
a:hover {
  color: red;
}

/* 输入框获得焦点时 */
input:focus {
  border-color: blue;
  outline: none;
}

/* 第一个子元素 */
li:first-child {
  font-weight: bold;
}

/* 最后一个子元素 */
li:last-child {
  border-bottom: none;
}

/* 第 n 个子元素 */
li:nth-child(2) {
  color: blue;
}

/* 偶数行（隔行变色） */
tr:nth-child(even) {
  background: #f5f5f5;
}

💡 最常用的伪类：
:hover — 鼠标放上去时（按钮变色、菜单展开）
:focus — 输入框被点击时（高亮边框）
:nth-child(even) / :nth-child(odd) — 表格隔行变色

2.6 选择器速查表

选择器	例子	含义
标签	`p`	所有 `<p>` 标签
class	`.box`	所有 `class="box"` 的元素
id	`#header`	`id="header"` 的元素
后代	`div p`	`<div>` 里面的所有 `<p>`
子元素	`div > p`	`<div>` 的直接子级 `<p>`
多选	`h1, h2`	同时选 `<h1>` 和 `<h2>`
伪类	`a:hover`	鼠标悬停时的 `<a>`

三、颜色和字体

3.1 颜色的写法

CSS 里有多种表示颜色的方式：

css

/* 1. 颜色名（简单但选择有限） */
color: red;
color: blue;
color: transparent;  /* 透明 */

/* 2. 十六进制（最常用！） */
color: #333333;   /* 深灰色 */
color: #ff0000;   /* 红色 */
color: #f00;      /* 红色简写（每位重复可缩写） */
color: #4a90d9;   /* 蓝色 */

/* 3. RGB */
color: rgb(255, 0, 0);        /* 红色 */
color: rgb(74, 144, 217);     /* 蓝色 */

/* 4. RGBA（带透明度，A=Alpha 0~1） */
color: rgba(0, 0, 0, 0.5);    /* 半透明黑色 */
background: rgba(255, 255, 255, 0.8);  /* 半透明白色背景 */

/* 5. HSL（色相、饱和度、亮度） */
color: hsl(210, 65%, 55%);  /* 蓝色 */
color: hsla(0, 100%, 50%, 0.3);  /* 半透明红色 */

💡 新手记住：
日常用十六进制 #4a90d9 最多
需要透明度时用 rgba()
#333 是深灰色，#666 中灰色，#999 浅灰色，#fff 白色，#000 黑色

3.2 字体属性

css

p {
  /* 字体大小 */
  font-size: 16px;          /* 像素（最常用） */
  font-size: 1.2rem;        /* 相对于根元素字体大小 */
  font-size: 1em;           /* 相对于父元素字体大小 */

  /* 字体粗细 */
  font-weight: normal;      /* 正常（400） */
  font-weight: bold;        /* 加粗（700） */
  font-weight: 300;         /* 更细 */
  font-weight: 600;         /* 中等粗 */

  /* 字体族（字体类型） */
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;

  /* 字体样式 */
  font-style: italic;       /* 斜体 */
  font-style: normal;       /* 正常 */

  /* 行高（行间距） */
  line-height: 1.6;         /* 1.6 倍字体大小（推荐） */
  line-height: 24px;        /* 固定 24px */

  /* 文字对齐 */
  text-align: left;         /* 左对齐（默认） */
  text-align: center;       /* 居中 */
  text-align: right;        /* 右对齐 */

  /* 文字修饰 */
  text-decoration: none;         /* 去掉下划线 */
  text-decoration: underline;    /* 加下划线 */
  text-decoration: line-through; /* 删除线 */

  /* 字母间距 */
  letter-spacing: 2px;      /* 字母间距 2px */
  word-spacing: 4px;        /* 单词间距 4px */
}

💡 中文字体推荐：
css
font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
这样写 Mac 用苹方、Windows 用微软雅黑，兼容性最好。

3.3 文字溢出处理

css

/* 单行省略号（超出一行显示...） */
.ellipsis {
  white-space: nowrap;       /* 不换行 */
  overflow: hidden;          /* 超出隐藏 */
  text-overflow: ellipsis;   /* 显示省略号 */
}

/* 多行省略号（比如最多 2 行） */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;     /* 最多 2 行 */
  overflow: hidden;
}

💡 这两个是超常用的！任何卡片标题、列表项描述都可能用到。

四、盒模型（CSS 最重要的概念！）

4.1 什么是盒模型？

每个 HTML 元素都是一个「盒子」，由 4 层组成：

┌─────────────────────────────────┐
│           margin（外边距）        │  ← 和其他盒子的距离
│  ┌───────────────────────────┐  │
│  │       border（边框）        │  │  ← 盒子的边框线
│  │  ┌─────────────────────┐  │  │
│  │  │   padding（内边距）   │  │  │  ← 内容到边框的距离
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content      │  │  │  │  ← 实际内容（文字/图片）
│  │  │  │   （内容区）     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

大白话：

content = 盒子里面装的东西
padding = 盒子里的泡沫垫（东西到盒子壁的距离）
border = 盒子的墙壁厚度
margin = 这个盒子和其他盒子之间的距离

4.2 宽度和高度

css

.box {
  width: 300px;       /* 内容区宽度 */
  height: 200px;      /* 内容区高度 */

  /* 也可以用百分比（相对于父元素） */
  width: 50%;
  width: 100%;

  /* 最小/最大宽度（响应式常用） */
  max-width: 1200px;  /* 最大不超过 1200px */
  min-width: 320px;   /* 最小不低于 320px */
}

4.3 内边距 padding

css

.box {
  /* 四个方向一样 */
  padding: 20px;

  /* 上下 10px，左右 20px */
  padding: 10px 20px;

  /* 上 10px，右 20px，下 30px，左 40px（顺时针！） */
  padding: 10px 20px 30px 40px;

  /* 单独设置某个方向 */
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

💡 顺时针记忆法：padding: 上右下左;（从上面开始顺时针转一圈）

4.4 外边距 margin

语法和 padding 完全一样：

css

.box {
  margin: 20px;              /* 四周 20px */
  margin: 10px 20px;         /* 上下 10px，左右 20px */
  margin: 10px 20px 30px 40px;  /* 上 右 下 左 */

  /* 水平居中（经典！） */
  margin: 0 auto;            /* 上下 0，左右自动（居中） */

  /* 单独设置 */
  margin-top: 20px;
  margin-bottom: 30px;
}

💡 块级元素水平居中：margin: 0 auto; + 必须有 width。这是最经典的居中方式之一。

4.5 边框 border

css

.box {
  /* 完整写法：宽度 样式 颜色 */
  border: 1px solid #ddd;       /* 1像素实线灰色边框 */

  /* 单独设置某一边 */
  border-bottom: 2px solid red;  /* 只有底部边框 */
  border-top: none;              /* 去掉顶部边框 */

  /* 边框样式 */
  border: 1px solid #333;    /* 实线 */
  border: 1px dashed #333;   /* 虚线 */
  border: 1px dotted #333;   /* 点线 */
  border: 3px double #333;   /* 双线 */
}

/* 圆角 */
.card {
  border-radius: 8px;         /* 四个角都是 8px 圆角 */
  border-radius: 50%;         /* 圆形（如果是正方形） */
  border-radius: 10px 5px;    /* 左上右下 10px，右上左下 5px */
}

4.6 box-sizing（必设！）

默认情况下，设置了 width 后再加 padding 和 border，盒子会变得更大：

css

/* 默认（content-box）：实际宽度 = width + padding + border */
.box {
  width: 300px;
  padding: 20px;       /* 左右各加 20px */
  border: 1px;         /* 左右各加 1px */
  /* 实际宽度变成了 342px！ */
}

这会让布局计算变得很痛苦。解决方案：

css

/* 改成 border-box：width 包含 padding 和 border */
.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px;
  /* 实际宽度还是 300px！ */
}

/* 全局设置（每个项目都要加！） */
* {
  box-sizing: border-box;
}

💡 新手铁律：每个项目的第一行 CSS 都应该写 * { box-sizing: border-box; }。这能省掉无数布局计算的麻烦。

4.7 margin 塌陷问题

css

/* 问题：两个上下相邻的元素，上面的 margin-bottom 和下面的 margin-top 会合并 */
.box-a {
  margin-bottom: 30px;
}
.box-b {
  margin-top: 20px;
}
/* 两个盒子之间的间距是 30px，不是 50px！（取较大值） */

/* 解决方案：只写一个方向的 margin */
.box-a {
  margin-bottom: 30px;
}
.box-b {
  margin-top: 0;  /* 不写 margin-top */
}

💡 新手注意：上下 margin 会合并，左右不会。如果间距不对，先检查是不是 margin 塌陷了。

五、背景

5.1 背景色

css

.box {
  background-color: #f5f5f5;     /* 浅灰色背景 */
  background-color: rgba(0,0,0,0.5);  /* 半透明黑色 */
}

5.2 背景图

css

.banner {
  /* 背景图 */
  background-image: url('banner.jpg');

  /* 不重复 */
  background-repeat: no-repeat;

  /* 覆盖整个容器（最常用） */
  background-size: cover;

  /* 图片居中 */
  background-position: center;

  /* 固定背景（滚动时不动） */
  background-attachment: fixed;
}

/* 简写（推荐） */
.banner {
  background: url('banner.jpg') no-repeat center / cover;
}

💡 background-size 常用值：
cover：图片等比放大，填满容器（可能裁切）
contain：图片完整显示，可能留白
100% 100%：拉伸填满（可能变形）

5.3 渐变背景

css

/* 线性渐变 */
.gradient-box {
  background: linear-gradient(to right, #667eea, #764ba2);
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  background: linear-gradient(to bottom, #4facfe 0%, #00f2fe 100%);
}

/* 径向渐变（从中心向外） */
.radial-box {
  background: radial-gradient(circle, #ff9a9e, #fad0c4);
}

六、显示与隐藏

6.1 display

css

/* 隐藏元素（完全消失，不占空间） */
.hidden {
  display: none;
}

/* 块级元素（独占一行） */
.block {
  display: block;
}

/* 行内元素（不换行） */
.inline {
  display: inline;
}

/* 行内块（不换行，但可以设宽高） */
.inline-block {
  display: inline-block;
}

display 值	是否独占一行	能否设宽高	代表标签
`block`	是	可以	div, p, h1
`inline`	否	不可以	span, a, strong
`inline-block`	否	可以	img, input
`none`	消失	—	—

6.2 visibility vs display

css

/* display: none — 完全消失，不占空间 */
.removed {
  display: none;
}

/* visibility: hidden — 隐藏，但占空间（像隐身了） */
.invisible {
  visibility: hidden;
}

💡 区别：
display: none = 人走了，座位也没了
visibility: hidden = 人隐身了，座位还在

6.3 opacity 透明度

css

.box {
  opacity: 1;     /* 完全不透明（默认） */
  opacity: 0.5;   /* 半透明 */
  opacity: 0;     /* 完全透明（还在，但看不见） */
}

💡 opacity: 0 和 visibility: hidden 类似，但 opacity 可以做动画过渡。

七、溢出处理

当内容超出容器时怎么办？

css

.box {
  width: 300px;
  height: 200px;

  /* 可见（默认，超出部分照常显示） */
  overflow: visible;

  /* 隐藏（超出部分被裁掉） */
  overflow: hidden;

  /* 滚动（始终显示滚动条） */
  overflow: scroll;

  /* 自动（超出时才显示滚动条，最常用） */
  overflow: auto;

  /* 分别设置 x 和 y 方向 */
  overflow-x: hidden;   /* 横向不滚动 */
  overflow-y: auto;     /* 纵向自动滚动 */
}

💡 常见用法：
overflow: hidden — 裁切超出内容、清除浮动
overflow: auto — 内容区可滚动（聊天窗口、长列表）

八、光标与用户交互

css

/* 鼠标光标样式 */
.link { cursor: pointer; }       /* 手指（可点击） */
.text { cursor: text; }          /* 文字光标 */
.disabled { cursor: not-allowed; } /* 禁止符号 */

/* 禁止用户选中文字 */
.no-select {
  user-select: none;
}

 /* 禁止用户调整文本域大小 */
textarea {
  resize: none;
}

九、CSS 优先级（为什么我的样式不生效？）

9.1 优先级规则

当多条 CSS 规则作用于同一元素时，谁的优先级高谁生效：

!important > 行内 style > #id > .class > 标签名
   10000      1000      100    10       1

css

/* 优先级低 */
p { color: black; }              /* 1 分 */

/* 优先级中 */
.text { color: blue; }           /* 10 分 */

/* 优先级高 */
#main-text { color: green; }     /* 100 分 */

/* 优先级最高（别滥用！） */
#main-text { color: red !important; }  /* 10000 分 */

9.2 优先级计算

css

/* 后代选择器优先级 = 各选择器分值之和 */
div p { }               /* 1 + 1 = 2 分 */
.box .title { }         /* 10 + 10 = 20 分 */
#header .nav a { }      /* 100 + 10 + 1 = 111 分 */

9.3 同优先级时

css

/* 后写的覆盖先写的 */
.text { color: red; }
.text { color: blue; }   /* ← 生效！蓝色 */

💡 新手建议：
优先用 class 选择器，少用 id，绝不用 !important
样式不生效时，打开 F12 → Elements → Styles 看被划掉的就是被覆盖了
!important 是最后手段，不是首选

十、实战练习

10.1 练习一：美化按钮

html

<button class="btn">点击我</button>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-danger">危险按钮</button>

css

/* 按钮基础样式 */
.btn {
  padding: 8px 24px;          /* 上下 8px，左右 24px */
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  color: #333;
  cursor: pointer;            /* 鼠标变手指 */
  transition: all 0.2s;       /* 过渡动画 */
}

/* 鼠标悬停效果 */
.btn:hover {
  background: #f5f5f5;
}

/* 主要按钮 */
.btn-primary {
  background: #4a90d9;
  color: white;
  border-color: #4a90d9;
}

.btn-primary:hover {
  background: #357abd;
}

/* 危险按钮 */
.btn-danger {
  background: #e74c3c;
  color: white;
  border-color: #e74c3c;
}

.btn-danger:hover {
  background: #c0392b;
}

10.2 练习二：卡片组件

html

<div class="card">
  <img src="photo.jpg" alt="卡片图片" class="card-img">
  <div class="card-body">
    <h3 class="card-title">卡片标题</h3>
    <p class="card-text">这是卡片的描述文字，可以放一段简短的介绍。</p>
    <a href="#" class="card-link">了解更多 →</a>
  </div>
</div>

css

/* 全局重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 卡片容器 */
.card {
  width: 320px;
  background: white;
  border-radius: 12px;
  overflow: hidden;           /* 图片圆角跟着卡片 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 阴影 */
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);  /* 悬停阴影变大 */
}

/* 卡片图片 */
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;          /* 图片等比裁切填满 */
  display: block;
}

/* 卡片内容区 */
.card-body {
  padding: 20px;
}

/* 卡片标题 */
.card-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;

  /* 单行省略号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 卡片描述 */
.card-text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 12px;

  /* 两行省略号 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 卡片链接 */
.card-link {
  color: #4a90d9;
  text-decoration: none;
  font-size: 14px;
}

.card-link:hover {
  color: #357abd;
}

10.3 练习三：简单的导航栏

html

<nav class="navbar">
  <div class="logo">我的网站</div>
  <ul class="nav-menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
  </ul>
</nav>

css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.navbar {
  background: #1a1a2e;
  padding: 0 24px;
  height: 60px;
  display: flex;              /* 用 Flexbox 排列 */
  align-items: center;        /* 垂直居中 */
  justify-content: space-between;  /* 两端对齐 */
}

.logo {
  color: white;
  font-size: 20px;
  font-weight: bold;
}

/* 去掉列表默认样式 */
.nav-menu {
  list-style: none;           /* 去掉小圆点 */
  display: flex;              /* 水平排列 */
  gap: 24px;                  /* 菜单项间距 */
}

/* 菜单链接 */
.nav-menu a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.nav-menu a:hover {
  color: white;               /* 悬停变白色 */
}

十一、常见问题

11.1 为什么我的样式不生效？

按这个顺序检查：

CSS 文件引入了吗？ — F12 → Elements → Styles 看有没有你的 CSS
选择器写对了吗？ — class 名有没有拼写错误
被覆盖了吗？ — Styles 里看你的样式有没有被划掉
优先级够吗？ — 被覆盖了就提高优先级（加 class、加父级选择器）
语法对吗？ — 属性名拼写、冒号分号有没有少

11.2 margin 和 padding 该用哪个？

要控制元素和元素之间的距离 → 用 margin
要控制内容到边框之间的距离 → 用 padding

11.3 width 100% 为什么超出了父容器？

因为默认 box-sizing: content-box，width 只算内容区，加上 padding 和 border 就超出了。加一行 box-sizing: border-box; 就好了。

十二、CSS 基础速查表

12.1 常用属性速查

属性	作用	常用值
`color`	文字颜色	`#333` / `red`
`font-size`	字体大小	`16px` / `1.2rem`
`font-weight`	字体粗细	`normal` / `bold`
`background`	背景	`#f5f5f5` / `url(...)`
`width` / `height`	宽高	`300px` / `100%`
`padding`	内边距	`20px` / `10px 20px`
`margin`	外边距	`0 auto` / `20px`
`border`	边框	`1px solid #ddd`
`border-radius`	圆角	`8px` / `50%`
`display`	显示方式	`block` / `flex` / `none`
`overflow`	溢出处理	`hidden` / `auto`
`text-align`	文字对齐	`center` / `left`
`line-height`	行高	`1.6`
`box-shadow`	阴影	`0 2px 8px rgba(0,0,0,0.1)`
`transition`	过渡动画	`all 0.3s`
`cursor`	鼠标光标	`pointer`
`opacity`	透明度	`0.5`

12.2 选择器优先级

!important  >  行内 style  >  #id  >  .class  >  标签名
  10000        1000           100     10         1

十三、总结

回顾本教程的要点：

CSS 就是给网页化妆：选择器选目标，属性设样式
选择器：标签、.class（最常用）、#id、后代 div p、伪类 :hover
颜色：日常用十六进制 #4a90d9，透明用 rgba()
字体：font-size、font-weight、font-family、line-height
盒模型：content → padding → border → margin（由内到外）
box-sizing: border-box 每个项目必加
margin: 0 auto 实现块级元素水平居中
overflow: hidden 裁切超出内容
优先级：class 优先，不用 !important
调试：F12 → Elements → Styles 看样式是否被覆盖

掌握了这些基础，再加上 Flexbox 和 Grid，你就能应对日常 90% 的 CSS 需求了！

相关阅读：

CSS 基础入门教程 2026 | 零基础小白学样式 ​

一、CSS 是什么？ ​

1.1 通俗理解 ​

1.2 CSS 长什么样？ ​

1.3 怎么把 CSS 用到 HTML 上？ ​

二、选择器（给谁化妆？） ​

2.1 标签选择器 ​

2.2 class 选择器（最常用！） ​

2.3 id 选择器 ​

2.4 组合选择器 ​

2.5 伪类选择器 ​

2.6 选择器速查表 ​

三、颜色和字体 ​

3.1 颜色的写法 ​

3.2 字体属性 ​

3.3 文字溢出处理 ​

四、盒模型（CSS 最重要的概念！） ​

4.1 什么是盒模型？ ​

4.2 宽度和高度 ​

4.3 内边距 padding ​

4.4 外边距 margin ​

4.5 边框 border ​

4.6 box-sizing（必设！） ​

4.7 margin 塌陷问题 ​

五、背景 ​

5.1 背景色 ​

5.2 背景图 ​

5.3 渐变背景 ​

六、显示与隐藏 ​

6.1 display ​

6.2 visibility vs display ​

6.3 opacity 透明度 ​

七、溢出处理 ​

八、光标与用户交互 ​

九、CSS 优先级（为什么我的样式不生效？） ​

9.1 优先级规则 ​

9.2 优先级计算 ​

9.3 同优先级时 ​

十、实战练习 ​

10.1 练习一：美化按钮 ​

10.2 练习二：卡片组件 ​

10.3 练习三：简单的导航栏 ​

十一、常见问题 ​

11.1 为什么我的样式不生效？ ​

11.2 margin 和 padding 该用哪个？ ​

11.3 width 100% 为什么超出了父容器？ ​

十二、CSS 基础速查表 ​

12.1 常用属性速查 ​

12.2 选择器优先级 ​

十三、总结 ​

CSS 基础入门教程 2026 | 零基础小白学样式

一、CSS 是什么？

1.1 通俗理解

1.2 CSS 长什么样？

1.3 怎么把 CSS 用到 HTML 上？

二、选择器（给谁化妆？）

2.1 标签选择器

2.2 class 选择器（最常用！）

2.3 id 选择器

2.4 组合选择器

2.5 伪类选择器

2.6 选择器速查表

三、颜色和字体

3.1 颜色的写法

3.2 字体属性

3.3 文字溢出处理

四、盒模型（CSS 最重要的概念！）

4.1 什么是盒模型？

4.2 宽度和高度

4.3 内边距 padding

4.4 外边距 margin

4.5 边框 border

4.6 box-sizing（必设！）

4.7 margin 塌陷问题

五、背景

5.1 背景色

5.2 背景图

5.3 渐变背景

六、显示与隐藏

6.1 display

6.2 visibility vs display

6.3 opacity 透明度

七、溢出处理

八、光标与用户交互

九、CSS 优先级（为什么我的样式不生效？）

9.1 优先级规则

9.2 优先级计算

9.3 同优先级时

十、实战练习

10.1 练习一：美化按钮

10.2 练习二：卡片组件

10.3 练习三：简单的导航栏

十一、常见问题

11.1 为什么我的样式不生效？

11.2 margin 和 padding 该用哪个？

11.3 width 100% 为什么超出了父容器？

十二、CSS 基础速查表

12.1 常用属性速查

12.2 选择器优先级

十三、总结