css的引入方式共三种及@import和link的区别

# 一、行内样式

<p style="color: red">test</p>

优点：简单、优先级高。
缺点：页面不纯净、文件体积大、不易维护

# 二、内嵌样式

<html>
    <style>
        p {color: red;}
    </style>
</html>

1
2
3
4
5

优点：文件少、css代码少时适用
缺点：每个页面需要重复定义，工程大时不利于复用和维护

# 三、外联样式

外联样式又分为

# 1. 链接样式link

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

实现了html框架和css样式分离，复用率提高，后期维护方便

# 2. 导入样式@import

<style type="test/css">
    @import (keyword) url(style.css)
    @import (keyword) url("style.css")
    @import (keyword) "style.css"
    //三种方式结果相同，不使用url()时，必须带引号
    //keyword=less/css 将文件视为less/css，无论扩展名是什么
</style>

1
2
3
4
5
6
7

# 四、@import和link的区别

link属于XHTML标签，@import属于css标签。
link是异步加载，与页面加载同时进行；@import是串行加载，在页面加载完成后被加载，因此会有页面闪烁。
link属于XHTML，因此兼容性较好；@import是css2.1提出的，浏览器兼容性差。
link只是JavaScript控制DOM改变样式，而@import不支持

# 一、 行内样式

# 二、 内嵌样式

# 三、 外联样式

# 1. 链接样式link

# 2. 导入样式@import

# 四、@import和link的区别

# 一、行内样式

# 二、内嵌样式

# 三、外联样式