当前位置：首页 > java >正文

第二部分：网页的妆容 —— CSS（上）

java 2025/5/5 5:05:33

1 CSS 基础与引入方式：装修第一步
- 1.1 引入 CSS 的三种方式
- 1.2 基本语法： `选择器 { 属性: 值; }`
- 1.3 小例子：使用三种方式分别为 HTML 元素设置颜色
- 1.4 练习
2 CSS 选择器：精确选中要装修的部件
- 2.1 小例子：使用不同选择器修改样式
- 2.2 练习
3 盒子模型 (Box Model)：元素的占地面积
- 3.1 box-sizing 的重要性
- 3.2 小例子：观察盒子大小变化
4 文本与字体样式：给文字化妆
- 4.1 小例子：设置段落样式
- 4.2 练习
5 背景与颜色：粉刷墙壁和选择色彩
- 5.1 小例子：为一个 `<div>` 设置背景
- 5.2 练习

上一部分，我们用 HTML 构建了网页的“毛坯房”——有了结构，但还比较简陋。现在，我们要请出“装修大师” CSS，来给我们的房子进行精美的粉刷、装饰和布局，让它变得漂亮又实用！

CSS 就像是设计师的调色盘和工具箱，它能控制网页上几乎所有元素的外观：颜色、大小、位置、字体，甚至还能添加动画效果。准备好让你的网页焕然一新了吗？

1 CSS 基础与引入方式：装修第一步

CSS 的全称是 Cascading Style Sheets（层叠样式表）。它就是用来定义 HTML 元素应该如何显示的规则集合。想象一下，你拿到房子的设计图（HTML），然后需要一份详细的装修说明书（CSS），告诉施工队（浏览器）哪个墙刷什么颜色、用什么地砖、家具怎么摆放。

层叠性 (Cascading): 如果有多条规则都想作用于同一个元素，CSS 有一套规则（后面会讲优先级）来决定最终听谁的，就像装修时设计师、业主、工头都有想法，最后得有个定论。
继承性 (Inheritance): 某些样式可以像“家风”一样，从父元素传递给子元素。比如给整个 <body> 设置了字体，里面的段落 p 通常也会继承这个字体，除非你给 p 单独指定了字体。

1.1 引入 CSS 的三种方式

内联样式 (Inline Styles): 直接写在 HTML 元素的 style 属性里。
- 比喻： 装修师傅直接在墙上用粉笔写：“这面墙刷红色”。
- 缺点： 非常不推荐！样式和结构混在一起，难以维护和复用。只适合极个别特殊情况。
内部样式表 (Internal Stylesheet): 写在 HTML 文件头部的 <style> 标签里。
- 比喻： 在设计图（HTML 文件）的空白处单独写了一页装修说明。
- 缺点： 只对当前这个 HTML 文件有效，如果多个页面需要相同样式，需要复制粘贴，不方便管理。
外部样式表 (External Stylesheet): 写在一个单独的 .css 文件里，然后在 HTML 文件头部用 <link> 标签引入。
- 比喻： 专门准备一本详细的《装修规范手册》（.css 文件），所有房子（HTML 文件）都参照这本手册来装修。
- 优点： 强烈推荐！ 这是最常用、最规范的方式。实现了样式与结构的分离，易于维护、修改和复用。一份 CSS 文件可以控制多个 HTML 页面。

1.2 基本语法： `选择器 { 属性: 值; }`

选择器: 告诉浏览器你要给哪个元素（或哪些元素）设置样式。比如 h1（所有一级标题）、.important-text（所有 class 为 important-text 的元素）、#main-logo（ID 为 main-logo 的那个元素）。就像说“所有的卧室门”、“红色的墙壁”、“主吊灯”。
声明块 : 花括号 {} 里的内容。
属性: 你想改变哪个方面的样式，比如 color (文字颜色)、font-size (字体大小)、background-color (背景颜色)。就像说“颜色”、“尺寸”、“背景”。
值 : 你想设置成什么样，比如 red、16px、#ffffff。就像说“红色”、“16像素高”、“白色”。
分号 : 每个声明（属性: 值）后面必须用分号隔开。

