极客笔记CSS HTML和CSS如何一起工作
概述
HTML（超文本标记语言）是一种标记语言，用于创建网站的骨架，而CSS（层叠样式表）是一种样式语言，通过对页面进行不同的样式排列，使网站的骨架更具吸引力。就像人类的骨骼骨架扮演HTML的角色，而人类的属性（如颜色、高度、大小等）扮演CSS的角色。
因此，当用户从服务器请求一个页面时，服务器以静态文件的形式发送响应，其中包含HTML和CSS文件。在用户浏览器中，首先加载页面的组件，用HTML和CSS作为页面的样式，这个过程在纳秒(nano-seconds)内完成，所以用户无法看到反映到页面上的变化。
HTML的重要性
可以说HTML和CSS彼此依赖，如果没有HTML元素或标签的网页，我们如何实现CSS样式。
CSS的重要性
可以看到互联网上有数百万个网页。所有这些网页都设计得非常整洁，配合了很棒的动画效果，以增强用户体验，所有这些都是在CSS的帮助下实现的。
将CSS添加到HTML中
添加CSS样式表到HTML页面有三种方法：
- 内部样式表
- 内联样式
- 外部样式表
内部样式表
内部样式表：在同一个HTML页面中，样式可以在head标签中完成。它包含在opening和closing的style标签之间，其中完成了页面的样式设置。我们将通过一个示例来了解内部样式表。
示例
<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>Internal styling</title>
</head>
<body>
<p style="color: green;">tutorialspoint.com</p>
</body>
</html>
外部样式
外部样式是用于大型项目的最佳样式类型，因为元素的样式是在另一个文件中而不是同一个HTML文件中完成的。为了在页面上使用这种样式，需要在HTML页面中使用一个标签，该标签具有两个属性“rel”和“href”。其中“href”属性包含CSS文件的位置。因此，当页面加载时，通过链接标签链接的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最好的方式是使用外部样式表。这样开发者可以更轻松地对网页组件的样式进行更改。我们可以将链接标签放在head标签中或body标签后。将样式放在head标签中的优点是，HTML会从上到下加载。因此，这样的话，HTML加载完成后，页面的CSS就会加载并立即应用到浏览器中。将样式放在body标签后的副作用是，HTML的骨架将首先加载，没有CSS，这会降低页面的用户体验。我们可以得出结论，HTML和CSS都是前端应用程序中必不可少的部分。