标签：
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>
标签：
原文地址：http://www.cnblogs.com/itguanchazhe/p/4456091.html
