页面中使用 CSS 的方式主要有 3 种：行内添加定义 style属性值 ，页面头部 内嵌调用 和 外面链接 调用，其中外面引用有两种：link 和 @import 。

1、link语法结构

引入格式如下：

1
<link href="CSSurl路径" rel="stylesheet" type="text/css" />

实际应用如下：

1
2
<meta name="Copyright" content="Leo is 66666">
<link rel="stylesheet" href="http://www.pingan8787.com/demo.css">

2、@import语法结构

a、在html中

@import + 空格+ url(CSS文件路径地址);

1
2
3
<style type="text/css">
@import url(CSS文件路径地址);
</style>

b、在css中
直接使用

1
@import url(CSS文件路径地址);

3、区别

两者都是外部引用CSS的方式，但是存在一定的区别：

  • 区别1：link是 XHTML 标签，除了加载 CSS 外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  • 区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  • 区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  • 区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。