CSS讓網頁設計簡單的方法

　　網頁設計是指使用標識語言(markup language)，通過一系列設計、建模、和執行的過程將電子格式的信息通過互聯網傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。以下是小編為大家搜索整理的CSS讓網頁設計簡單的方法，希望能給大家帶來幫助!更多精彩內容請及時關注我們應屆畢業生考試網!

　　CSS，Cascading Style Sheets 串接樣式表，網頁外觀的控制語法World Wide Web最早是以文件的概念組成，希望透過網頁與超鏈接，讓文件與知識更容易連接援引。從HTML語法大量使用文件概念的標簽(例如代表標題的，代表段落的)，就不難看出WWW的這個特質。然而WWW比起早期其它網絡媒介更迷人的地方，在于它能直接在頁面嵌入并呈現圖片，這個改變讓WWW發展迅速，也讓頁面視覺裝飾大為盛行。但網頁先天的文件性格，讓圖像排版設計難以施展手腳，于是像利用巢狀表格與圖像拼組而成的頁面開始盛行，以求達到精準元素定位與更精美的視覺效果。這個潘多拉盒子一開，造成了許多失控的亂象，讓頁面原始碼難以閱讀與維護。為了提高網頁在視覺上可以有更多元的表現，W3C在1996年推出CSS第一版，提供解決之道。不過由于CSS有賴于瀏覽器的支持，因此長久以來CSS的推展情況一直不佳，一直到IE 6、Firefox等主流瀏覽器支持CSS，才漸漸改善。

　　CSS語法立意讓網頁內容與視覺呈現分離，一方面使得頁面維護工作更容易，不會因內容或視覺效果改變影響到另一方，這樣的頁面設計，也對搜尋引擎更為友善，更容易搜尋到頁面內容。其次，CSS也可以增加頁面在不同媒介的呈現效果。同一份頁面，可依據用途不同，例如在屏幕顯示或打印，而自動切換不同的CSS語法，讓呈現最佳化。也由于讀取頁面的媒介越來越多元(如手機、PDA)，CSS可以彈性調整呈現方式，都更加彰顯CSS在網頁上的優勢。

　　Selector 選取器

　　要透過CSS為HTML的元素套用樣式效果，首先須指向特定元素，像是標題、段落或超鏈接等，而這個指定的方法，就稱為選取器。

　　最基本的.選取器，是指定HTML卷標元素的名稱，另外還有ID選取器、類別選取器、虛擬類別、子系、旁系等，不過這些CSS的選取方法，每種瀏覽器的支持不一，像IE6就不支援子系或旁系的選取器。

　　Divist 濫用DIV標簽的設計人員

　　事實上，善用CSS串接與繼承的特性，就能創造出精準、豐富的視覺效果。但是并非僅靠CSS，濫用語法的情況就能改善。

　　過去盛行巢狀表格排版，導致Web原始碼難以閱讀與維護。不過CSS設計人員如不善用串接與繼承，而以大量DIV區塊語法作頁面排版，將使頁面原始碼充斥DIV標簽，這往往和使用巢狀表格一樣，難以閱讀，這種設計人員便稱為「Divist」。CSS并非萬靈丹，須靠設計人員正確運用，才能達到效果。

　　Quirk Mode 怪癖模式

　　瀏覽器改版時，通常都會加強對網頁標準語法的支持，不過這也意味著，依照過去瀏覽器特性寫出來的頁面，在呈現上會有問題，為了保持向前兼容，瀏覽器通常會設計標準模式與「怪癖」模式，確保一些舊網站能用較寬松、容錯率較高的語法解譯方式呈現。

　　瀏覽器會依網頁宣告的DOCTYPE與DTD，決定頁面呈現將依照標準模式或怪癖模式。

　　Cascade Rule 串接規則

　　CSS具備串接的規則和明確度，用來處理樣式沖突的情況。串接規則會依重要性排序，決定采用哪一種樣式。

　　在串接規則中，重要性最高的是標示有「!import」的使用者樣式，其次是同樣標有「!import」的作者樣式表。

　　在沒有標「!import」時，作者樣式表的重要性高于使用者。透過重要性規定，瀏覽器就能決定呈現哪一種樣式，而如果重要性一致時，則后出的規則會覆寫較早的規則。

　　Specificity 明確度

　　由于CSS具有可串接、繼承的特性，某一個元素有可能被指定不同的樣式。發生這種情況時，瀏覽器就會依明確度來決定呈現那一種樣式。

　　明確度規定每一種選取器都具有一個計數值，例如ID選取器的明確度是「0，1，0，0」，而類別選取器的明確度是「0，0，1，0」，當某個元素同時套用兩者，而且部分樣式又有沖突時，因為ID選取器的明確度較高，就會以它的值為主。

　　CSS Hack CSS小技巧

　　CSS在瀏覽器支持與實作的方式不同，甚至存在bug，都讓設計人員在跨瀏覽器的頁面設計遇到挑戰。為了解決這些難題而發展出的技巧，便稱為CSS Hack。

　　例如IE 5在Width這個語法實作，與W3C制定的標準有所不同，造成它與其它瀏覽器會呈現不同的結果。為了解決這個問題，而有所謂「Box Model Hack」的技巧，讓IE 5也能和其它瀏覽器呈現相同的結果。

　　Pseudo Class 虛擬類別

　　最常見的虛擬類別是應用在超級鏈接語法上。例如超級鏈接指定連結顏色(a:link)、造訪過顏色(a:visit)、以及鼠標經過(a:hover)等。

　　事實上虛擬類別不只能用在超級鏈接上，例如表格或窗體輸入字段等，CSS都能選取并指定多種狀態，但是由于IE 6以前的瀏覽器只支持少數虛擬類別語法，即使最常見的超級鏈接也支持不完整(a:focus便不支持)，造成使用的人很有限。

　　Inheritance 繼承

　　繼承是CSS在設計上相當具有效率的原則，能精簡設計上的復雜性。例如在「body」選取器指定字型與大小之后，包含在「body」底下的所有元素，都會自動繼承這個樣式，不需要一一為子系的元素再指定樣式。

　　繼承而來的屬性，也可以透過指定值進行復寫，因此如果區塊需要不同的字型，只需要重新指定新值給這個區塊，就可以采用新字型。透過這種方式，可以大為減少選取器的數量。

　　float 飄浮，文繞圖

　　CSS的文繞圖的功能是透過指定「float」屬性值，就能讓區塊「飄浮」起來，并透過指定左、右位置，移到定點。

　　文繞圖雖然是用在圖、文關系上，不過在設計實務中，更大量應用在版面定位上。另一個常用來定位版本的功能是「position」，它可以精確地用像素指定任意位置。利用「float」或「position」，便可以取代過去透過巢狀表格才能達到的精準定位。

【CSS讓網頁設計簡單的方法】相關文章：

網頁設計css教學11-15

關于css框架網頁設計教程11-14

網頁設計中css怎么學習10-04

CSS網頁設計中實用的技巧10-01

HTML CSS網頁設計中實用的技巧09-22

自學網頁設計的方法09-18

網頁設計中的logo設計方法10-04

用Dreamweaver設計網頁時組織CSS的建議09-08

簡單實用的網頁設計技巧09-11

簡單易用的網頁設計技巧09-10

• 上一篇：銀行責任擔當三分鐘演講 銀行 責任擔當
• 下一篇：返回列表