【搜文解字】CSS,讓網頁美麗鮮活的化妝師

【搜文解字】CSS,讓網頁美麗鮮活的化妝師

CSS如同HTML一樣,是一種網路標準。可以利用一組定義來制定網頁上的字型、色彩、排版呈現。如果說HTML描繪出網頁的輪廓,那麼CSS就是為網頁的內容上了一層彩妝,讓它更為美觀地呈現在我們眼前。

名詞

  • 英:Cascading Style Sheet
  • 中:層疊樣式表

名詞定義

HTML出現時,各瀏覽器就各自支援不同的樣式表。1994年,目前擔任Opera技術長的Hakon Wium Lie提出了CSS的概念,並且受到W3C組織的注目,而在1996年發表第一版標準,而第一款完整支援CSS1的瀏覽器是2000年Mac版本的IE 5.0。目前的版本是2.1版本,大多數的瀏覽器多已支援;而最新的3.0仍在制定中。

C S S廣泛應用在當下的所有網頁中,除了純粹由HTML撰寫的網頁外,幾乎都用到了CSS。在部落格中修改文字大小、調整排版、套用模板等等,就是在修改 CSS設計。而像Firefox中Greasemonkey這類的附加元件,也可以修改瀏覽器預設的CSS,改變特定網頁外觀,例如在Google搜尋結 果中顯示頁面圖片等。

發展現狀

CSS 3新版標準雖然尚未正式推出,但是已經有許多瀏覽器正式支援。包括Opera 10、蘋果Safari 4,Firefox也逐漸加入對CSS 3語法的支援。

CSS 3中有許多相當新穎、特別的新定義。例如Text Shadow,可以讓你輕易地為文字加上陰影;而Web Fonts更可以將字型上傳到網路,當開啟網頁時自動載入,就算電腦中沒有這個字型也能夠正常顯示,更能夠調整RGBA參數調整網頁色塊的透明度,大幅提 升版型設計的美觀。對於網頁設計者而言,當然一定要熟悉CSS 3新增的各項參數。如果你想美化自己的部落格及網頁,更要好好學習一番。而未來的電子出版品、數位影音內容,也有可能會應用到CSS 3的諸多語法。

【搜文解字】CSS,讓網頁美麗鮮活的化妝師
檢驗瀏覽器是否支援CSS 3。透過www.css3.info/selectors-test/提供的測試,可以檢測你所使用的瀏覽器是否支援CSS3 Sector。
【搜文解字】CSS,讓網頁美麗鮮活的化妝師
數行語法就能為文字加上陰影。Text Shadow是CSS 3中最容易使用的一項新定義,就像Photoshop一樣可以調整陰影角度、模糊、色彩等參數。
【搜文解字】CSS,讓網頁美麗鮮活的化妝師
網路字型讓網頁表現一致。網路字型可讓網頁直接套用上傳到網路上的字型,不過遇到中文、日文時,下載所需的時間會變長許多。
董福興
作者

使用 Facebook 留言
Bb32eb85bf08c6464bc08496638c02e7?size=48&default=wavatar
1.  roadman (發表於 2010年2月17日 01:38)
webfont....每次看到這個都有點殘念的感覺
因為webfont幾乎只能用在拼音文字上
像漢字這種一字一義的不能用
為什麼?
一個中文字型高達好幾十MB 你告訴我看個網站還要等好幾分鐘是怎樣?
像英文 ASCII規定有128個字 也沒多少
漢字隨便都上萬的....
當然你會說可以挑用到的用就好
這對靜態網頁是沒關係 但像這種部落格會用到的字都不一定
還有人留言...
或許哪天網路進化到真正100M時就能實現了...
118ed642d310bc813c5ce34d61285f49?size=48&default=wavatar
2.  wellss (發表於 2010年3月03日 19:28)
剛剛順手測試了 FIREFOX 3.6 對 CSS 3 的支援度,發現還有 2 個沒過 囧...?
Web Fonts 對中文字型的話,一個中文字型起碼都要 2M 以上,有的更達 1XM 不等。

像微軟正黑體就要 14M,標楷體 4.9M,最基本的新細明體也要 8.9M...
如果看一個中文網頁都要先下一個數十M的字型,那真的是在說笑。
發表回應
謹慎發言,尊重彼此。按此展開留言規則