CSS参考-MDN文档

引入CSS

在 HTML 中引入 CSS

方法 1：外部 CSS 文件 (<link>)

最推荐的方法，适用于分离样式和结构，提高可维护性。

🔹 示例：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

✅ 优点：

• 结构与样式分离，方便管理和复用。
• 缓存优化，减少页面加载时间。

---

方法 2：内部 CSS (<style> 标签)

适用于单个 HTML 页面，不需要多个页面复用。 🔹 示例：

<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: red;
    }
  </style>
</head>

✅ 优点：

• 适用于小型项目 或 仅限单个页面的样式。

❌ 缺点：

• 不能复用，影响可维护性。

---

方法 3：行内 CSS (style 属性)

适用于临时调整单个元素。

🔹 示例：

<h1 style="color: blue; font-size: 24px;">Hello World</h1>

✅ 优点：

• 适用于动态设置样式。

❌ 缺点：

• 影响代码可读性，不建议大规模使用。

---

在 JavaScript 中引入 CSS

方法 4：动态加载外部 CSS 文件

适用于动态切换主题或按需加载 CSS。

🔹 示例：

const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "styles.css";
document.head.appendChild(link);

✅ 优点：

• 动态控制 CSS，适用于切换主题、懒加载。

---

方法 5：修改 style 属性

适用于动态调整单个元素的样式。

🔹 示例：

document.getElementById("myDiv").style.color = "red";

✅ 优点：

• 适用于 JavaScript 交互，如按钮点击修改样式。

❌ 缺点：

• 不推荐用于大规模样式管理。

---

方法 6：修改 classList（推荐）

适用于切换 CSS 类名，比直接修改 style 更可维护。

🔹 示例：

document.getElementById("myDiv").classList.add("highlight");

✅ 优点：

• 推荐方法，与 CSS 配合更好。

---

方法 7：创建 <style> 并插入 CSS

适用于动态生成样式。

🔹 示例：

const style = document.createElement("style");
style.innerHTML = "body { background-color: yellow; }";
document.head.appendChild(style);

✅ 优点：

• 适用于临时修改全局样式。

---

🎯 总结

方法	适用场景	可维护性
<link> 外部 CSS	推荐方式，大型项目	高 ✅
<style> 内部 CSS	单页面或测试代码	中 ⚠️
style 属性（行内 CSS）	临时调整单个元素	低 ❌
动态 link 引入	主题切换 / 懒加载	高 ✅
修改 style 属性	JavaScript 交互	低 ❌
修改 classList	JavaScript 交互（推荐）	高 ✅
插入 <style>	动态生成 CSS	中 ⚠️

---

🔹 推荐使用：

• 外部 CSS (<link>) 用于大多数场景
• classList.add/remove 用于动态样式控制
• 动态 link 加载 用于主题切换

---