HTML页面引入CSS的几种方式及区别_html/css_WEB-ITnose

1. 使用html标签的style属性

    如：

    这种方式的优点：分散灵活方便；

    缺点：缺乏整体性和规划性，不利于维护，维护成本高；

    这种方式的CSS渲染的优先级要高于其它三种。

立即学习“前端免费学习笔记（深入）”；

2. 将样式代码写在标签中

    通常将style标签放到HTML文件

标签里

    如：

div { background: #fff; }

    此种方式的优点：单个页面内的CSS代码具有统一性和规划性，便于维护。

    缺点：多个页面之间CSS复用仍然不够。

3. 使用标签，引入外部CSS文件

    外部CSS文件：base.css:

    p { color: #000}

    …

    此种方式的优点：一个页面可以引入多个外部CSS文件，方便CSS代码复用，方便维护；

    目前应用做多。

    缺点：代码量集中，容易混乱。

4. 使用@import，引入CSS文件

    这种方法既可以用在标签里，也可以用在外部CSS文件中，如：

    @import url (‘/css/list.css’)

    特点：引入方便，但性能可能较差

使用link 标签和@import区别：

1.  范畴不同：  link是HTML标签，除了加载CSS之外，还可以定义其他如RSS事务；@import属于CSS范畴，只能加载CSS；

2.  加载顺序不同：link引入CSS时，在页面加载时同时加载，而@import需要页面完全载入以后加载；

3.  兼容性差别： link是XHTML标签，因此无兼容问题，而@import是在CSS2.1提出的（IE5以上才能识别），因此低版本的浏览器不兼容；

4.  是否支持JS DOM改变： link支持使用JavaScript控制DOM改变CSS样式，@import不支持；

5.  权重不同： link方式样式的权重高于@import样式的权重。