<style type="text/css">和<link href="style.css“rel="stylesheet”type="text/css“media="screen”/>之间的差异

Question

我对此相当陌生，所以主要是(复制和粘贴)一些YouTube和一些阅读材料。

为什么两者都有？请简化你的回答，不要太技术性了。

Answer 1

<style type="text/css">是您希望在页面中嵌入样式规则的时候。

当您有一个单独的样式表文件要在当前页面中引用时，就可以使用<link rel="stylesheet" href="path/to/style.css" /> -这样做意味着客户端不必每次都下载CSS，这使得页面加载速度更快。

CSS有@import指令，如果你使用<style>@import style.css;</style>，那么它大致等同于<link rel="stylesheet" href="style.css" /> (但有一些细微的区别:参见Difference between @import and link in CSS )。

Answer 2

方法1 (使用<style type="text/css">)

是声明CSS的简单方法。但它应该用于小代码。当您想要覆盖主样式表的属性时。

方法2 (使用<link rel="stylesheet" href="path/to/style.css" />)

这种方法的第一个优点是，我们在外部文件中有一个样式。这意味着我们可以重复使用它。但这并不是优势的终结。您可以告诉浏览器将文件保存在缓存中。这减少了页面加载时间。

什么更好？

在我看来，方法2。

Answer 3

使用<style type="text/css">是为了在HTML文件中包含CSS代码，而使用<link...>是为了包含外部CSS文件。