CSS簡介

出自KMU Wiki

---

在2008年5月12日 (一) 12:17所做的修訂版本

目錄 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
  • 期限在本週五之前，有任何問題請速找我！