在 HTML 页面上，CSS 样式信息可以放置在哪些位置?
我知道可以将 CSS 样式信息放置在 HTML 页面的 head 中，还有哪些地方可以放置 CSS 元素呢？
由于继承的原因，我想将我的 CSS 放在页面的其他位置，例如：
<style type="text/css">
...
</style>
7个回答
7
您可以使用
<link rel="stylesheet" type="text/css" href="style.css" />
在头部链接到外部样式表。
你还可以使用内联样式属性，例如：
<a href="#" style="color:red">Hello</a>
您也可以在脚本中设置样式，例如使用jQuery（可以放置在脚本的任何位置）：
$('textBox').css("font-weight", "bold");
然而，最好的实践是将所有样式信息保留在文档头部，这样可以更容易地让他人为您维护工作。
请注意，如果您真的想覆盖特定属性，最好的方法是使用!important选项，例如：
color: red !important;
您可以将此与上述任何方法一起使用，并且它将覆盖任何后续设置的冲突。
- a_m0d
4
您可以在 <head> 块中链接外部样式表。您可以使用多个样式表，并按顺序加载它们（在此示例中，screen.css 和 print.css 都覆盖了 style.css 的一些元素）。
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
您可以在块中从外部样式表导入它：
<style>
@import url(style.css)
</style>
或者使用其他方法导入它：
<style type="text/css" media="all">
@import "style.css";
</style>
你可以将CSS放在块中：
<style type="text/css">
p {font-face:Arial;}
</style>
您可以将CSS内联到HTML中：
<ul> <li style="list-style:none">Item 1</li></ul>
您可以通过JavaScript将CSS添加到DOM中：
function addCss(cssCode) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode));
}
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
- Curtis Tasker
2
您可以将其指定为“内联”。
<div style="border: 1px solid red" />
除此之外，我习惯于将其放在单独的文件或<head>标签中。
- l3dx
1
如其他人所说，如果你想编写语法正确的代码，非内联CSS应该放在head中。如果不确定，可以检查模式。
如果需要在动态页面创建期间生成CSS，则可以使用JavaScript将其轻松注入到DOM的头部底部：
如果需要在动态页面创建期间生成CSS，则可以使用JavaScript将其轻松注入到DOM的头部底部：
document.getElementsByTags('head')[0].appendChild( -- css here --);
请注意，这将导致您的页面渲染变慢并出现“闪烁”，因为浏览器必须在插入新CSS时重新设置页面样式。如果您忽略模式并将CSS放置在正文中，同样的情况也会发生。
这会导致用户体验不佳。
- BryanH
1
简单来说：
- 在其他文档中，使用 LINK 元素包含 CSS 文件：
<link href="style.css" type="text/css" rel="stylesheet"> - 与 HTML 元素内联：
<h1 style="color: red">标题</h1>
这通常是你会放置 CSS 的唯二位置。你也可以通过 JavaScript 将 CSS 应用于文档。
- Nick Presta
1
如果你关注CSS中的继承问题，那么你需要记住这个通用规则。
内联样式 > 所有其他样式。 标签 > ID ID > 类
那么你还有这些规则的组合。
标签 + ID (div#main) > ID
父标签 + 标签+ID > 标签+ID
请记住这些只是一般规则，但它们应该能解决99%的情况。将样式放在脚本中通常是一个不好的主意，因为它会影响性能，正如其他人所指出的，并且当你需要更改样式时，它还会增加另一个更新的位置。
- Alex Morales
2
那怎么回答楼主的问题呢？ - a_m0d
这个答案回答了问题，因为他真的关心继承。我正在向他展示继承的工作方式。他不需要移动脚本标签，只需使用正确的规则即可。 - Alex Morales
0
所以，您可以在要样式化的元素上将其作为属性内联指定...
<p style=" font-weight:bold; ">
或者，您可以将其添加到页面正文或页眉中的样式块中。
<style>
p {font-weight:bold;}
</style>
最后，您可以通过导入链接的CSS文件来包含它...
<style>
@import url(css/bold.css)
</style>
或者通过链接它...
<link rel="stylesheet" href="css/bold.css" />
说实话，99.9999%的情况下，链接是在网页中包含样式表的最佳方式，因为它将你的 CSS 与代码清晰地分离开来，使得对二者的更新变得更快。
- Paul Sweeney
3
1它还允许客户端缓存样式表，因此使用相同样式表的其他页面将加载得更快。 - BryanH
将样式块放在页面主体中是无效的。 - Gareth
你是正确的，它不会通过验证，但是98％的浏览器将在怪异模式或标准模式下加载和解析它。是的，在违反规范时做某些事情很糟糕，但在包含外部代码的情况下，这是一个选择。 - Paul Sweeney
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接