Use of Cascading Style Sheet (CSS) lesson I CSS的基本认识 CSS .DOCVIP

Use of Cascading Style Sheet (CSS) lesson I ＣＳＳ的基本認識 ＣＳＳ是『Cascading Style Sheets』的簡稱，中文翻為「串接樣式表」，也有人只翻為「樣式表」。ＣＳＳ用以作為網頁的排版與風格設計，在所謂的「新式網頁」裏 ，ＣＳＳ不容置疑是相當重要的一環。ＣＳＳ是以既有的基礎，用以彌補既存ＨＴＭＬ 規格裏的不足，也讓網頁的設計更為靈活。　　在這裡並不介紹ＣＳＳ的所有規格 ，僅就您在網頁寫作上較常用到，較可能用到的語法部份及應用的方法來為您作介紹。也 由於現在兩流覽器的相容是漸行漸遠，將貼心地為您注明支援該語法的流覽器。而ＩＥ從 3.0開始便支援部份語法了，這點也會為為您注明的。 應用CSS的基本認識　 應用ＣＳＳ並不困難，但是請您先參考這裏的基本認識，對一些用語有了一點基本概念後，對於您在看後面的教學會有助益，看起來也才不會太吃力！一、基本用語的認識： 元件(element)：亦即HTML基本語法中的標籤(tag)。屬性(attribute)：用以描述標籤特性的屬性。例如： HR WIDTH=90%中，HR為標籤，WIDTH為屬性，而80%即為WIDTH屬性的值。 性質(property)：用以描述元件的特性。相當於HTML基本 語法中的屬性。樣式(style)：擁有一組或陣列的性質，用以描述元件特性。挑選者(selector)：套用樣式的元件。例如： H3{ COLOR : BLUE }中，H3為挑選者，COLOR為性質，BLUE為COLOR性質的值。 二、基本單位的認識： 有相對單位與絕對單位兩種單位 表達方式。相對單位： 『em』：相對於字母高度的比例因數。『en』：相對於字型大小的比例因數。『%』：相對於長度單位（通常是目前字型的大小）的百分比例。 絕對單位： 『in』：英寸。『cm』：公分。『mm』：公釐。『px』：圖元（系統預設單位）。『pc』：pica，印刷活字單位。『pt』：像點。 相對關係：1in= 6pc= 72pt= 2.54cm= 25.4mm 三、顏色使用的認識： 顏色的表示共有五種方式。『#RRGGBB』： 以三個00到FF的十六進位值分別表示0到255十進位值的紅、綠、藍三原色數值。 『#RGB』： 簡略表示法，只用三個0到F的十六進位值分別表示紅、綠、藍三原色數值。而事實上，流覽器會自動擴展為六個十六進位的值，如『#ABC』將變為『#AABBCC』。但是，顯見這樣的 表示法並不精確。 『rgb(R,G,B)』： 以0到255十進位值的紅、綠、藍三原色數值來表示顏色。 『rgb(R%,G%,B%)』： 以紅、綠、藍彼此相對的數值比例來表示顏色，如『rgb(60%,100%,75%)』。 『Color_Name』： 直接以顏色名稱來表示顏色，共有141種標準的顏色名稱。 四、ＵＲＬ表示法的認識： ＣＳＳ的ＵＲＬ表示共有五 種方式，且都為合法宣告，您可以自行選用。URL(http://yourweb/path/file_name)URL(http://yourweb/path/file_name)URL(http://yourweb/path/file_name)URL( http://yourweb/path/file_name )URL( http://yourweb/path/file_name ) CSS的應用 　這章節將開始為您介紹ＣＳＳ的應用。當然一開始要介紹的是如何去建立個樣式表 （Style Sheets），包括了聲明的方式和應用在網頁上的方法，最後還會為您概述一下ＣＳＳ的一些特性。概略來說，ＣＳＳ的聲明有三種方式：一、基本聲明：最典型的ＣＳＳ聲明方式。 element {property: value}　用中文來表示的話，也就是元件(標籤) {性質(屬性)名稱: 設定值}例如： H3 {COLOR: BLUE}　即為一組聲明。 二、集體聲明：同時聲明某個或數個元件(標籤)（各元件(標 簽)間以逗號分隔）的一組或陣列樣式規則(性質)（各組規則間以分號分隔）。 元件(標籤) {性質(屬性)名稱1: 設定值1;性質(屬性)名稱2: 設定值2;... }或是元件A(標籤A), 元件B(標籤B), 元件C(標籤C), ... {性質(屬性)名 稱1: 設定值1;性質(屬性)名稱2: 設定值2;...}例如： TD {COLOR: BLUE;font-size: 9pt;}或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; } 三、分項聲明：將許多樣式規則分組再分別聲明。 元件A(標