CSS(Cascading Style Sheets)教學連結整理
無論是 HTML4.01 或是結合了XML的 XHTML1.0
大多都包含了 HTML、SCRIPT和CSS三大技術以形成動態網頁
而其中CSS(Cascading Style Sheets)便是在現今網頁中用來呈現外觀
除了使外觀設定脫離 HTML 的原始碼
也讓外觀的設定能更快速方便地共用以形成網站風格
關於CSS(Cascading Style Sheets)的教學連結
第一個先要看的是 w3c 的介紹：
Cascading Style Sheets Homepage 或
"Cascading Style Sheets Homepage" 的中文譯文
接著首先推薦的連結當然是 w3cschools的CSS教學
因為這個連結就是制定網頁相關標準的 w3c 所建立的
所以在正確度和語法的標準都是最新的
(唯一的缺點就是介面是英文的 XD)
其餘的教學網站都可以在 google 上快速搜尋到
大致看過 http://www.pcnet.idv.tw/pcnet/css/css.htm 覺得很不錯
觀念語法例子都很詳細
但因為年代久遠，所以在語法的標準可能就有些落伍了
在寫出 CSS 後 w3c 一樣提供了驗證的網站 The W3C CSS Validation Service
(和HTML的版本 The W3C Markup Validation Service 類似)
可以讓我們知道哪些語法有錯誤並修正
最後是我自己的一些筆記：
CSS語法放置位置：
1. 置於 html 檔的 <head> 和 </head> 之間 (Internal Style Sheet)
參考資料：
1. Cascading Style Sheets Homepage 及 "Cascading Style Sheets Homepage" 的中文譯文
2. w3cschools的CSS教學
3. http://www.pcnet.idv.tw/pcnet/css/css.htm
4. The W3C CSS Validation Service
推薦閱讀：
大多都包含了 HTML、SCRIPT和CSS三大技術以形成動態網頁
而其中CSS(Cascading Style Sheets)便是在現今網頁中用來呈現外觀
除了使外觀設定脫離 HTML 的原始碼
也讓外觀的設定能更快速方便地共用以形成網站風格
關於CSS(Cascading Style Sheets)的教學連結
第一個先要看的是 w3c 的介紹：
Cascading Style Sheets Homepage 或
"Cascading Style Sheets Homepage" 的中文譯文
接著首先推薦的連結當然是 w3cschools的CSS教學
因為這個連結就是制定網頁相關標準的 w3c 所建立的
所以在正確度和語法的標準都是最新的
(唯一的缺點就是介面是英文的 XD)
其餘的教學網站都可以在 google 上快速搜尋到
大致看過 http://www.pcnet.idv.tw/pcnet/css/css.htm 覺得很不錯
觀念語法例子都很詳細
但因為年代久遠，所以在語法的標準可能就有些落伍了
在寫出 CSS 後 w3c 一樣提供了驗證的網站 The W3C CSS Validation Service
(和HTML的版本 The W3C Markup Validation Service 類似)
可以讓我們知道哪些語法有錯誤並修正
最後是我自己的一些筆記：
CSS語法放置位置：
1. 置於 html 檔的 <head> 和 </head> 之間 (Internal Style Sheet)
<head>2. 另外寫CSS檔再於 html 檔中引入使用(External Style Sheet)
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
<head>CSS語法的類別選擇：
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
.classname /* . 用於 class 屬性，同一頁面可多個*/
{
font-family: "lucida calligraphy", arial, 'sans serif';
}
#idname /* #用於 id 屬性，同一頁面只能一個，如footer之類的區塊*/還有連結的虛擬類別：
{
font-family: "lucida calligraphy", arial, 'sans serif';
}
a:link {color:#FF0000} /* unvisited link */關鍵字：CSS, Cascading Style Sheets, 檔頭, 格式, 語法
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
參考資料：
1. Cascading Style Sheets Homepage 及 "Cascading Style Sheets Homepage" 的中文譯文
2. w3cschools的CSS教學
3. http://www.pcnet.idv.tw/pcnet/css/css.htm
4. The W3C CSS Validation Service
推薦閱讀：
留言
張貼留言