AMP Style & Layout

Supported CSS

Supported CSS:支持的CSS

与所有网页一样,AMP 页面使用 CSS 设置样式,但您不能引用外部样式表(自定义字体除外)。 由于性能影响,某些样式也被禁止。

样式可能存在于文档的头部或作为内联样式属性(请参阅向页面添加样式)。 但是您可以使用 CSS 预处理器和模板来构建静态页面以更好地管理您的内容。

注意 – AMP 组件带有默认样式,使创作响应式页面相当容易。 这些样式在 amp.css 中定义。

Disallowed styles

Disallowed styles:不允许的样式

AMP 页面中不允许使用以下样式:

禁止使用的样式说明
内嵌样式属性所有样式都必须在网页的 <head> 部分进行定义,并位于 <style amp-custom> 标记中。
!important 限定符禁止使用该限定符。 这是 AMP 网页能够强制实施其元素尺寸设定规则的必要条件。
<link rel=”stylesheet”>禁止使用,但 自定义字体除外。
-amp- 类和 i-amp- 标记名称在开发者定义的样式表中,类名称不能以字符串 -amp- 开头。 这些类专门预留给系统在 AMP 运行时使用。此外,面向用户的样式表不能针对 -amp- 类和 i-amp 标记引用 CSS 选择器。

Performance recommendations

Performance recommendations:限制使用的样式

以下样式可以使用,但是在支持的值方面存在限制:

限制使用的样式说明
transition 属性只能使用由 GPU 加速的属性(目前为 opacity、 transform 和 -vendorPrefix-transform)。
keyframes {…}只能使用由 GPU 加速的属性(目前为 opacity、 transform 和 -vendorPrefix-transform)。

The custom fonts exception

自定义字体属于例外情况:The custom fonts exception

AMP 网页不能包含外部样式表,但是自定义字体除外。详细了解 AMP 中的自定义字体