CSS簡介

出自KMU Wiki

在2008年5月12日 (一) 12:17所做的修訂版本 (編輯) Sakurai (對話 | 貢獻) (新頁面: == What is CSS == === CSS === * 全名為Cascading Style Sheets * 中文為「串接樣式表」 ** Cascading是串接、連接之意 * 可以讓網頁的格式與內容分開 === CSS...) ←上一個		在2008年5月19日 (一) 09:59所做的修訂版本 (編輯) (撤銷) Sakurai (對話 | 貢獻) 小 下一個→
第61行：		第61行：
	=== 作業 ===		=== 作業 ===
-	* 完成「首頁」	+	* 完成「首頁」
	** 其實是期末作業的部分		** 其實是期末作業的部分
	** 先讓大家試著作一下，以免到時候不知道要作什麼？		** 先讓大家試著作一下，以免到時候不知道要作什麼？
第69行：		第69行：
	** 期限在本週五之前，有任何問題請速找我！		** 期限在本週五之前，有任何問題請速找我！
-	<br>	+	[[網際網路與心理學| 回到網際網路與心理學]]

---

在2008年5月19日 (一) 09:59所做的修訂版本

目錄 1 What is CSS 1.1 CSS 1.2 CSS好處 1.3 CSS的樣子 1.4 CSS常見用法 1.5 利用工具 1.6 簡易範例 1.7 作業

What is CSS

CSS

• 全名為Cascading Style Sheets
• 中文為「串接樣式表」
  • Cascading是串接、連接之意
• 可以讓網頁的格式與內容分開

CSS好處

• 讓多個網頁有共同的樣子
• 一次更改所有網頁的樣子
• 在不同機器上有相似的效果
• 可以專心更新內容
• 可以更彈性的格式

CSS的樣子

• CSS 語法
• selector { property: value;}
  • Selector 選項
  • Property 屬性
  • Value 值
  • 例如：
    • h4 { color: green;}
• 參見
• 雙子貓的胡言亂言
• Cascading Style Sheets (串接樣式表)的基本介紹
• CSS2.0中文手冊

CSS常見用法

• 獨立一個檔案
  • 如：style.css
• 在html檔案中連絡
  • 如：<link rel="stylesheet" href="style.css" type="text/css" />
• 詳見
  • CSS Zen garden

利用工具

• TopStyle Lite
  • 一個freeware
  • TopStyle首頁，還要進去一點:)
  • 下載並解壓縮執行setup
  • 利用這個程式理由有二：一、免費；二、乾淨。
• NVU
  • 有一些小缺點:p
  • NVU中文版

簡易範例

• 看看以下
  • 我中文首頁的CSS
  • 全選以後讀到TopStyle Lite
• 再看看以下
  • 我的中文首頁
  • 改一點點看看

作業

• 完成「首頁」
  • 其實是期末作業的部分
  • 先讓大家試著作一下，以免到時候不知道要作什麼？
  • 至少要用CSS指定h1,h2...及text形式
  • 試著用W3C validator
  • 檢查一下你的網頁合不合乎HTML 4.01
  • 期限在本週五之前，有任何問題請速找我！

回到網際網路與心理學