部署內嵌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