📜  外部 css - Html (1)

📅  最后修改于: 2023-12-03 15:08:10.375000             🧑  作者: Mango

外部 CSS - HTML

HTML 是网页的基础语言,而 CSS 可以让我们把网页设计得更加美观和漂亮。这里我们将讨论外部 CSS 及其在 HTML 中的使用。

什么是外部 CSS?

外部 CSS 是一种将样式定义放在单独文件中的 CSS 文件。这个 CSS 文件可以在 HTML 中通过标签引入。使用外部 CSS 的主要优点是我们可以在多个 HTML 页面中使用相同的样式表,有效地减少了代码重复和文件大小。同时,如果我们需要修改样式,只需要修改外部 CSS 文件而不需要修改每个 HTML 文件。

如何在 HTML 中使用外部 CSS?

要在 HTML 中使用外部 CSS,首先需要创建一个 CSS 文件。以下是一个基本外部 CSS 文件示例:

/* 外部 CSS 文件样式定义示例 */

body {
  background-color: lightblue;
}

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

然后,我们可以通过 标签在 HTML 文件中引入该 CSS 文件。以下是一个示例 HTML 文件:

<!DOCTYPE html>
<html>
<head>
  <title>外部 CSS 示例</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

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

</body>
</html>

在这个示例中,我们将同级目录下的 style.css 文件引入到 HTML 中。这个样式表定义了全局的 body 背景和 h1 标签的样式。我们可以通过修改该外部 CSS 文件来定制网页样式。

总结

外部 CSS 是一种在 HTML 页面中引入样式定义的方法,通过将样式定义放在单独的文件中可以多次使用以及减少代码重复。我们可以通过 标签在 HTML 文件中引用外部 CSS 文件。