css的(de)本質讓網頁更好(hǎo)“掌±≤控”

　　css的(de)本質讓網頁更好(hǎo)“掌≤≥↓"控”。CSS語法立意讓網頁內(nèi)容與視(shì)覺呈∑σ €現(xiàn)分(fēn)離(lí)，一(yī)方面使得(ε‍×αde)頁面維護工(gōng)作(zuò)更容易，不(b≥ β™ù)會(huì)因內(nèi)容或視(shì)覺效果改變影(yǐn¥✔g)響到(dào)另一(yī)方，這(zhè)樣的φ‌(de)頁面設計(jì)，也(yě)對(duì)搜尋引擎更為(wèi)友ε∑β(yǒu)善，更容易搜尋到(dào)頁面內(nèi)λ∏¥δ容。

　　CSS，CascadingStyleSheets串接樣式<¶☆π表，網頁外(wài)觀的(de)控制(zhì)語法

　　WorldWideWeb最早是(shì)以文(w׶¥&én)件(jiàn)的(de)概念組成，希望透過網頁與±α★↓超鏈接，讓文(wén)件(jiàn)與知(zhī)識♠≈>♣更容易連接援引。從(cóng)HTML語法大(d§&∏à)量使用(yòng)文(wén)件(jiàn)≈∞概念的(de)标簽（例如(rú)代表标題的(de)＜H1＞，  ♠≠代表段落的(de)＜P＞），就(jiù)不(bù)難看(kà←₩‍n)出WWW的(de)這(zhè)個(gè)特質。

　　然而WWW比起早期其它網絡媒介更迷人(rén)的(de)×​'地(dì)方，在于它能(néng)直接在頁面嵌入并呈現(xiàn)× ↑≠圖片，這(zhè)個(gè)改變讓WWW發展迅速，也(yě)讓頁面視(shì)β​覺裝飾大(dà)為(wèi)盛行(xíng)。但(dàn)網頁™ ♥先天的(de)文(wén)件(jiàn)性格，讓圖像排版設計(jì)難以施φ• 展手腳，于是(shì)像利用(yòng)巢狀表格與圖像拼組而•ε≤¥成的(de)頁面開(kāi)始盛行(xín∞↑ ↕g)，以求達到(dào)精準元素定位與更精美(měi)的(de)視(s∑≠"hì)覺效果。這(zhè)個(gè)潘多(duō)拉盒  & 子(zǐ)一(yī)開(kāi)，造成了(le)®≠ $許多(duō)失控的(de)亂象，讓頁面原始碼難以閱讀(dú)≈‍與維護。

　　為(wèi)了(le)提高(gāo)網頁在視(shì)覺≥↔↔‌上(shàng)可(kě)以有(yǒu)更多(duō)↓©元的(de)表現(xiàn)，W3C在1←→↑≈996年(nián)推出CSS第一(yī)版，提供解決之道(dào)。不♠♥(bù)過由于CSS有(yǒu)賴于浏覽δ♣φ器(qì)的(de)支持，因此長(cháng)久以來(l★×♦≥ái)CSS的(de)推展情況一(yī)直不(bù)佳，一(yī)直γ♠✔到(dào)IE6、Firefox等主流浏覽器(qì)支持CSS，才漸漸改善。↕←π

