AMP Adding CSS

未分类

Adding CSS 添加样式

AMP 页面是网页——页面及其元素的任何样式都是使用标准 CSS 属性完成的。 但是，AMP 要求所有 CSS 都包含在head的自定义样式标记中，该标记称为 <style amp-custom>。 <style amp-custom> 标签必须位于文档的<head> 内。 如果需要，也可以内联定义样式。 尝试将以下样式添加到您的页面：

 <style amp-custom>
    h1 {
      margin: 1rem;
    }
     body {
      background-color: blue;
    }
  </style>

例如：

<!doctype html>
<html amp lang="en">
<head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="https://amp.yingyanxt.com/">
    <meta name="viewport" content="width=device-width">
    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "Open-source framework for publishing content",
            "datePublished": "2015-10-07T12:02:41Z",
            "image": [
                "logo.jpg"
            ]
        }
    </script>
    <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>

    <style amp-custom>
        /* any custom style goes here */
        body {
            background-color: white;
        }
        amp-img {
            background-color: gray;
            border: 1px solid black;
        }
    </style>

</head>
<body>
<h1>Welcome to the mobile web</h1>
<amp-img src="./welcome.jpeg" alt="Welcome" height="400" width="800"></amp-img>
</body>
</html>

AMP 允许几乎所有的 CSS，但有一些选择器必须避免。

在此处了解这些以及有关 AMP 中样式的更多信息。

控制布局

AMP 在页面上的元素布局方面执行严格的规则。 在标准 HTML 页面上，您几乎只使用 CSS 样式来布置元素。 但出于性能原因，AMP 要求您从一开始就为所有元素定义明确的大小。