html引入css的四种方式
***内联样式表、内部样式表、外部样式表、@import导入***
1)、style属性方式:【内联样式表】
利用标签中style属性来改变每个标签的显示样式
<div style="width: 100px;height:100px;background-color:red;"></div>
2)、内部style标签【内部样式表】
将样式添加到head标签中的style标签里
<style>
div{
width:200px;
height:200px;
background-color:blue;
}
</style>
...
<body>
<div></div>
</body>
3)、外部link导入【外部样式表】
将样式单独抽离出来,写成一个css文件,然后通过link标签导入
css文件:
div{
width:300px;
height:300px;
background-color:orange;
}
html文件:
<head>
...
<link rel="stylesheet" href="./outer.css">
</head>
4)、@import导入
将样式单独抽离出来,写成一个css文件,在style标签内通过@import导入路径
css文件:
div{
width:300px;
height:300px;
background-color:orange;
}
html文件:
<style>
@import url('./test.css');
</style>