数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究HTML 和 CSS 如何协同工作？
概述
HTML（超文本标记语言）是一种标记语言，用于创建网站的骨架；CSS（层叠样式表）是一种样式语言，通过对页面应用不同的样式并进行适当的排列，使网站骨架更具吸引力。如同人体，骨骼起着 HTML 的作用，而人的属性，例如颜色、身高、大小以及许多其他属性，则起着 CSS 的作用。
因此，当用户向服务器请求页面时，服务器会以包含 HTML 和 CSS 文件的静态文件形式发送响应。在用户浏览器上，首先使用 HTML 加载页面的组件，CSS 作为页面的样式，所有这些过程都在纳秒 (ns) 内完成，因此坐在浏览器前的用户无法看到页面上反映的变化。
HTML 的重要性
可以说，HTML 和 CSS 是相互依赖的，没有 HTML 就无法使用 CSS，反之亦然。如果没有 HTML 元素或标签在网页上，我们又该如何实现 CSS 样式呢？
CSS 的重要性
CSS（层叠样式表），正如你所看到的，互联网上有数百万个网页。所有网页都设计得简洁明了，并带有精美的动画效果来提升用户体验，所有这些都可以通过 CSS 来实现。
向 HTML 添加 CSS
有三种方法可以将 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>Internal styling</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 上运行时，代码的输出不会发生变化。以上三种代码都会产生相同的输出。
结论
向 HTML 添加 CSS 的最佳方法是使用外部样式表。因为它对于开发人员来说，更改网页组件样式更容易。我们可以将 link 标签放在 head 标签内或 body 标签之后。将样式放在 head 标签内的优点是，HTML 从上到下加载。在这种情况下，页面的 CSS 将加载并立即应用到浏览器。将样式放在 body 标签之后会导致 HTML 骨架首先加载，而没有 CSS，这会降低页面的用户体验。我们可以得出结论，HTML 和 CSS 都是前端应用程序的必要组成部分。
634 次查看
