样式和布局

AMP HTML 网页的样式和布局与普通的 HTML 网页非常类似，均采用 CSS。

不过，出于性能和易用性方面的考虑，AMP 限制在某些情况下使用 CSS，但扩展了一些自适应设计功能（例如占位符和备用行为、通过 srcset 实现的高级艺术指导以及 layout 属性等功能），以更好地控制您元素的显示方式。

在 AMP 中制作自适应元素非常简单：只需在其中添加 layout="responsive" 即可。要详细了解 AMP 中的自适应设计，请转到制作自适应 AMP 网页。

观看 UpperQuad 工作人员介绍 AMP 项目网站重新设计相关内容（包括初次使用 AMP 会遇到的难题）的视频。

向网页添加样式

将所有 CSS 添加到文档标头中的 <style amp-custom> 标记中。例如：

<!doctype html>
<head>
...
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}

amp-img.grey-placeholder {
background-color: grey;
}
</style>
...
</head>

AMP 中不允许使用多个 <style amp-custom> 标记，因此确保您的网页中只有一个此标记。

借助常见 CSS 属性，使用类或元素选择器来定义组件样式。例如：

<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>