应用 CSS

有三种方法可以应用 CSS 到 HTML：内联、内部和外部。

内联

内联样式直接使用 style 属性放入 HTML 标签中。

它们看起来像这样


<p style="color: red">text</p>

这将使该特定段落变为红色。

但是，如果你还记得的话，最佳实践是 HTML 应该是一个独立的、无表现的文档，因此应尽可能避免使用内联样式。

内部

嵌入式或内部样式用于整个页面。在 head 元素内，style 标签围绕着页面的所有样式。


<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>

    p {
        color: red;
    }

    a {
        color: blue;
    }

</style>
...

这将使页面中的所有段落变为红色，所有链接变为蓝色。

虽然这比用内联表现污染我们的 HTML 要好，但通常也同样最好将 HTML 和 CSS 文件分开，这样我们就剩下了我们的救星……

外部

外部样式用于整个、多页面的网站。有一个单独的 CSS 文件，它看起来就像这样


p {
    color: red;
}

a {
    color: blue;
}

如果这个文件以“style.css”的名称保存在与你的 HTML 页面相同的目录中，那么你可以在 HTML 中像这样链接它


<!DOCTYPE html>
<html>
<head>
    <title>CSS Example</title>
    <link rel="stylesheet" href="style.css">
...

应用！

为了从本指南中获得最大收益，最好在我们进行的过程中尝试一下代码，所以用你的文本编辑器开始一个新的空白文件，并将该空白文档保存为“style.css”，保存在与你的 HTML 文件相同的目录中。

现在修改你的 HTML 文件，使其开始看起来像这样


<!DOCTYPE html>
<html>
<head>
    <title>My first web page</title>
    <link rel="stylesheet" href="style.css">
</head>
...

保存 HTML 文件。这现在链接到了 CSS 文件，该文件目前是空的，所以不会改变任何东西。当你学习 CSS 初学者教程时，你将能够向 CSS 文件添加内容和更改，只需刷新包含 HTML 文件的浏览器窗口就可以看到结果，就像我们之前做的那样。