CSS 3.0 Guide for Dummies, CSS 3.0 導盲指引

5月 14, 2009

在學習CSS 前您有什麼是必需知道的?
在您繼續閱讀底下的教學前.您必需對 HTML/XHTML 有一些基本的了解, 當然也可以依循底下我發佈的教學
慢慢的對HTML/XHTML 有一個概括的了解,我將不會介紹所有的HTML/XHTML 只會概略提到跟底下CSS 教學相關的部份.


什麼是CSS?
CSS 是Cascading Style Sheets 的縮寫.一般的翻譯是標準樣式表
它可以用來定義如何來表現/顯示 HTML 要素/元素.
它可以用來存儲一般的樣式表定義
它可以被加入到 HTML 4.0 的網頁標註語言來解決及強化HTML 4.0 的功能
外部定義的樣式表可以儲存很多並簡化網頁的定義
外部定義的樣式表可以被存儲在單一的檔案中. 其副檔名為 .CSS
多重的樣式定義可以經由一個樣式來套用

CSS 發展到現在已經是 3.0版了, 3.0 向下相容 2.0 其較早版本的樣式定義,也包括了一些針對特別瀏覽器的延伸子集

底下先對網頁的背景的相關語法做個解釋
CSS Background
CSS 的背景屬性定義 HTML 中關於背景要素的影嚮,請看底下的網頁範例


<html>
<head>

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

</head>

<body>

<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>
</html>




承上例您應該有觀察到很多成對出現的指令. 像是<HTML> ... </HTML>
<BODY> </BODY> 等等,這些全是HTML 標註語言的標簽. 用以定義不同的作用區域,
像是 <HTML> 到 </HTML> 中間所包含的就是 HTML 標註語言的主體. 而 <BODY> 到 </BODY> 則是 HTML檔案中的主要標簽,用來存儲文字,聲音,影像等等. 當然還要加上更多的細節標簽才能達到上述的應用


而包含在<style type="text/css"> 跟 </style> 之間的就是 CSS 的指令,一般通稱為內嵌式的CSS 指令定義.

<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

上面的CSS 指令包含了四行對HTML 元素/要素的定義,
分別是 body h1,h2,p 等

簡單的來提一下 body{} 內的指令. 這樣就可以把
這個網頁的背景顏色指定為 yellow 黃色.

這兒關於顏色的定義,有三種指定顏色的方式.
一. 就是字面上的定義. 例如上例 yellow 就是黃色
二. 16進位的色碼表示,例如 #00ff00
三. RGB 三元色的色碼表示.

還有一個特別的顏色應用 transparent 這個是指透明色. 上面的顏色定義看起來很繁複. 這的確也是但是要利用適當的工具就可以好好的指定自己想要用的顏色.

看到這裏.您也許會想這個適當的工具叫什麼名字? 一會再跟您分享.首先請先到底下的連結來試試您剛才學到的指令. 從做中學是最容易也最印象深刻的了.

http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_basic

上面這個網址是一個小型的即時的網頁編輯頁面,您可以在這練習您剛學到的指令.

接下來請您到下述的網址去下載 ColorSelector
http://www.fujitsu.com/global/accessibility/assistance/cs/download.html
這兒可以下載英文版或簡體中文版,不過建議使用正體中文作業系統朋友們. 下載英文版就可以了
功能很強大,操作很簡單. 若是下載簡體中文版在使用上會碰到不些字碼顯示不正確. 還是用英文版就好了
Read more