CSS 基礎知識(下)

第二章CSS的應用方式css

    這章節將開始爲您介紹CSS的應用。固然一開始要介紹的是如何去創建個樣式表數組

(Style Sheets),包括了聲明的方式和應用在網頁上的方法,最後還會爲您概述一下CSS的一些特性。概略來講,CSS的聲明有三種方式:element

 1、基本聲明:最典型的CSS聲明方式。class

element {property: value} 用中文來表示的話,也就是元件方法

(標籤) {性質(屬性)樣式

名稱: 設定值} word

 例如: H3 {COLOR: BLUE} 即爲一組聲明。文件

 2、集體聲明:同時聲明某個或數個元件(標籤)(各元件(標籤)間以逗號分隔)的一組或數組規則(性質)(各組規則間以分號分隔)。標籤

  元件(標籤) {性質(屬性)名稱1: 設定值1;性質(屬性)名稱2: 設定值2;... }co

或是

  元件A(標籤A), 元件B(標籤B), 元件C(標籤C), ... {性質(屬性)名稱1: 設定值1;性質(屬性)名稱

2: 設定值2;...} 

 例如:TD {COLOR: BLUE;font-size: 9pt;} 

或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; } 

    3、分項聲明:將許多樣式規則分組再分別聲明。

    元件A(標籤A) {性質(屬性)名稱1: 設定值1; 性質(屬性)名稱2: 設定值2; } 

    元件A(標籤A) {性質(屬性)名稱3: 設定值3; 性質(屬性)名稱4: 設定值4; } 

 例如:

    TD { COLOR: BLUE; font-size: 9pt} 

    TD { font-family: "標楷體"; line-height: 150%} 

 這樣子的聲明方式並不會互相抵觸,由於所聲明的性質是不一樣的。若是不當心對一樣一個性質做了重複的聲明,則只有後來聲明的設定值纔會發生做用。

 要附帶提一下的是,在您的聲明中,只要您的格式正確就會被接受,而不管是大小寫、空白或換行都不會對顯示的結果有影響的,您可依本身習慣來編寫。

 CSS的應用方法

接下來要爲您介紹的是將所創建的樣式表應用在網頁上的四種基本方法。

1、使用STYLE屬性:將STYLE屬性直接加在個別的元件標籤裏。

  <元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...> 

    例如:

<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%> 

    這種用法的優勢是可靈巧應用樣式於各標籤中,可是缺點則是沒有整篇文件的『統一

性』。

    2、使用STYLE標籤:將樣式規則寫在<STYLE>...</STYLE>標籤之中。        

    <STYLE TYPE="text/css"> 

      <!-- 

        樣式規則表

      -->  

     </STYLE> 

  例如:

     <STYLE TYPE="text/css"> 

       <!-- 

         BODY {color: BLUE;background: #FFFFCC;font-size: 9pt} 

         TD, P {COLOR: GREEN;font-size: 9pt} 

        --> 

     </STYLE>

     一般是將整個的<STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這

相關文章
相關標籤/搜索