2009年4月28日

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)
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
2. 另外寫CSS檔再於 html 檔中引入使用(External Style Sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
CSS語法的類別選擇:
.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  */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
關鍵字:CSS, Cascading Style Sheets, 檔頭, 格式, 語法
參考資料:
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

推薦閱讀:


更多精選推薦文章

0 意見 :