|
網(wǎng)站建設(shè)是指使用標(biāo)識語言（markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網(wǎng)頁設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。
挑選者特性的應(yīng)用
在講挑選者的特性之前，要提一下的是ＣＳＳ繼承的特性。所謂的繼承的特性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性質(zhì)。繼承的特性最典型的應(yīng)用通常發(fā)揮在預(yù)設(shè)整份網(wǎng)頁的樣式，而要指定為其它樣式的部份再依要設(shè)定在個別元素里即可。這項(xiàng)特性可以提供網(wǎng)頁設(shè)計(jì)者更理想的發(fā)揮空間。
接下來就要講挑選者特性的應(yīng)用！其實(shí)這部份應(yīng)該算是聲明的一種方式，但是在您看過第二章的基本的聲明與應(yīng)用後，到這邊再講挑選者您會比較有概念點(diǎn)。在ＣＳＳ應(yīng)用或設(shè)計(jì)的時候，有幾種依據(jù)元素的關(guān)系或性質(zhì)來設(shè)定顯示特定性質(zhì)的方法，就是挑選者特性的應(yīng)用，能讓您在控制與應(yīng)用上更加靈活。
一、前後文挑選者：依聲明標(biāo)簽前後文關(guān)系顯示特定性質(zhì)的方法。 前後文挑選者便是當(dāng)瀏覽器在顯示HTML原始碼所指定的內(nèi)容時，會考慮元素標(biāo)簽的前後關(guān)系，而去顯示指定的樣式聲明。也就是說只要HTML原始碼內(nèi)的標(biāo)簽排列前後順序符合時，該項(xiàng)聲明便會發(fā)生作用了！
元素A(標(biāo)簽A) 元素B(標(biāo)簽B) 元素C(標(biāo)簽C) ... {樣式規(guī)則}要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標(biāo)簽間要用逗號隔開，而用前後文挑選者聲明時元素標(biāo)簽間要用空格隔開；而這兩種聲明方式您可以混合使用。 元素A 元素B, 元素C 元素D 元素E, ... {樣式規(guī)則}這樣您就可以用集體聲明的方式，聲明數(shù)組前後文挑選者的樣式規(guī)則。
二、類別挑選者：讓單一或數(shù)個標(biāo)簽使用同組樣式規(guī)則的方法。 類別(class)可以讓不同的元素標(biāo)簽共同套用同一組樣式性質(zhì)或相同的元素標(biāo)簽套 用不同組的樣式性質(zhì)。首先介紹的是如何讓不同的元素套用同一組樣式性質(zhì)，如下面范例所寫即可。 <HTML>
<HEAD>
<STYLE>
<--
.blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
...
<H1 class="blue">...</H1>
...
<P class="blue">... </P>
...
</BODY>要注意在聲明時前面的小點(diǎn)，CLASS名稱可任取。而要讓相同的元素標(biāo)簽套用不同組的樣式性質(zhì)時，也可以應(yīng)用類別特性來設(shè)定。 <HTML>
<HEAD>
<STYLE>
<--
P.blue { color : BLUE }
P.red { color : RED }
-->
</STYLE>
</HEAD>
<BODY>
...
<P class="blue">...</P>
...
<P class="red">...</P>
...
</BODY>要注意同樣是在聲明時的小點(diǎn)，CLASS名稱可任取。靈活運(yùn)用類別特性，可以讓您的樣式設(shè)定更具機(jī)動性��！
三、ＩＤ挑選者：與類別挑選者類似，不同的是在『唯一性』。 ＩＤ特性的使用與類別特性十分雷同，但是，文件里的各個ＩＤ都是唯一的。換句話 說，類別特性可以重復(fù)套用在單一或數(shù)個元素標(biāo)簽之上，但是ＩＤ屬性在一份文件里只能出現(xiàn)一次。如下面范例所寫即可。 <HTML>
<HEAD>
<STYLE>
<--
#blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
...
<P ID="blue">...</P>
...
</BODY>可以看到，聲明的方式是利用井字號『#』。而ＩＤ的這種『唯一性』正是讓JavaScript或 VBScript能夠?qū)υ剡M(jìn)行控制的關(guān)鍵。
透過以上的介紹的挑選者特性的聲明與使用，可以讓您的樣式設(shè)定更具機(jī)動與變化 。其實(shí)您可以先熟悉上一章為您介紹的基本的聲明與應(yīng)用方法，再應(yīng)用本章所講的挑選者特性，一步步地去熟悉樣式表的使用。
連結(jié)擬似特性的應(yīng)用
還記得在HTML的基本語法，在BODY標(biāo)簽中可 以用link、alink、vlink屬性去控制可連結(jié)或已連結(jié)的字體顏色嗎？現(xiàn)在亦可用ＣＳＳ去控制這些性質(zhì)，稱為『擬似類別』（pseudo class）。您可以將其當(dāng)作一般類別，聲明其樣式規(guī)則，而實(shí)際上，這些擬似類別并不用像上面講的類別挑選者，在HTML原始碼中再 行設(shè)定指向的類別（CLASS）。下面介紹擬似類別的聲明與應(yīng)用。
一般的聲明方式：擬似類別是以冒號來聲明。 只要在<STYLE>...</STYLE>架構(gòu)中加入下面的聲明後，則頁面中的連結(jié)文字就會依您設(shè)定的樣式顯式了！ A:link { 樣式 規(guī)則 }
A:active { 樣式規(guī)則 }
A:visited { 樣式規(guī)則 }
A:hover { 樣式規(guī) 則 }A:link用以設(shè)定未參觀連結(jié)的樣式規(guī)則。A:active用以設(shè)定作用中連結(jié)的樣式規(guī)則。A:visited用以設(shè)定已參觀連結(jié)的樣式規(guī)則。A:hover用以設(shè)定滑鼠移到 連結(jié)之上時的樣式規(guī)則。而其中hover并不被NC4所支援，其它三個特性兩大瀏覽器都有支持。
如果您用的是IE4以上的瀏覽器，從本站鏈接您就可以知道 hover作用的妙處，以簡單的樣式設(shè)定就可以達(dá)成以往要寫好長一串設(shè)定的相同效果 。這個連結(jié)擬似類別也可以與上面說過的類別挑選者特性合并使用。
ＤＩＶ與ＳＰＡＮ的比較
雖然樣式表可以套用在任何標(biāo)簽之上，但是 ＤＩＶ和ＳＰＡＮ元素的使用更是大大地?cái)U(kuò)展了HTML的應(yīng)用層面。ＤＩＶ和ＳＰＡＮ這 兩個元素在應(yīng)用上十分類似，使用時都必加上結(jié)尾標(biāo)簽，也就是< DIV>...</DIV>和<SPAN>...</SPAN> 。兩個可以應(yīng)用的屬性與事件處理也很類似，都可以配合前面提過的挑選者特性來編寫。兩者也都不強(qiáng)加顯示功能于頁面內(nèi)容之上，可以說是使用上十分廣泛的元素標(biāo)簽。
而ＤＩＶ和ＳＰＡＮ的不同之處在于：ＤＩＶ元素定義為區(qū)塊（block），在 <DIV>...</DIV>之間是一個很完整的段落區(qū)塊。 而ＳＰＡＮ元素則是定義為同軸（in-line），<SPAN>...< /SPAN>應(yīng)用于于小范圍內(nèi)的設(shè)定。兩者可以彼此混合，夾雜使用，因?yàn)楸舜耸窍嗷オ?dú)立的。也因此，您可以利用這兩個元素，配合其它性質(zhì)，靈活地調(diào)整您的網(wǎng)頁 顯示的內(nèi)容。
大多數(shù)人在上網(wǎng)的時候，都會瀏覽網(wǎng)頁提供給我們的信息。
|
