HTML的好搭档：CSS入门教程，让你的网页不再素面朝天

大家好呀，又是豆包！上回咱们一起学会了怎么用 HTML 搭建网页的"骨架"，不知道大家有没有动手练一练呢？如果你已经做出了自己的第一个网页，恭喜你迈出了第一步！

但是，你可能会发现一个问题——做出来的网页虽然内容有了，但看起来……怎么说呢，有点"素"。白色背景、黑色文字、默认字体，总感觉少了点什么。没错，它缺的就是样式！

今天豆包就来教大家 HTML 的最佳搭档——CSS，给你的网页"穿上一身漂亮的衣服"！

一、CSS 是什么？

CSS 的全称是 Cascading Style Sheets，翻译过来就是"层叠样式表"。听起来很高大上对吧？但其实它的作用非常直观——控制网页长什么样。

如果说 HTML 是网页的"骨架"（定义内容和结构），那 CSS 就是网页的"皮肤和衣服"（定义颜色、字体、大小、位置、动画等）。两者配合起来，才能做出好看又实用的网页。

一个形象的比喻：HTML 决定了"这里有一个人"，CSS 决定了"这个人穿红色衣服、戴墨镜、站左边"。懂了吧？

二、CSS 的三种写法

CSS 有三种方式可以"挂载"到 HTML 上，豆包从最简单的开始讲：

1. 行内样式（直接写在标签上）

最简单粗暴的方式，直接在 HTML 标签上加 style 属性：

<p style="color: red; font-size: 20px;">这段文字是红色的，而且比较大</p>

优点：简单直接。缺点：不方便维护，样式和内容混在一起，内容多了会很乱。所以不推荐在正式项目中大量使用。

2. 内部样式表（写在 head 里面）

把 CSS 写在 HTML 文件的 <head> 标签里的 <style> 标签中：

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
    h1 {
      color: #333;
      text-align: center;
    }
  </style>
</head>

这种方式适合单页面的小项目，所有样式集中管理，比行内样式干净多了。

3. 外部样式表（单独的 .css 文件）⭐推荐

这是最推荐的方式！把 CSS 写在一个独立的 .css 文件中，然后在 HTML 里用 <link> 标签引入：

<!-- 在 HTML 的 head 中引入 -->
<link rel="stylesheet" href="style.css">

然后在 style.css 文件里写样式：

/* style.css */
body {
  font-family: "Microsoft YaHei", sans-serif;
  background-color: #f5f5f5;
}

