層疊樣式表(數(shù)據(jù)庫(kù))

時(shí)間：2022-12-14 00:30:02 | 來(lái)源：信息時(shí)代

時(shí)間：2022-12-14 00:30:02 來(lái)源：信息時(shí)代

    層疊樣式表 : 一種為萬(wàn)維網(wǎng)文檔添加樣式(如字體、顏色、空間)的簡(jiǎn)單機(jī)制。網(wǎng)頁(yè)設(shè)計(jì)最初是用HTML標(biāo)記來(lái)定義頁(yè)面文檔及格式,例如標(biāo)題〈h1〉、段落〈p〉、表格〈table〉、鏈接〈a〉等,但這些標(biāo)記不能滿(mǎn)足更多的文檔樣式需求。為了解決這個(gè)問(wèn)題,W3C(The World Wide Web Consortium)在1997年頒布HTML4標(biāo)準(zhǔn)的同時(shí)也公布了有關(guān)樣式表的第一個(gè)標(biāo)準(zhǔn)CSS 1。自CSS 1的版本之后,又在1998年5月發(fā)布了CSS 2版本,樣式表得到了更多的充實(shí)。1996年發(fā)布了CSS Level 1,將內(nèi)容從顯示框架中分隔出來(lái);CSS Level 2(1998)包括了更多更復(fù)雜的特性;CSS Level 3有多種模塊,如將文字轉(zhuǎn)化成語(yǔ)音。它們控制Web頁(yè)面內(nèi)容的外觀(guān),用于將內(nèi)容與表現(xiàn)形式分開(kāi)。頁(yè)面內(nèi)容(即HTML代碼)駐留在HTML文件中,而用于定義代碼表現(xiàn)形式的CSS規(guī)則駐留在另一個(gè)文件(外部樣式表)或HTML文檔的另一部分(通常為文件頭部分)中。使用CSS可以非常靈活并更好地控制具體的頁(yè)面外觀(guān),可以進(jìn)行精確的布局定位以及指定特定的字體和樣式。
CSS提供了多項(xiàng)新特點(diǎn),讓網(wǎng)頁(yè)的設(shè)計(jì)與維護(hù)更有效率:
(1)減少圖形文件: CSS提供了很多的文字樣式設(shè)定,加上瀏覽器內(nèi)建的濾鏡特效,可取代原來(lái)圖形才能表現(xiàn)的視覺(jué)效果,使修改網(wǎng)頁(yè)更方便,下載更快速。
(2)集中管理樣式: CSS可將網(wǎng)頁(yè)的內(nèi)容與樣式分開(kāi),將網(wǎng)頁(yè)的外觀(guān)設(shè)定信息集中管理。當(dāng)改變網(wǎng)頁(yè)外觀(guān)時(shí),只需更改樣式設(shè)定部分,HTML文件本身不需要更改。
(3)共享樣式設(shè)定: 將CSS樣式信息存成獨(dú)立的文件,可在多個(gè)網(wǎng)頁(yè)文件中共享,避免重復(fù)設(shè)定。
(4) 同時(shí)使用多個(gè)樣式: 在一份HTML網(wǎng)頁(yè)文件上可以使用多個(gè)CSS樣式文件。
為網(wǎng)頁(yè)添加樣式表的方法有四種:
(1)直接添加在HTML的標(biāo)識(shí)符(tag)里:
〈tag style="properties"〉網(wǎng)頁(yè)內(nèi)容〈/tag〉
例如:
〈p style="color: blue; font-size: 10pt"〉CSS實(shí)例〈/p〉
這段代碼用藍(lán)色顯示字體大小為10pt的“CSS實(shí)例”。盡管使用簡(jiǎn)單、顯示直觀(guān),但是這種方法并不常用,因?yàn)檫@樣添加無(wú)法完全發(fā)揮樣式表的優(yōu)勢(shì)“內(nèi)容結(jié)構(gòu)和格式控制分別保存”。
(2)添加在HTML的頭信息標(biāo)識(shí)符〈head〉里:
〈head〉
〈style type="text/css"〉
〈!--樣式表的具體內(nèi)容--〉
〈/style〉
〈/head〉
type=“text/css”表示樣式表采用MIME類(lèi)型,幫助不支持CSS的瀏覽器過(guò)濾掉CSS代碼,避免在瀏覽器面前直接以源代碼的方式顯示我們?cè)O(shè)置的樣式表。但為了保證上述情況一定不要發(fā)生,還是有必要在樣式表里加上注釋標(biāo)識(shí)符“〈!--注釋內(nèi)容--〉”。
(3)鏈接樣式表: 同樣是添加在HTML的頭信息標(biāo)識(shí)符〈head〉里:
〈head〉
〈link rel="stylesheet"href="*.css"
type="text/css"media="screen"〉
〈/head〉
*.css是單獨(dú)保存的樣式表文件,其中不能包含〈style〉標(biāo)識(shí)符,并且只能以css為后綴。media是可選的屬性,表示使用樣式表的網(wǎng)頁(yè)將用什么媒體輸出。rel屬性表示樣式表將以何種方式與HTML文檔結(jié)合。
(4)聯(lián)合使用樣式表: 同樣是添加在HTML的頭信息標(biāo)識(shí)符〈head〉里:
〈head〉
〈style type="text/css"〉
〈!--
@import"^*.css"