#017_Apl_CSS
????上一節(jié)課我們學習了如何該表 HTML 顯示內(nèi)容的樣式,不過這些樣式都是在 HTML 文檔內(nèi)部的,如果,我們有大量的頁面需要按照這個樣式表來對文檔進行格式化穆桂,而且這個樣式表規(guī)定的風格是十分完善的,是可以通用到所喲頁面的融虽,我們就需要用到外部樣式表——層疊樣式表享完。CSS(CascadingStyleSheets)
CSS有什么用?
????HTML 通過樣式定義如何顯示 HTML 元素衣形,樣式通常存儲在樣式表中驼侠,CSS里面層疊了大量的樣式表,把樣式添加到 HTML 中谆吴,是為了解決內(nèi)容與表現(xiàn)分離的問題倒源,與此同時,外部樣式表可以極大提高工作效率句狼。
? ? 上節(jié)課我們在 head 部分添加了一個內(nèi)部樣式表(代碼見黃色框部分)笋熬,正如我們開頭所說的,如果項目的 HTML 文件越來越多腻菇,是不是每一個 HTML 文檔的開頭都要加上這樣一個內(nèi)不樣式表啊胳螟,這個內(nèi)部樣式表相對來說已經(jīng)是一個簡單的內(nèi)部樣式表了,如果之后定義的樣式越來越多筹吐,那么不是每個 HTML 文檔都多上了一大段糖耸。
? ? 這時候,就要用到 CSS 了丘薛。
? ? 可以看見嘉竟,在 css 文檔中,我們用來定義樣式的代碼和在 HTML 文檔中的基本一樣,改變的 只是文檔的后綴舍扰,css 文檔 后綴不是 .html 而是 .css?
? ? 然后用 #011 課程里面說過的 link 標簽倦蚪,從外部導入樣式表,除了 href 屬性是填入對應的 css 文件的相對地址边苹,其他直接照抄陵且。
css 文檔怎么編寫
????css 文檔就是內(nèi)部樣式表 content 內(nèi)容值 的拆解,我們可以把原來內(nèi)部樣式表的內(nèi)容值逐一拆解放入 css 中个束,另存為 .css 文件慕购,放到項目對應文件夾,這樣就能用了茬底。
同一個 HTML 元素被重復定義
? ? ?細心的同學可能注意到了脓钾,我把之前的內(nèi)部樣式表注釋掉了。這是因為桩警,同一個 HTML 元素被多個樣式定義的時候,一般而言昌妹,所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中捶枢,其中數(shù)字越大優(yōu)先權越高。
1飞崖、瀏覽器缺省設置
2烂叔、外部樣式表
3、內(nèi)部樣式表(位于 [head>] 標簽內(nèi)部)
4固歪、內(nèi)聯(lián)樣式(在 HTML 元素內(nèi)部)
? ? 我們需要根據(jù)自己的需求蒜鸡,合理利用這些優(yōu)先級,制作出自己想要的顯示元素效果牢裳。