部署内嵌CSS

第一部分 – 第11章

CSS

当你的移动网站页面需要使用大块CSS样式代码时，最好的方式就是在一个外部文件（或者多个外部文件）中包括所有需要的CSS。这种CSS设置将最大化移动网站页面的加载速度。

在其他一些情况下，当你的移动网站页面仅需要使用很少的CSS代码时，使用外部文件包括CSS代码就不再有太大意义了。更好的方式是将CSS代码内嵌到移动网站页面的HTML代码中。这种设置将会减少对外部CSS文件的http请求数量，并能允许页面更快加载。

给网页添加CSS

当增加内嵌的CSS代码到移动网站页面时，必须添加到head部分的style标签内。例如： 

<head>
<style>

body {
  background-color: ffffff;
}

h1 {
  color: maroon;
  margin-left: 10px;
} 

p, ul, ol{margin-top:0;line-height:180%;}

a{text-decoration:underline;color:#C20000;}

</style>
</head>

这种设置方式也有不足之处，网络浏览器将不会像缓存外部CSS文件一样缓存内嵌的CSS内容。

移动网站性能技术白皮书在2017年3月正式出版。

英文版：Implement Inline CSS – 繁体中文版：部署内嵌CSS






移动网站性能技术白皮书上的内容按下列许可协议发布： CC Attribution-Noncommercial 4.0 International

Gordon Choi's Mobile Website Book