插入样式 link、style

CSS 的引入方式有 3 种：

• 行内样式

# 元素的 style 属性
<p style="font-size:14px;color:red;"></p>

• 内嵌样式表

# style 元素
<style>
    p{font-size:14px;color:red;}
</style>
// <p>段落</p>

• 外联样式表

# link 元素
<link rel="stylesheet" href="style.css">
// style.css   =>   p{font-size:14px;color:red;}
// <p>段落</p>

详见 CSS 引入方式。

此部分的重点在于介绍：style 元素和 link 元素。

link 元素

<link rel="stylesheet" href="style.css" type="text/css" media="all">
 
以下为link元素属性，其中rel和href最常用：
  rel：当前文档与资源之间的关系，link元素必须有rel属性；
       值是浏览器预置的关键字中的一个或多个，以空格分隔：
          alternate    指示链接到该文档的另一个版本
          author       指示链接到当前文档的作者主页
          help         指向一个跟网站或页面相关的帮助文档
          icon         引入代表当前文档的图标，新的sized属性与这个属性结合使用，指定链接图片的宽高
          license      链接到当前的文档的版权声明
          next         指示链接到文档是一组文档中的下一份
          pingback     处理当前文档被引用情况的服务器地址
          prefetch     指明需要缓存的目标资源
          prev         标明了上一个文档
          search       链接到可以用于搜索当前页面和相关页面的资源
          sidebar      链接到可以作为附属上下文的文档
          stylesheet   引入样式表
          tag          创建应用于当前文档的标签
  href：资源的目标地址，link元素必须要有href属性；href的值必须为合法的URL地址。
  type：资源的MIME类型；建议性的属性，可以不设置；对于外联资源，浏览器不会载入不支持的资源。
  media：对资源有效的媒体设备；值为媒体查询信息。
    <link rel="stylesheet" href="style.css" media="(max-width:800px)">
    <link rel="stylesheet" href="style.css" media="print">
    // 常见值：screen，计算机屏幕；tty，终端；tv，电视；projection，投影仪；handheld，手持设备；
    //        print，打印页面；braille，盲文设备；aural，语音合成器；all，所有

在实际开发中，link 元素主要是定义了当前文档与目标资源之间的关系：

• 超链接，主要用来表示目标资源的地址，可用于导航

<title>chapter2</title>
 
<link href="chapter1.html" rel="prev" rev="next">
<link href="chapter2.html" rel="next" rev="prev">

• 外联资源，可以用来增强页面的效果

// 文档图标
<link rel="icon" href="favicon.png" size="16x16" type="image/png">
    // size属性：规定被链接资源的尺寸，且只有当被链接资源是图标时，才可使用该属性。
// 文档样式
<link rel="stylesheet" href="style.css">