一夲道不卡高清av_亚洲欧洲无码av不卡在线_欧美一级a做是免费_第四色最新网址

極地視覺,蘇州logo設(shè)計,蘇州品牌設(shè)計

 

品牌咨詢/微信:136 5622 6579

資訊中心:

行業(yè)新聞

經(jīng)驗分享

常見問題

您目前所在的位置:資料中心 >> 經(jīng)驗分享

 

CSS讓網(wǎng)頁更容易設(shè)計與維護(hù)

添加時間:2013-01-10     來源:蘇州極地設(shè)計    瀏覽人數(shù):2692

CSS語法立意讓網(wǎng)頁內(nèi)容與視覺呈現(xiàn)分離,一方面使得頁面維護(hù)工作更容易,不會因內(nèi)容或視覺效果改變影響到另一方,這樣的頁面設(shè)計,也對搜尋引擎更為友善,更容易搜尋到頁面內(nèi)容。
  
CSS,Cascading Style Sheets 串接樣式表,網(wǎng)頁外觀的控制語法   
  
World Wide Web最早是以文件的概念組成,希望透過網(wǎng)頁與超鏈接,讓文件與知識更容易連接援引。從HTML語法大量使用文件概念的標(biāo)簽(例如代表標(biāo)題的<H1>,代表段落的<P>),就不難看出WWW的這個特質(zhì)。   
  
然而WWW比起早期其它網(wǎng)絡(luò)媒介更迷人的地方,在于它能直接在頁面嵌入并呈現(xiàn)圖片,這個改變讓W(xué)WW發(fā)展迅速,也讓頁面視覺裝飾大為盛行。但網(wǎng)頁先天的文件性格,讓圖像排版設(shè)計難以施展手腳,于是像利用巢狀表格與圖像拼組而成的頁面開始盛行,
以求達(dá)到精準(zhǔn)元素定位與更精美的視覺效果。這個潘多拉盒子一開,造成了許多失控的亂象,讓頁面原始碼難以閱讀與維護(hù)。
  
為了提高網(wǎng)頁在視覺上可以有更多元的表現(xiàn),W3C在1996年推出CSS第一版,提供解決之道。不過由于CSS有賴于瀏覽器的支持,因此長久以來CSS的推展情況一直不佳,一直到IE 6、Firefox等主流瀏覽器支持CSS,才漸漸改善。   
  
CSS語法立意讓網(wǎng)頁內(nèi)容與視覺呈現(xiàn)分離,一方面使得頁面維護(hù)工作更容易,不會因內(nèi)容或視覺效果改變影響到另一方,這樣的頁面設(shè)計,也對搜尋引擎更為友善,更容易搜尋到頁面內(nèi)容。其次,CSS也可以增加頁面在不同媒介的呈現(xiàn)效果。同一份頁面,可依據(jù)用途不同,例如在屏幕顯示或打印,而自動切換不同的CSS語法,讓呈現(xiàn)最佳化。也由于讀取頁面的媒介越來越多元(如手機、PDA),CSS可以彈性調(diào)整呈現(xiàn)方式,都更加彰顯CSS在網(wǎng)頁上的優(yōu)勢。

Selector 選取器   
  要透過CSS為HTML的元素套用樣式效果,首先須指向特定元素,像是標(biāo)題、段落或超鏈接等而這個指定的方法,就稱為選取器。   
  最基本的選取器,是指定HTML卷標(biāo)元素的名稱,另外還有ID選取器、類別選取器、虛擬類別、子系、旁系等,不過這些CSS的選取方法,每種瀏覽器的支持不一,像IE6就不支援子系或旁系的選取器。
  Divist 濫用DIV標(biāo)簽的設(shè)計人員   
  事實上,善用CSS串接與繼承的特性,就能創(chuàng)造出精準(zhǔn)、豐富的視覺效果。但是并非僅靠CSS,濫用語法的情況就能改善。   
  過去盛行巢狀表格排版,導(dǎo)致Web原始碼難以閱讀與維護(hù)。不過CSS設(shè)計人員如不善用串接與繼承,而以大量DIV區(qū)塊語法作頁面排版,將使頁面原始碼充斥DIV標(biāo)簽,這往往和使用巢狀表格一樣,難以閱讀,這種設(shè)計人員便稱為「Divist」。CSS并非萬靈丹,須靠設(shè)計人員正確運用,才能達(dá)到效果。  
  Quirk Mode 怪癖模式   
  瀏覽器改版時,通常都會加強對網(wǎng)頁標(biāo)準(zhǔn)語法的支持,不過這也意味著,依照過去瀏覽器特性寫出來的頁面,在呈現(xiàn)上會有問題,為了保持向前兼容,瀏覽器通常會設(shè)計標(biāo)準(zhǔn)模式與「怪癖」模式,確保一些舊網(wǎng)站能用較寬松、容錯率較高的語法解譯方式呈現(xiàn)。   
  瀏覽器會依網(wǎng)頁宣告的DOCTYPE與DTD,決定頁面呈現(xiàn)將依照標(biāo)準(zhǔn)模式或怪癖模式。

