# CSS语法和加载方式
[TOC]
## CSS语法
### CSS样式规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器通常是我们需要改变样式的 HTML 元素。
每条声明由一个属性名和属性值组成，使用冒号分隔。
>[info] 属性（property）是指我们希望设置的样式属性（style attribute）。
**多个声明之间采用分号间隔**
### CSS注释
注释：`/* xxx */`，区别于HTML注释（`<!-- xxx -->`）
## CSS加载的方式
### 1. 引入外部文件
```html
<link href="outer.css" rel="stylesheet" type="text/css"></link>
```
HTML文档中使用`<link>`元素引入外部样式文件，引入外部样式文件应在`<head>`元素中增加`<link>`子元素。
### 2. 导入外部样式单
```html
<style type="text/css">
@import "../outer.css";
@import url('outer.css');
</style>
```
导入外部样式表单需要在`<style>`元素中执行`@import`进行导入。
### 3. 使用内部CSS样式
一般来说我们不建议使用内部 CSS 样式：
* 复用性小。
* 导致HTML文档过大，会导致网络负载严重。
* 修改整站风格时，需要对每个网页文件进行样式修改。
```html
<style type="text/css">
样式单文件定义
</style>
```
### 4. 使用内联CSS样式
内联样式只对单个标签有效，不会影响整个文件。
在 HTML 元素中使用 style 属性定义内联样式。
```html
<div style="property1:value1;property2:value2;"/>
```
### 5. 多个样式层叠
**多个样式不同时层叠**
当多个不同的样式指向共同的元素时，这些样式将会共同作用于这个元素上
**多个样式相同时层叠为一**
当多个相同的样式指向共同的元素时，这些样式将会根据加载方式的优先级进行加载
>[info]优先级：浏览器缺省样式< 外部样式表< 内部样式表< 内联样式
其中内联样式有最高的优先级。
可以使用!important提示指定样式规则的应用优先权。
~~~
语法格式：selector { xxx:xxx !important}
~~~
