CSS 样式表的四种应用方式详解以及css注释的应用

一、外部 CSS（推荐方式）

定义：将 CSS 代码保存为独立的 .css 文件，通过  标签引入 HTML。

优点：

• 实现内容与样式完全分离
• 多个页面可共享同一 CSS 文件
• 浏览器可缓存 CSS 文件，提升加载速度

案例：

1. 创建 styles.css 文件：

css

/* styles.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}
h1 {
  color: #333;
  text-align: center;
}

1. 在 HTML 中引入：

html

预览

  


  
外部 CSS 示例

二、内部 CSS（嵌入样式）

定义：将 CSS 代码放在 HTML 文件的 

内部 CSS 示例

三、行内 CSS（内联样式）

定义：直接在 HTML 元素的 style 属性中添加 CSS。

特点：

• 优先级最高（会覆盖外部和内部 CSS）
• 不支持选择器，仅作用于当前元素
• 维护成本高，不推荐大量使用

案例：

html

预览

  
行内 CSS 示例
  
这是一个段落

四、多个样式表的使用

方式 1：多个外部 CSS 文件

html

预览

加载顺序规则：

• 后加载的样式会覆盖前面冲突的样式
• 建议按 "通用→特定" 的顺序加载

方式 2：内部 CSS 与外部 CSS 混用

html

预览

五、CSS 注释规范

单行注释：

css

/* 这是一个单行注释 */
body {
  margin: 0; /* 设置边距为0 */
}

多行注释：

css

/*
  这是一个多行注释
  用于说明复杂的样式块
  例如：导航栏样式
*/
nav {
  background-color: #333;
  color: white;
}

注释的最佳实践：

1. 为每个样式区块添加标题注释

css

/* 导航栏样式 */
nav { ... }

/* 按钮样式 */
.btn { ... }

1. 解释复杂的样式逻辑

css

/* 使用calc()动态计算宽度，减去滚动条宽度 */
.container {
  width: calc(100% - 17px); /* 减去垂直滚动条宽度 */
}

1. 标记临时样式

css

/* TODO: 完成后删除 - 测试用样式 */
.temp-style {
  border: 1px solid red;
}

六、四种样式应用方式的优先级

当同一元素有多个冲突样式时，优先级从高到低：

1. 行内 CSS（直接在元素的 style 属性中）
2. 内部 CSS（位于