HTML 为 Web 内容提供基本结构，定义标题和段落等元素。然而，CSS 通过设置元素样式来提升这一点，确保充满活力的设计和响应式布局。HTML 设置内容层次结构，而 CSS 则增加了从颜色到动画的视觉吸引力。有效的网页设计将CSS与HTML合并，通过内联，内部或外部CSS方法实现。外部 CSS 优先考虑关注点分离，优化代码组织。
下面的图片看起来丑陋而无聊，因为它是单独使用 HTML 构建的。
下面的图片看起来非常漂亮，外观是用户友好的，因为CSS已被添加到HTML中。
将 CSS 添加到 HTML 元素的 3 种方法是：
- 内联 CSS
- 内部 CSS
- 外部 CSS
将内联 CSS 添加到 HTML
内联CSS是将CSS添加到HTML的第一种也是最基本的方法，它要求您将style属性添加到HTML元素中，并在style属性中添加属性。这是最有效的样式设置方法，因为它会使用其他样式方法覆盖已赋予 HTML 元素的所有其他样式。
如何将内联 CSS 添加到 HTML
为要设置样式的 HTML 元素创建一个 style 属性，并在其中包含 CSS 属性，如下所示。
<htmlElement style="cssProperty: value">...</htmlElement>
内联 CSS 示例
如果您的任务是通过赋予它们不同的颜色来设置 6 个不同段落标签的样式，那么实现此目的的最佳方法是内联 CSS 方法，因为它只影响它被添加到的 HTML 元素，而忽略其余元素。
因此，如果将绿色添加到第一段中，则只有第一段服从它，因为它是特定于第一段的。
上述任务的代码实现可以在下面找到。
<!DOCTYPE html>
<html>
<body>
<p style="color: green">My First Paragraph</p>
<p style="color: blue">My Second Paragraph</p>
<p style="color: brown">My Third Paragraph</p>
<p style="color: red">My Fourth Paragraph</p>
<p style="color: orange">My Fifth Paragraph</p>
<p style="color: yellow">My Sixth Paragraph</p>
</body>
</html>
第一段变为绿色，第二段也变为蓝色。它们不能相互影响，因为样式对于每个 HTML 元素都是特定且唯一的。
将内部 CSS 添加到 HTML
内部 CSS 与内联 CSS 的不同之处在于，CSS 属性和值不包含在样式属性中，而是包含在大括号中，然后添加到类名、id 或标记名称中。然后，将 class、id 或 tagname 添加到 HTML 文件的 head 部分的样式标记中。
HTML 元素可以设置样式，而不必使用内部 CSS 而不是内联 CSS 为每个单独的 html 元素行提供样式。
如何将内部 CSS 添加到 HTML
内部 CSS 是通过在 HTML head 部分的样式标签中编写 CSS 代码来添加的。下面的步骤显示了如何在内部将 CSS 添加到 HTML。
在 HTML 文件的 head 部分创建一个样式标记，并借助类名、id 或标记名称添加所需的样式属性和值。
<!DOCTYPE html>
<html>
<head>
<style>
selector {
CSS property: value;
}
</style>
</head>
选择器可以是类名、ID 或标记名。因此，一旦您将样式添加到特定的选择器，html 文件中的所有 html 元素都会带有给定的样式。
内部 CSS 示例
让我们尝试一下内部 CSS 的应用来设置一些 html 元素的样式。如果您想更改某些链接标签的颜色，并且链接在您网站的不同位置使用，内部 CSS 是一个很好的使用方法，因为它可以轻松设置链接的样式，并且样式将应用于每个链接。
下面的 HTML 代码显示了一个带有社交媒体页面链接的 div，在本节中，我们将使用内部 CSS 样式方法设置链接的样式。
<div>
<a href="https://twitter.com/TwitterHandle">Twitter</a>
<a href="https://linkedin.com/LinkedinUsername">Linkedin</a>
<a href="https://instagram.com/InstagramUsername">Instagram</a>
<a href="https://facebook.com/FacebookUsername">Facebook</a>
</div>
--- HTML 代码
要设置上述链接的样式，请在 HTML 文档的 head 部分创建一个样式标签，并使用表示为选择器的标签名称获取链接，然后您可以应用这些样式。
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: green;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
--- HTML 代码
使用上面的代码，您已经根据使用内部 CSS 给出的说明成功设置了链接的样式。
将外部 CSS 文件添加到 HTML
外部CSS是将CSS添加到HTML的第三种方法，它与内部CSS非常相似，只是样式位于具有.css扩展名的单独文件中。
外部 CSS 使您的工作干净，因为 HTML 和 CSS 位于单独的文件中，并且由于样式仅在一个文件中，因此还可以轻松快速地对样式进行编辑。
在.css文件中添加样式后，仅当使用 link 标记将样式链接到 head 部分中的 HTML 文件时，才会应用样式。
您将在下一节中学习如何添加外部 CSS。
如何将外部 CSS 添加到 HTML
创建一个具有 .css 文件扩展名的单独文件，您可以将其命名为 styles.css。然后在styles.css中，您可以使用 HTML 元素的特定选择器添加样式。
然后，在 HTML 文件中添加一个链接标记，将styles.css文件链接到 HTML 文档，以便它可以应用给定的样式。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
--- HTML 代码
根据上面的代码，styles.css已链接到 HTML 文档。
外部 CSS 示例
我们将使用与内部 CSS 相同的示例，因为它们非常相似，只是我们现在将使用两个单独的文件。
创建两个名为 index.html 和 styles.css 的文件，在index.html文件中将下面的 HTML 代码粘贴到其中，您可以在下面的代码中看到 styles.css 文件已在 head 部分链接。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div>
<a href="https://twitter.com/TwitterHandle">Twitter</a>
<a href="https://linkedin.com/LinkedinUsername">Linkedin</a>
<a href="https://instagram.com/InstagramUsername">Instagram</a>
<a href="https://facebook.com/FacebookUsername">Facebook</a>
</div>
</body>
</html>
--- HTML 代码
将下面的代码添加到styles.css文件中，以设置链接的样式，就像我们在内部 CSS 中所做的那样。
a {
color: green;
text-decoration: none;
cursor: pointer;
}
--- CSS 代码
您已通过更改颜色、添加指向链接的指针并更改默认下划线样式来成功设置链接的样式。
随着项目规模的扩大，外部 CSS 是必不可少的，因为它要求您为不同的 HTML 文档创建不同的样式，而不是用样式重载 HTML 文档。
将所有三种类型的 CSS 添加到 HTML
将 CSS 添加到 HTML 的三种不同方法可以一起使用，但浏览器遵循最接近 HTML 元素的样式，即内联 CSS，然后是内部 CSS，然后是外部 CSS。这个概念被称为 CSS 特异性，因为它显示了应用样式的层次结构。
:::
总结
- 向 HTML 添加 CSS 有三种方法，分别是内联、内部和外部 CSS。
- 内联 CSS 使用 HTML 元素的 style 属性添加到 HTML 中。
- 通过在 head 部分创建样式标记并使用 html 元素的选择器将样式添加到标记中，将内部 CSS 添加到 HTML 中。
- 通过创建一个单独的样式文件将外部 CSS 添加到 HTML，然后使用标题部分的链接标记将样式文件链接到 HTML 文档。
- 如果将 3 种方法一起使用，则应用样式的层次结构是内联样式，然后是内部样式，然后是外部样式。
