1. 概述
1.1 说明
在项目开发中,我们经常使用css样式使页面丰富多彩,编写过程中,CSS有四种引入方式。
2. CSS引入方式
2.1 引入方式一:内联样式
内联样式(行内样式):直接在 HTML 标签中的 style 属性中添加CSS
<div style="width:200px;height:200px;background:red;"></div>
内联样式只能改变当前标签的样式,如果想要多个<div>拥有相同样式,则需要重复的对多个<div>添加相同的样式,如果要修改一种样式,又要进行批量的去修改style中的代码。
缺点:内联样式引入CSS代码会导致HTML代码变得冗长,页面维护成本过高。
2.2 引入方式二:嵌入样式
嵌入样式:在HTML头部中的<style>标签下书写CSS代码
<head> <style> .div-content{ width: 200px; height: 200px; background: red; } </style> </head>
嵌入样式的CSS只对当前的网页有效。因为CSS代码是在HTML文件中,所以会使得代码比较集中,可以很清晰的查看HTML结构和CSS样式,通常会在模板网页中使用。
缺点:多个页面中需要引入相同的CSS代码时,嵌入样式会导致代码冗余,不利于维护。
2.3 引入方式三:链接样式
链接样式:使用HTML头部的标签引入所需的外部CSS文件。
<head> <link ref="stylesheet" type="text/css" href="style.css"> </head>
链接样式是最推荐引入CSS的方式。使用这种方式,所有的CSS代码只存在于单独的CSS文件中,所以具有良好的可维护性。并且所有的CSS代码只存在于CSS文件中,CSS文件会在第一次加载时引入,以后切换页面时只需加载HTML文件即可。
ref:定义当前文档与目标文档之间的关系
2.4 引入方式四:导入样式
导入样式:使用CSS规则引入外部CSS文件。并且@import必须得在<style></style>中使用。
<style> @import url(style.css); </style>
导入样式类似链接样式
注意:@import url(xxx.css) 有最大次数的限制,经测试:IE6的最大次数是31次,第32个import及以后的都不生效;
3. link 和 @import 的区别
- 加载内容
- link是XHTML标签,除了加载CSS外,还可以加载网站网页图标(网页标签图标)等多种文件
<link rel="icon" href="https://file.iviewui.com/file/favicon.ico">
- @import属于CSS范畴,只能加载CSS
- link是XHTML标签,除了加载CSS外,还可以加载网站网页图标(网页标签图标)等多种文件
- 加载顺序
- link引入CSS时,在页面载入时同时载入 --- 浏览器一边下载HTML网页,一边开始解析;解析过程中,发现link标签,浏览器继续往下解析HTML网页,同时并行下载link标签中的css样式。
- @import需要页面完全载入以后才加载 --- 在网速慢的情况下,会出现一开始没有css样式,闪烁一下出现样式后的页面。
- 兼容问题
- link是XHTML标签,无兼容问题
- @import是在CSS2.1提出的,低版本的浏览器不支持(IE5以下不兼容)
- 操作DOM
- link支持使用JavaScript操作DOM动态引入样式表改变样式
- @import不支持,因为@import是css语法故无法动态修改