CSS語(yǔ)法立意讓網(wǎng)頁(yè)內(nèi)容與視覺(jué)呈現(xiàn)分離,一方面使得頁(yè)面維護(hù)工作更容易,不會(huì)因內(nèi)容或視覺(jué)效果改變影響到另一方,這樣的頁(yè)面設(shè)計(jì),也對(duì)搜尋引擎更為友善,更容易搜尋到頁(yè)面內(nèi)容。
CSS,Cascading Style Sheets 串接樣式表,網(wǎng)頁(yè)外觀的控制語(yǔ)法
World Wide Web最早是以文件的概念組成,希望透過(guò)網(wǎng)頁(yè)與超鏈接,讓文件與知識(shí)更容易連接援引。從HTML語(yǔ)法大量使用文件概念的標(biāo)簽(例如代表標(biāo)題的<H1>,代表段落的<P>),就不難看出WWW的這個(gè)特質(zhì)。
然而WWW比起早期其它網(wǎng)絡(luò)媒介更迷人的地方,在于它能直接在頁(yè)面嵌入并呈現(xiàn)圖片,這個(gè)改變讓W(xué)WW發(fā)展迅速,也讓頁(yè)面視覺(jué)裝飾大為盛行。但網(wǎng)頁(yè)先天的文件性格,讓圖像排版設(shè)計(jì)難以施展手腳,于是像利用巢狀表格與圖像拼組而成的頁(yè)面開始盛行,以求達(dá)到精準(zhǔn)元素定位與更精美的視覺(jué)效果。這個(gè)潘多拉盒子一開,造成了許多失控的亂象,讓頁(yè)面原始碼難以閱讀與維護(hù)。
為了提高網(wǎng)頁(yè)在視覺(jué)上可以有更多元的表現(xiàn),W3C在1996年推出CSS第一版,提供解決之道。不過(guò)由于CSS有賴于瀏覽器的支持,因此長(zhǎng)久以來(lái)CSS的推展情況一直不佳,一直到IE 6、Firefox等主流瀏覽器支持CSS,才漸漸改善。
CSS語(yǔ)法立意讓網(wǎng)頁(yè)內(nèi)容與視覺(jué)呈現(xiàn)分離,一方面使得頁(yè)面維護(hù)工作更容易,不會(huì)因內(nèi)容或視覺(jué)效果改變影響到另一方,這樣的頁(yè)面設(shè)計(jì),也對(duì)搜尋引擎更為友善,更容易搜尋到頁(yè)面內(nèi)容。其次,CSS也可以增加頁(yè)面在不同媒介的呈現(xiàn)效果。同一份頁(yè)面,可依據(jù)用途不同,例如在屏幕顯示或打印,而自動(dòng)切換不同的CSS語(yǔ)法,讓呈現(xiàn)最佳化。也由于讀取頁(yè)面的媒介越來(lái)越多元(如手機(jī)、PDA),CSS可以彈性調(diào)整呈現(xiàn)方式,都更加彰顯CSS在網(wǎng)頁(yè)上的優(yōu)勢(shì)。
Selector 選取器
要透過(guò)CSS為HTML的元素套用樣式效果,首先須指向特定元素,像是標(biāo)題、段落或超鏈接等,而這個(gè)指定的方法,就稱為選取器。
最基本的選取器,是指定HTML卷標(biāo)元素的名稱,另外還有ID選取器、類別選取器、虛擬類別、子系、旁系等,不過(guò)這些CSS的選取方法,每種瀏覽器的支持不一,像IE6就不支援子系或旁系的選取器。
Divist 濫用DIV標(biāo)簽的設(shè)計(jì)人員
事實(shí)上,善用CSS串接與繼承的特性,就能創(chuàng)造出精準(zhǔn)、豐富的視覺(jué)效果。但是并非僅靠CSS,濫用語(yǔ)法的情況就能改善。
過(guò)去盛行巢狀表格排版,導(dǎo)致Web原始碼難以閱讀與維護(hù)。不過(guò)CSS設(shè)計(jì)人員如不善用串接與繼承,而以大量DIV區(qū)塊語(yǔ)法作頁(yè)面排版,將使頁(yè)面原始碼充斥DIV標(biāo)簽,這往往和使用巢狀表格一樣,難以閱讀,這種設(shè)計(jì)人員便稱為「Divist」。CSS并非萬(wàn)靈丹,須靠設(shè)計(jì)人員正確運(yùn)用,才能達(dá)到效果。
新聞熱點(diǎn)
疑難解答
圖片精選