CSS基礎之簡單介紹

網頁誕生初期，沒有描述樣式的語言，建立了不少用於描述樣式的標籤。但這些標籤破壞了html做爲一門結構語言的表現。

因而，W3C在1995年開始起草CSS，提出將結構和樣式分離的解決方案。

元素

元素是文檔結構的基礎，在CSS中，每一個元素都會生成一個框(或者說盒)

表現形式

替換元素：替換元素的內容並不是有瀏覽器直接生成，典型的莫
過於img元素了；
非替換元素：大部分html元素都是非替換元素，如div元素、p元素等

塊級元素：填充父元素的內容區
行內元素：在文本行內生成元素框

聲明CSS

[1] 外部樣式表

永久樣式表(persistent style sheet)
若是指定rel屬性爲stylesheet，沒有指定title屬性，那麼它
將成爲一個永久樣式表
<link rel="stylesheet" href="/style.css">

候選樣式表(alternate style sheet)
若是爲link標籤指定一個title屬性，那麼它將成爲一個
候選樣式表
<link href="/style1.css" title="mystyle1">

首選樣式表(preferred style sheet)
在link標籤已經指定rel爲stylesheet的狀況下，再指定
title屬性，那麼它將成爲一個首選樣式表
<link href="stylesheet" href="/style1.css" title="mystyle1">

```
其餘屬性：
media:
all //全部媒體
screen //屏幕媒體
handheld //手持設備
aural //語音合成器
tv //電視
tty //固定間距環境
print //打印設備
embossed //Braille打印設備
braille //Braille設備
projection //投影設備
```

[2] 文檔樣式表

在文檔中使用style標籤包含樣式表,成爲文檔樣式表
(document style sheet)或內嵌樣式表(embedded style sheet)
<style>
    div {
        color: #f60;
    }
</style>

在style標籤內能夠使用@import加載外部樣式表
@import url(style2.css) screen;

@import與link標籤相比較：
聲明必須放在全部樣式前面
沒法指定候選樣式表，全部聲明的樣式都會被加載

[3] 內聯樣式

使用style屬性爲單個元素設置屬性，inline在這裏翻譯爲內聯
，而不是行內，意爲內部自帶
<p style="color:#f60">天如有情</p>

注意：不推薦使用，一個內聯樣式只能放一個聲明快，不能放整個樣式表
，所以不能使用諸如@import之類的規則，style屬性的值只能是出現
在大括號之間的部分。