發布於 2008-12-26
觀看次數: 25591
  • 01:28 1.
    簡介
  • 04:08 2.
    HTML剖析
  • 03:15 3.
    套用樣式 (CSS, Cascading Style Sheets)
  • 02:05 4.
    樣式宣告 (Style declaration)
  • 04:18 5.
    牛刀小試!
  • 00:24 6.
    期待您的分享
  • Index
  • Note
  • Discuss
  • Fullscreen
15 分鐘了解網頁設計基礎
15:41, 發布於 2008-12-26 by Te-Chou Su

css 基本上有以下幾種常用的套用方式
1. 定義名稱: 定義樣式名稱 .className { ... },並透過 class=className 套用,例如
   .title {color:red}
   範例 <div class=title>紅色的字體</div>
2. 套用特定標籤: 直接用標籤名稱 tagName { ... },則套用到所有 tabName 的標籤,例如
   div {font-size:14px}
   範例 <div>14 px 的字體</div>
3. 定義特定元素樣式: 定義 #idName { ... },則套用到 id=idName 的元素,例如
   #banner {font-weight:bold}
   範例 <div id=banner>粗體字</div>
4. 虛擬套用: 例如
   a:hover {color:red}
   範例 <a href='...'>滑鼠移到這時文字會變成紅色</a>
5. 條件套用,在某些條件下才套用,如
   #menu .title {color:red} 僅會套用到 id=menu 的子元素中 class=title 的元素
   範例 <div id=menu> ... <span class=title>紅色的字</span></div>
   而不套用到 <div class=title>一般顏色的字</div>
6. 多重套用,同時套用多個 class,如
   .redColor {color:red}
   .boldFont {font-weight: bold}
   範例 <div class="redColor boldFont'>紅色且粗體的字</div>

[範例展示]
1. float.html
 (float 排版)
2. hover.html (超連結 hover 效果,包括 mouseover 動畫、padding 技巧)

[參考資料]
1. xms 的下載網址
http://www.powercam.com.tw 
2. 
PowerCam 快速入門
3.
powercam.cc 上傳講解
4. powercam.cc 簡報分享小技巧