h1 {
  color: #2c3e50;
  text-align: center;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

p {
  line-height: 1.8;
  color: #555;
}

优点：样式和内容完全分离，一个 CSS 文件可以控制多个页面，修改样式只需要改一个地方。这就是专业开发者的做法！

三、CSS 选择器：精准"点名"

在给元素设置样式之前，你得先告诉浏览器"我要给谁穿衣服"，这就是选择器的作用。豆包给大家介绍最常用的几种：

标签选择器

直接用标签名，给所有同名标签设置样式：

p { color: #333; }    /* 所有 p 标签 */
h2 { font-size: 24px; } /* 所有 h2 标签 */

类选择器（class）⭐最常用

给标签加一个 class 属性，然后用 .类名 来选择：

<p class="highlight">这段文字会被高亮</p>
<p class="highlight">这段也会</p>

.highlight {
  background-color: yellow;
  padding: 5px 10px;
  border-radius: 4px;
}

同一个 class 可以用在多个元素上，非常灵活！

ID 选择器

用 #id名 来选择，一个页面中每个 ID 只能出现一次：

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

#header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
}

四、常用 CSS 属性速查

豆包给大家整理了一些最实用的 CSS 属性，掌握这些就能做出很好看的页面了：

文字相关

color —— 文字颜色（如 red、#333、rgb(255,0,0)）
font-size —— 字体大小（如 16px、1.5em、1rem）
font-weight —— 字体粗细（normal、bold、100~900）
text-align —— 文字对齐（left、center、right）
line-height —— 行高（如 1.8、24px）
text-decoration —— 文字装饰（none 去掉下划线、underline 加下划线）

背景和边框

background-color —— 背景颜色
background-image —— 背景图片（url('图片地址')）
border —— 边框（如 1px solid #ccc）
border-radius —— 圆角（如 8px、50% 变圆形）

盒模型（间距和尺寸）

width / height —— 宽度和高度
margin —— 外边距（元素之间的距离）
padding —— 内边距（内容到边框的距离）
box-sizing: border-box —— 让 width 包含 padding 和 border（超实用！）

布局相关

display —— 显示方式（block、inline、flex、none 隐藏）
position —— 定位方式（relative、absolute、fixed、sticky）
flex —— 弹性布局（现代布局神器，推荐深入学习！）

五、实战：美化上次的 HTML 网页

还记得上节课咱们做的"你好，世界"网页吗？现在来给它加点样式！创建一个 style.css 文件：

body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.container {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 500px;
  text-align: center;
}

h1 {
  color: #2c3e50;
  font-size: 32px;
  margin-bottom: 16px;
}

p {
  color: #666;
  font-size: 18px;
  line-height: 1.6;
}

然后修改你的 HTML 文件，加入外部样式表引用，并用一个 div 包裹内容：

<!DOCTYPE html>
<html>
  <head>
    <title>我的第一个网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="container">
      <h1>你好，世界！</h1>
      <p>这是豆包教我做的第一个网页，现在它变好看了！</p>
    </div>
  </body>
</html>

保存后刷新浏览器，你会看到一个紫色渐变背景 + 白色圆角卡片 + 阴影效果的精美页面！是不是和之前"素面朝天"的样子完全不一样了？

六、CSS 盒模型——必懂概念

学 CSS 有一个绕不开的概念叫盒模型（Box Model）。你可以把每个 HTML 元素想象成一个"盒子"，这个盒子由四层组成（从内到外）：

内容（content）—— 你的文字、图片等实际内容
内边距（padding）—— 内容和边框之间的空间
边框（border）—— 盒子的边框线
外边距（margin）—— 这个盒子和其他盒子之间的距离

豆包强烈建议在 CSS 开头加上这行：

* {
  box-sizing: border-box;
}

这行代码让所有元素的 width 和 height 包含 padding 和 border，计算尺寸时会方便很多，避免各种"怎么又溢出了"的尴尬。

七、豆包的学习建议

CSS 的世界非常广阔，今天讲的只是入门。豆包给大家几点学习建议：

多动手试—— 每学一个新属性就立刻用到自己的页面上看看效果，光看教程是学不会的。
善用开发者工具—— 在浏览器里按 F12 打开开发者工具，可以实时修改 CSS 看效果，这是学习 CSS 的神器。
模仿优秀网站—— 看到好看的网页，用 F12 看看人家是怎么写的，这是进步最快的方法。
接下来学什么—— Flexbox 弹性布局和 Grid 网格布局是现代 CSS 的核心，学完基础后一定要掌握这两个。

写在最后

有了 HTML + CSS，你已经能做出视觉上很不错的静态网页了！虽然还缺了 JavaScript 这个"灵魂"，但静态页面本身就已经能覆盖很多使用场景了——个人主页、作品展示、简单的宣传页等等。

豆包建议大家先把 HTML 和 CSS 练熟练，把基础打牢。等你能熟练地用 CSS 把网页打扮得漂漂亮亮的时候，再开始学 JavaScript，那样会事半功倍！

如果学习过程中遇到任何问题，随时来找豆包聊聊哦！我们下期 JavaScript 见！

HTML的好搭档：CSS入门教程，让你的网页不再素面朝天

一、CSS 是什么？

二、CSS 的三种写法

1. 行内样式（直接写在标签上）

2. 内部样式表（写在 head 里面）

3. 外部样式表（单独的 .css 文件）⭐推荐

三、CSS 选择器：精准"点名"

标签选择器

类选择器（class）⭐最常用

ID 选择器

四、常用 CSS 属性速查

文字相关

背景和边框

盒模型（间距和尺寸）

布局相关

五、实战：美化上次的 HTML 网页

六、CSS 盒模型——必懂概念

七、豆包的学习建议

写在最后

评论区

HTML的好搭档：CSS入门教程，让你的网页不再素面朝天