1.3 小例子：使用三种方式分别为 HTML 元素设置颜色

打开我们的trae.ai，创建一个文件夹02-css
在这里插入图片描述
在文件夹下创建一个01.html文件

输入如下代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><title>CSS 引入方式示例</title><meta charset="utf-8"><style>/* 选择 h2 元素 */h2 {color: blue; /* 设置文字颜色为蓝色 */}</style><link rel="stylesheet" href="01.css">
</head>
<body><h1 style="color: red;">这是用内联样式设置的红色标题</h1><h2>这是用内部样式表设置的蓝色标题</h2><p>这是用外部样式表设置的绿色段落 (见 style.css)</p>
</body>
</html>

创建01.css文件，输入如下代码
在这里插入图片描述

p {color: green; /* 设置文字颜色为绿色 */}

在01.html上右键，选择Open with Five Server
在这里插入图片描述
浏览器会显示如下效果

1.4 练习

为你之前在第一部分创建的 index.html 页面（“我的第一个网页”）创建一个名为 styles.css 的外部 CSS 文件。
在 index.html 的 <head> 部分使用 <link> 标签引入这个 styles.css 文件。
在 styles.css 文件中，尝试给 <h1> 元素设置一个不同的颜色（比如 purple），给 <p> 元素设置一个不同的字体大小（比如 font-size: 18px;）。保存并刷新 index.html 看看效果。

2 CSS 选择器：精确选中要装修的部件

选择器是 CSS 的核心，它让你能够像精确制导一样，选中你想要施加样式的 HTML 元素。想象一下装修，你不能说把东西刷成蓝色，你得说清楚是把客厅的墙刷成蓝色还是把所有的门框刷成蓝色。选择器就是帮你精确描述哪个东西的工具。

标签选择器: 最简单，按元素类型选。像所有 门 都刷成棕色。
类选择器: 非常常用！给 HTML 元素添加 class="某个名字" 属性，然后在 CSS 里用 .某个名字 来选。可以给多个元素赋予同一个 class。像所有贴了 卧室 标签的门都刷成白色。
ID 选择器: 用于选中页面上唯一的元素（一个 HTML 文档中，ID 应该是独一无二的）。给 HTML 元素添加 id="唯一的名字" 属性，CSS 里用 #唯一的名字 来选。像把 大门 这个独一无二的门刷成红色。
优先级 : 这是个重要概念！如果多个选择器选中了同一个元素，并且设置了相同的属性，浏览器需要决定听谁的。通常规则是：内联样式 > ID 选择器 > 类选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 通配符选择器。更具体的规则比较复杂，但初期理解这个大致顺序就好。ID 的“权力”最大，标签的最小。就像装修时，业主直接在墙上写的（内联） > 设计师指明主卧室的特殊要求（ID）> 所有标为卧室的通用要求（类） > 所有墙壁的基础处理（标签）。

2.1 小例子：使用不同选择器修改样式

创建02.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 文档</title><link rel="stylesheet" href="02.css">
</head><body><div id="main-content"><h2 class="section-title important">章节标题 1</h2><p>这是第一段文字，包含一个 <a href="#" target="_blank">外部链接</a>。</p><h2 class="section-title">章节标题 2</h2><p>这是第二段文字。</p><ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ul><a href="#">内部链接</a></div>
</body></html>

创建02.css

