加速移动页面 link 到 css 文件

Question

我正在尝试 link 到 css 文件 :

<link href="/semanticui/semantic.css" rel="stylesheet" />

正在 #development=1 模式下打开 chrome 以测试我的页面是否有 amp。我收到此错误：

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value '/semanticui/semantic.css'.

Answer 1

不允许使用外部样式表。使用内联样式来避免对 css.

的额外请求

可以在以下位置找到更多信息：https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#stylesheets

Authors may add custom styles to a document using a single <style amp-custom> tag in the head of the document.

Answer 2

页面及其元素的任何样式都是使用通用 CSS 属性完成的。在名为 <style amp-custom>

的内联样式表中使用 class 或元素选择器的样式元素

这里是示例代码：

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

Answer 3

我正在使用 php 页面，所以我执行以下操作来添加我的自定义 css 页面，这样我就可以将它分开并包含在所有页面中，因此只更改一次等

<style amp-custom>
  <?php readfile( getcwd() . "/css/main.min.css"); ?>
</style>

Answer 4

你可以使用这个：

<style amp-custom>
    <?php echo file_get_contents(STYLESHEETPATH.'/style.css'); ?>
</style>

加速移动页面 link 到 css 文件

Accelerated mobile pages link to css file

css

mobile

amp-html