頁面引用CSS樣式方法匯總
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
[p]在閱讀本文之前,首先需要聲明是寫給css初學(xué)者和不了解css的朋友學(xué)習(xí)的,如果你已經(jīng)是一個(gè)高手,那么你就無需在這里浪費(fèi)時(shí)間了。[/p]
[p]css是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言),是cascading style sheets(層疊樣式表)的簡(jiǎn)稱。在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)中,css負(fù)責(zé)網(wǎng)頁內(nèi)容(xhtml)的表現(xiàn),跟div(或table)組織的頁面結(jié)構(gòu)一起實(shí)現(xiàn)一個(gè)完整的網(wǎng)頁布局。通過對(duì)css標(biāo)記語言的學(xué)習(xí),可以輕松地實(shí)現(xiàn)頁面的豐富表現(xiàn)。css的運(yùn)用其實(shí)就是一個(gè)把素描點(diǎn)綴成油畫的過程。[/p] [p]如何把樣式運(yùn)用到頁面中去呢?有四種方式可以幫助我們解決這個(gè)問題。在樣式調(diào)用過程中,最接近目標(biāo)的樣式定義優(yōu)先權(quán)越高。高優(yōu)先權(quán)樣式將繼承低優(yōu)先權(quán)樣式的未重疊定義但覆蓋重疊的定義。[/p] [p]四種解決方法分別是:[b]1,[/b]內(nèi)聯(lián)定義 (inline styles) ;[b]2,[/b]定義內(nèi)部樣式塊對(duì)象 (embedding a style block) ;[b]3,[/b]鏈入外部樣式表文件 (linking to a style sheet)[/p] [p]1,內(nèi)聯(lián)定義 (inline styles) ;[b]4、[/b]聯(lián)合使用樣式表(@import 導(dǎo)入函數(shù))。下面詳細(xì)說明:[/p] [p][/p] [p][b]1,內(nèi)聯(lián)定義 (inline styles)[/b][/p] [p]內(nèi)聯(lián)定義也就是在對(duì)象的標(biāo)記內(nèi)直接使用style屬性定義樣式,是最簡(jiǎn)單的樣式調(diào)用方法,可靈巧地把樣式應(yīng)用到各標(biāo)簽對(duì)象中,使用簡(jiǎn)單、顯示直觀。但無法完全發(fā)揮出樣式表“表現(xiàn)與內(nèi)容分離”的優(yōu)勢(shì),所以在設(shè)計(jì)過程中并不常用。[/p] [p]舉個(gè)簡(jiǎn)單的例子說明:對(duì)于同樣的p標(biāo)簽屬性應(yīng)用不同的樣式[/p] [p] 顯示為紅色12像素的字體 [/p] 顯示為藍(lán)色12像素的字體 [/p] [p]< head>[br]< style type=”text/css”>[br]< !– 樣式表的具體內(nèi)容 –>[br]< /style>[br]< /head>[/p] [p]style的type屬性設(shè)置為”text/css”,是允許不支持這類型的瀏覽器忽略樣式表單,幫助這類瀏覽器過濾掉css代碼,避免在瀏覽器里直接以源代碼的方式顯示這個(gè)樣式表。[/p] [p][b]3,鏈入外部樣式表文件 (linking to a style sheet)[/b][/p] [p]首先,要建立單獨(dú)的外部樣式表文件(后綴名為.css),然后也是在html文檔的和標(biāo)記之間插入link對(duì)象,格式如下:[/p] [p]< head>[br]< link rel=”stylesheet” href=”*.css” type=”text/css” >[br]< /head>[/p] [p][b]4、聯(lián)合使用樣式表(@import 導(dǎo)入函數(shù))[/b][/p] [p]使用@import聯(lián)合樣式表的方法和鏈接外部樣式表的方法一致,也是在html文檔的和標(biāo)記之間插入;但這種方式可以在鏈接外部樣式表的同時(shí),針對(duì)該網(wǎng)頁的具體情況,做出別的網(wǎng)頁不需要的樣式規(guī)則,更有優(yōu)勢(shì)。格式如下:[/p] [p]< head>[br]< style type=”text/css”>[br]< !–[br]@import “*.css”[br]其他樣式表的聲明[br]–>[br]< /style>[br]< /head>[/p] [p]需要注意的是:[/p] [p]·聯(lián)合法輸入樣式表必須以@import開頭,結(jié)尾”;”結(jié)束;[/p] [p]·如果同時(shí)輸入的多個(gè)樣式表產(chǎn)生沖突時(shí),則按照第一個(gè)輸入的樣式表有效處理;[/p] [p]·如果輸入的樣式表和網(wǎng)頁中的樣式(內(nèi)聯(lián)定義)規(guī)則產(chǎn)生沖突時(shí),則使用外部的樣式表。[/p] 該文章在 2010/4/27 2:51:51 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |