2.3、外联样式
它是内联样式进行进一步的抽离,方便多个页面共用同一个样式,创建一个css文件,需要该样式的HTML直接引用样式即可。在项目下创建css包,创建css文件。
外联样式引入方式有两种:
link引入
<link rel="stylesheet" href="css/asd.css">
@import引入
<style>
@import url(css/asd.css);
</style>
asd.css
div {
color: antiquewhite;
}
p{
color: blue;
}
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- link引入 -->
<!-- <link rel="stylesheet" href="css/asd.css"> -->
<!-- @import引入 -->
<style>
@import url(css/asd.css);
</style>
</head>
<body>
<div>没有梦想,你跟咸鱼有什么区别</div>
<div>不想做咸鱼,那就有梦想</div>
<div>有梦想,那就去追梦</div>
<p>钢铁侠</p>
<p>蝙蝠侠</p>
<p>蜘蛛侠</p>
</body>
</html>
2.4、样式的优先级
遵循就近原则: 行内样式 > 内联样式 == 外联样式 (后面覆盖前面) 。
注意事项: 今后尽量不要对同个html进行多个样式书写,这样子会导致样式出错。
如何选择三种样式写法?
1、如果样式是固定且不修改并且很少情况:行内样式。
2、如果样式针对当前html页面做的样式,并且量比较大的情况: 内联样式。
3、如果你的样式是通用,如果你的css代码很多:外联样式,需要创建一个css文件,引入。
2.5、样式选择
三种样式引入方式,在实际开发过程中该如何选择?
1.如果是通用样式,就选择外联样式。
2.当样式内容过多时,也会将样式单独抽离成一个.css文件,方便管理。
3.当某个标签有特殊样式实现,且在页面中是不重复的,出现次数唯一的,就使用行内样式。
4.除了上面的几种情况,通常使用的都是内联样式。