Question

您可以在HTML页面上将CSS样式信息放在哪里？

我知道你可以将CSS样式信息放在HTML页面的头部，在哪里放置CSS元素是有效的吗？

由于继承，我想将CSS放在页面的其他位置，例如：

<style type="text/css">
...
</style>

Answer 1

您可以使用

<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;

您可以将此功能与上面列出的任何方法一起使用，它将覆盖任何后来发生冲突的设置。

Answer 2

您可以在<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" />

您可以从<head>块中的外部样式表导入它：

<style>
  @import url(style.css)
</style>

或者使用其他方法导入它：

<style type="text/css" media="all">
  @import "style.css";
</style>

您可以将CSS放在<head>块中：

<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);
}

Answer 3

您可以将其指定为“内联”

<div style="border: 1px solid red" />

除此之外，我不习惯将它放在除了单独的文件/ <head>

之外的任何地方

Answer 4

副手：

在其他文件中。包含带有LINK元素的CSS文件：
＆lt; link href =“style.css”type =“text / css”rel =“stylesheet”＆gt;
内联HTML元素：
＆lt; h1 style =“color：red”＆gt;标题＆lt; / h1＆gt;

这通常是你将CSS放置的其他两个地方。您还可以通过JavaScript将CSS应用于文档。

Answer 5

正如其他人所说，如果你想编写语法正确的代码，非内联CSS属于头脑。如果您不确定，请检查架构。

如果您需要在动态页面创建过程中生成CSS，可以使用javascript轻松地将其注入头部底部的DOM中：

document.getElementsByTags('head')[0].appendChild( -- css here --);

预先警告这会导致页面渲染速度变慢并“闪烁”，因为浏览器必须在插入新CSS时重新设置页面。如果忽略模式并将CSS放在正文中，也会发生同样的事情。

这会导致糟糕的用户体验。

Answer 6

如果你关心css中的继承，那么你需要记住这个一般规则。

内联样式＆gt;其他一切。标签＆gt; ID Id＆gt;类

然后你有这些规则的组合。

标签+ id（div＃main）＆gt; ID

父标记+标记+ ID＆gt;标签+ ID

请记住，这些只是一般规则，但它们应该照顾99％的情况。在脚本中放置样式通常是一个坏主意，因为它会影响其他人注意到的穿孔，并且当您需要更改样式时，它会为您添加另一个更新位置。

Answer 7

因此，您可以将其内联指定为要设置样式的元素的属性...

<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与代码分开，从而使更新速度更快。

将CSS信息放在HTML页面上

7 个答案: