首頁 > 開發者 > CSS

第三章　ＣＳＳ的應用補充

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
在講挑選者的特性之前，要提一下的是ＣＳＳ繼承的特性。所謂的繼承的特性是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承的特性最典型的應用通常發揮在預設整份網頁的樣式，而要指定為其它樣式的部份再依要設定在個別元素裡即可。這項特性可以提供網頁設計者更理想的發揮空間。

　　接下來就要講挑選者特性的應用！其實這部份應該算是聲明的一種方式，但是在您看過第二章的基本的聲明與應用後，到這邊再講挑選者您會比較有概念點。在ＣＳＳ應用或設計的時候，有幾種依據元素的關係或性質來設定顯示特定性質的方法，就是挑選者特性的應用，能讓您在控制與應用上更加靈活。

一、前後文挑選者：依聲明標籤前後文關係顯示特定性質的方法。 前後文挑選者便是當瀏覽器在顯示HTML原始碼所指定的內容時，會考慮元素標籤的前後關係，而去顯示指定的樣式聲明。也就是說只要HTML原始碼內的標籤排列前後順序符合時，該項聲明便會發生作用了！
元素A(標籤A) 元素B(標籤B) 元素C(標籤C) ... {樣式規則}要注意的是，前後文挑選者的聲明跟集體聲明很像，但是集體聲明的元素標籤間要用逗號隔開，而用前後文挑選者聲明時元素標籤間要用空格隔開；而這兩種聲明方式您可以混合使用。 元素A 元素B, 元素C 元素D 元素E, ... {樣式規則}這樣您就可以用集體聲明的方式，聲明數組前後文挑選者的樣式規則。
二、類別挑選者：讓單一或數個標籤使用同組樣式規則的方法。 類別(class)可以讓不同的元素標籤共同套用同一組樣式性質或相同的元素標籤套 用不同組的樣式性質。首先介紹的是如何讓不同的元素套用同一組樣式性質，如下面範例所寫即可。 <HTML>
<HEAD>
<STYLE>
<--
　　.blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<H1 class="blue">...</H1>
　　　...
　<P class="blue">... </P>
　　　...
</BODY>要注意在聲明時前面的小點，CLASS名稱可任取。而要讓相同的元素標籤套用不同組的樣式性質時，也可以應用類別特性來設定。 <HTML>
<HEAD>
<STYLE>
<--
　　P.blue { color : BLUE }
　　P.red { color : RED }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<P class="blue">...</P>
　　　...
　<P class="red">...</P>
　　　...
</BODY>要注意同樣是在聲明時的小點，CLASS名稱可任取。靈活運用類別特性，可以讓您的樣式設定更具機動性唷！
三、ＩＤ挑選者：與類別挑選者類似，不同的是在『唯一性』。 ＩＤ特性的使用與類別特性十分雷同，但是，檔案裡的各個ＩＤ都是唯一的。換句話 說，類別特性可以重複套用在單一或數個元素標籤之上，但是ＩＤ屬性在一份檔案裡只能出現一次。如下面範例所寫即可。 <HTML>
<HEAD>
<STYLE>
<--
　　#blue { color : BLUE }
-->
</STYLE>
</HEAD>
<BODY>
　　　...
　<P ID="blue">...</P>
　　　...
</BODY>可以看到，聲明的方式是利用井字型大小『#』。而ＩＤ的這種『唯一性』正是讓JavaScript或 VBScript能夠對元素進行控制的關鍵。
　　透過以上的介紹的挑選者特性的聲明與使用，可以讓您的樣式設定更具機動與變化 。其實您可以先熟悉上一章為您介紹的基本的聲明與應用方法，再應用本章所講的挑選者特性，一步步地去熟悉樣式表的使用。
連　結　擬　似　特　性　的　應　用

　　還記得在HTML的基本文法，在BODY標籤中可 以用link、alink、vlink屬性去控制可連結或已連結的字型顏色嗎？現在亦可用ＣＳＳ去控制這些性質，稱為『擬似類別』（pseudo class）。您可以將其當作一般類別，聲明其樣式規則，而實際上，這些擬似類別並不用像上面講的類別挑選者，在HTML原始碼中再 行設定指向的類別（CLASS）。下面介紹擬似類別的聲明與應用。

一般的聲明方式：擬似類別是以冒號來聲明。 只要在<STYLE>...</STYLE>架構中加入下面的聲明後，則頁面中的連結文字就會依您設定的樣式顯式了！ A:link { 樣式 規則 }
A:active { 樣式規則 }
A:visited { 樣式規則 }
A:hover { 樣式規 則 }A:link用以設定未參觀連結的樣式規則。A:active用以設定作用中連結的樣式規則。A:visited用以設定已參觀連結的樣式規則。A:hover用以設定滑鼠移到 連結之上時的樣式規則。而其中hover並不被NC4所支援，其它三個特性兩大瀏覽器都有支援。
　　如果您用的是IE4以上的瀏覽器，從本站連結您就可以知道 hover作用的妙處，以簡單的樣式設定就可以達成以往要寫好長一串設定的相同效果 。這個連結擬似類別也可以與上面說過的類別挑選者特性合并使用。
Ｄ　Ｉ　Ｖ　與　Ｓ　Ｐ　Ａ　Ｎ　的　比　較

　　雖然樣式表可以套用在任何標籤之上，但是 ＤＩＶ和ＳＰＡＮ元素的使用更是大大地擴充了HTML的應用程式層面。ＤＩＶ和ＳＰＡＮ這 兩個元素在應用上十分類似，使用時都必加上結尾標籤，也就是< DIV>...</DIV>和<SPAN>...</SPAN> 。兩個可以應用的屬性與事件處理也很類似，都可以配合前面提過的挑選者特性來編寫。兩者也都不強加顯示功能於頁面內容之上，可以說是使用上十分廣泛的元素標籤。

　　而ＤＩＶ和ＳＰＡＮ的不同之處在於：ＤＩＶ元素定義為區塊（block），在 <DIV>...</DIV>之間是一個很完整的段落區塊。 而ＳＰＡＮ元素則是定義為同軸（in-line），<SPAN>...< /SPAN>應用于于小範圍內的設定。兩者可以彼此混合，夾雜使用，因為彼此是相互獨立的。也因此，您可以利用這兩個元素，配合其它性質，靈活地調整您的網頁 顯示的內容。


本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More