CSS的四种导入方式
CSS的四种导入方式
1. 行内样式
<!--行内样式：在标签元素中编写style属性，写样式即可-->
<h1 style="color:red;">字体样式测试</h1>
2. 内部样式
<head>
<!--内部样式-->
<style>
<h1>
color : green;
</h1>
</style>
</head>
3. 外部样式
- 链接式(html) : html和css分离，在html中引用css文件
<link rel="stylesheet" href="css/css.css">
- 导入式(CSS2.1)
<head>
<style>
@import url("css/css.css")
</style>
</head>
Link和import的区别
-
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
-
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)
-
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
-
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
代码练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入方式练习</title>
<!--内部样式-->
<style>
<h1>
color : green;
</h1>
</style>
<!--外部样式
1.链接式
-->
<link rel="stylesheet" href="css/css.css">
<!--外部样式
2.导入式
-->
<style>
@import url("css/css.css")
</style>
</head>
<body>
<!--
样式优先级: 就近原则
代码编译顺序是由上及下的，下边的样式会把上边的覆盖
-->
<!--行内样式：在标签元素中编写style属性，写样式即可-->
<h1 style="color:red;">字体样式测试</h1>
</body>
</html>
知识点总结：
- 导入优先级：
- 就近原则：代码编译顺序是由上及下的，下边的样式会把上边的覆盖
- 链接式和导入式的区别
-
@import：
- 属于CSS范畴，只能加载CSS
- 需要页面网页完全载入以后加载，会出现网页刚加载出来时没有样式，闪烁一下后出现样式的情况
- 有兼容问题
- 不支持使用Javascript控制DOM去改变样式
-
Link
- XHTML标签，除了加载CSS外，还可以定义RSS等其他事务
- 引用CSS时，在页面载入时同时加载
- 无兼容问题
- 支持使用Javascript控制DOM去改变样式
