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