支持的 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 提供帮助