　　CSS語法立意讓網頁內(nèi)容與視(shì)覺呈現(xiàn)分(f™•<ēn)離(lí)，一(yī)方面使得(de)頁面維護工(gō∞πδ♦ng)作(zuò)更容易，不(bù)會(huì)因內(nèi♦")容或視(shì)覺效果改變影(yǐng)響到(dào)另一(yī)方，這(φ​±zhè)樣的(de)頁面設計(jì)，也(yě)對(duì↓∞$≈)搜尋引擎更為(wèi)友(yǒu)善，更容易搜尋到(dào)頁面內(nèε∞₽±i)容。其次，CSS也(yě)可(kě)以增加頁面在"¶不(bù)同媒介的(de)呈現(xiàn)效果。同一(yī)份頁π✘&£面，可(kě)依據用(yòng)途不(bù)同，例如(rú)在屏∞•幕顯示或打印，而自(zì)動切換不(bù)同✔♠₹≥的(de)CSS語法，讓呈現(xiàn)最佳化(huà)$•。也(yě)由于讀(dú)取頁面的(de)媒介越來(lái)越多(Ω≥↑duō)元（如(rú)手機(jī)、PDA），​€∑ CSS可(kě)以彈性調整呈現(xiàn)方✘$λ>式，都(dōu)更加彰顯CSS在網頁上(shàng)的™§±(de)優勢。

　　Selector選取器(qì)

　　要(yào)透過CSS為(wèi)HTML的(dπφe)元素套用(yòng)樣式效果，首先須指向特&•Ω✔定元素，像是(shì)标題、段落或超鏈接等，而這(zhè)☆​個(gè)指定的(de)方法，就(jiù)稱為(w∏₹✘♦èi)選取器(qì)。

　　最基本的(de)選取器(qì)，是(shì)指定HTML卷标元素的(de♥↑←≈)名稱，另外(wài)還(hái)有(y•>​∑ǒu)ID選取器(qì)、類别選取器(qì)、虛拟類别、子(zǐ)系≤¥、旁系等，不(bù)過這(zhè)些(xiē)CSS的(de)選取方法，每種×∞浏覽器(qì)的(de)支持不(bù)一"±(yī)，像IE6就(jiù)不(bù)支援子(zε™∏∞ǐ)系或旁系的(de)選取器(qì)。

　　Divist濫用(yòng)DIV标簽的(de)設計(¶₽jì)人(rén)員(yuán)

　　事(shì)實上(shàng)，善用(yòng)CSS串接與繼承的∑₹(de)特性，就(jiù)能(néng)創造出精準、豐富的(de)視(shì)↕φ 覺效果。但(dàn)是(shì)并非僅靠CSS，濫用(yò®γng)語法的(de)情況就(jiù)能(néng)改善。

　　過去(qù)盛行(xíng)巢狀表格排版，導緻Web原始碼××難以閱讀(dú)與維護。不(bù)過CSS設計(jì)人(rén)員(yuánδ∞₹γ)如(rú)不(bù)善用(yòng)串接與繼承，而以大(dà)量D¶↑‍γIV區(qū)塊語法作(zuò)頁面排版，将使頁面原始碼充斥Dγ ≤IV标簽，這(zhè)往往和(hé)使用(yòng)巢狀表格一(yī'∑∑)樣，難以閱讀(dú)，這(zhè)種設計(jì)人(rén) ε員(yuán)便稱為(wèi)「Divist」。CSS并非萬靈丹，₹©★須靠設計(jì)人(rén)員(yuán)正确運用(yòn∑ g)，才能(néng)達到(dào)效果。

　　QuirkMode怪癖模式

　　浏覽器(qì)改版時(shí)，通(tōngφ↑"‍)常都(dōu)會(huì)加強對(duì÷♠↓)網頁标準語法的(de)支持，不(bù)過這(zhè)♣★ε也(yě)意味著(zhe)，依照(zhào)過去(qù₩™≤‌)浏覽器(qì)特性寫出來(lái)的(de)頁面，在呈現(xi'≥àn)上(shàng)會(huì)有(yǒπ↓♥£u)問(wèn)題，為(wèi)了(le ★↕)保持向前兼容，浏覽器(qì)通(tōng)常會(huì‌≥↔)設計(jì)标準模式與「怪癖」模式，确保一(yī)些(xiē)舊(j♦‍Ω™iù)網站(zhàn)能(néng)用(βαπ←yòng)較寬松、容錯(cuò)率較高( δ∑≤gāo)的(de)語法解譯方式呈現(xiàn)。γπ♣

　　浏覽器(qì)會(huì)依網頁宣告的(de)★β♦DOCTYPE與DTD，決定頁面呈現(xi¥®∏φàn)将依照(zhào)标準模式或怪癖模式。

　　CascadeRule串接規則

　　CSS具備串接的(de)規則和(hé↕♠α™)明(míng)确度，用(yòng)來(lái)處理(lǐ)樣式沖突的(de∑₽)情況。串接規則會(huì)依重要(yào)性排序，決定采用(↕☆yòng)哪一(yī)種樣式。

　　在串接規則中，重要(yào)性最高 ♠(gāo)的(de)是(shì)标示有(yǒu)「!import」的(de)使↕★♠₩用(yòng)者樣式，其次是(shì)同λ¥α樣标有(yǒu)「!import」的(d÷×e)作(zuò)者樣式表。

　　在沒有(yǒu)标「!import」時(shí)，作(zuò)者​→→✘樣式表的(de)重要(yào)性高(gāo)于使用(yòng)者。♣$÷$透過重要(yào)性規定，浏覽器(qì)就(j¥&iù)能(néng)決定呈現(xiàn)哪一(yī)種∞✘₩✘樣式，而如(rú)果重要(yào)性一(yī)緻時(shí)，則後出↕≥™的(de)規則會(huì)覆寫較早的(de)規則。

　　Specificity明(míng)确度

　　由于CSS具有(yǒu)可(kě)串接、繼承的(dλ ​e)特性，某一(yī)個(gè)元素有(yǒσ∑u)可(kě)能(néng)被指定不(bù)同的(d ♣e)樣式。發生(shēng)這(zhè)種情況時(shí)，浏覽器(qì)就(♠α±jiù)會(huì)依明(míng)确度來(lái)決定呈現(xià↕→‌☆n)那(nà)一(yī)種樣式。

　　明(míng)确度規定每一(yī)種選取器(©β♠©qì)都(dōu)具有(yǒu)一(yī)個(gè)計(jì)數(s✔≥☆↔hù)值，例如(rú)ID選取器(qì)的♠••σ(de)明(míng)确度是(shì)「0，1，0，0」，而類↕×☆别選取器(qì)的(de)明(míng)确度♦®₹是(shì)「0，0，1，0」，當某個(gè)元素同時(shí)套用(yònλ'g)兩者，而且部分(fēn)樣式又(yòu)有(yǒu)沖突時(shí)，♦ ©®因為(wèi)ID選取器(qì)的(de)明(míng)确度較高¥×(gāo)，就(jiù)會(huì)以它的α​↑(de)值為(wèi)主。

　　CSSHackCSS小(xiǎo)技(jì)巧

　　CSS在浏覽器(qì)支持與實作(zuò)的(de)方式不(bù)λα÷同，甚至存在bug，都(dōu)讓設計(jì)人(rén)員(yuán)在♣♦®♠跨浏覽器(qì)的(de)頁面設計(jì)遇到(dào)挑戰。為(wèi)了(σ↕δle)解決這(zhè)些(xiē)難題而發展出的(de)技(jì)巧，便₩★α©稱為(wèi)CSSHack。

　　例如(rú)IE5在Width這(zhè® £)個(gè)語法實作(zuò)，與W3C制(zhì)定的(d¥£∏e)标準有(yǒu)所不(bù)同，造成它與其它浏覽器(qì)↕&會(huì)呈現(xiàn)不(bù)同的(de)結果π¶‍。為(wèi)了(le)解決這(zhè)個(↕ gè)問(wèn)題，而有(yǒu)所謂「BoxModelHack」的(de)₹↔Ω技(jì)巧，讓IE5也(yě)能(néng)和(hé)其←®它浏覽器(qì)呈現(xiàn)相(xiàng)同的(de)結果。

　　PseudoClass虛拟類别

　　最常見(jiàn)的(de)虛拟類别是(shì)應用(yò£→ng)在超級鏈接語法上(shàng)。例如(rú)超級鏈接←δ∏指定連結顔色（a:link）、造訪過顔色（a:visitα&γ÷）、以及鼠标經過（a:hover）等。

　　事(shì)實上(shàng)虛拟類别不(bù)隻能(n±♦"≈éng)用(yòng)在超級鏈接上(shàng←♥)，例如(rú)表格或窗(chuāng)體(tǐ)輸入字段等，CSS都(★™♥dōu)能(néng)選取并指定多(duō)種狀态，但(d​₩'àn)是(shì)由于IE6以前的(deασ)浏覽器(qì)隻支持少(shǎo)數(shù)虛拟類别語法©π，即使最常見(jiàn)的(de)超級鏈接也(₹☆₩>yě)支持不(bù)完整（a:focus便不(bù)支持），造成↔γ£®使用(yòng)的(de)人(rén)很(h<≠ěn)有(yǒu)限。

　　Inheritance繼承

　　繼承是(shì)CSS在設計(jì)上(shàng)相(xiàng±$$)當具有(yǒu)效率的(de)原則，能(néng)精簡設計(jì)₩£₽上(shàng)的(de)複雜(zá)性≠π₩。例如(rú)在「body」選取器(qì)指定字型與大↔←★™(dà)小(xiǎo)之後，包含在「body」底下(xià)的(de)所有™π↓(yǒu)元素，都(dōu)會(huì)自(zì)動繼承這(zhè)個(g♠πè)樣式，不(bù)需要(yào)一(yī)一 ±(yī)為(wèi)子(zǐ)系的(de)元素再指定樣式£✔→。

　　繼承而來(lái)的(de)屬性，也(yě)可(kě)以↕ π"透過指定值進行(xíng)複寫，因此如(rú)果αδ‌區(qū)塊需要(yào)不(bù)同的(de)字型β♠♦♠，隻需要(yào)重新指定新值給這(zhè)個(gè↔Ω>)區(qū)塊，就(jiù)可(kě)以采用(yòng)新​σ±字型。透過這(zhè)種方式，可(kě)ε&'以大(dà)為(wèi)減少(shǎo)選$§•‌取器(qì)的(de)數(shù)量。

　　float飄浮，文(wén)繞圖

　　CSS的(de)文(wén)繞圖的(de)功能(n←•éng)是(shì)透過指定「float」屬性值，就(jiù€÷≈₽)能(néng)讓區(qū)塊「飄浮」起來(lái)，并透過指定左¥♣、右位置，移到(dào)定點。

　　文(wén)繞圖雖然是(shì)用(yòng)在圖、文®♣♦(wén)關系上(shàng)，不(bù)過在設計(jì)實務中•♠，更大(dà)量應用(yòng)在版面定位上(shàng)。另一(yī‌☆)個(gè)常用(yòng)來(lái)定位版本的(deσ↓♦ε)功能(néng)是(shì)「position」×‌"，它可(kě)以精确地(dì)用(yòng)像素指定任意♣≥♣位置。利用(yòng)「float」或「pβ®•λosition」，便可(kě)以取代過去(qù)透過巢狀表格才能¥$(néng)達到(dào)的(de)精準定位§↔。