CSS之应用样式的四种方式
1. link标签
通过link标签链接的样式表不是HTML文档的一部分，但是却供文档使用。这样的样式表称为外部样式表。
Web浏览器遇到link标签时，会查找并加载样式表，并渲染HTML文档。
属性
- rel: relation 关系的简称 常用为stylesheet
- href: 样式表的URL链接 可以是绝对地址 也可以是相对地址
- type: 文档的数据类型 始终为text/css
- media: 媒体属性，用于指定样式表应用的媒体类型
一个文档可以关联多个样式表，但是最初显示文档时只会显示rel为stylesheet的样式表
比如：
此时由于文档中关联的两个外部样式表的rel均为stylesheet，因此显示文档时会合并两个样式表中的规则后再应用于文档中
候选样式表
当把rel定义为alternate stylesheet，该样式表为候选样式表。仅当用户选择时，文才会用候选样式表来渲染。
如果浏览器支持候选样式表，可以使用title属性来作为候选样式表的名字。
**注意：假设文档中关联以上两个外部样式表，最初显示文档时会使用main2.css来渲染文档，当用户选择使用候选样式表后，会使用main.css来渲染文档，main2.css就不再使用了。这是因为rel为stylesheet的样式表为首选样式表，他的优先级比候选样式表的高，显示文档时默认使用。**
当在link标签中使用title属性时，如果有多个首选样式表，那么只会显示其中的一个，其他的则会被忽略。
<link rel = "stylesheet" type = "text/css" href = "main.css" title = "default one">
<link rel = "stylesheet" type = "text/css" href = "main2.css" title = "default two">
这里由于设置了title属性，因此每次只能选择一个使用，当删除title属性后，两个样式表会合并规则使用。
2. style标签
style方式引入的样式表称为内部样式表，其属性type应设置为“text/css" ,另外style元素也可以设置media属性，用于说明媒体类型。
style标签中可以直接包含应用的样式，也可以通过@import指令来引入外部样式表
<style type = "text/css" media = "all">
@import url(main.css);
body
{
background:red;
}
< /style>
3. @import 规则
通过@import规则也可以引入外部样式表 ，另外也同样可以设置相应的媒体类型。
@import url(main.css) screen;
@import规则要放在style元素内部，且要放在其他CSS规则之前。
注意：
使用@import和使用link标签的异同在于以下几点：
- link元素为标签，只能在HTML文档中使用，@import是一种规则，应用于style标签中，也可以是外部样式表中。由于dom可以操作HTML元素，因此，link标签中的各种属性可以通过dom来动态改变。
- ling标签可以设置候选样式表，只需把rel设置为alternate stylesheet即可，而@import规则导入的指令全部都会被应用于文档，无法指定候选样式表。
- 使用多个 @import规则导入样式表会导致性能问题，当我们把同样大小的样式规则放在同一个文档里加载比把样式规则分成多个，并使用一个或多个@import规则导入的性能要高上很多。因为每一次请求是需要大量时间的，当使用多个@import规则时，会发生多次请求，浪费时间，降低性能。
- 样式表加载时间不同。页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
4. 内联样式
除了以上方式，我们还可以把样式规则通过HTML元素的属性来设置，这种样式即为内联样式。
<div style = "background:red; color:pink">
