一、回顾与本篇目标
前两篇我们学习了 HTML 的核心标签，你已经能写出结构完整的网页。但那些页面都是浏览器默认的黑白样式——白底、黑字、蓝色链接、默认字号。就像一个骨架齐全但毫无装饰的房间。
CSS 就是装修队。 它不改变内容，只改变内容的外观。颜色、大小、间距、位置、背景、边框……一切视觉表现都由 CSS 控制。
本篇的目标：
- 知道 CSS 的三种书写位置（内联、内部、外部）以及各自的适用场景
- 掌握三种基本选择器：标签选择器、类选择器、ID 选择器
- 学会用
color和background控制颜色与背景 - 学会用
font-size、font-family、text-align控制文字样式
学完这一篇，你就能让一个白底黑字的页面焕然一新。
二、CSS 写在哪里？三种位置
CSS 代码可以放在三个不同的位置，各有用途。我们先看最直观的一种。
方式一：内联样式（写在标签的 style 属性里）
直接把样式写在某个标签的 style 属性中。样式只对这个标签生效。
<p style="color: red; font-size: 20px;">这是一段红色的大字。</p>
<p>这是一段普通文字。</p>效果：第一段变成红色、20 像素大小，第二段保持默认样式。
优点：快速、直接，适合临时测试。
缺点：如果页面有 100 个段落都要改颜色，你就要写 100 次 style="color: red;"，修改起来是噩梦。因此，内联样式不应大规模使用。它只在极个别需要动态生成样式的场景下出现。
方式二：内部样式表（写在 <style> 标签里）
把 CSS 代码集中写在 HTML 文件头部的 <style> 标签中。这是初学者最常用的方式，也是我们本篇和下一篇练习的主要形式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表演示</title>
<style>
p {
color: blue;
font-size: 18px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>欢迎</h1>
<p>这是第一段。</p>
<p>这是第二段。</p>
</body>
</html>页面中所有 <p> 都会变成蓝色、18 像素。修改只需要改一处，所有段落同步变化。
优点：样式集中管理，结构和样式都在一个文件里，方便初学者查看。
缺点：当网站有很多页面时，每个页面都要复制一份相同的 <style>，修改起来仍然麻烦。
方式三：外部样式表（写在独立的 .css 文件里）
这是实际项目中的标准做法。把 CSS 代码单独保存成一个 .css 文件，然后在 HTML 的 <head> 里用 <link> 标签把它引入。
第一步：创建 CSS 文件
新建一个文件叫 style.css，内容如下：
p {
color: green;
font-size: 16px;
}
h1 {
text-align: center;
color: #333;
}第二步：在 HTML 中引入
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表演示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎</h1>
<p>这是第一段。</p>
<p>这是第二段。</p>
</body>
</html><link> 标签属性解释：
rel="stylesheet"：告诉浏览器这是一个样式表文件。href="style.css"：指定 CSS 文件的路径，和图片的src一样，可以用相对路径或绝对路径。
优点：一个 .css 文件可以被多个 HTML 页面共享，修改一次、全站生效。结构和样式彻底分离，代码清爽。
缺点：需要额外请求一个文件（在现代项目中，这由构建工具和缓存机制优化，完全不是问题）。
位置总结
| 方式 | 书写位置 | 适用场景 |
|---|---|---|
| 内联样式 | 标签的 style 属性 |
极少数动态样式，不推荐日常使用 |
| 内部样式表 | <head> 中的 <style> |
单个页面的练习和小型项目 |
| 外部样式表 | 独立 .css 文件，用 <link> 引入 |
多页面网站、正式项目 |
在接下来的学习中，我们主要使用内部样式表（写在 <style> 里），因为所有代码在一个文件里，便于查看和实验。等你做多页面项目时，自然切换到外部样式表即可。
三、CSS 的基本语法
CSS 的语法由三部分组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指明要对哪些 HTML 元素施加样式。
- 花括号
{ }：包围所有样式规则。 - 声明：由
属性: 值;组成，每个声明以分号结尾。可以写多个声明。
记忆：“谁 { 什么属性: 什么值; }”。
四、三种基本选择器
1. 标签选择器
直接使用 HTML 标签名作为选择器。它会对页面上所有这个标签生效。
/* 所有段落都变成灰色 */
p {
color: gray;
}
/* 所有一级标题都居中 */
h1 {
text-align: center;
}注释写法：CSS 的注释用 /* */ 包裹，和 HTML 的 <!-- --> 不同。
2. 类选择器
以点号 . 开头，后面跟类名。它会对所有 class 属性值匹配该名称的元素生效。
/* 所有 class="highlight" 的元素背景变黄 */
.highlight {
background: yellow;
}
/* class="error" 的元素文字变红 */
.error {
color: red;
}<p>这是普通段落。</p>
<p class="highlight">这个段落背景是黄色的。</p>
<span class="highlight">这个 span 背景也是黄色的。</span>
<p class="error">错误提示是红色的。</p>类选择器是最常用的选择器。因为它可以精准控制，又可以复用。
3. ID 选择器
以井号 # 开头，后面跟 ID 名。它只对具有该唯一 id 的元素生效。
/* 只对 id="main-title" 的那个元素生效 */
#main-title {
font-size: 32px;
color: darkblue;
}<h1 id="main-title">唯一的主标题</h1>
<h1>另一个标题不受影响</h1>因为 id 在页面中必须唯一，所以 ID 选择器精准瞄准一个元素。但在写 CSS 时，优先使用类选择器。ID 选择器主要留给 JavaScript 和锚点使用。原因是 ID 选择器的优先级非常高（后面会讲），滥用会导致样式难以覆盖。
选择器速记表
| 选择器 | 写法 | 匹配对象 | 使用频率 |
|---|---|---|---|
| 标签选择器 | p、h1、div |
所有对应标签 | 中 |
| 类选择器 | .类名 |
所有具有该 class 的元素 | 极高 |
| ID 选择器 | #id名 |
具有该 id 的唯一元素 | 低（CSS 中） |
五、控制颜色与背景
color：文字颜色
color 属性用来设置元素内部文字的颜色。
颜色值有几种写法：
- 颜色名称：
red、blue、green、white、black、gray等。简单直观，但可用的名称有限（约 140 种）。 - 十六进制（最常用）：
#ff0000（红色）、#00ff00（绿色）、#0000ff（蓝色）、#333333（深灰）。格式是#后面跟 6 位十六进制数字（0-9, a-f）。如果六位中每两位相同，可以简写为三位：#f00=#ff0000。 rgb()：rgb(255, 0, 0)也是红色。三个参数分别代表红、绿、蓝，取值范围 0-255。rgba()：比rgb()多了透明度（alpha），rgba(0, 0, 0, 0.5)是半透明的黑色，最后一个参数 0.5 表示 50% 透明度。
示例：
p {
color: #333333; /* 深灰色文字 */
}
.error {
color: red; /* 红色错误提示 */
}
.overlay {
color: rgba(255, 255, 255, 0.8); /* 半透明白色 */
}background：背景
background 是一个复合属性，可以一次性设置背景色、背景图等。入门阶段，我们先掌握背景色的设置：
body {
background: #f0f4f8; /* 整个页面淡灰蓝色背景 */
}
.highlight {
background: yellow; /* 黄色高亮背景 */
}
.card {
background: white; /* 白色卡片背景 */
}你也可以单独使用 background-color 属性，效果一样：
body {
background-color: #f0f4f8;
}颜色搭配建议：初学者容易把颜色搞得过于刺眼。一个简单原则：正文用深灰色（#333 或 #444），背景用浅灰（#f5f5f5 或 #fafafa），重点色用一个温和的蓝或绿。
六、控制文字样式
font-size：文字大小
设置文字的大小。常用单位：
px（像素）：绝对单位。例如font-size: 16px;。浏览器默认正文大小通常是 16px。em：相对单位，相对于父元素的字号。例如父元素字号 16px，font-size: 1.5em;就是 24px。rem：相对单位，相对于根元素（<html>）的字号。更易于统一控制，在后续 CSS 篇会详讲。
入门阶段，用 px 最直观。习惯之后可以逐步使用 rem。
h1 {
font-size: 28px; /* 大标题 */
}
p {
font-size: 16px; /* 正常正文 */
}
.small {
font-size: 12px; /* 小字注释 */
}font-family：字体
设置文字的字体。可以指定多个字体，用逗号隔开，浏览器会按顺序查找，哪个可用就用哪个。最后通常加一个通用字体系列作为保底。
body {
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}解读：优先用苹方（Mac），找不到就用微软雅黑（Windows），再找不到就用 Helvetica Neue，如果都没有，就用系统默认的无衬线字体。
通用字体系列名称（无法识别时使用）：
serif：衬线体（笔划末端有装饰，如宋体、Times New Roman）sans-serif：无衬线体（笔划均匀无装饰，如黑体、Arial）——网页正文最常用monospace：等宽字体（每个字符宽度相同，适合显示代码）
text-align：文字对齐
控制文字在其容器内的水平对齐方式。
h1 {
text-align: center; /* 居中 */
}
.right {
text-align: right; /* 右对齐 */
}
p {
text-align: left; /* 左对齐（默认值） */
}常用值：left（左）、center（中）、right（右）、justify（两端对齐）。
七、本篇综合实战：美化一张文章页面
下面这段代码将一篇纯 HTML 文章用 CSS 美化。请手敲并观察每个 CSS 规则对页面产生的影响：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 美化实战</title>
<style>
/* === 全局样式 === */
body {
background: #f7f9fc; /* 柔和的浅蓝灰背景 */
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
color: #333; /* 全局默认文字深灰色 */
margin: 0;
padding: 20px;
}
/* === 文章容器 === */
.article {
background: white;
max-width: 700px; /* 最大宽度 700px，避免文字过长 */
margin: 0 auto; /* 居中显示（下一篇详解） */
padding: 40px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* === 标题样式 === */
.article h1 {
color: #2c3e50;
font-size: 28px;
text-align: center;
margin-bottom: 8px;
}
.article .subtitle {
color: #7f8c8d;
font-size: 14px;
text-align: center;
margin-bottom: 30px;
}
.article h2 {
color: #2c3e50;
font-size: 20px;
margin-top: 30px;
margin-bottom: 12px;
border-left: 4px solid #4a90d9; /* 左边一条蓝色竖线做装饰 */
padding-left: 12px;
}
/* === 段落样式 === */
.article p {
font-size: 16px;
line-height: 1.8; /* 行间距为字号的1.8倍，阅读舒适 */
margin-bottom: 16px;
}
/* === 高亮文字 === */
.highlight {
background: #fff3cd;
color: #856404;
padding: 2px 6px;
border-radius: 3px;
}
/* === 提示框 === */
.tip {
background: #e8f4fd;
border-left: 4px solid #4a90d9;
padding: 16px 20px;
color: #2c5f8a;
font-size: 14px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="article">
<h1>CSS 让网页脱胎换骨</h1>
<p class="subtitle">——从一个白底黑字的页面说起</p>
<h2>一、没有 CSS 的世界</h2>
<p>如果没有 CSS，所有网页都只是白底黑字的纯文本。标题、正文、链接都只有浏览器赋予的默认样式。<span class="highlight">CSS 的出现，让设计师可以自由控制每一个像素的视觉效果。</span></p>
<h2>二、CSS 能做什么</h2>
<p>CSS 可以控制颜色、字体、大小、间距、背景、边框、阴影、动画……几乎所有你能想到的视觉表现。把结构和样式分离，是网页开发最重要的思想之一。</p>
<div class="tip">
<strong>💡 学习建议：</strong> 不要试图背下所有 CSS 属性。掌握核心机制（选择器、优先级、盒模型、布局方式），具体属性用到时查文档即可。
</div>
<h2>三、下一步</h2>
<p>下一篇，我们将学习 CSS 中最核心的概念——<strong>盒模型</strong>。理解了它，你就掌握了页面布局的基石。</p>
</div>
</body>
</html>逐块解析：
body：设置全局背景色、字体和默认文字颜色。所有内部元素会继承color和font-family（可继承的属性）。.article：白色卡片容器，限制了最大宽度，用margin: 0 auto水平居中。.article h1和.article h2：限定在文章容器内的标题样式，不会影响页面外可能存在的其他标题。.subtitle：类选择器，专门给副标题加上灰色小字。.highlight：浅黄底加深色字的行内高亮效果。.tip：一个带蓝色左边框的提示框，背景浅蓝，文字深蓝。这是典型的“提示卡片”模式。line-height：设置行间距为 1.8 倍，让段落文字更透气。这是提升阅读体验的重要细节。
八、本篇动手练习
练习 1：三种选择器练习
新建 practice4-1.html，分别用标签选择器、类选择器、ID 选择器给页面中不同的元素设置不同的文字颜色。验证它们的作用范围。
练习 2：颜色和背景练习
新建 practice4-2.html，把页面的背景色改成你喜欢的颜色（不要用白色）。给正文文字设置一个舒适的深灰色，再给一个段落设置醒目的黄色背景。体会颜色搭配的视觉效果。
练习 3：文字样式练习
新建 practice4-3.html，写三个段落：第一段用默认字号，第二段用 20px 字号，第三段用 12px 字号。给其中一个段落设置居中，另一个设置右对齐。把字体设为 sans-serif 系列。
练习 4：综合改造
打开第七节的文章代码，做以下修改：
- 把页面的背景色改为深灰色
#2c3e50，把文章卡片的背景改为#ecf0f1。 - 把主标题改为白色
#ffffff。 - 把提示框的左边框颜色改为
#e74c3c（红色）。 - 在文章末尾自己加一个新段落，用
class="highlight"高亮其中一句话。
九、本篇小结
这一篇你学会了：
- CSS 的三种书写位置：内联（不推荐日常使用）、内部
<style>（练习常用）、外部.css文件（项目标准）。 - CSS 基本语法：
选择器 { 属性: 值; }。 - 三种基本选择器：标签选择器（
p）、类选择器（.class，最常用）、ID 选择器（#id，谨慎用于 CSS）。 - 控制颜色：
color（文字颜色）、background（背景色），以及四种颜色值表示法。 - 控制文字：
font-size（大小）、font-family（字体）、text-align（对齐），以及line-height（行间距）。
你现在已经能把一个白底黑字的“裸”页面，打扮成有背景色、有卡片容器、有标题装饰、有高亮和提示框的精致文章页面。CSS 的魅力才刚刚展开。
下一篇预告
下一篇，我们将学习 CSS 中最重要的底层概念——盒模型。你会彻底搞懂 content、padding、border、margin 这四个区域的含义，学会用 width 和 height 控制元素大小，用圆角和阴影让卡片更精致，并初步接触 display: flex 弹性布局——让元素轻松水平居中、垂直居中。这是从“会写样式”到“会布局”的关键一跃。
前端·零基础入门专题，每周更新。
暂无评论内容