首页 » 编程语言 » html » 正文

html元素link标签rel="stylesheet"属性的用法

在html的众多元素中,link标签的用途也很多,而今天我们要讲解的是link标签调用外部CSS样式表文件的用法,其中rel="stylesheet"、 type="text/css"及href是link调用外部CSS样式表文件不可缺少的三个属性。下面就介绍link标签调用css样式表的几种方法:

1、最简洁的LinkCSS样式表

<link href="style.css"  rel="stylesheet"  />

这种方式多用于html5文档中,这也是link标签调用外部CSS样式表文件代码最简洁的方式!

rel="stylesheet"表示被引用连接的文件是CSS样式表,属性值stylesheet得到了所有浏览器的支持;

href="style.css"指明了该样式表文件和当前文档位于同一个目录下;href后的url地址,可以是相对路径,也可以是绝对路径!

2、最常用的LinkCSS样式表

<link href="style.css"  rel="stylesheet"  type="text/css" />

上述代码表示,为当前文档引入了一个文件名称为style.css的外部CSS样式表,而且该样式表文件与当前文档位于相同目录下。

type="text/css"指明了被引用连接文件的MIME类型是text/css;

3、可指定设备的LinkCSS样式表

media属性是用来规定当前文档被用户在不同的设备中浏览时,使用不同的CSS样式表;

如果media的属性值为all,说明当前文档不管在什么设备中被用户浏览时,都使用style.css这个样式文件。

<link href="style.css"  rel="stylesheet"  type="text/css"  media="all"/>

如果media的属性值为screen,表示的是当前文档显示在计算机显示器设备上时使用的css样式表

<link href="style.css"  rel="stylesheet"  type="text/css"  media="screen"/>

如果media的属性值为print,表示的是当前文档显示在打印设备上时使用的css样式表

<link href="style.css"  rel="stylesheet"  type="text/css"  media="print"/>

media属性常见的有all,screen,print等值,这些值属于媒体类型(MediaTpye),你还可以参阅:HTML<link>标签的media属性用法

 4、可替换的LinkCSS样式表

<lik rel="stylesheet" media="all" href="https://www.liudaima.com/all.css" />
<link rel="alternate stylesheet" media="print" href="https://www.liudaima.com/print.css" />

以上两个link标签是同时使用的,第一个是首选样式表,第二个是可替换样式表,但可替换的样式表需要浏览器支持才行,目前明确已知的IE浏览器就不支持!

第一个all.css是首选CSS样式表,也就是在所有设备(但除第二种在打印设备的情况),当前网页文档就会首选第一种css样式表;

第二个print.css是可替换的CSS样式表,其中rel="alternate stylesheet"表示此样式表可作为一个备选样式表,用于可替换第一种首选样式表,其中,media="print"表明当前文档在打印设备中显示,则可替换第一种CSS样式表!



欢迎您发表评论或留言