我应该在哪里声明我的页面上的样式？为什么？

在我的页面上声明我的CSS样式是否重要？我应该在哪里声明我的页面上的样式？为什么？

是这样的：

<style> 

    div{ 
     height: 50px; 
     width: 200px; 
    } 

</style> 

<body> 

    <div>This div</div> 

</body>

不同来呢？

<body> 

    <div>This div</div> 

</body> 


<style> 

    div{ 
     height: 50px; 
     width: 200px; 
    } 

</style>

如果是这样，怎么样？

我见过两个例子，从未真正注意到样式在页面加载时需要花费多长时间。尽管大约90％的时间，风格是在页面顶部声明的。

就我个人而言，我更喜欢包括一个单独的样式表，以避免以这种方式向页面添加样式。

来源

2014-06-19 Daft

内部CSS文件只用于同一个文件。但在外部CSS文件的情况下，您可以在各种页面中使用它。这是真正的因素。这也有助于更好地寻找。 – SkyWalker

将其放置在开始

您应该将在HEAD的STYLE元素有助于页面加载速度，因为这样的页面可以render as the HTML loads。

当网络浏览器读取网页时，它会按照写入HTML的顺序读取它。所以当你的样式表首先出现时，就是先读取的内容。然后，当浏览器到达HTML时，它已经知道如何设置它的样式，因此不必等待在显示内容之前加载CSS。

为什么不把样式表在页面

的底部。当你将在底部的样式表，这样可以防止许多浏览器，特别是Internet Explorer中，从做progressive rendering。 Internet Explorer甚至会阻止rendering of the page，直到添加了所有样式为止，以便它不必重新绘制页面。这意味着客户将看到一个空白页面，直到所有元素和样式都被加载完毕。

来源

2014-06-19 09:04:13 Richa

干杯的信息性响应Richa！ – Daft

@Daft非常感谢。很高兴帮助你 – Richa

向html页面添加样式时，会在页面加载并按照该顺序相应地进行解析时加载它们。像第一个例子一样，样式首先加载，然后加载没有意义的元素。在第二个元素中，元素首先加载默认样式，然后进行样式设置。将文件添加到单独的样式表等待页面加载，然后显示样式。在非常缓慢的连接或沉重页面中，差异是显着的。

来源

2014-06-19 09:01:01 Maxzeroedge

你应该把你的样式表头

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      div { 
       ... 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      .... 
     </div> 
    </body> 
</html>

来源

2014-06-19 09:03:25

style元素应适用于整个文档，无论放置在哪里，但通常将其放入head元素中。如果你把它放在其他地方，浏览器的处理有点片面，我不会感到惊讶。

请注意，html5允许您指定style元素的作用域属性，这意味着它仅适用于style元素的父元素及其所有子元素。

顺便说一下，通常的做法是将css放在单独的文件中，并使用<link>标记将CSS包含在文档中。这样你可以在多个页面上共享CSS。

来源

2014-06-19 09:09:34

最好把样式表放在头部。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style> 
     div{ 
      height: 50px; 
      width: 200px; 
     } 
    </style> 
</head> 
<body>

建议这样做，因为当你在开始之前声明CSS时，你的样式已经实际加载了。所以用户很快就会看到屏幕上显示的内容（例如背景颜色）。如果没有，用户在CSS到达用户之前会看到空白屏幕一段时间。另外，如果您将样式放置在某处，浏览器必须在声明的样式已解析时重新呈现该页面（加载时新旧）。

来源

2014-06-19 09:14:39

根据任何CSS规范，只有第一个替代品在body之前有效。在结束标记</body>之后没有标记，除了结束标记</html>。

虽然浏览器是宽容的，但通常没有理由甚至认为偏离了正确的顺序。在某些创作情况下，您可能无法在其所属的元素（head部分）注入style元素，但即使如此，它仍应放置在结束标记</body>之前。

来源

2014-06-19 10:43:14

我应该在哪里声明我的页面上的样式？为什么？

回答

相关问题