张芷铭的个人博客

CSS从入门到精通：一篇博客搞定网页样式

HTML是网页的骨架，CSS就是给骨架穿的漂亮衣服——没有CSS，网页就是一堆黑白文字加图片，有了CSS才能变成色彩丰富、布局精美的页面。这篇博客用最通俗的话，带你从CSS基础摸到精通的门槛。

一、CSS基础介绍：它是什么，怎么用？

1. CSS的定义

CSS（Cascading Style Sheets，层叠样式表），只负责网页的「外观」：颜色、字体、大小、位置、动画……和HTML（结构）、JavaScript（交互）并称网页三剑客。

2. HTML和CSS的分工

  • HTML：写「结构」——比如这是标题<h1>、那是段落<p>、还有张图片<img>。
  • CSS：写「样式」——比如标题是红色、段落字号16px、图片在右边。

3. CSS的三种写法

写法位置适用场景
外部样式表单独的.css文件，HTML用<link rel="stylesheet" href="style.css">引入大项目，方便复用
内部样式HTML的<style>标签里（放在<head>中）单页面小样式
内联样式元素的style属性里，比如<p style="color: red;">临时改单个元素，不推荐（难维护）

二、核心语法：选对元素，写对样式

CSS的核心逻辑只有两步：1. 选中要改的元素；2. 给它加样式。

1. 基础结构

1
2
3
4

选择器 {
  属性名: 属性值;  /* 每条样式以分号结尾 */
  属性名: 属性值;
}

比如：

1
2
3
4
5

/* 选中所有段落，设为红色、16px */
p {
  color: red;
  font-size: 16px;
}

2. 选择器大全（最常用的）

（1）基础选择器

写法含义例子
标签名选中所有该标签p（所有段落）
.类名选中class="类名"的元素.btn（所有按钮）
#ID名选中id="ID名"的元素（ID唯一）#header（页面头部）
*选中所有元素（慎用）*（全局样式）

（2）复合选择器

写法含义例子
父元素 子元素选中父元素内部所有子元素.nav a（导航里的所有链接）
父元素 > 子元素选中父元素直接子元素（不包含孙子）.nav > a（导航的直接链接）
元素1, 元素2同时选中多个元素h1, h2（所有一级、二级标题）

（3）伪类和伪元素

  • 伪类：给元素「特殊状态」加样式，比如鼠标悬停：

    1
