好的，阿杰，我帮你整理一份 CSS 样式表的四种应用方式以及 CSS 注释的使用小结，方便理解和实际开发。
CSS 样式表的四种应用方式
CSS 可以通过不同方式应用到 HTML 页面中，每种方式有不同的场景和优缺点。
1️⃣ 内联样式（Inline CSS）
语法
在 HTML 元素中直接使用 style 属性定义样式：
<p style="color: red; font-size: 16px;">内联样式示例</p>
特点
- 优点：
- 简单快速，适合单个元素临时样式。
- 优先级高，可覆盖外部或内部样式。
- 缺点：
- 不利于维护，样式分散。
- 难以复用，增加 HTML 冗余。
2️⃣ 内部样式表（Internal / Embedded CSS）
语法
在 HTML 文件 <head> 中使用 <style> 标签：
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
特点
- 优点：
- 样式集中，便于管理。
- 不依赖外部文件。
- 缺点：
- 仅对当前 HTML 页面有效。
- 页面多时可能增加 HTML 文件体积。
3️⃣ 外部样式表（External CSS）
语法
将样式写在单独的 .css 文件中，通过 <link> 引入：
<head>
<link rel="stylesheet" href="style.css">
</head>
style.css 内容示例：
p {
color: green;
font-size: 16px;
}
特点
- 优点：
- 样式集中，便于管理和复用。
- 可以多页面共享，减少重复代码。
- 缺点：
- 需要额外请求文件，首次加载可能稍慢。
4️⃣ 导入样式表（@import）
语法
在 <style> 或 CSS 文件中使用 @import 引入其他 CSS 文件：
@import url("style.css");
特点
- 优点：
- 可分模块管理样式，方便拆分文件。
- 缺点：
- 加载性能低于
<link>，影响页面渲染速度。 - 不推荐用于关键样式表。
- 加载性能低于
CSS 注释的使用
语法
/* 这是一个注释 */
p {
color: red; /* 段落字体红色 */
}
特点
- 多行注释：
/* 这是多行注释 可以用于说明整个模块 */ - 不能嵌套：
/* ... /* ... */ ... */会报错。 - 作用：
- 注释说明代码功能、模块或特殊处理。
- 提高可读性和维护性。
- 在调试时可临时屏蔽样式。
总结
| 应用方式 | 优点 | 缺点 | 使用场景 |
|---|---|---|---|
| 内联样式 | 简单、优先级高 | 不可复用、难维护 | 临时样式、测试 |
| 内部样式表 | 便于管理、集中 | 仅页面有效 | 单页项目或临时页面 |
| 外部样式表 | 可复用、多页面共享 | 需要额外请求 | 大型网站、模块化开发 |
| @import | 样式模块化 | 加载慢、影响性能 | 模块化或分文件管理 |
CSS 注释
- 提高代码可读性
- 便于调试和说明
- 不嵌套使用