1、行内样式
写在标签里面，通过style=""属性设置样式
<div style="border: 1px solid red;width: 100px;height: 100px"></div>
2、内联样式
写在每个页面的标签里面
<head>
<style>
.div1{
border: 1px solid red;
width: 100px;
height: 100px
}
</style>
</head>
3、link标签引入外部css文件
通过外部创建一个css文件，link标签引入这个css文件。
<link rel="stylesheet" type="text/css" href="xxx.css">
4、@import引入css文件
通过外部创建一个css文件，@import引入这个css文件。
<style>
@import "../css/div.css";
</style>
5、css样式引入的优先级
- 行内样式 > 内部样式 > link > @import
6、@import与link的区别
| link | @import | |
|---|---|---|
| 从属关系不同 | link是html提供的标签 | @import是css提供的语法规则 |
| 引入内容不同 | 引入样式文件、图片资源等 | 只引入样式文件 |
| 加载的顺序不同 | 同时加载 | 页面加载以后加载 |
| 兼容性不同 | 没有兼容性问题 | @import在css2.1提出，低版本的浏览器不支持 |
| DOM操作 | DOM可以操作link中的样式 | 不可以操作@import中的样式 |
| 权重不同 | link的优先级比@import高 | @import的优先级比link低 |
2719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
