CSS-link&@import

2021-03-25

把CSS应用到HTML上

link标签

link标签必须放在head标签中，不能放在其他元素中。Web浏览器在遇到link标签时，会查找并加载指定的样式表，使用样式表中的样式渲染HTML文档
link引入的样式表中只能有CSS规则和CSS注释。
可以使用link配置候选样式表

如下，rel(relation)指定关系是样式表，type的值始终是text/css：说明通过link标签加载的数据类型。href指明样式表的URL，可以是绝对地址也可以是相对地址。media(其值可以是：screen，print，all等媒体描述符)

1 2	<link rel="stylesheet" type="text/css" href="" media="screen,print" />

设置候选样式表(感觉不常用)

<link rel="alernate stylesheet" type="text/css" href="" media="screen,print" title="Default"/>

<link rel="alernate stylesheet" type="text/css" href="" media="screen,print" title="big Text"/>

@import指令

@import也会加载外部样式表。在HTML中@import指令必须存在于style标签中，而且必须放在其他CSS规则之前才能起作用

<style>
@import url(sheet.css) screen;
@import url(sheet1.css);
h2{
color:red;
}
</style>

@import与link的不同

link可以指定多个候选样式表
@import不可以指定候选样式表
@import不仅可以在style中使用，还可以在.css文件中引入CSS

缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是yilia根目录）执行以下命令：
npm i hexo-generator-json-content --save

3、在根目录_config.yml里添加配置：

  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

不断学习的鸽子