支援的 CSS

就像所有網頁一樣，AMP 頁面使用 CSS 設定樣式，但您不能參考外部

樣式表（自訂字型除外）。

此外，由於效能考量，某些樣式是不允許的。

樣式可以存在於文件的 head 中，或作為內聯 style 屬性（請參閱「將樣式新增至頁面」）。但是您可以使用 CSS 預處理器和範本來建置靜態頁面，以更好地管理您的內容。

注意事項 – AMP 元件帶有預設樣式，使撰寫回應式頁面變得相當容易。這些樣式定義在 amp.css 中。

不允許的樣式

以下樣式在 AMP 頁面中不允許

禁用樣式	描述
`!important` 限定詞	不允許使用和參考 `!important`。這是 AMP 能夠強制執行其元素尺寸規則的必要條件。
`<link rel=”stylesheet”>`	不允許，但自訂字型除外。
`i-amphtml-` 類別和 `i-amphtml-` 標籤名稱。	驗證器不允許使用符合以下正則表達式 `(^\|\W)i-amphtml-` 的類別和標籤名稱。這些名稱保留供 AMP 框架內部使用。因此，使用者的樣式表可能不會參考 `i-amphtml-` 類別和標籤的 CSS 選擇器。

效能建議

為了獲得最佳效能，這些允許的樣式應將值限制為以下

限制樣式	描述
`transition` 屬性	僅限 GPU 加速屬性（目前為 `opacity`、`transform` 和 `-vendorPrefix-transform`）。
`@keyframes {...}`	僅限 GPU 加速屬性（目前為 `opacity`、`transform` 和 `-vendorPrefix-transform`）。

自訂字型例外

AMP 頁面不能包含外部樣式表，但自訂字型除外。

繼續閱讀 – 深入瞭解 AMP 中的自訂字型。

使用 CSS 預處理器

預處理器產生的輸出在 AMP 中的運作方式與任何其他網頁相同。例如，amp.dev 網站使用 Sass。（我們使用 Grow 來建置構成 amp.dev 網站的靜態 AMP 頁面。）

使用預處理器時，請特別注意您包含的內容；僅載入您的頁面使用的內容。例如，head.html 包含所有必要的 AMP 標記和來自 *.scss 原始檔的內聯 CSS。它還包含 amp-youtube 等自訂元素腳本，以便網站上的許多頁面都可以包含嵌入式 youtube 影片。



<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <meta property="og:description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">
  <meta name="description" content="{% if doc.description %}{{doc.description}} – {% endif %}AMP Project">

  <title>AMP Project</title>
  <link rel="icon" href="/static/img/amp_favicon.png">
  <link rel="canonical" href="{{doc.url}}">
  <link href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700" rel="stylesheet">
  <style amp-custom>
  {% include "/assets/css/main.min.css" %}
  </style>

  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
  <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
  <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>

若要查看上述內容如何轉換為格式化的 AMP HTML，請檢視 amp.dev 中任何頁面的原始碼。（在 Chrome 中，按一下滑鼠右鍵並選擇「檢視網頁原始碼」。）

作者： @Meggin
貢獻者： @pbakaus 、 @CrystalOnScript 、 @bpaduch 、 @choumx