Question

今天我尝试使用Google PageSpeed Insights检查我的网站，其中的建议是：＆＃34;在首屏内容中消除渲染阻止 CSS ＆＃34; 。据我所知，最好在页面的顶部包含所有 CSS （例如在＆lt; head＆gt;标记中），然后在页面后面包含其他内容的样式。在这个建议的文档中是这个示例构造：

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

但问题是，当我试图包含＆lt; link＆gt;时，HTML W3验证器会抛出错误（＆＃34; Stray start tag link＆＃34;）。里面＆lt; body＆gt;标签。所以问题是：什么是将CSS包含到页面中的更好方法（使用推荐构造是否正常）？

Answer 1

将CSS放在头部，如果可以的话组合CSS并相应地标记CSS文件（例如，media =“print”）。 https://varvy.com/pagespeed/render-blocking-css.html这是一个很好的来源，它解释了你可以做的更多的东西，但请记住，例如，内联css无法缓存，如果再次请求页面会使页面变慢。

页面上没有提到的另一件事就是通过javascript动态插入CSS：创建一个link-element并将其插入到dom-ready中的头部。

Answer 2

CSS（层叠样式表），内部样式表，外部样式表或内联有三个选项。您尝试使用的是内部样式表，使用外部，您可以在外部.css文件中编写CSS并在html代码中引用它。

在您的代码中，您尚未指定需要为蓝色的内容，

例如：

<style>
body {
    background-color: lightblue;
}
</style>

您可以使用css替换您想要增强的内容，例如h1，head，div等。

对于外部样式表，您可以执行相同的操作，但是在单独的文件中并按照您的方式进行链接，但是在头标记中，例如

。

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

内联（顾名思义），是在特定的行本身完成的。当您只想设计单个元素时，这非常有用。 e.g。

<h1 style="color:green;margin-left:15px;">Hello World!</h1>

我建议查看http://www.w3schools.com/css/，有用的

如何恰当地将CSS文件包含到页面中

2 个答案: