CSS关联有三种方式:
- link标记,外部样式表
必须在<head>中
简单例子:<linkrel="stylesheet" type="text/css" href="" media="" />
上述例子中,rel代表着relation关系,type描述了link标记加载的数据类型,而media属性说明该文件应用于什么媒体,很多属性值。
候选样式表(alternate stylesheet),如果浏览器能使用候选样式表,会使用link元素的title属性生成一个候选样式列表。
例子:
<link rel="stylesheet"type="text/css" href="" media=""title="default" />
<link rel="alternate stylesheet" type="text/css"href="" title="black bgc"/>
通过link的title属性来设置候选样式表。IT热门行业
- style元素,内部样式表
<style type="text/css">
Style元素必须以此开头,以</style>结束
两者之间的样式被成为文档样式表(document style sheet),或者是嵌套样式表(embedded style sheet)
- 内联样式
例子:
<p style="color: sienna;margin-left: 20px">This is a paragraph</p>
不推荐使用,影响结构和表现分离。
- @import指令
这是个人没用过的方式。
@import url(sheet2.css)
和link标记类似,用来指示浏览器加载一个外部样式表。区别在于命令的具体语法和位置。
@import用在style容器中,放在其他css规则前面,否则不起作用。
每个@import指令的样式表都会加载并使用,无法指定候选样式表,但是可以限制应用的媒体类型。
例子:
@import url(sheet.css); all;
@import url(sheet1.css) print;
不过@import最有效的地方是,外部样式表需要使用其他外部样式表中的样式,而外部样式表不能包含任何文档标记,不能使用link标记
@import url(basic.css);
@import url(http://example.com/sheet.css)
@import ur(low.css) print;
body{color:red;}
h1{color:blue}
import指令的处理是不同的,可是适当利用这点来针对浏览器“隐藏样式”。
书上说,ie不会忽略任何@import样式,其他浏览器会忽略不当的@import指令。
本人实测
例子:
<body>
// 将h1标题背景设为红
<styletype="text/css">@import url(red.css);body{color:blue};</style>
<h1> 二浪真二,骚蹂真骚</h1>
</body>