向HTML文档中引入CSS常见有四种方法:
1. <link>标签:
<link rel="stylesheet" type="text/css" href="sheet1.css" media="all"/ title="" />
自封闭标签,写在<head>元素中。
- rel:关系
- type:类型
- href:需要链接的文件路径
- media:表现媒体
media的值 | 含义 |
---|---|
all | 所有媒体 |
打印文档时,包括打印预览 | |
screen | 屏幕媒体 |
aural | 语音媒体(语音合成器、屏幕阅读器等) |
2. @import 指令:
<style type="text/css">
@import url(styles.css);
...
</style>
放在style容器中,用于加载一个外部样式表,必须放在其他CSS规则之前。不同于link出现多条会覆盖,而是当有多条@import指令时会全部加载,合并使用。
3. 内部CSS样式
<style type="text/css">
body {
background: white;
color: gray;
}
</style>
style容器常放在head里,style容器中的代码直接使用CSS语法。
4. 内联CSS样式
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
将样式规则直接写在标签的style属性里。这种写法的CSS拥有最高优先级,但这种写法一方面会使得页面代码混乱,不便于阅读与后期维护,另一方面会损失掉CSS可以对多个元素统一管理样式的优势,所以不建议使用。