Cascade Rule 串接規(guī)則   
  CSS具備串接的規(guī)則和明確度,用來處理樣式?jīng)_突的情況。串接規(guī)則會依重要性排序,決定采用哪一種樣式。   
  在串接規(guī)則中,重要性最高的是標(biāo)示有「!import」的使用者樣式,其次是同樣標(biāo)有「!import」的作者樣式表。   
  在沒有標(biāo)「!import」時,作者樣式表的重要性高于使用者。透過重要性規(guī)定,瀏覽器就能決定呈現(xiàn)哪一種樣式,而如果重要性一致時,則后出的規(guī)則會覆寫較早的規(guī)則。   
  Specificity 明確度   
  由于CSS具有可串接、繼承的特性,某一個元素有可能被指定不同的樣式。發(fā)生這種情況時,瀏覽器就會依明確度來決定呈現(xiàn)那一種樣式。   
  明確度規(guī)定每一種選取器都具有一個計數(shù)值,例如ID選取器的明確度是「0,1,0,0」,而類別選取器的明確度是「0,0,1,0」,當(dāng)某個元素同時套用兩者,而且部分樣式又有沖突時,因為ID選取器的明確度較高,就會以它的值為主。   
  CSS Hack CSS小技巧   
  CSS在瀏覽器支持與實作的方式不同,甚至存在bug,都讓設(shè)計人員在跨瀏覽器的頁面設(shè)計遇到挑戰(zhàn)。為了解決這些難題而發(fā)展出的技巧,便稱為CSS Hack。
  例如IE 5在Width這個語法實作,與W3C制定的標(biāo)準(zhǔn)有所不同,造成它與其它瀏覽器會呈現(xiàn)不同的結(jié)果。為了解決這個問題,而有所謂「Box Model Hack」的技巧,讓IE 5也能和其它瀏覽器呈現(xiàn)相同的結(jié)果。   

 Pseudo Class 虛擬類別   
  最常見的虛擬類別是應(yīng)用在超級鏈接語法上。例如超級鏈接指定連結(jié)顏色(a:link)、造訪過顏色(a:visit)、以及鼠標(biāo)經(jīng)過(a:hover)等。   
  事實上虛擬類別不只能用在超級鏈接上,例如表格或窗體輸入字段等,CSS都能選取并指定多種狀態(tài),但是由于IE 6以前的瀏覽器只支持少數(shù)虛擬類別語法,即使最常見的超級鏈接也支持不完整(a:focus便不支持),造成使用的人很有限。   
  Inheritance 繼承   
  繼承是CSS在設(shè)計上相當(dāng)具有效率的原則,能精簡設(shè)計上的復(fù)雜性。例如在「body」選取器指定字型與大小之后,包含在「body」底下的所有元素,都會自動繼承這個樣式,不需要一一為子系的元素再指定樣式。   
  繼承而來的屬性,也可以透過指定值進(jìn)行復(fù)寫,因此如果區(qū)塊需要不同的字型,只需要重新指定新值給這個區(qū)塊,就可以采用新字型。透過這種方式,可以大為減少選取器的數(shù)量。
  float 飄浮,文繞圖   
  CSS的文繞圖的功能是透過指定「float」屬性值,就能讓區(qū)塊「飄浮」起來,并透過指定左、右位置,移到定點。   
  文繞圖雖然是用在圖、文關(guān)系上,不過在設(shè)計實務(wù)中,更大量應(yīng)用在版面定位上。另一個常用來定位版本的功能是「position」,它可以精確地用像素指定任意位置。利用「float」或「position」,便可以取代過去透過巢狀表格才能達(dá)到的精準(zhǔn)定位。

 

上一篇:探討中西方現(xiàn)代LOGO圖形的異同
下一篇:設(shè)計,是一種合法的壟斷!

行業(yè)新聞

+ 蘇州品牌標(biāo)志設(shè)計、高端原創(chuàng)logo設(shè)計哪家好?
+ 張家港畫冊設(shè)計:融合創(chuàng)意與信息傳達(dá)的藝術(shù)
+ 品牌形象在平面設(shè)計中的運用
+ logo設(shè)計要素深度剖析:打造獨特品牌標(biāo)識
  More>>

 

經(jīng)驗分享

+ 檸檬切片:酒標(biāo)設(shè)計的簡約美學(xué)
+ 一碗湯里的設(shè)計美學(xué):Soo Zee 23味肉湯的品牌視覺之道
+ VI設(shè)計全攻略:從標(biāo)志到色彩系統(tǒng)
+ AI與科技如何改變Logo設(shè)計行業(yè)
  More >>
 

常見問題

+ 創(chuàng)意場景設(shè)計與品牌形象的融合:打造獨特商業(yè)魅力
+ 蘇州插畫包裝設(shè)計:藝術(shù)與商業(yè)的融合
+ 包裝設(shè)計:商品的魅力外衣
+ 企業(yè)品牌vi設(shè)計如何正確的使用插畫?蘇州品牌設(shè)計公司
  More >>

版權(quán)所有 © 蘇州極地信息科技有限公司 品牌熱線:0512-89169975 136-5622-6579(微信同號)
地 址:蘇州市吳中區(qū)蘇蠡路59號蠡和大廈7樓 百度地圖 蘇ICP備11024447號 服務(wù)主區(qū)域 :昆山 太倉 張家港 常熟 吳江 南通 南京 上海
蘇州vi設(shè)計公司-極地視覺提供企業(yè)形象包裝設(shè)計,集團(tuán)VI設(shè)計,LOGO設(shè)計,宣傳畫冊設(shè)計,品牌設(shè)計,創(chuàng)意廣告,vi系統(tǒng),SI,品牌咨詢,品牌策劃,品牌全案策劃服務(wù)