- 相關(guān)推薦
CSS讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單的方法
網(wǎng)頁(yè)設(shè)計(jì)是指使用標(biāo)識(shí)語(yǔ)言(markup language)，通過(guò)一系列設(shè)計(jì)、建模、和執(zhí)行的過(guò)程將電子格式的信息通過(guò)互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。以下是小編為大家搜索整理的CSS讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單的方法，希望能給大家?guī)?lái)幫助!更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
CSS，Cascading Style Sheets 串接樣式表，網(wǎng)頁(yè)外觀的控制語(yǔ)法World Wide Web最早是以文件的概念組成，希望透過(guò)網(wǎng)頁(yè)與超鏈接，讓文件與知識(shí)更容易連接援引。從HTML語(yǔ)法大量使用文件概念的標(biāo)簽(例如代表標(biāo)題的，代表段落的)，就不難看出WWW的這個(gè)特質(zhì)。然而WWW比起早期其它網(wǎng)絡(luò)媒介更迷人的地方，在于它能直接在頁(yè)面嵌入并呈現(xiàn)圖片，這個(gè)改變讓W(xué)WW發(fā)展迅速，也讓頁(yè)面視覺(jué)裝飾大為盛行。但網(wǎng)頁(yè)先天的文件性格，讓圖像排版設(shè)計(jì)難以施展手腳，于是像利用巢狀表格與圖像拼組而成的頁(yè)面開(kāi)始盛行，以求達(dá)到精準(zhǔn)元素定位與更精美的視覺(jué)效果。這個(gè)潘多拉盒子一開(kāi)，造成了許多失控的亂象，讓頁(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á)到效果。
Quirk Mode 怪癖模式
瀏覽器改版時(shí)，通常都會(huì)加強(qiáng)對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)語(yǔ)法的支持，不過(guò)這也意味著，依照過(guò)去瀏覽器特性寫(xiě)出來(lái)的頁(yè)面，在呈現(xiàn)上會(huì)有問(wèn)題，為了保持向前兼容，瀏覽器通常會(huì)設(shè)計(jì)標(biāo)準(zhǔn)模式與「怪癖」模式，確保一些舊網(wǎng)站能用較寬松、容錯(cuò)率較高的語(yǔ)法解譯方式呈現(xiàn)。
瀏覽器會(huì)依網(wǎng)頁(yè)宣告的DOCTYPE與DTD，決定頁(yè)面呈現(xiàn)將依照標(biāo)準(zhǔn)模式或怪癖模式。
Cascade Rule 串接規(guī)則
CSS具備串接的規(guī)則和明確度，用來(lái)處理樣式?jīng)_突的情況。串接規(guī)則會(huì)依重要性排序，決定采用哪一種樣式。
在串接規(guī)則中，重要性最高的是標(biāo)示有「!import」的使用者樣式，其次是同樣標(biāo)有「!import」的作者樣式表。
在沒(méi)有標(biāo)「!import」時(shí)，作者樣式表的重要性高于使用者。透過(guò)重要性規(guī)定，瀏覽器就能決定呈現(xiàn)哪一種樣式，而如果重要性一致時(shí)，則后出的規(guī)則會(huì)覆寫(xiě)較早的規(guī)則。
Specificity 明確度
由于CSS具有可串接、繼承的特性，某一個(gè)元素有可能被指定不同的樣式。發(fā)生這種情況時(shí)，瀏覽器就會(huì)依明確度來(lái)決定呈現(xiàn)那一種樣式。
明確度規(guī)定每一種選取器都具有一個(gè)計(jì)數(shù)值，例如ID選取器的明確度是「0，1，0，0」，而類別選取器的明確度是「0，0，1，0」，當(dāng)某個(gè)元素同時(shí)套用兩者，而且部分樣式又有沖突時(shí)，因?yàn)镮D選取器的明確度較高，就會(huì)以它的值為主。
CSS Hack CSS小技巧
CSS在瀏覽器支持與實(shí)作的方式不同，甚至存在bug，都讓設(shè)計(jì)人員在跨瀏覽器的頁(yè)面設(shè)計(jì)遇到挑戰(zhàn)。為了解決這些難題而發(fā)展出的技巧，便稱為CSS Hack。
例如IE 5在Width這個(gè)語(yǔ)法實(shí)作，與W3C制定的標(biāo)準(zhǔn)有所不同，造成它與其它瀏覽器會(huì)呈現(xiàn)不同的結(jié)果。為了解決這個(gè)問(wèn)題，而有所謂「Box Model Hack」的技巧，讓IE 5也能和其它瀏覽器呈現(xiàn)相同的結(jié)果。
Pseudo Class 虛擬類別
最常見(jiàn)的虛擬類別是應(yīng)用在超級(jí)鏈接語(yǔ)法上。例如超級(jí)鏈接指定連結(jié)顏色(a:link)、造訪過(guò)顏色(a:visit)、以及鼠標(biāo)經(jīng)過(guò)(a:hover)等。
事實(shí)上虛擬類別不只能用在超級(jí)鏈接上，例如表格或窗體輸入字段等，CSS都能選取并指定多種狀態(tài)，但是由于IE 6以前的瀏覽器只支持少數(shù)虛擬類別語(yǔ)法，即使最常見(jiàn)的超級(jí)鏈接也支持不完整(a:focus便不支持)，造成使用的人很有限。
Inheritance 繼承
繼承是CSS在設(shè)計(jì)上相當(dāng)具有效率的原則，能精簡(jiǎn)設(shè)計(jì)上的復(fù)雜性。例如在「body」選取器指定字型與大小之后，包含在「body」底下的所有元素，都會(huì)自動(dòng)繼承這個(gè)樣式，不需要一一為子系的元素再指定樣式。
繼承而來(lái)的屬性，也可以透過(guò)指定值進(jìn)行復(fù)寫(xiě)，因此如果區(qū)塊需要不同的字型，只需要重新指定新值給這個(gè)區(qū)塊，就可以采用新字型。透過(guò)這種方式，可以大為減少選取器的數(shù)量。
float 飄浮，文繞圖
CSS的文繞圖的功能是透過(guò)指定「float」屬性值，就能讓區(qū)塊「飄浮」起來(lái)，并透過(guò)指定左、右位置，移到定點(diǎn)。
文繞圖雖然是用在圖、文關(guān)系上，不過(guò)在設(shè)計(jì)實(shí)務(wù)中，更大量應(yīng)用在版面定位上。另一個(gè)常用來(lái)定位版本的功能是「position」，它可以精確地用像素指定任意位置。利用「float」或「position」，便可以取代過(guò)去透過(guò)巢狀表格才能達(dá)到的精準(zhǔn)定位。
【CSS讓網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)單的方法】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)css教學(xué)02-07
CSS網(wǎng)頁(yè)設(shè)計(jì)技巧03-27
網(wǎng)頁(yè)設(shè)計(jì)中css怎么學(xué)習(xí)12-03
用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)時(shí)組織CSS的建議11-26
網(wǎng)頁(yè)設(shè)計(jì)的基本步驟及設(shè)計(jì)方法11-29
如何用css進(jìn)行網(wǎng)頁(yè)布局03-20