引入CSS的方法
2020/11/9 9:00:12 阅读：5847
发布者：5847
【外部样式表】
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />
若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别,CSS注释只支持/**/的写法，不支持//的写法
一个文档可能关联多个样式表，如果是这样，文档最初显示时只会使用rel为stylesheet的link标记
候选样式表
将rel属性的设置为alternate stylesheet可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。如果浏览器能使用候选样式表，它会使用link元素的title属性值生成一个候选样式列表，可在菜单栏中查看->样式中进行选择。(IE和firefox支持)
[注意]若一个候选样式表没有设置title，那么它将无法在候选样式列表中出现，则无法被引用
<link rel="stylesheet" type="text/css" href="sheet1.css" />
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2"/>
【内部样式表】
使用style元素
内部样式表需要使用<style>元素包含样式表，它在文档中单独出现。
<style>
body{
background-color: red;
}
</style>
多个style标签
文档中可出现多个style标签，且样式规则与层叠样式规则一致
<style>
body{
background-color: red;
}
</style>
<style>
body{
background-color: blue;
height: 100px;
border: 10px solid black;
}
</style>
【使用@import指令】
与link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况。
<style>
@import url(sheet2.css);
body{
background-color: red;
}
</style>
[注意]@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用。
多个@import指令
可以使用@import指令导入多个CSS样式表，且可以使用media来限制应用场景。
<style>
@import url(sheet1.css) all;
@import url(sheet2.css);
</style>
【行间样式】
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: red;">
[注意]行间样式若存在多个style属性，只能识别第一个
<!-- 只能识别第一个style属性的值，所以页面显示为红色-->
<body style="background-color: red; height: 100px; border: 10px solid black;" style="background-color: blue;">
【 微信扫一扫 】
