CSS簡介

出自KMU Wiki

在2011年2月25日 (五) 15:22所做的修訂版本 (編輯) Sakurai (對話 | 貢獻) 小 (→利用工具) ←上一個		當前修訂版本 (2013年5月29日 (三) 15:33) (編輯) (撤銷) Sakurai (對話 | 貢獻) (→利用工具)
第46行：		第46行：
	** 下載並解壓縮執行setup		** 下載並解壓縮執行setup
	** 利用這個程式理由有二：一、免費；二、乾淨。		** 利用這個程式理由有二：一、免費；二、乾淨。
		+	** 因為已經找不到了，所以改用
		+	** [http://juststyle-css-editor.soft32.com/free-download/ JustStyle CSS editor ]
	* NVU		* NVU
	** 有一些小缺點:p		** 有一些小缺點:p

---

當前修訂版本

目錄 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
  • 利用這個程式理由有二：一、免費；二、乾淨。
  • 因為已經找不到了，所以改用
  • JustStyle CSS editor
• NVU
  • 有一些小缺點:p
  • NVU中文版

• 工具介紹
  • 9個好用的 CSS 編輯器

[編輯] 簡易範例

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

[編輯] 作業

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

回到網際網路與心理學