小八博客

Appearance

CSS参考-MDN文档 ​

引入CSS ​

在 HTML 中引入 CSS ​

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

🔹 示例：

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

✅ 优点：

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

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

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

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

✅ 优点：

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

❌ 缺点：

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

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

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

🔹 示例：

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

✅ 优点：

  • 适用于动态设置样式。

❌ 缺点：

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

在 JavaScript 中引入 CSS ​

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

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

🔹 示例：

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

✅ 优点：

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

方法 5：修改 style 属性 ​

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

🔹 示例：

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

✅ 优点：

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

❌ 缺点：

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

方法 6：修改 classList（推荐） ​

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

🔹 示例：

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

✅ 优点：

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

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

适用于动态生成样式。

🔹 示例：

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

✅ 优点：

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

🎯 总结 ​

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

🔹 推荐使用：

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

评论区

欢迎留言、补充或勘误。

xiaoba.blog

Copyright © 2023-2026 小八