【GLM-5 陪练式前端新手入门】第二篇：CSS 让网页从 "能用" 变 "好看"
目录
[【GLM-5 陪练式前端新手入门】第二篇：CSS 让网页从 "能用" 变 "好看"](#【GLM-5 陪练式前端新手入门】第二篇：CSS 让网页从 “能用” 变 “好看”)
[1 项目背景：给 "骨架" 网页做第一次 "装修"](#1 项目背景：给 “骨架” 网页做第一次 “装修”)
[2 AI 赋能：向 GLM-5 提出 CSS 学习需求](#2 AI 赋能：向 GLM-5 提出 CSS 学习需求)
[3 快速落地：跟着 AI 给网页 "化妆"](#3 快速落地：跟着 AI 给网页 “化妆”)
[3.1 核心知识点：CSS 是网页的 "装修设计师"](#3.1 核心知识点：CSS 是网页的 “装修设计师”)
[3.2 代码实践：编写带 CSS 样式的网页](#3.2 代码实践：编写带 CSS 样式的网页)
[3.3 本地运行：多种方式查看效果](#3.3 本地运行：多种方式查看效果)
[3.4 动手练习：修改属性，看效果变化](#3.4 动手练习：修改属性，看效果变化)
[4 实践感悟：CSS 入门的 "零门槛" 体验](#4 实践感悟：CSS 入门的 “零门槛” 体验)
🎯 主题 1：初体验拾光 ------ AI 陪练式前端新手入门
本文聚焦 GLM-5 引导零基础新手从 HTML 骨架进阶到 CSS 样式美化的实战过程。
活动仓库链接：https://atomgit.com/GitCode/0daymodel
1 项目背景：给 "骨架" 网页做第一次 "装修"
在第一篇的学习中，我借助 GLM-5 搭建了 HTML 骨架网页，但黑白文字、毫无设计感的页面让我意识到：要做出像样的个人主页，还需要给这个 "骨架" 做 "装修"------ 这就是 CSS 的核心作用。
作为零基础新手，我对 CSS 的认知一片空白，既怕语法复杂，又担心找不到清晰的学习路径。于是我再次按照步骤求助 GLM-5，希望延续 "陪练模式"，完成 CSS 基础入门。
2 AI 赋能：向 GLM-5 提出 CSS 学习需求
延续之前的学习节奏，我向 GLM-5 提出了精准的 CSS 学习需求：
我已经完成了 HTML 第一步的练习，现在要学习第二步：CSS 基础。请你用通俗易懂的语言告诉我'什么是 CSS'，只讲这一个核心知识点，然后给我一个修改页面背景颜色和文字样式的小练习，提供可直接运行的完整代码，并告诉我如何在本地修改和查看效果。
GLM-5 不仅用 "装修设计师" 的比喻解释了 CSS，还设计了兼顾简洁性和美观度的代码示例，让我直观感受到 CSS 的美化效果。
用户已经完成了 HTML 第一步的练习，现在要学习 CSS 基础。我需要：
1. 用通俗易懂的语言解释"什么是 CSS"
2. 只讲这一个核心知识点
3. 给一个修改页面背景颜色和文字样式的小练习
4. 提供可直接运行的完整代码
5. 告诉用户如何在本地修改和查看效果
让我用简单易懂的方式来解释 CSS：
CSS 就像是给 HTML 这个"骨架"穿衣服化妆的工具。HTML 决定网页有什么内容，CSS 决定这些内容长什么样。
我需要写一个简单但有设计感的示例代码，让用户可以直观地理解 CSS 的作用。代码要：
- 不要太复杂，毕竟是初学者
- 但也不能太平淡无奇，要有一定的视觉吸引力
- 展示背景颜色和文字样式的修改
- 配色要有设计感，避免模板风格
让我设计一个简单但有趣的练习页面## 什么是 CSS？
想象一下：**HTML 是房子的骨架结构**（墙壁、门窗、房间），而 **CSS 就是装修设计师**（刷墙颜色、贴壁纸、选家具样式、调整灯光氛围）。
**CSS = 层叠样式表（Cascading Style Sheets）**
它的核心作用只有一个：**告诉浏览器"网页上的东西要长什么样"**。
比如：
- 文字用什么字体、多大、什么颜色
- 背景是纯色还是渐变还是图片
- 盒子多大、圆角还是直角、有没有阴影
- 元素摆在哪里、怎么排列
---
## 小练习：修改背景和文字样式
下面是一个可直接运行的完整代码，你可以修改其中的颜色和文字样式来感受 CSS 的作用：
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 入门练习</title>
<!-- CSS 写在 style 标签里 -->
<style>
/*
* 这是 CSS 注释
* CSS 的基本语法：选择器 { 属性: 值; }
*/
/* 1. 修改整个页面的背景 */
body {
background-color: #1a1a2e; /* 深蓝黑色背景 */
min-height: 100vh; /* 最小高度 = 整个屏幕高度 */
margin: 0; /* 去掉默认边距 */
display: flex;
justify-content: center;
align-items: center;
}
/* 2. 修改文字样式 */
h1 {
color: #f0f0f0; /* 文字颜色：浅灰白 */
font-family: "Microsoft YaHei", sans-serif; /* 字体 */
font-size: 48px; /* 字体大小 */
font-weight: 700; /* 字体粗细 */
text-align: center; /* 文字居中 */
letter-spacing: 4px; /* 字间距 */
}
/* 3. 段落文字样式 */
p {
color: #a0a0a0; /* 次要文字颜色 */
font-size: 18px;
font-family: "Microsoft YaHei", sans-serif;
text-align: center;
line-height: 1.8; /* 行高，让文字更透气 */
}
/* 4. 一个装饰性的卡片 */
.card {
background: linear-gradient(135deg, #16213e, #0f3460); /* 渐变背景 */
border-radius: 16px; /* 圆角 */
padding: 40px 60px; /* 内边距 */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); /* 阴影 */
border: 1px solid rgba(255, 255, 255, 0.1); /* 微弱边框 */
}
/* 5. 强调文字 */
.highlight {
color: #e94560; /* 亮红色强调 */
font-weight: bold;
}
/* 6. 按钮样式 */
.btn {
background-color: #e94560;
color: white;
border: none;
padding: 12px 32px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
display: block;
margin: 30px auto 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
}
</style>
</head>
<body>
<div class="card">
<h1>CSS 让网页变美</h1>
<p>HTML 搭结构，<span class="highlight">CSS 负颜值</span></p>
<p>修改上面的 CSS 代码，看看效果如何变化</p>
<button class="btn">点我试试</button>
</div>
</body>
</html>
```
---
## 如何在本地修改和查看效果
### 方法一：最简单的方式
1. 在电脑上新建一个文件夹，比如叫 `css-practice`
2. 新建一个文本文件，把上面的代码全部复制粘贴进去
3. 把文件保存为 `index.html`（注意后缀是 `.html` 不是 `.txt`）
4. 双击这个文件，它会用浏览器打开，你就能看到效果了
### 方法二：用编辑器（推荐）
1. 下载 [VS Code](https://code.visualstudio.com/)（免费、好用）
2. 用 VS Code 打开你的 `index.html`
3. 安装插件 "Live Server"（可选，但很方便）
4. 修改代码 → 保存 → 浏览器自动刷新
---
## 动手试试这些修改
打开代码后，试着改改这些地方，保存后刷新浏览器：
| 试着改这个 | 原来的值 | 改成试试 |
|-----------|---------|---------|
| `background-color: #1a1a2e` | 深蓝黑 | `#2d5a27`（森林绿） |
| `color: #e94560` | 亮红色 | `#f9d923`（明黄色） |
| `font-size: 48px` | 48像素 | `32px` 或 `64px` |
| `border-radius: 16px` | 圆角16像素 | `0px`（直角）或 `50px`（更圆） |
**改完保存 → 刷新浏览器 → 看变化**，这就是学习 CSS 最好的方式！3 快速落地：跟着 AI 给网页 "化妆"
在 GLM-5 的引导下，我顺利完成了 CSS 样式美化的第一次实践，从知识点理解到效果验证，全程流畅清晰。
3.1 核心知识点：CSS 是网页的 "装修设计师"
GLM-5 用一个精准的比喻帮我理解了 CSS：
如果说 HTML 是房子的 "骨架结构"（墙壁、门窗、房间划分），那么 CSS 就是装修设计师------ 它决定了墙面刷什么颜色、地板用什么材质、家具怎么摆放，让网页从 "能用" 变得 "好看"。
它还明确了 CSS 的核心语法：
选择器 { 属性: 值; }，
所有样式都通过 "选择器 + 属性值" 的方式定义。
3.2 代码实践：编写带 CSS 样式的网页
GLM-5 提供了一段完整的代码，既展示了 CSS 基础语法，又做了有设计感的视觉设计，我在 VS Code 中新建 test2.html 文件，粘贴了以下内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 入门练习</title>
<!-- CSS 写在 style 标签里 -->
<style>
/*
* 这是 CSS 注释
* CSS 的基本语法：选择器 { 属性: 值; }
*/
/* 1. 修改整个页面的背景 */
body {
background-color: #1a1a2e; /* 深蓝黑色背景 */
min-height: 100vh; /* 最小高度 = 整个屏幕高度 */
margin: 0; /* 去掉默认边距 */
display: flex;
justify-content: center;
align-items: center;
}
/* 2. 修改文字样式 */
h1 {
color: #f0f0f0; /* 文字颜色：浅灰白 */
font-family: "Microsoft YaHei", sans-serif; /* 字体 */
font-size: 48px; /* 字体大小 */
font-weight: 700; /* 字体粗细 */
text-align: center; /* 文字居中 */
letter-spacing: 4px; /* 字间距 */
}
/* 3. 段落文字样式 */
p {
color: #a0a0a0; /* 次要文字颜色 */
font-size: 18px;
font-family: "Microsoft YaHei", sans-serif;
text-align: center;
line-height: 1.8; /* 行高，让文字更透气 */
}
/* 4. 一个装饰性的卡片 */
.card {
background: linear-gradient(135deg, #16213e, #0f3460); /* 渐变背景 */
border-radius: 16px; /* 圆角 */
padding: 40px 60px; /* 内边距 */
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); /* 阴影 */
border: 1px solid rgba(255, 255, 255, 0.1); /* 微弱边框 */
}
/* 5. 强调文字 */
.highlight {
color: #e94560; /* 亮红色强调 */
font-weight: bold;
}
/* 6. 按钮样式 */
.btn {
background-color: #e94560;
color: white;
border: none;
padding: 12px 32px;
font-size: 16px;
border-radius: 8px;
cursor: pointer;
display: block;
margin: 30px auto 0;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(233, 69, 96, 0.4);
}
</style>
</head>
<body>
<div class="card">
<h1>CSS 让网页变美</h1>
<p>HTML 搭结构，<span class="highlight">CSS 负颜值</span></p>
<p>修改上面的 CSS 代码，看看效果如何变化</p>
<button class="btn">点我试试</button>
</div>
</body>
</html>3.3 本地运行：多种方式查看效果
GLM-5 提供了两种适合新手的运行方式：
- 极简方式：双击文件，用浏览器打开；
- 推荐方式：用 VS Code 安装 "Live Server" 插件，修改代码后自动刷新浏览器，无需手动重启。
本人通过 VS Code 启用调试，使用谷歌浏览器打开页面查看效果：
3.4 动手练习：修改属性，看效果变化
为了让我真正掌握 CSS 属性，GLM-5 设计了针对性的修改练习，我通过 "改代码→看效果" 的方式，直观感受每个属性的作用：
| 修改目标 | 原属性值 | 尝试修改值 | 页面变化效果 |
|---|---|---|---|
| 页面背景色 | background-color: #1a1a2e |
#2d5a27（森林绿） |
背景从深蓝黑变为清新的森林绿 |
| 强调文字色 | color: #e94560 |
#f9d923（明黄色） |
"CSS 负颜值" 文字从亮红色变为醒目的明黄色 |
| 标题字体大小 | font-size: 48px |
64px |
标题文字明显变大，视觉冲击力更强 |
| 卡片圆角 | border-radius: 16px |
50px |
卡片从轻微圆角变为圆润的弧形 |
修改值后效果：
4 实践感悟：CSS 入门的 "零门槛" 体验
这次 CSS 学习真的让我眼前一亮，GLM-5 完全不像冷冰冰的工具，按照我给的提示词像一个懂我的陪练一样：
- 它用 "装修" 的比喻，一下就把 CSS 是什么说清楚了，我再也不觉得 "样式表" 是个难懂的词。
- 给的代码不仅能跑，还挺好看，渐变背景、圆角卡片，能够让我第一次觉得 "写代码也能做出漂亮的东西"，瞬间有了兴趣。
- 让我改颜色、改大小，改完刷新就能看到变化，这种 "试错 - 看效果" 的方式，比死记语法好太多了。
- 从写代码到看效果，每一步都讲得明明白白，完全没卡住，我只管跟着学就行。
CSS 入门根本不用死记硬背，跟着 GLM-5 玩一玩、改一改，就把东西学会了，这种感觉真的很棒。
参与链接：
GLM-5 在线体验：https://ai.atomgit.com/zai-org/GLM-5/model-inference