支援的 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