css教程

一、CSS 基础入门（博客开篇：让新手快速上手）

这部分主要面向零基础读者，讲清 CSS 是什么、怎么用，打好基础。

1. CSS 核心概念

定义：层叠样式表（Cascading Style Sheets），用于控制 HTML 元素的外观和布局。
核心作用：将「结构（HTML）」和「样式（CSS）」分离，提高代码可维护性。

2. CSS 引入方式（附代码示例）

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<!-- 方式1：行内样式（不推荐，仅临时调试用） -->
<div style="color: red; font-size: 16px;">行内样式</div>

<!-- 方式2：内部样式（适合单页面样式） -->
<head>
  <style>
    .box {
      color: blue;
      padding: 10px;
    }
  </style>
</head>

<!-- 方式3：外部样式（推荐，适合多页面复用） -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

重点说明：优先级「行内样式 > 内部样式 > 外部样式」，但推荐用外部样式，符合「结构与样式分离」的最佳实践。

3. CSS 基本语法

css

1
2
3
4
5
6


/* 选择器 { 属性: 值; 属性: 值; } */
/* 例：选中所有p标签，设置文字颜色和大小 */
p {
  color: #333; /* 十六进制颜色，也可用rgb(51,51,51)、red等 */
  font-size: 14px; /* 单位：px/em/rem/%，最常用px */
}

二、CSS 核心知识点（博客核心章节：重点必掌握）

这部分是 CSS 的核心，也是博客的重点，需要讲透「选择器、盒模型、布局、样式属性」四大块。

1. 选择器（CSS 定位元素的核心）

整理成表格 + 示例，清晰易懂：

选择器类型	语法示例	作用
标签选择器	`div {}`	选中所有 div 标签
类选择器	`.box {}`	选中所有 class=“box” 的元素（最常用）
ID 选择器	`#header {}`	选中 id=“header” 的元素（唯一，慎用）
后代选择器	`.nav li {}`	选中.nav 下的所有 li 元素
伪类选择器	`a:hover {}`	选中鼠标悬浮的 a 标签（交互必备）

示例代码：

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


/* 类选择器：所有卡片统一样式 */
.card {
  width: 300px;
  margin: 10px auto;
  border: 1px solid #eee;
}

/* 伪类：按钮悬浮效果 */
.btn:hover {
  background-color: #007bff;
  color: white;
}

2. 盒模型（CSS 布局的基础）

核心定义：每个 HTML 元素都是一个「盒子」，由 content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

两种盒模型

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/* 标准盒模型（默认）：width = content宽度 */
.box1 {
  box-sizing: content-box;
  width: 200px;
  padding: 10px; /* 实际宽度=200+10*2=220px */
}

/* 怪异盒模型（推荐）：width = content+padding+border */
.box2 {
  box-sizing: border-box;
  width: 200px;
  padding: 10px; /* 实际宽度仍为200px */
}

博客重点：建议在全局设置 * { box-sizing: border-box; }，避免布局计算出错。

3. 常用布局方式（博客高频考点）

按「经典到现代」排序，附核心代码：

浮动布局（经典，需清除浮动）

css

1
2
3
4
5
6
7
8


.left { float: left; width: 200px; }
.right { float: right; width: 300px; }
/* 清除浮动（解决父元素高度塌陷） */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Flex 弹性布局（现代首选，适配性强）

css

1
2
3
4
5
6
7


/* 父容器：让子元素水平居中+垂直居中 */
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 400px;
}

Grid 网格布局（复杂布局专用）

css

1
2
3
4
5
6
7


/* 父容器：3列2行的网格 */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列等分 */
  grid-template-rows: 100px 200px; /* 2行，高度分别100/200px */
  gap: 10px; /* 网格间距 */
}

4. 常用样式属性（博客实用技巧）

整理读者最常用的样式，附示例：

文字样式

css

1
2
3
4
5
6
7
8
9


.text {
  font-family: "Microsoft Yahei", sans-serif; /* 字体，优先无衬线 */
  font-weight: 600; /* 字体粗细：400=正常，700=加粗 */
  line-height: 1.5; /* 行高，推荐用无单位数值，适配字体大小 */
  text-align: center; /* 文字居中 */
  text-overflow: ellipsis; /* 文字超出省略 */
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出内容 */
}

背景样式

css

1
2
3
4
5
6


.bg {
  background-color: #f5f5f5; /* 纯色背景 */
  background-image: url("bg.jpg"); /* 背景图 */
  background-size: cover; /* 背景图覆盖容器 */
  background-position: center; /* 背景图居中 */
}

三、CSS 进阶知识点（博客提升篇：拉开差距）

适合有基础的读者，提升博客深度：

CSS 优先级
1

!important
> 行内样式 > ID 选择器 > 类 / 伪类选择器 > 标签选择器 > 通配符。
1

p { color: red !important; }
会覆盖所有其他 p 标签的颜色设置）

响应式布局

：通过媒体查询适配不同设备：

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/* 手机端（宽度<768px） */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}
/* 平板端（768px<宽度<992px） */
@media (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 750px;
  }
}

CSS 变量（自定义属性）

：简化样式维护：

css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


/* 定义变量 */
:root {
  --main-color: #007bff;
  --font-size: 14px;
}
/* 使用变量 */
.btn {
  color: var(--main-color);
  font-size: var(--font-size);
}

四、博客实战技巧（增加实用性）

CSS 调试技巧：用浏览器开发者工具（F12）的「Elements」面板，实时修改样式调试。
CSS 性能优化

：
- 减少选择器嵌套（尽量不超过 3 层）；
- 合并重复样式，使用 CSS 变量统一管理；
- 避免使用*通配符选择器。
常用 CSS 工具推荐

：
- 样式重置：Normalize.css（解决浏览器默认样式差异）；
- 预处理器：Sass/Less（简化 CSS 编写，支持变量、嵌套）；
- 在线工具：CSS-Tricks（查属性用法）、Can I Use（查属性兼容性）。

总结

博客整理 CSS 知识点时，建议按「基础→核心→进阶→实战」的逻辑分层，从新手视角出发，先易后难；
核心重点要突出：选择器、盒模型、Flex 布局是必讲的核心，附代码示例更易理解；
增加「实战技巧」和「工具推荐」能提升博客的实用性，让读者不仅学知识点，还能落地使用。

你可以根据这个框架，补充自己的理解和实战案例（比如「博客导航栏的 Flex 布局实现」「文章卡片的样式优化」等），让内容更贴合博客场景，也更有个人特色。