# 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}
~~~
