码迷,mamicode.com
首页 > 其他好文 > 详细

AMP自定义样式【ytkah英译AMP-3】

时间:2020-06-15 17:44:09      阅读:59      评论:0      收藏:0      [点我收藏+]

标签:嵌入   完成   site   class   参考   标记   guid   styles   hit   

AMP页面是网页;页面及其元素的任何样式都是使用常见的CSS属性完成的。在<head>中嵌入的样式表中使用类或元素选择器的样式元素,<style amp-custom></style>,如下代码演示,注意:amp禁止引入除字体外的css文件<link rel=”stylesheet”>

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

  每个AMP页面只能有一个单一的嵌入样式表和内联样式,但有些选择器你不允许使用:  

  • 不允许使用和引用!important。这是使AMP能够执行其元素大小调整规则的必要要求。
  • 除了自定义字体不允许使用<link rel=”stylesheet”>
  • 验证器不允许使用含 i-amphtml- 标记的名称。这些是AMP框架内部保留使用的。因此,用户的样式表不能引用带 i-amphtml- 类和标记的CSS选择器。

  AMP在页面布局元素时遵循更严格的规则。在普通的HTML页面上,几乎完全使用CSS来布局元素。但出于性能原因,AMP要求所有元素都有明确的大小设置从一开始。

参考资料 https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/?format=websites

 

AMP自定义样式【ytkah英译AMP-3】

标签:嵌入   完成   site   class   参考   标记   guid   styles   hit   

原文地址:https://www.cnblogs.com/ytkah/p/13132008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!