/* 标签选择器：所有 p 元素 */
p {line-height: 1.6; /* 设置行高 */}/* 类选择器：所有 class 为 section-title 的元素 */.section-title {font-family: 'Arial', sans-serif; /* 设置字体 */border-bottom: 1px solid #ccc; /* 添加下划线 */}/* ID 选择器：ID 为 main-content 的元素 */#main-content {padding: 20px; /* 设置内边距 */background-color: #f9f9f9; /* 设置背景色 */}/* 属性选择器：所有 target="_blank" 的 a 元素 */a[target="_blank"] {color: orange; /* 设置颜色为橙色 */text-decoration: none; /* 去掉下划线 */}/* 伪类选择器：鼠标悬停在任何链接上时 */a:hover {color: red; /* 颜色变为红色 */text-decoration: underline; /* 添加下划线 */}/* 后代选择器：#main-content 里的所有 li 元素 */#main-content li {margin-bottom: 5px; /* 设置下外边距 */}/* 子代选择器：ul 的直接子元素 li 的第一个 */ul > li:first-child {font-weight: bold; /* 设置为粗体 */}/* 相邻兄弟选择器：紧跟在 class="important" 的 h2 后面的 p */h2.important + p {font-style: italic; /* 设置为斜体 */}/* 伪元素选择器：在每个列表项前添加一个小圆点 */ul li::before {content: "• "; /* 插入内容 */color: blue;}

运行后的效果
在这里插入图片描述

2.2 练习

为一个稍微复杂点的 HTML 结构（比如一个包含标题、图片、段落、列表的文章卡片）编写 CSS。尝试使用至少五种不同类型的选择器（包括基本、属性/伪类、组合）来精确选中并修改卡片内不同部分的样式。

3 盒子模型 (Box Model)：元素的占地面积

想象一下你在网页上看到的每一个 HTML 元素（比如一个段落、一个图片、一个按钮），它们在页面布局时都被看作是一个矩形的盒子。CSS 盒子模型就是用来描述这个盒子由哪些部分组成，以及如何计算它的大小的。

在这里插入图片描述

Content (内容区): 盒子的核心，显示实际内容的地方，比如文字、图片。它的尺寸由 width 和 height 属性控制（对于块级元素）。
Padding (内边距): 包裹在内容区外面的透明区域。它位于内容和边框之间。就像给相框里的照片留的白边。可以通过 padding-top, padding-right, padding-bottom, padding-left 或简写 padding 来设置。
Border (边框): 包裹在内边距外面的线条。就是盒子的“边框”。可以通过 border-width, border-style, border-color 或简写 border 来设置。
Margin (外边距): 包裹在边框外面的透明区域。它用来控制盒子与其他元素之间的距离。就像两幅画挂在墙上，它们之间的空白。可以通过 margin-top, margin-right, margin-bottom, margin-left 或简写 margin 来设置。

3.1 box-sizing 的重要性

默认情况下 (box-sizing: content-box;)，你设置的 width 和 height 只应用于内容区 (Content)。盒子的实际总宽度 = width + padding-left + padding-right + border-left-width + border-right-width。这常常让布局计算变得复杂。

强烈推荐 将 box-sizing 设置为 border-box！

/* 通常在项目开始时就这样设置 */
* {box-sizing: border-box;
}
/* 或者更精确地 */
html {box-sizing: border-box;
}
*, *::before, *::after {box-sizing: inherit; /* 让所有元素继承 html 的设置 */
}

当 box-sizing: border-box; 时，你设置的 width 和 height 就是盒子的总宽度（包括了 padding 和 border）。也就是说，width = border-left + padding-left + content width + padding-right + border-right。这样，如果你给一个盒子设置 width: 200px; padding: 20px; border: 1px solid black;，这个盒子的最终渲染宽度就是 200px，内容区的宽度会自动收缩以适应 padding 和 border。这大大简化了布局！

3.2 小例子：观察盒子大小变化

创建03.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="03.css">
</head><body><div class="box default-box">Content Box (Default)</div><div class="box border-box">Border Box</div>
</body></html>

创建03.css

.box {width: 200px;height: 100px;padding: 20px;border: 5px solid blue;margin: 15px;background-color: lightblue;}.default-box {/* box-sizing: content-box; (默认值) *//* 实际宽度 = 200 + 20*2 + 5*2 = 250px */}.border-box {box-sizing: border-box;/* 实际宽度 = 200px */background-color: lightgreen;}

运行后的效果
在这里插入图片描述
可以看到两个盒子设置的一样的宽度和高度，最终渲染的结果是不一样的，这样就会导致页面挤压变形

4 文本与字体样式：给文字化妆

文字是网页内容的核心载体。CSS 提供了丰富的属性来控制文本的外观，就像给书本选择合适的字体、字号、颜色、排版一样，让阅读体验更好。

字体选择 (font-family): 通常会提供一个字体列表，浏览器会从左到右依次尝试，直到找到用户电脑上安装的或者通过 @font-face 加载的字体。最后通常会放一个通用的字体族（如 sans-serif 无衬线体, serif 衬线体, monospace 等宽体）作为备选。
行高 (line-height): 不仅仅是行与行之间的距离，它定义了文本行的基线之间的最小距离。通常设置一个相对于 font-size 的无单位数值（如 1.5）是比较好的做法，这样当字体大小改变时，行高也会按比例缩放。
Web Fonts (@font-face): 解决了用户电脑上可能没有你设计中使用的特殊字体的问题。你可以通过 @font-face 规则指定字体文件的路径（通常是 .woff 或 .woff2 格式），然后在 font-family 中使用你定义的名字。或者使用在线字体库提供的服务。常见的在线字体库有有字库 (Youziku)、字由 (ZiYou)、阿里妈妈·智造字 (Alimama Fonts)、腾讯字体 (Tencent Fonts)、方正字库 WebFont、汉仪字库 WebFont

4.1 小例子：设置段落样式

创建04.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="04.css">
</head>
<body><p class="article-text">这是一段示例文本，我们将用 CSS 来美化它。注意观察字体、大小、颜色、行高和对齐方式的变化。<a>这是一个链接</a></p><hr><h2>字体效果演示：</h2><div class="font-demo"><p class="font-serif">这是通用衬线体 (serif) 的效果。</p><p class="font-sans-serif">这是通用无衬线体 (sans-serif) 的效果。</p><p class="font-monospace">这是通用等宽字体 (monospace) 的效果。</p><p class="font-georgia">这是 Georgia 字体的效果。</p><p class="font-microsoft-yahei">这是微软雅黑字体的效果。</p><p class="font-noto-sc">这是思源黑体简体中文的效果。</p><p class="font-noto-tc">這是思源黑體繁體中文的效果。</p></div>
</body>
</html>

创建04.css

.article-text {color: #333; /* 深灰色文字 */font-size: 16px; /* 字体大小 16 像素 */font-family: "Microsoft YaHei", "Georgia", serif; /* 优先使用微软雅黑，然后 Georgia，最后通用衬线体 */line-height: 1.7; /* 行高为字体大小的 1.7 倍 */text-align: justify; /* 两端对齐 */text-decoration: none; /* 无文本装饰 */letter-spacing: 0.5px; /* 轻微增加字符间距 */
}.article-text a { /* 假设段落内有链接 */color: blue;text-decoration: underline; /* 给链接加上下划线 */
}.article-text a:hover {color: red;
}/* 引入思源黑体 */
@font-face {font-family: 'Noto Sans SC';src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap');
}/* 引入思源黑体繁体中文 */
@font-face {font-family: 'Noto Sans TC';src: url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
}/* 演示不同字体的类 */
.font-serif {font-family: serif; /* 通用衬线体 */
}.font-sans-serif {font-family: sans-serif; /* 通用无衬线体 */
}.font-monospace {font-family: monospace; /* 通用等宽字体 */
}.font-georgia {font-family: Georgia, serif; /* 指定 Georgia 字体 */
}.font-microsoft-yahei {font-family: "Microsoft YaHei", sans-serif; /* 指定微软雅黑字体 */
}.font-noto-sc {font-family: 'Noto Sans SC', sans-serif; /* 使用思源黑体简体中文 */
}.font-noto-tc {font-family: 'Noto Sans TC', sans-serif; /* 使用思源黑体繁体中文 */
}/* 为演示段落添加一些基本样式 */
.font-demo p {margin-bottom: 10px;border: 1px dashed #ccc;padding: 5px;
}

运行后的效果
在这里插入图片描述

4.2 练习

为一个模拟的新闻文章页面（包含大标题 h1、副标题 h2、作者信息 p、正文段落 p、引用 blockquote）设置一套专业的文本样式。

为不同级别的标题选择合适的 font-size 和 font-weight。
为正文选择易于阅读的 font-family 和 line-height。
统一链接 a 的样式，并在鼠标悬停时改变颜色。
尝试使用 @font-face 引入一个免费的 Web 字体并应用到标题上（可选，需要字体文件或使用在线服务）。

5 背景与颜色：粉刷墙壁和选择色彩

背景和颜色是视觉设计的基础。CSS 让你能轻松地为元素设置纯色背景、图片背景，并精细控制图片的显示方式。颜色的表示方法很多，你需要熟悉最常用的几种。

背景图片控制:
- background-repeat: no-repeat; 让图片不重复平铺。
- background-position: center center; 让图片在元素内居中显示。
- background-size: cover; 让图片等比例缩放，覆盖整个元素区域，可能会裁剪掉部分图片。
- background-size: contain; 让图片等比例缩放，完整显示在元素区域内，可能会留有空白。
- background-attachment: fixed; 可以创建视差滚动效果（背景图固定不动，内容滚动）。
颜色表示法:
- HEX (#RRGGBB) 是网页设计中最常用的。#000000 是黑色，#ffffff 是白色。
- RGBA (rgba(...)) 非常有用，因为它允许你设置透明度，可以实现半透明的背景色，让下面的内容隐约可见。
- HSL/HSLA 在某些情况下调整颜色（比如改变亮度或饱和度）比 RGB 更直观。

5.1 小例子：为一个 `<div>` 设置背景

创建05.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="05.css">
</head>
<body><div class="section no-repeat"><h2>背景不重复</h2><p>background-repeat: no-repeat</p></div><div class="section center"><h2>背景居中</h2><p>background-position: center center</p></div><div class="section cover"><h2>背景覆盖</h2><p>background-size: cover</p></div><div class="section contain"><h2>背景包含</h2><p>background-size: contain</p></div><div class="section fixed"><h2>固定背景</h2><p>background-attachment: fixed</p></div>
</body>
</html>

创建05.css

/* 通用样式 */
.section {height: 400px;margin: 20px;padding: 20px;color: white;text-align: center;background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect width="200" height="200" fill="%234a90e2"/><circle cx="100" cy="100" r="80" fill="%23f5a623"/><polygon points="100,40 130,140 40,80 160,80 70,140" fill="%23ffffff"/></svg>');background-color: #333;
}.section h2 {margin-top: 160px;font-size: 24px;
}.section p {font-size: 16px;margin-top: 10px;
}/* 不重复背景 */
.no-repeat {background-repeat: no-repeat;
}/* 居中背景 */
.center {background-position: center center;
}/* 覆盖背景 */
.cover {background-size: cover;
}/* 包含背景 */
.contain {background-size: contain;
}/* 固定背景 */
.fixed {background-attachment: fixed;
}

5.2 练习

找一张图片，尝试为一个 <div> 设置背景图片。
分别实验 background-repeat, background-position, background-size (特别是 cover 和 contain) 的不同值，观察效果。
使用 RGBA 或 HSLA 为另一个 <div> 设置一个半透明的背景色，让它能看到后面页面的内容。
尝试创建一个从上到下或从左到右的渐变背景 (需要搜索 CSS Gradient 的用法，如 linear-gradient())。