CSS 語法應用介紹－DIY玩化學

　　CSS(Cascading Style Sheets)串接樣式表，並不是一種程式設計語言，而是用於網頁排版的標記性語言，它是由許多樣式名稱和樣式設定值所組成的字串，可以擴展 html 語言的功能，及搭配 Java Script動態改變CSS元件的屬性，製作出更吸引人的網頁(如雪花飄落效果)。

CSS的特點

CSS可以用來彌補HTML的不足：CSS的最大好處是提供了HTML所不支援的屬性。例如<FONT>中只可設定文字的前景顏色，而CSS不僅可指定背景顏色、背景圖形甚至還可以幫它畫個外框，不過CSS的出現並不是用來取代HTML，而是在HTML的基礎上讓我們能運用更多的屬性使網頁更漂亮！

可以加快網頁的傳輸速度：我們常會用到許多相同參數的標籤如<FONT>標籤，如果使用CSS，，我們可以指定某一群標籤都套用某個CSS，這樣設定就可以一次OK，而不需要重覆指定每個標籤的屬性參數。

方便集中管理樣式及樣式共用：當某一群標籤都套用某個CSS樣式，那麼更動樣式時就只需針對CSS樣式修改即可，而且CSS樣式還可以與顯示資料分開，以.CSS副檔名儲存成獨立的文字檔，提供網頁共享。

瀏覽器不同對CSS的支援也不同：不同版本的瀏覽器能支援的CSS排版功能不盡相同，例如IE4.0及Netscape支援CSS1.0版，IE5.0則可支援CSS2.0版的一部份功能，像CSS排版語法的捲軸變色功能，就要IE5.5以上版本的瀏覽器才支援，所以使用CSS時還要測試一下瀏覽器是否支援，否則設了也會白設而無法顯現。

CSS的設定場合

　　CSS因為可以同時使用下列三種方法設定排版樣式，所以被稱為串接樣式表。雖然這些設定方法可以混合使用，不過若是強碰時，還是有其優先執行次序，依序如下：

Inline(同列)：CSS語法與HTML標籤寫在一起。在HTML標籤中以STYLE屬性加入CSS語法，當同時使用三種方法設定排版樣式，以此法具有最高執行效力，不過此法的CSS語法作用範圍就僅限於該定義區段有效。

Embedding(內嵌)：於HEAD區中重覆使用<STYLE>...</STYLE>標籤，定義HTML標籤供整個網頁使用。

<HTML>

<HEAD>

<STYLE TYPE=text/css> REM 排版樣式區開始

<！-- 排版樣式區內容 -->

</STYLE> REM 排版樣式區結束

　<HEAD>

　<BODY>

　本文區內容

　</BODY>

　</HTML>

Linking(連結)：可於HEAD區中重覆使用<LINK>標籤，引入需要的排版樣式文字檔(副檔名為.CSS,檔內只放設定內容不須加style標籤)。

<HTML>

<HEAD>

<LINK TYPE="text/css" REL="stylesheet" HREF="s1.css"> REM 連結CSS設定檔s1.css
</HEAD>

<BODY>

本文區內容

</BODY>

</HTML>

與 CSS 相關的 HTML 標籤、屬性

CSS 相關的 HTML 標籤：

<STYLE>...</STYLE> 設定 Style Sheet 格式
<LINK> 連結指令
<DIV>...</DIV> 分離區段(允許重疊顯示，可以將 span 區段包含在內)
<SPAN>...</SPAN> 小區段範圍

CSS 定義 HTML 屬性：

　　CSS語法可重新定義任何HTML標籤的屬性，當同時定義多個HTML標籤以逗號(,)分隔，屬性定義則置於大括弧內，並以分號(;)分隔。

HTML標籤 { 屬性名稱 : 屬性設定值 }

H1,H2 { COLOR:RED ; FONT-WEIGHT:BOLD }

CSS 定義屬性 :

　　CSS可以經由定義 ID 及 CLASS 兩種方式自定樣式名稱供其他的Html標籤套用，定義 ID 及 CLASS 的方法如下，Html標籤要套用時只要指定 ID 的名稱或 CLASS 的名稱即可(如<P ID=B>)，若某一標籤同時設定 ID 及 CLASS 樣式時以 ID 樣式優先套用。為了避免和區塊(圖層)的 ID 編號混淆，自定樣式還是使用 CLASS 定義較好。

定義 ID　　：以 # 為開頭， #名稱 {屬性名稱:屬性設定值}
定義 CLASS：以 . 為開頭， .名稱 {屬性名稱:屬性設定值}

<Head>

<Style>

.A {color:red}

#B {color:green}

</Style>

</Head>

<Body>

　　　<P id=b>此段落因為使用了 ID B 的樣式，所以這裡會出現綠色字</P>

<H1 class=A>文字使用 H1 樣式，並套用 CLASS A 的樣式，所以這裡會出現紅色字</H1>

<P id=b>這個段落因為也使用了 ID B 的樣式，所以這裡也會出現綠色字</P>

<H5 class=A>文字使用 H5 樣式，並套用 CLASS A 的樣式，所以這裡也會出現紅色字</H5>

</Body>

CSS 語法中可使用的長度單位

單位	單位說明	範例
pt	Point點	font-size:10pt
px	Pixels像素，大小會依螢幕解析度而改變	font-size:10px
pc	Pica，1 英吋= 6 Pica	font-size:10pc
in	英吋	font-size:10in
mm	公釐	font-size:10mm
cm	公分	font-size:10cm
%	百分比，大部分是指所在位置寬度或長度的百分比	font-size:10%

CSS 語法中可使用的顏色表示方式

表示方式	表示方式說明	範例
顏色名稱	直接以英文的顏色名稱指定顏色	color:red
#rrggbb	各以2個十六進制碼分別指定紅綠藍的顏色色度	color:#74a95d
rgb(#,#,#)	使用0~255的數字分別指定紅綠藍的顏色色度	color:rgb(147,255,12)
rgb(%,%,%)	使用百分比分別指定紅綠藍三種顏色的強度	color:rgb(90%,25%,63%)