DHTML與CSS樣式表－高雄鋁門窗不銹鋼門鐵皮屋採光罩鍛造門氣密窗隔音窗格子窗-建春

DHTML與CSS樣式表

甚麼是DHTML 　

"DHTML(Dynamic HTML)是一種增加HTML標記的新技術,DHTML技術需要三個組成要素,那就是HTML,CSS和Script語言。
　

    ◆HTML:指的是HTML4.0x版以前的傳統HTML標記,因為DHTML實際是上就是擴充的HTML,而使用的是CSS和Script。
    ◆CSS:"Cascading Style Sheets"簡稱CSS,中文稱為樣式表,它能夠重新定義標記,讓標記顯示不同的編排格式。
    ◆Script語言:就是大家所熟知的VBScript和JavaScript。
　

CSS的基礎 　

CSS是一種語言重新定義HTML標記,CSS的目的就是在定義文件內容的樣式。
舉例來說，HTML標記<FONT>用來標示網頁文字的字體,使用CSS,我們可以自己定義一些標記,例如我們在文件中要大量使用到10pt的紅字,就可以自己定義一個標記<REDFONT>標記,如下所示;
　

  
<STYLE TYPE="text/css">
  REDFONT{font-size:10pt;
          color:red;}
</STYLE>

在上面我們定義了標記<REDFONT>使用10pt的文字尺寸,顏色為紅色。我們在網頁中只要再使用<REDFONT>,都是使用這樣的字體。
　

CSS的種類 　

    如想在網頁上使用CSS編排網頁內容,在使用上共右三種方式。
    ◆局部套用CSS:使用標記的style屬性定義顯示的樣式,其影響的範圍僅限於那個標記套用的文字或圖形,通常是使用在<DIC>和<SPAN>的對象標記。
    ◆內建網頁的CSS:在網頁的<BODY>之前使用<STYLE>標記定義的樣式,其範圍影響到整個網頁的內容。
    ◆外部鏈接的CSS:如果是針對整個網站的網頁,可以使用<LINK>標記鏈接外部的樣式表文件,只要建立好一個樣式表文件,就可以套用到網站的所有網頁,建立一致的顯示風格。
　

首先我們要認識一下<DIV>和<SPAN>標記,雖然它們在網頁文件中沒有任何的文字效果,但是卻起著相當重要的作用。

<DIV>和<SPAN>對象標記 　

在HTML4.0中<DIV>和<SPAN>對象所包圍的網頁元素,例如:文字,圖片,表單或多媒體元素,都會被視為一個對象。<DIV>標記的對象在顯示上都會獨立成一行，如果旁邊有其他元素時,就會自動換到下一行。<SPAN>標記的對象在顯示上會和旁邊的元素位於同一行上，這兩個標記並不會產生任何文件的編排效果，其目的是配合CSS和 Script語言建立CSS,產生動態網頁效果。

使用局部套用的CSS 　

CSS最重要的工作就是定義標記的樣式,樣式是一組專屬的屬性用來定義標記顯示的網頁外觀。

在HTML中我們可以使用一組樣式定義標記的編排,如下所示:

color:blue; font-size;20pt; margin-left:15px

◆上述的樣式屬性值之間使用的是":"號,每個樣式之間使用的是";"號分隔,整行指令就是一組樣式,配合<DIV>標記的STYLE屬性,如下所示:

◆局部套用的CSS就是在標記使用STYLE屬性定義樣式,常用的標記有<DIV>,<SPAN>,<A>,和<p>,常用的樣式屬性值,如下所示:

樣式屬性值說明

color	設定顏色
background	設定背景顏色
font-size	設定字體尺寸,指定點數pt
font-family	設定使用的字體
line-height	設定網頁的行距,可以用pt或百分比
margin-left/right/top/bottom	設定網頁的左,右,上,下邊界
text-decoration	是否在文字上加下劃線
text-transform	設定文字大小寫轉換
cursor	設定光標顯示的外觀形狀