2

    .btn:hover { background: #666; } /* 鼠标悬停按钮时变色 */
li:nth-child(2) { color: blue; } /* 选中第2个li元素 */

  • 伪元素：给元素「虚拟部分」加样式，比如前面加内容：

    1

    h2::before { content: "★ "; } /* 每个h2前面加个星星 */

3. 常用属性和单位

（1）必学属性

类型属性例子
文本color（颜色）、font-size（字号）、font-weight（粗细）、text-align（对齐）color: #333; font-size: 16px;
背景background-color（纯色）、background-image（图片）、linear-gradient()（渐变）background: linear-gradient(135deg, #fff, #000);
盒子width（宽）、height（高）、padding（内边距）、margin（外边距）、border（边框）width: 200px; padding: 10px;

（2）常用单位

  • px：固定像素（比如边框1px）。
  • rem：相对根元素（html）的字体大小（比如html { font-size: 16px; }，1rem = 16px，适配移动端神器）。
  • %：相对父元素的百分比（比如width: 50%是父元素的一半宽）。
  • vw/vh：视口宽度/高度的1%（比如width: 100vw是屏幕全宽）。

4. 注释

1

/* 这是CSS注释，不会显示在网页上 */

三、布局核心：从盒子模型到Flex/Grid

布局是CSS的重中之重——学会这部分，你就能把元素放到网页的任何位置。

1. 盒子模型（所有元素都是「盒子」）

把每个HTML元素想象成一个快递盒：

  • content：盒子里的「东西」（文字、图片）。
  • padding：「泡沫垫」（内容和边框的距离）。
  • border：「盒子本身」（边框）。
  • margin：「盒子和其他盒子的距离」（外边距）。

关键属性：box-sizing

  • content-box（默认）：width只算content，加padding和border会让盒子变宽。

  • border-box（推荐用）：width包含content + padding + border，布局更省心。

    1

    * { box-sizing: border-box; } /* 全局设为border-box */

2. 布局方式（从传统到现代）

（1）标准流（默认）

  • 块级元素（div、h1、p）：独占一行，从上到下排。
  • 行内元素（span、a、img）：并排显示，从左到右排。

（2）Flex布局（一维布局神器）

适合横向/纵向排列元素（比如导航栏、卡片列表），记住「容器」和「项目」两个概念：

  • 容器：加display: flex;的元素。
  • 项目：容器里的子元素。
容器常用属性
1
2
3
4
5
6
7

.container {
  display: flex;
  flex-direction: row; /* 主轴方向：row（横向，默认）、column（纵向） */
  justify-content: center; /* 主轴对齐：center（居中）、space-between（两端对齐）、space-around（均匀分布） */
  align-items: center; /* 交叉轴对齐：center（垂直居中）、stretch（拉伸） */
  flex-wrap: wrap; /* 换行：nowrap（不换，默认）、wrap（换行） */
}
项目常用属性
1
2
3
4

.item {
  flex: 1; /* 等分空间（flex-grow:1, flex-shrink:1, flex-basis:0%） */
  align-self: flex-end; /* 单独对齐（覆盖容器的align-items） */
}

（3）Grid布局（二维布局神器）

适合同时控制行和列（比如整体网页布局、复杂卡片网格），同样分「容器」和「项目」：

容器常用属性
1
2
3
4
5
6
7
8

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3列，每列等分（fr是Grid专用单位） */
  grid-template-rows: 100px 200px; /* 2行，第一行100px，第二行200px */
  gap: 20px; /* 项目之间的间距（行间距+列间距） */
  justify-items: center; /* 项目在单元格内水平居中 */
  align-items: center; /* 项目在单元格内垂直居中 */
}
项目常用属性
1
2
3
4

.grid-item {
  grid-column: 1 / 3; /* 从第1列线到第3列线（占2列） */
  grid-row: 1 / 2; /* 从第1行线到第2行线（占1行） */
}

（4）定位（精准控制位置）

适合「固定在屏幕」「覆盖在其他元素上」的场景，通过position属性控制：

值含义特点
static默认正常流，不定位
relative相对自身不脱离流，相对于「原来的位置」移动
absolute相对父元素脱离流，相对于「最近的非static父元素」移动
fixed相对视口脱离流，固定在屏幕上（比如回到顶部按钮）
sticky粘性定位滚动时吸附（比如导航栏滚动到顶部后固定）

例子：

1
2
3

/* 绝对定位：子元素在父元素右上角 */
.parent { position: relative; } /* 父元素设为relative */
.child { position: absolute; top: 0; right: 0; } /* 子元素设为absolute */

四、进阶技巧：让网页更高级

1. CSS变量（自定义属性）

方便复用颜色、尺寸，改主题时不用一个个改：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 定义变量（通常放在:root里，全局可用） */
:root {
  --color-primary: #007bff; /* 主色调 */
  --font-size-base: 16px; /* 基础字号 */
}

/* 使用变量 */
.btn {
  background: var(--color-primary);
  font-size: var(--font-size-base);
}

2. 渐变

不用图片就能做渐变背景：

  • 线性渐变：linear-gradient(角度, 颜色1, 颜色2)

    1

    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  • 径向渐变：radial-gradient(形状, 颜色1, 颜色2)

    1

    background: radial-gradient(circle, #fff 0%, #000 100%);

3. 动画

（1）过渡（Transition）：简单的状态变化

比如鼠标悬停时平滑变色：

1
2
3
4
5

.btn {
  background: #007bff;
  transition: all 0.3s; /* 所有属性变化都过渡0.3秒 */
}
.btn:hover { background: #0056b3; }

（2）关键帧动画（Animation）：复杂动画

先定义动画，再调用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

/* 定义动画：从透明到不透明，从上到下 */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 调用动画 */
.element {
  animation: fadeInDown 0.5s ease; /* 动画名 时长 速度曲线 */
}

4. 响应式设计（适配不同屏幕）

用媒体查询，根据屏幕宽度改样式：

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

/* 默认样式（电脑端） */
.container { width: 1200px; margin: 0 auto; }

/* 平板端（宽度≤768px） */
@media (max-width: 768px) {
  .container { width: 90%; }
}

/* 手机端（宽度≤480px） */
@media (max-width: 480px) {
  .container { width: 100%; padding: 0 10px; }
}

五、应用场景：CSS能做什么？

  1. 网页整体布局：用Grid做「头部-内容-侧边栏-底部」，用Flex做导航栏。
  2. 组件样式：按钮（圆角+悬停效果）、卡片（阴影+圆角）、表单（输入框样式）。
  3. 响应式适配：手机端菜单变汉堡、图片自适应宽度、文字大小调整。
  4. 动画效果：加载动画、滚动渐显、按钮点击反馈、轮播图过渡。
  5. 主题切换：用CSS变量切换白天/黑夜模式。

六、学习路径：从入门到精通

  1. 基础阶段：先学选择器、常用属性、盒子模型，做简单的静态页面。
  2. 布局阶段：重点练Flex和Grid（这是现在的主流），模仿豆瓣、淘宝的布局。
  3. 进阶阶段：学动画、响应式、CSS变量，做一个带交互的个人博客。
  4. 精通阶段：看CSS规范、学CSS新特性（比如:has()选择器、container queries）、优化性能。

最后

CSS入门容易，但精通需要多练——别光看，打开编辑器写几行代码，改改样式，看看效果，慢慢就会了。下一篇我们讲Flex布局的实战案例，记得动手实践！

Comments