CSS 创建方式

有三种主要的方式可以将 CSS 应用到你的 HTML 文档中。了解它们的区别和适用场景非常重要。

1. 外部样式表 (External CSS)

这是最推荐和最常用的方法。你将所有的 CSS 规则都写在一个单独的 .css 文件中，然后在 HTML 文档的 <head> 部分使用 <link> 标签来引入它。

mystyle.css 文件:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

index.html 文件:

<!DOCTYPE html>
<html>
<head>
  <title>我的网站</title>
  <link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

优点:

关注点分离: 将 HTML (结构) 和 CSS (表现) 分开，使代码更清晰、更易于维护。
可重用性: 同一个 .css 文件可以被多个 HTML 页面引用，实现样式的全局统一。
缓存: 浏览器可以缓存 .css 文件，当用户访问网站的其他页面时，无需重新下载，从而加快页面加载速度。

2. 内部样式表 (Internal CSS)

你也可以将 CSS 规则直接写在 HTML 文档的 <head> 部分，并用 <style> 标签包裹起来。这种方法适用于单个页面需要特殊样式，而这些样式又不会在其他页面使用的情况。

index.html 文件:

<!DOCTYPE html>
<html>
<head>
  <title>我的网站</title>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
    }
  </style>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

优点:

方便快捷: 对于单个页面的简单样式，无需创建额外的文件。
请求数少: 所有样式都在 HTML 文件中，减少了一次 HTTP 请求。

缺点:

可维护性差: 当样式变得复杂时，HTML 文件会变得臃肿。
无法重用: 样式只对当前页面生效。

3. 内联样式 (Inline CSS)

内联样式是直接在 HTML 元素的 style 属性中编写 CSS 规则。这种方法应该尽量避免使用，因为它破坏了结构与表现分离的原则。

index.html 文件:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue; text-align:center;">这是一个居中的蓝色标题</h1>
<p style="color:red;">这是一个红色的段落。</p>

</body>
</html>

优点:

优先级最高: 内联样式的优先级非常高，可以覆盖其他任何地方定义的样式（除了 !important）。

缺点:

维护噩梦: 将样式散布在 HTML 的各个角落，极难管理和修改。
代码冗余: 无法重用样式，导致大量的代码重复。
性能问题: 无法利用浏览器缓存。

适用场景: 只有在极少数特定情况下才会使用，例如：

在 JavaScript 中动态地修改某个元素的样式。
在一些无法使用外部或内部样式表的 HTML 邮件模板中。

总结

方法	优点	缺点	推荐度
外部样式表	关注点分离、可重用、可缓存	需要额外文件和请求	★★★★★ (最高)
内部样式表	方便、请求少	无法重用、维护性差	★★★☆☆ (特定场景)
内联样式	优先级高	维护性极差、代码冗余	★☆☆☆☆ (尽量避免)

#CSS 创建方式

#1. 外部样式表 (External CSS)

#2. 内部样式表 (Internal CSS)

#3. 内联样式 (Inline CSS)

#总结

CSS 创建方式

1. 外部样式表 (External CSS)

2. 内部样式表 (Internal CSS)

3. 内联样式 (Inline CSS)

总结