HTML文档中应用css样式的方法总结

　　在HTML文档中应用css样式大致有三种方法：1.link标签链接外部样式表；2.使用style元素包含样式表；3.使用style属性，即内联样式

一.link标签链接外部样式表

　　先看一条较为标准的link标记语句：

<link rel="stylesheet" type="text/css" href="main.css" media="all" />

　　link标记必须放在head元素中，且不能放在其他元素（如title）内部。至于其属性，rel 代表“关系“（relation），在这里，关系为stylesheet，即文档的外部样式表，至于其他值以及含义详情见 http://www.w3school.com.cn/tags/att_link_rel.asp 。type总是设置为text/css，描述了使用link标记加载的数据的类型。href那么简单的就不多说了。media 属性规定被链接文档将显示在什么设备上。当然，link标记还有其他的一些属性，比如title（除了说的这五个，其他的属性貌似都没啥作用了），接下来就说聊到这个title属性的作用。

　　外部样式表之候选样式表：将rel属性设置为alternate stylesheet 时，就可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。例如：

 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" />
 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" tile="BigText"/>
 <link rel="alternate stylesheet" type="text/css" href="crazy.css" tile="CrazyText"/>

　　　　貌似目前Chrome还不支持这种候选样式表，我也没有找到Chrome的菜单栏，不过IE、FF均支持此功能（切换样式表的方法：按下Alt键打开菜单栏->查看->样式->选择样式表）。注意：①这些样式表只有一个会用于文档显示，不会发生重叠；②并且每个样式表都得有title属性，不然菜单栏里面没有显示；③默认样式表（也叫首选样式表）是rel为stylesheet的样式表，与title属性的值没有关系。

　　　　还可以为候选样式表指定同样的title，把它们分组在一起。例如：

 <link rel="stylesheet" type="text/css" href="sheet1.css" title="Default" media="screen" />
 <link rel="stylesheet" type="text/css" href="print-sheet1.css" title="Default" media="print" />
 <link rel="alternate stylesheet" type="text/css" href="bigtext.css" title="BigText" media="screen" />
 <link rel="alternate stylesheet" type="text/css" href="print-bigtext.css" title="BigText" media="print" />

　　　　这样以来用户就可以在屏幕和打印媒体中为网站选择不同的样式表。

二.使用style元素包含样式表

　　style标记之间的样式称为文档样式表，或嵌套样式表。注意：①一定要使用type属性，其值为"text/css"，也可以指定media属性；

　　在这里介绍一个@import指令，它用于指示Web浏览器加载一个外部样式表，不过这条指令要放在其他css规则之前，否则不起作用。例如：

　　　　

 <style type="text/css">
     @import url(main.css);
     @import url(sheet1.css) all;
     @import url(print.css) print;
     h1{color:blue;}
 </style>

　　　　@import指令的一个显著作用就是：如果有一个外部样式表，它需要使用其他外部样式表中的样式时就可以在开头使用这条指令导入其他样式表。

三.内联样式

　　除了在body外部出现的标记，style属性可以与任何其他HTML标记关联来设置其内联样式。注意：①不能在style属性中使用@import指令。