CSS應用基礎教程(1) 基本認識

css|基礎教程

關　於　Ｃ　Ｓ　Ｓ　的　概　論

ＣＳＳ是『Cascading Style Sheets』的簡稱，中文翻為「串接樣式表」，也有人只翻為「樣式表」。ＣＳＳ用以作為網頁的排版與風格設計，在所謂的「新式網頁」裡 ，ＣＳＳ不容置疑是相當重要的一環。ＣＳＳ是以既有的基礎，用以彌補既存ＨＴＭＬ 規格裡的不足，也讓網頁的設計更為靈活。 　　這份教學檔案就要來為您介紹ＣＳＳ的應用羅！在這邊並不介紹ＣＳＳ的所有規格 ，僅就您在網頁寫作上較常用到，較可能用到的文法部份及應用的方法來為您作介紹。也 由於現在兩瀏覽器的相容是漸行漸遠，將貼心地為您註明支援該文法的瀏覽器。而ＩＥ從 3.0開始便支援部份文法了，這點也會為為您註明的。

各　章　節　的　概　略　介　紹

為了您參考與學習上的方便，在這裡先為您大略地說明一下這份教學檔案各章節所包含的內容吧！讓您在參考時有個方向與概念。基本上，前兩章著重於概念與基本認知的建立，也就是一些為您做一些劄根的工作；第三章則為您補充在應用與設定上的一些其它方式或特性的說明與介紹。而第四章到第六章則著重於文法、參數與性質的介紹，也 就是真正建立在樣式表裡面的東東。 第一章　ＣＳＳ的基本認識： 就是本章啦！就介紹您一些ＣＳＳ基本概念與認識。第二章　ＣＳＳ的應用方式： 為您介紹ＣＳＳ的基本宣告、應用方法與特性介紹。第三章　ＣＳＳ的應用補充： 為您介紹ＣＳＳ的其它宣告方式、應用與特性介紹。第四章　頁面性質的ＣＳＳ： 為您介紹頁面性質的ＣＳＳ相關文法、參數與性質。第五章　文字性質的ＣＳＳ： 為您介紹文字性質的ＣＳＳ相關文法、參數與性質。第六章　區塊性質的ＣＳＳ： 為您介紹區塊性質的ＣＳＳ相關文法、參數與性質。

應　用　上　的　基　本　認　識

應用ＣＳＳ並不困難，但是請您先參考這裡的基本認識，對一些用語有了一點基本概念後，對於您在看後面的教學會有助益，看起來也才不會太吃力！ 一、基本用語的認識： 元件(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" ) 　　有了這些基本認識與概念後，接下來就要來為您介紹ＣＳＳ的應用方法羅！