logo标签列表

在HTML文件中添加外部CSS

htmlcss
39

我知道可以这样在网页中引入CSS:

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

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

7个回答
68

在你的 HEAD 中添加：

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

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

你忘记了添加 media="screen" 和 title="mycss"。 - Jonno_FTW
1
@Jonno_FTW 这些并不是必需的。默认行为对于几乎所有常见情况都足够好了。 - ceejayoz
1
@Jonno_FTW：title属性有什么用处？它是否被允许？我以前在<link>中从未见过它。 - Geert
6
当你的网页有备用样式表时（例如高对比度或大字体），标题很有用：在Firefox浏览器中，你可以通过"查看->页面样式"来切换样式表。 - djn
3
在你的脑海中添加... - Nav
你还需要 type 和 rel 吗？ - Kellen Stuart
21

最简单的方法是将样式表链接添加到文档的 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而受到惩罚。
3
别忘了你可以查看任何网站的源代码来了解它们是如何实现的。 - Sneakyness
我猜最常见的做法是添加一个链接，这样你可以更好地组织你的代码，并且拥有一个适用于整个网站的UI模板。总的来说，最好坚持使用独立的CSS。（不确定你所说的Sneakyness是什么意思）。 - rui
在大多数浏览器中，您可以右键单击并“查看源代码”以查看该网站如何引入其自己的CSS，无论它是内联还是外部的。 - Mike
0
在你的标签中添加这行代码，只需填写你的CSS文件路径和文件名。 

<head>
<link rel="stylesheet" type="text/css" href="fonts/css/fontawesome-all.min.css">
</head>

1
你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community
0

你需要在 HTML 文件的头部添加这个标签

<HEAD>
<link rel="stylesheet" type="text/css" href="giveThePathToYourStyle.css">
</HEAD>
0
在你的HTML文件头部添加以下行：
<link rel="stylesheet" type="text/css" href="path/to/your/style.css">

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

.classname{
...
}

还有内联样式表，您可以将其添加到HTML行中，例如

<a style="color:red;" href="#"></a>
这个回答对已有八年历史的答案没有任何补充。 - Ethan Furman
0
在HTML文件中添加外部CSS的语法是：
<link rel="stylesheet" href="style.css">

但如果我能这样做，那将更容易记住并且更加一致。
<style rel='stylesheet' href="/style.css"></style>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接