支持的 CSS

与所有网页一样，AMP 网页也使用 CSS 设置样式，但您不能引用外部

样式表（自定义字体除外）。

此外，由于性能影响，某些样式是不允许的。

样式可以位于文档的头部或作为内联 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 贡献