第三章 CSS的應用補充

來源:互聯網
上載者:User

  在講挑選者的特性之前,要提一下的是CSS繼承的特性。所謂的繼承的特性是指被包在內部的標籤將擁有外部標籤的樣式性質。繼承的特性最典型的應用通常發揮在預設整份網頁的樣式,而要指定為其它樣式的部份再依要設定在個別元素裡即可。這項特性可以提供網頁設計者更理想的發揮空間。
  接下來就要講挑選者特性的應用!其實這部份應該算是聲明的一種方式,但是在您看過第二章的基本的聲明與應用後,到這邊再講挑選者您會比較有概念點。在CSS應用或設計的時候,有幾種依據元素的關係或性質來設定顯示特定性質的方法,就是挑選者特性的應用,能讓您在控制與應用上更加靈活。
一、前後文挑選者:依聲明標籤前後文關係顯示特定性質的方法。
前後文挑選者便是當瀏覽器在顯示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>

相關文章

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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