在 HTML 文件中添加外部 CSS答案

【问题标题】：Adding external CSS in an HTML file在 HTML 文件中添加外部 CSS
【发布时间】：2009-12-22 17:22:02
【问题描述】：

我知道我可以像这样在我的页面上包含 CSS：

<style>
.style{
   .. 
}
</style>

如何在 HTML 页面中添加外部样式表文件？

【问题讨论】：

标签： html css

【解决方案1】：

在你的 HEAD 中，添加：

<link rel="stylesheet" type="text/css" href="your_css_file.css">

css 文件本身不包含<style> 标签。

【讨论】：

你忘了media="screen"和title="mycss"
@Jonno_FTW 这些不是必需的。默认行为几乎适用于所有常见情况。
@Jonno_FTW：为什么标题属性会有用？甚至允许吗？以前从未在<link> 中见过它。
当您的页面有备用样式表（比如高对比度或较大字体的样式表）时，标题很有用：在 Firefox 中，您可以使用 View->Page Style 在样式表之间切换。
"在你的 HEAD 中，添加..." :)

【解决方案2】：

最简单的方法是将样式表链接添加到文档 HEAD 部分：

<link rel="stylesheet" href="style.css" type="text/css">

这样做会降低第一次加载时的性能（因为系统必须请求两个文件而不是一个），但会提高后续性能，因为样式表会在缓存中保留一段时间。

【讨论】：

【解决方案3】：

来自 StackOverflow 的页面：

<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5885"  type="text/css">

我认为除非在您网站的多个网页之间共享同一个 CSS 文件（以便浏览器可以缓存它），否则它不会大大提高速度。否则会产生额外的 HTTP 连接来检索 CSS。

【讨论】：

别忘了您可以查看任何网站的来源，看看他们是如何做到的。
我想最常见的做法是添加一个链接，以便您可以更好地组织您的代码，并拥有一个适用于整个网站的 UI 模板。总的来说，最好坚持使用独立的 CSS。（不确定你的意思是什么鬼鬼祟祟）。
在大多数浏览器中，您可以右键单击并“查看源代码”以查看该网站如何引入自己的 css，无论是内联的还是外部的。

【解决方案4】：

在 html 文件的头部添加以下行

<link rel="stylesheet" type="text/css" href="path/to/your/style.css">

然后你可以在style.css中添加样式，比如，

.classname{
...
}

还有内联样式表，可以在html行本身添加，例如

<a style="color:red;" href="#"></a>

【讨论】：

【解决方案5】：

你需要在你的html文件的head部分添加这个标签

<link rel="stylesheet" type="text/css" href="css_file.css">

【讨论】：