HTML 和 CSS 如何协同工作?
概述
HTML(超文本标记语言)是一种标记语言，用于构建网站的框架;CSS(层叠样式表)是一种样式语言，它通过将不同的样式按适当的顺序排列到页面上，使网站的框架更具吸引力。就像人体一样，骨骼骨架充当 HTML 的角色，而人体的属性(例如颜色、高度、大小以及许多其他属性)则充当 CSS 的角色。
因此，当用户从服务器请求页面时，服务器会以包含 HTML 和 CSS 文件的静态文件的形式发送响应。在用户浏览器上，首先加载页面组件，并使用 HTML 和 CSS 来设置页面样式。整个过程以纳秒 (ns) 为单位，因此浏览器用户无法看到页面的更改。
HTML 的重要性
可以说 HTML 和 CSS 相互依赖，因为没有 HTML 就无法使用 CSS，而没有 CSS 就无法使用 HTML。网页上如果没有 HTML 元素或标签，那么我们如何实现 CSS 样式呢?
CSS 的重要性
CSS(层叠样式表)，正如您所见，互联网上有数百万个网页。所有网页都设计得简洁明了，并带有出色的动画效果，以提升用户体验，而所有这些都可以通过 CSS 来实现。
将 CSS 添加到 HTML
有三种方法可以将 CSS 样式表添加到 HTML 页面:
内部样式表
内联样式
外部样式
内部样式表
内部样式表:这种样式可以在同一个 HTML 页面的 head 标签内进行设置。它由开始和结束 标签组成，页面的样式设置都在这些标签内进行。我们将通过一个示例来理解内部样式。
示例
<html>
<head>
<title>Internal styling</title>
<style>
p{
color: green;
}
</style>
</head>
<body>
<p>tutorialspoint.com</p>
</body>
</html
内联样式
这种样式在 HTML 元素或标签本身内完成。当我们需要更改特定标签的样式时，它非常有用。这种样式在 style 属性内完成，该属性以"键值对"的形式接收 CSS 属性。因此，当组件渲染时，样式也会随之渲染。为了了解更多信息，请参阅下面的示例。
示例
<html> <head> <title>内部样式</title> </head> <body> <p style="color: green;">tutorialspoint.com</p> </body> </html>
外部样式
外部样式是大型项目的最佳样式类型，因为元素的样式是在另一个文件中完成的，而不是在同一个 HTML 文件中。要在页面中使用这种样式，需要在 HTML 页面中使用一个 标签，其中包含两个属性"rel"和"href"。"href"属性包含 CSS 文件的位置。因此，当页面加载时，从 link 标签链接的 CSS 也会加载到页面中。
示例
index.html <html> <head> <title>Internal styling</title> <link rel="stylesheet" href="style.css"> </head> <body> <p>tutorialspoint.com</p> </body> </html>
style.css
p{
color: green;
}
在以上示例中，我们看到了三种不同类型的 CSS 实现，因此当这些代码在 IDE 中运行时，代码的输出不会有任何变化。以上三段代码的输出相同。
结论
将 CSS 添加到 HTML 的最佳方式是使用外部样式表。因为从开发人员的角度来看，这样可以轻松更改网页组件的样式。我们可以将 link 标签放在 head 标签中或 body 标签之后。将样式放在 head 标签中的好处是 HTML 的加载顺序是从上到下。在这种情况下，页面的 CSS 将会加载，并在 HTML 加载后立即在浏览器中实现。将样式放在 body 标签之后的副作用是，HTML 框架会先加载，而 CSS 则会先加载，这会降低页面的用户体验。我们可以得出结论，HTML 和 CSS 都是前端应用程序的必要组成部分。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