文件範例：使用局部套用的CSS,在HTML文件的文字內容上加上樣式的編排效果
　

 
 <HTML>                         
 <HEAD>          
 <TITLE>使用局部套用的CSS</TITLE>
 </HEAD>
 <BODY>
 <DIV STYLE="color:blue;font-size:20pt;margin-left:15px">
 使用局部套用的CSS</DIV>
 <DIV STYLE="position:absolute;top:100px;width:150px;
 height:150px">
   <TABLE BORDER=1 BGCOLOR=yellow>
     <TR><TD>使用局部套用的CSS</TD></TR>
   </TABLE>
 </DIV>    
 </BODY>
 </HTML>

我們不僅可以局部套用CSS,還可以針對整個網頁的編排重新定義HTML標記的樣式和自定義Classes的對象樣式。
　

重設<BODY>標記的樣式 　

內建網頁的CSS是將樣式定義在HTML標記中,也就是在<BODY>標記前,使用<STYLLE>標記定義CSS的樣式屬性。
　

◆<STYLE>標記設定TYPE屬性為"text/css",代表這是CSS。
◆重新定義<BODY>標記和對象標記<SPAN>的樣式,在標記名稱後,使用大括號括起的樣式組,就是重新定義的標記樣式,一個樣式組允許擁有數個樣式。
　

文件範例：使用<BODY>和<SPAN>標記重新定義的樣式編排文字的內容
　

 
 <HTML>                         
 <HEAD>          
 <TITLE>重設文件標示的樣式</TITLE>
 <STYLE TYPE="text/css">
 BODY{font-size:10pt;
      font-family:標楷體;
      line-height:120%;
     }
 SPAN{font-size:20pt;
      font-family:細明體;
      }
 </STYLE>          
 </HEAD>
 <BODY BGCOLOR=#FFCC99>
 <SPAN >內建網頁的CSS</SPAN ><HR>
 <P>就是將CSS加在網頁中,重設標記的樣式。</P> 
 </BODY>
 </HTML>

重設<P>標記的樣式 　

如果想在<P>標記的段落,使用不同的編排格式,我們可以再定義標記<P>的樣式。
　

文件範例：重新定義<P>的樣式,以便只在指定的段落套用CSS樣式
　

 
 <HTML>                         
 <HEAD>          
 <TITLE>重新定義<P>的樣式</TITLE>
 <STYLE TYPE="text/css">
 P{font-size:12pt;
   color:yellow;
   background-color:blue;
   font-family:標楷體;
   line-height:25;
   }
 </STYLE>          
 </HEAD>
 <BODY BGCOLOR=#FFCC99>
 <H2>內建網頁的CSS</H2><HR>
 <P>就是將CSS加在網頁中,重設標記的樣式。</P> 
 </BODY>
 </HTML>

重設超鏈接標記的樣式 　

如果用戶想改變超鏈接的外觀,例如取消下劃線,只用顏色的變化來區分,就可以使用CSS來實現。
　

<STYLE TYPE="text/css">
A.link{font-size:9pt;text-decoration:none}
A.active{font-size:9pt;text-decoration:none}
A.visited{font-size:9pt;text-decoration:none}
A.hover{font-size:9pt;text-decoration:none}
</STYLE>

◆超鏈接<A>標記的樣式擁有四種鏈接狀態,分別可以設定不同的樣式。
　

鏈接類型說明

◆如果想要去掉超鏈接的下劃線,只需將text-decoration樣式屬性設為none。
　

文件範例：重設超鏈接文字樣式
　

 
 <HTML>                         
 <HEAD>          
 <TITLE>重設超鏈接文字樣式</TITLE>
 <STYLE TYPE="text/css">
 P{font-size:12pt;
   A:link {font-size:9pt; text-decoration:none}
   A:active {font-size:9pt; text-decoration:none}
   A:visited {font-size:9pt; text-decoration:none}
   A:hover {font-size:9pt; text-decoration:none}
   }
 </STYLE>          
 </HEAD>
 <BODY BGCOLOR=#CCFF99>
 <H2>內建網頁的CSS</H2><HR>
 <P>就是將<A HREF=#css>CSS</A>加在網頁中,
 重設標記的樣式。</P> 
 </BODY>
 </HTML>