今天跟大家講一下CSS 指層疊樣式表 (Cascading Style Sheets)，用來(lái)定義如何顯示 HTML 元素的。即之前在html中屬性中的ui樣式部分。嗯～，你在奇怪為什么可以在html編寫的東西要搞個(gè)css出來(lái)，當(dāng)然是因?yàn)檫@樣更簡(jiǎn)單，編寫與維護(hù)起來(lái)更方便了。因?yàn)閏ss這種東西里面嚴(yán)格的來(lái)說(shuō)不過就是對(duì)于網(wǎng)頁(yè)中的各種布局UI顯現(xiàn)的屬性與值的集合，所以會(huì)直接跟大家講解各種常用屬性的使用。

如何關(guān)聯(lián)css文件與html文件

不要以為這有多難，一句代碼搞定。不過記的得這句代碼要放在html中的body中尾部為佳，至于為什么放在這里？你可以試著放在html開頭或其他部分，時(shí)間久了，你就懂了。

<link rel="stylesheet" type="text/css" href="mystyle.css">

其中，<link>標(biāo)簽是定義文檔與外部資源的關(guān)系，最常見的用途就是鏈接樣式表。rel屬性是必需的，定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系（值有很多，記得stylesheet這個(gè)樣式表的屬性值就行）。type規(guī)定被鏈接文檔的 MIME 類型。還有href="mystyle.css"，就是說(shuō)明你的模式表的文件路徑。

將css文件與html文件關(guān)聯(lián)起來(lái)之后，你就算是完成了使用css文件編寫的第一步。

如何使用css文件設(shè)置html中的各種元素UI屬性值

嗯，我覺得一個(gè)白色的網(wǎng)頁(yè)背景色不好看，來(lái)點(diǎn)黃圖。所以上代碼：

body {   
    background-color:yellow;
}

其實(shí)這東西就像是吃餃子一樣。
看看代碼，沒錯(cuò)，就是這么簡(jiǎn)單而直接。因?yàn)槭钦w的網(wǎng)頁(yè)背景色，所以直接獲取body(記得之前跟大家講過了網(wǎng)頁(yè)中的可視內(nèi)容基本都在body中編寫。)，然后直接在它后面加個(gè)大括號(hào)。這樣一來(lái)，餃子皮就準(zhǔn)備好了。然后我們往里面放餃子餡background-color:yellow;最終我們得到了一個(gè)餃子，而css文件的本質(zhì)就是一整碗能讓你吃飽的餃子。
現(xiàn)在我們好好分析一下這碗餃子。既然餃子皮可以是標(biāo)簽body加{}，那可不可以是標(biāo)簽p加{}，可不可以是標(biāo)簽div加{}。嗯，當(dāng)然是可以的?；旧纤械目梢晿?biāo)簽都可以。
在css中我們將餃子皮稱之為選擇器，剛才所講的就是標(biāo)簽選擇器。而光是標(biāo)簽選擇器這種餃子皮夠我們用嗎？嗯，用了之后你就會(huì)發(fā)現(xiàn)，不夠！根據(jù)回味的精細(xì)程度和餃子皮的厚薄程度，我們需要各種各樣的餃子皮。而在css文件中這些餃子皮就是各類選擇器。

通用選擇器（）*
元素(類型)選擇器
類選擇器
屬性選擇器
偽類
ID 選擇器

這些選擇器你不懂就先隨便看看，這些東西你不用就不需要懂，而用了，emmm，你就懂了。注意，這些餃子皮是有優(yōu)先級(jí)的。比如蛋餃的蛋液皮不是混了蔬菜汁的面皮能比的，更不是普通餃子皮或者說(shuō)最糙的粗面餃子皮能比的。至于優(yōu)先級(jí)高低，上述選擇器從上至下，依次遞增。
然而，你以為這就完了嗎？不，我們還有放了幸運(yùn)硬幣的幸運(yùn)餃子，碾壓一切，它就是!important。至于什么是!important，自己查吧，不推薦用這東西，了解一下就行。

說(shuō)了這么一堆，你對(duì)css有個(gè)整體的了解了嗎？其實(shí)就是利用選擇器鎖定相應(yīng)的元素控件，再在選擇器后的{}內(nèi)設(shè)置各種屬性與相應(yīng)的值而已。這就是一個(gè)餃子，而0到n個(gè)的餃子就成了一個(gè)完整的css文件。什么？你問餃子湯是什么代表什么？請(qǐng)不要問這種問題，因?yàn)槲沂且粋€(gè)只講干貨的人，從來(lái)不水文，所以餃子湯沒有意義。

樣式設(shè)置優(yōu)先級(jí)

有了樣式表css文件，并不代表，我們所有的樣式都要在css文件內(nèi)設(shè)置。我們還可以在html內(nèi)部直接設(shè)置樣式屬性。格式為：

<style>
hr {color:red;}
body {background-color:yellow;}
</style>

這是內(nèi)部樣式表，優(yōu)先級(jí)要高于外部樣式表css文件。
更有內(nèi)聯(lián)樣式表，格式為：

< body style="background-color:yellow;">

</body >

這是最優(yōu)先考慮的。
總的來(lái)說(shuō)：內(nèi)聯(lián)樣式）Inline style > （內(nèi)部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認(rèn)樣式。
今天說(shuō)到這里吧，希望大家對(duì)。