有四种方式可以在HTML中引入CSS,如下:
1. 内联引入
特点:优先级高; 冗余代码多; 代码量大;
<div style="background: red; color: #fff;"></div>
2. 内部书写(嵌入方式)
特点:单一页面速度快,减少服务器请求压力;不易于改版和维护;代码较乱;
<head>
<style>
.content {
background: red;
color: #fff;
}
</style>
</head>
3. 外部引入-链接方式(link)
特点:一个css文件可控制多个页面;易改版易维护;减少代码量,代码简介规范易于分工协作;有效利用缓存机制;外部引入的href属性,会给服务器请求造成压力。
<link rel="stylesheet" type="text/css" href="style.css">
4. 外部引入-导入方式(import)
<style>
@import url(style.css);
</style>
5. import 和 link的区别
1) import属于css范畴,只能加载css; link是XHTML的标签,除了加载css外,还可以做其他的RSS的事务。
2)import需页面完全载入后再加载; link在页面载入的时候同时加载;
3)import是css2.1引入的,低版本浏览器不支持; link为XHTML标签,无兼容问题。
4)import不支持JavaScript去改变样式; link支持。