Successfully reported this slideshow.

CSS 入門 - 前端工程開發實務訓練

7,219 views

Published on

Published in: Technology
  • Be the first to comment

CSS 入門 - 前端工程開發實務訓練

  1. 1. Copyright © 2012 FITPI. All rights reserved.樣式之美 CSS1前端工程開發實務訓練 (2/8)講師:蔣定宇 / josephj
  2. 2. Copyright © 2012 FITPI. All rights reserved.很好上⼿手,重點在了解有哪些屬性2CSS 基礎知識
  3. 3. Copyright © 2012 FITPI. All rights reserved.行間 CSS3直接在標籤內使用 style 屬性Inline CSS
  4. 4. Copyright © 2012 FITPI. All rights reserved.行間 CSS3直接在標籤內使用 style 屬性<p style="屬性名稱:屬性值;">...</p>Inline CSS
  5. 5. Copyright © 2012 FITPI. All rights reserved.嵌入式 CSS4直接將 CSS 寫在 HTML 內的作法Embedded CSS
  6. 6. Copyright © 2012 FITPI. All rights reserved.嵌入式 CSS4直接將 CSS 寫在 HTML 內的作法<style></style> 標籤Embedded CSS
  7. 7. Copyright © 2012 FITPI. All rights reserved.嵌入式 CSS4直接將 CSS 寫在 HTML 內的作法<style type="text/css" media="顯⽰示媒介名稱">選擇器 {    屬性名稱:屬性值;}</style>type 可省略media 在何種媒介顯示・印表機 = printer・電腦螢幕 = screen・預設是全部 = all<style></style> 標籤Embedded CSS
  8. 8. Copyright © 2012 FITPI. All rights reserved.嵌入式 CSS4直接將 CSS 寫在 HTML 內的作法<style type="text/css" media="顯⽰示媒介名稱">選擇器 {    屬性名稱:屬性值;}</style>type 可省略media 在何種媒介顯示・印表機 = printer・電腦螢幕 = screen・預設是全部 = all<style></style> 標籤CSS 內容Embedded CSS
  9. 9. Copyright © 2012 FITPI. All rights reserved.嵌入式 CSS4直接將 CSS 寫在 HTML 內的作法<style type="text/css" media="顯⽰示媒介名稱">選擇器 {    屬性名稱:屬性值;}</style>type 可省略media 在何種媒介顯示・印表機 = printer・電腦螢幕 = screen・預設是全部 = all<style></style> 標籤CSS 內容建議放置位置:</head> 之前Embedded CSS
  10. 10. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)External CSS
  11. 11. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link> 標籤 (無結尾)External CSS
  12. 12. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link rel="stylesheet" href="CSS 檔案路徑" media="顯⽰示媒介名稱"><link> 標籤 (無結尾)External CSS
  13. 13. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link rel="stylesheet" href="CSS 檔案路徑" media="顯⽰示媒介名稱">必須指定<link> 標籤 (無結尾)External CSS
  14. 14. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link rel="stylesheet" href="CSS 檔案路徑" media="顯⽰示媒介名稱">必須指定與前面相同<link> 標籤 (無結尾)External CSS
  15. 15. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link rel="stylesheet" href="CSS 檔案路徑" media="顯⽰示媒介名稱">必須指定與前面相同<link> 標籤 (無結尾)選擇器 {    屬性名稱:屬性值;}與外部檔案連結※ 不需 style 標籤External CSS
  16. 16. Copyright © 2012 FITPI. All rights reserved.外部 CSS5引用外部 CSS 檔案(建議附檔名為 .css)<link rel="stylesheet" href="CSS 檔案路徑" media="顯⽰示媒介名稱">必須指定與前面相同<link> 標籤 (無結尾)另外還有 HTML Tag 中的 style,正常情況用不到選擇器 {    屬性名稱:屬性值;}與外部檔案連結※ 不需 style 標籤External CSS
  17. 17. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6
  18. 18. Copyright © 2012 FITPI. All rights reserved.該用哪一種?699% 的情況都應該使⽤用外部 CSS
  19. 19. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。99% 的情況都應該使⽤用外部 CSS
  20. 20. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。๏ 效率:寫一次可以套用到多個網頁中。99% 的情況都應該使⽤用外部 CSS
  21. 21. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。๏ 效率:寫一次可以套用到多個網頁中。๏ 效能:外部檔案能被快取 (cache)。99% 的情況都應該使⽤用外部 CSS
  22. 22. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。๏ 效率:寫一次可以套用到多個網頁中。๏ 效能:外部檔案能被快取 (cache)。๏ 唯一例外:會被設為首頁的入口網站。99% 的情況都應該使⽤用外部 CSS
  23. 23. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。๏ 效率:寫一次可以套用到多個網頁中。๏ 效能:外部檔案能被快取 (cache)。๏ 唯一例外:會被設為首頁的入口網站。❖ 頁數少、更快顯示。99% 的情況都應該使⽤用外部 CSS
  24. 24. Copyright © 2012 FITPI. All rights reserved.該用哪一種?6๏ 語意:樣式與結構能夠徹底分離。๏ 效率:寫一次可以套用到多個網頁中。๏ 效能:外部檔案能被快取 (cache)。๏ 唯一例外:會被設為首頁的入口網站。❖ 頁數少、更快顯示。99% 的情況都應該使⽤用外部 CSShttp://developer.yahoo.com/performance/rules.html#external
  25. 25. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector
  26. 26. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>
  27. 27. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {
  28. 28. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */
  29. 29. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}
  30. 30. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {
  31. 31. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */
  32. 32. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}
  33. 33. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {
  34. 34. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */
  35. 35. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}
  36. 36. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {
  37. 37. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */
  38. 38. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}
  39. 39. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {
  40. 40. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {/* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */
  41. 41. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {/* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */}
  42. 42. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {/* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */}#nav, #article {
  43. 43. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {/* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */}#nav, #article {/* 同時針對 id=”nav” 與 id=”article” 設定相同的樣式 */
  44. 44. Copyright © 2012 FITPI. All rights reserved.常用選擇器7在 HTML 中、可針對所有的標籤設定 id 與 class 屬性,除了給予 HTML 更好的語意外,也能方便我們設定 CSS 樣式Selector<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>p {    /* 針對所有 p 標籤設定樣式 */}#nav {    /* 針對 id=”nav” 設定樣式 */}.bd {    /* 針對所有 class=”bd” 設定樣式 */}div.bd {    /* 針對所有 div class=”bd” 設定樣式 */}#nav .bd {/* 只針對所有 id=”nav” 下的 class=”bd” 設定樣式 */}#nav, #article {/* 同時針對 id=”nav” 與 id=”article” 設定相同的樣式 */}
  45. 45. Copyright © 2012 FITPI. All rights reserved.選擇器類型8http://www.w3.org/TR/CSS2/selector.html#pattern-matching (CSS2)CSS3 ⽀支援更多: http://www.w3schools.com/cssref/css_selectors.asp
  46. 46. Copyright © 2012 FITPI. All rights reserved.屬性9
  47. 47. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}
  48. 48. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆
  49. 49. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆半型冒號區隔屬性名稱與屬性值
  50. 50. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆半型冒號區隔屬性名稱與屬性值以分號分隔不同屬性
  51. 51. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆半型冒號區隔屬性名稱與屬性值以分號分隔不同屬性<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>
  52. 52. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆半型冒號區隔屬性名稱與屬性值以分號分隔不同屬性<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>#nav, #article {    background: yellow;    padding: 20px;    width: 100px;    margin-bottom: 10px;}#nav p {    text-decoration: underline;    color: blue;}#article p {    color: red;    font-weight: bold;}+ =
  53. 53. Copyright © 2012 FITPI. All rights reserved.屬性9選擇器 {    屬性名稱1:屬性值;屬性名稱2:屬性值;屬性名稱3:屬性值;}用大括號包覆半型冒號區隔屬性名稱與屬性值以分號分隔不同屬性<div id=”nav”>    <div class=”bd”>        <p>選單</p>    </div></div><div id=”article”>    <div class=”bd”>        <p>⽂文章</p>    </div></div>#nav, #article {    background: yellow;    padding: 20px;    width: 100px;    margin-bottom: 10px;}#nav p {    text-decoration: underline;    color: blue;}#article p {    color: red;    font-weight: bold;}+ =
  54. 54. Copyright © 2012 FITPI. All rights reserved.屬性介紹10http://www.w3schools.com/css/CSS StylingStylingBackgroundsStyling TextStyling FontsStyling LinksStyling ListsStyling TablesW3School 的屬性類別列表CSS AdvancedCSS Grouping/NestingCSS DimensionCSS DisplayCSS PositioningCSS FloatingCSS AlignCSS Pseudo-classCSS Pseudo-elementCSS Navigation BarCSS Image GalleryCSS Image OpacityCSS Image SpritesCSS Media TypesCSS Attribute SelectorsCSS Box ModelCSS Box ModelCSS BorderCSS OutlineCSS MarginCSS Padding
  55. 55. Copyright © 2012 FITPI. All rights reserved.Box Model11paddingborderwidthmarginW3C 的標準盒模型paddingborderwidthmarginIE 怪異模式盒模型width, height 算法完全不同、初學者需非常小心現今的網頁已經沒有怪異模式的需求了只要小心 DOCTYPE 的宣告即可避免
  56. 56. Copyright © 2012 FITPI. All rights reserved.color:#369;background:#ffe;font:bold 16px;๏ 替此文章模組取個適合的 id๏ 加上 hd, bd, ft 的 class๏ 利用前面教的東西設定樣式12練習:替模組加上樣式http://f2eclass.com/lab/css/module.html
  57. 57. Copyright © 2012 FITPI. All rights reserved.排版的常⽤用技巧13CSS 浮動
  58. 58. Copyright © 2012 FITPI. All rights reserved.過去:常⽤用 <table> 來做到下⾯面的版型:<table border=”1”><tr><td align=”left”>靠左⽂文字</td><td align=”right”>靠右⽂文字</td></tr></table>14傳統排版靠左⽂文字 靠右⽂文字
  59. 59. Copyright © 2012 FITPI. All rights reserved.現在:使⽤用 CSS 的 float 屬性來做到<div id=”masthead” style=”border:solid 1px #000”><span style=”float:left”>靠左⽂文字</span><span style=”float:right”>靠右⽂文字</span></div>15float 屬性靠左⽂文字 靠右⽂文字
  60. 60. Copyright © 2012 FITPI. All rights reserved.但 float 之後的區塊是不會佔空間的實際情況會是:border 不會被⽂文字的⾼高度給撐開!16浮動產生的問題靠左⽂文字 靠右⽂文字
  61. 61. Copyright © 2012 FITPI. All rights reserved.IE9 之前的作法在上⼀一層設 zoom:1<div id=”masthead” style=”zoom:1;border:solid 1px #000”><span style=”float:left”>靠左⽂文字</span><span style=”float:right”>靠右⽂文字</span></div>17對 IE 的解法
  62. 62. Copyright © 2012 FITPI. All rights reserved.加上特別的 <br><div id=”masthead” style=”zoom:1;border:solid 1px #000”><span style=”float:left”>靠左⽂文字</span><span style=”float:right”>靠右⽂文字</span><br style=”clear:both;”></div>18通用解法BUT! 我們不應該為了樣式特別加⼀一個 <br>/* 作⽤用是增加了⼀一個有 clear:both 屬性的區塊 */#masthead:after {  content:"";  display:block;  clear:both;}與上⾯面加的 <br> 效果相同
  63. 63. Copyright © 2012 FITPI. All rights reserved.border:solid 5px #ccc;font:bold 197%;IE : 在⽗父節點設定 zoom1;其他瀏覽器:⽗父節點:after {    content:’’;    display:block;    clear:both;}練習:用 CSS 做浮動๏ 標題浮到左邊๏ YUI 圖浮到右邊๏ 替整個模組設 border๏ ⽤用前⾯面的⽅方法清除19http://f2eclass.com/lab/css/float.html
  64. 64. Copyright © 2012 FITPI. All rights reserved.適當地將 <img> 改⽤用 CSS 背景可讓讀取更順暢20CSS 背景
  65. 65. Copyright © 2012 FITPI. All rights reserved.在 Y! 所有裝飾性的圖都是 CSS 背景圖21
  66. 66. Copyright © 2012 FITPI. All rights reserved.在 Y! 所有裝飾性的圖都是 CSS 背景圖21
  67. 67. Copyright © 2012 FITPI. All rights reserved.22抉擇方式何時該⽤用背景圖?何時該⽤用 img 標籤?
  68. 68. Copyright © 2012 FITPI. All rights reserved.22抉擇方式๏ 對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。何時該⽤用背景圖?何時該⽤用 img 標籤?
  69. 69. Copyright © 2012 FITPI. All rights reserved.22抉擇方式๏ 對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。何時該⽤用背景圖?何時該⽤用 img 標籤?
  70. 70. Copyright © 2012 FITPI. All rights reserved.22抉擇方式๏ 對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。๏ ⽽而對於內容的⼀一部分,則應該使⽤用 img 標籤。何時該⽤用背景圖?何時該⽤用 img 標籤?
  71. 71. Copyright © 2012 FITPI. All rights reserved.22抉擇方式๏ 對於裝飾性、可有可無的圖⽚片應採⽤用背景圖。❖ 例如圓⾓角、⼩小 Icon 等即使消失也不會造成無法閱讀的圖⽚片。๏ ⽽而對於內容的⼀一部分,則應該使⽤用 img 標籤。❖ 例如⻝⾷食記中的餐點圖⽚片、網⾴頁上的廣告、⽤用圖⽚片做的標題、網站 Logo 都是內容的⼀一部分。何時該⽤用背景圖?何時該⽤用 img 標籤?
  72. 72. Copyright © 2012 FITPI. All rights reserved.background: [背景⾊色][url(圖檔路徑)][x, y 位置][重複];background:#369 url(ico_yui.gif) left top repeat-x;repeat-yno-repeat0 100%0 -12pxbackground-color:#369;background-image:url(ico_yui.gif);background-position:left top;background-repeat:repeat-x;或23語法
  73. 73. Copyright © 2012 FITPI. All rights reserved.練習:CSS 背景24http://f2eclass.com/lab/css/background.html๏ 設定背景圖為 bg_nav.png
  74. 74. Copyright © 2012 FITPI. All rights reserved.CSS Sprites25http://l.yimg.com/f/i/tw/hp/spirit121004l/sprite.png把多張背景圖合併成⼀一張雅⻁虎奇摩⾸首⾴頁的 Sprites0, 0sprite.png0, 300, 550, 900, 1150, 145background: url(sprite.png) 0 -115px no-repeat;background: url(sprite.png) 0 -145px no-repeat;background: url(sprite.png) 0 -90px no-repeat;background: url(sprite.png) 0 -55px no-repeat;background: url(sprite.png) 0 -30px no-repeat;background: url(sprite.png) 0 0 no-repeat;
  75. 75. Copyright © 2012 FITPI. All rights reserved.Sprites 的優缺點26๏ 好處:有效減少網路請求數量❖ 太多請求對網頁的顯示是有影響的。๏ 壞處:難以維護❖ x, y 的位置得打開影像處理軟體查找。๏ 已經有軟體可以自動化處理 :)
  76. 76. Copyright © 2012 FITPI. All rights reserved.CSS 位置不管是做圓⾓角、位置微調都會⽤用到27
  77. 77. Copyright © 2012 FITPI. All rights reserved.<div/><div/><div/><div/>什麼都沒設時(position:static;)28
  78. 78. Copyright © 2012 FITPI. All rights reserved.<div/><div/><div/><div style=”position:absolute;bottom:0;right:0;”>當對某個區塊設了 position:absolute; 時就脫離原有區塊的範圍、不佔空間29
  79. 79. Copyright © 2012 FITPI. All rights reserved.<div style=”position:relative;” /><div/><div/><div style=”position:absolute;bottom:0;right:0;”>對⺟母區塊設定 position:relative;則會限制住 position:absolute; 的⼦子區塊30
  80. 80. Copyright © 2012 FITPI. All rights reserved.31
  81. 81. Copyright © 2012 FITPI. All rights reserved.๏ position31
  82. 82. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設31
  83. 83. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位31
  84. 84. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位31
  85. 85. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位❖ fixed31
  86. 86. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位❖ fixed๏ top, right, bottom, left 的配合31
  87. 87. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位❖ fixed๏ top, right, bottom, left 的配合❖ 在目前的位置往下移 5pxposition:relative; top:5px;31
  88. 88. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位❖ fixed๏ top, right, bottom, left 的配合❖ 在目前的位置往下移 5pxposition:relative; top:5px;❖ 整份文件中的右下角:position:absolute; right:0; bottom:0;31
  89. 89. Copyright © 2012 FITPI. All rights reserved.๏ position❖ static 預設❖ absolute 絕對定位❖ relative 相對定位❖ fixed๏ top, right, bottom, left 的配合❖ 在目前的位置往下移 5pxposition:relative; top:5px;❖ 整份文件中的右下角:position:absolute; right:0; bottom:0;❖ 可視區域的最下方(IE6不支援):position:fixed;bottom:0;31
  90. 90. Copyright © 2012 FITPI. All rights reserved.1. 將 li 設定為 position:relative;2. 將 img 設定為 position:absolute; 並利⽤用top, right 做微調練習:CSS 位置32http://f2eclass.com/lab/position.html
  91. 91. Copyright © 2012 FITPI. All rights reserved.CSS Hack針對不同瀏覽器做樣式處理33
  92. 92. Copyright © 2012 FITPI. All rights reserved.IE 6, IE7, IE8, IE9, 其他瀏覽器會有不同的底⾊色#article .bd {background:blue;background:purple 0;background:pink 9;*background:green;_background:red;}All BrowsersIE 7, IE 6IE 634IE8, IE7, IE6IE9, IE8常用 CSS Hack⼤大多是為了 IE 特別修正,其他瀏覽器較少問題
  93. 93. Copyright © 2012 FITPI. All rights reserved.讓 #article .bd 在 IE9 為 purple、IE8為 green、IE7 為 red,其他瀏覽器為pink。練習:CSS Hack35http://f2eclass.com/lab/css-hack.html
  94. 94. Copyright © 2012 FITPI. All rights reserved.進階知識與工具36๏ Reset CSS - 將樣式歸零๏ CSS Grids - CSS 排版方式๏ SASS / Compass - 必學工具๏ CSS 3 必學屬性๏ Twitter Bootstrap - 工程師也有好介面๏ CSS Code Convention - 書寫規範๏ CSS 繪圖
  95. 95. Copyright © 2012 FITPI. All rights reserved.Reset CSS๏ HTML 標籤本身都有預設樣式,但是每個瀏覽器都有差異,加上大多不符合我們的需求。๏ HTML 是結構、不應該有任何樣式。๏ 那麼我們就歸零吧、讓每個標籤的外觀都一模一樣。๏ 專業!所有的樣式都由自己重新定義。37
  96. 96. Copyright © 2012 FITPI. All rights reserved.Reset CSS 效果38
  97. 97. Copyright © 2012 FITPI. All rights reserved.Reset CSS 的選擇๏ Eric Meyerhttp://meyerweb.com/eric/tools/css/reset/๏ YUI CSS Resethttp://yuilibrary.com/yui/docs/cssreset/39<link rel="stylesheet" type="text/css"href="http://yui.yahooapis.com/3.7.2/build/cssreset/cssreset-min.css">直接放在⾴頁⾯面上就⽣生效
  98. 98. Copyright © 2012 FITPI. All rights reserved.CSS Grids40
  99. 99. Copyright © 2012 FITPI. All rights reserved.CSS Grids๏ Grids 是指整個網頁的排版。40
  100. 100. Copyright © 2012 FITPI. All rights reserved.CSS Grids๏ Grids 是指整個網頁的排版。๏ CSS Float 會是排版的一種作法。40
  101. 101. Copyright © 2012 FITPI. All rights reserved.CSS Grids๏ Grids 是指整個網頁的排版。๏ CSS Float 會是排版的一種作法。๏ 不建議自己開發排版,細節太多。40
  102. 102. Copyright © 2012 FITPI. All rights reserved.CSS Grids๏ Grids 是指整個網頁的排版。๏ CSS Float 會是排版的一種作法。๏ 不建議自己開發排版,細節太多。๏ 再簡單的網頁都應該引用穩定的 Grids系統。40
  103. 103. Copyright © 2012 FITPI. All rights reserved.41http://960.gs/960gs
  104. 104. Copyright © 2012 FITPI. All rights reserved.41http://960.gs/960gs
  105. 105. Copyright © 2012 FITPI. All rights reserved.42http://960.gs/๏ 將網頁限制為 960 pixel。๏ 依照 16 或 12 等分切格子。๏ 好處是跟視覺設計師容易分工。❖ 不用再橋一堆對齊的問題。๏ 壞處是原始碼的順序沒辦法依 SEO 調整。960gs
  106. 106. Copyright © 2012 FITPI. All rights reserved.43YUI 2 Gridshttp://developer.yahoo.com/yui/grids/側邊欄寬度為 240px平均分配 50%, 50%版⾯面寬度 950px
  107. 107. Copyright © 2012 FITPI. All rights reserved.44
  108. 108. Copyright © 2012 FITPI. All rights reserved.45
  109. 109. Copyright © 2012 FITPI. All rights reserved.46YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  110. 110. Copyright © 2012 FITPI. All rights reserved.46๏ 頁面寬度多種可選。YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  111. 111. Copyright © 2012 FITPI. All rights reserved.46๏ 頁面寬度多種可選。๏ 概念為「主要內容」與「側邊欄」。YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  112. 112. Copyright © 2012 FITPI. All rights reserved.46๏ 頁面寬度多種可選。๏ 概念為「主要內容」與「側邊欄」。๏ 側邊欄可自由調整左右、各三種寬度。YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  113. 113. Copyright © 2012 FITPI. All rights reserved.46๏ 頁面寬度多種可選。๏ 概念為「主要內容」與「側邊欄」。๏ 側邊欄可自由調整左右、各三種寬度。๏ 內容寬度 = 頁面寬度 - 側邊欄寬度。YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  114. 114. Copyright © 2012 FITPI. All rights reserved.46๏ 頁面寬度多種可選。๏ 概念為「主要內容」與「側邊欄」。๏ 側邊欄可自由調整左右、各三種寬度。๏ 內容寬度 = 頁面寬度 - 側邊欄寬度。๏ 即使重要的內容在右邊、也可以在原始碼中早點顯示。YUI 2 Gridshttp://developer.yahoo.com/yui/grids/
  115. 115. Copyright © 2012 FITPI. All rights reserved.練習:使用 Grid Builderhttp://developer.yahoo.com/yui/grids/builder/快速 DIV + CSS 版面產生器47
  116. 116. Copyright © 2012 FITPI. All rights reserved.48CSS3 與 Sprite 救星一套命令列的軟體讓你可以用 SASS 更結構化的方式寫 CSS並且提供了許多好用的功能 (mixin)!http://compass-style.org/
  117. 117. Copyright © 2012 FITPI. All rights reserved.49a.scss - 你所撰寫及維護的 a.css - ⼯工具⾃自動產⽣生的巢狀式 CSS
  118. 118. Copyright © 2012 FITPI. All rights reserved.輕鬆寫 CSS350@import "compass";.foo {    @include border-radius(5px);    @include box-shadow(10px);}/* line 3, ../sass/foo.scss */.foo {    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    -ms-border-radius: 5px;    -o-border-radius: 5px;    border-radius: 5px;    -webkit-box-shadow: 10px;    -moz-box-shadow: 10px;    box-shadow: 10px;}foo.scssfoo.cssCSS3 支援度在每個瀏覽器還有一些差異,目前大多還是會冠上各自廠商的 prefix使用 Compass,你只要寫一種就可以產出所有瀏覽器所需的 CSS,十分輕鬆!
  119. 119. Copyright © 2012 FITPI. All rights reserved.51安裝並設定 Scout免費版跨平台 GUI 的 Compass 工具新增專案設定寫 SASS 的地⽅方設定輸出成 CSS 的地⽅方監控此⺫⽬目錄是否有改變、會⾃自動更新你的 CSS組態設定更新記錄http://mhs.github.com/scout-app/設定圖檔位置
  120. 120. Copyright © 2012 FITPI. All rights reserved.練習 Compass52
  121. 121. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip
  122. 122. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww
  123. 123. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄
  124. 124. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔
  125. 125. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔❖ stylesheets 是由 sass 轉出、實際被瀏覽器讀取的 css 檔
  126. 126. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔❖ stylesheets 是由 sass 轉出、實際被瀏覽器讀取的 css 檔❖ images 下有我預先準備好的圖檔
  127. 127. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔❖ stylesheets 是由 sass 轉出、實際被瀏覽器讀取的 css 檔❖ images 下有我預先準備好的圖檔๏ Scout 設定好後啟動、檔案變動會自動產生。
  128. 128. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔❖ stylesheets 是由 sass 轉出、實際被瀏覽器讀取的 css 檔❖ images 下有我預先準備好的圖檔๏ Scout 設定好後啟動、檔案變動會自動產生。๏ Sublime Text 2 得有 config.rb 配合 Build。
  129. 129. Copyright © 2012 FITPI. All rights reserved.練習 Compass52๏ 請下載 http://f2eclass.com/lab/css/compass.zip๏ 解壓縮到你的網站根目錄 C:AppServwww๏ 會有 sass, stylesheets, images 等目錄❖ sass 是原始檔❖ stylesheets 是由 sass 轉出、實際被瀏覽器讀取的 css 檔❖ images 下有我預先準備好的圖檔๏ Scout 設定好後啟動、檔案變動會自動產生。๏ Sublime Text 2 得有 config.rb 配合 Build。๏ 有 normal.html, basic-sprite.html, auto-sprite.html 三個檔案請大家練習。
  130. 130. Copyright © 2012 FITPI. All rights reserved.53๏ SASS Syntactically Awesome StyleSheetshttp://sass-lang.com定義了基礎語法๏ Compass CSS Authoring Framweorkhttp://compass-style.org/基於 SASS 所做的框架、請多參考這邊的文件๏ Scout Compass and Sass without all hasslehttp://mhs.github.com/scout-app/跨平台且免費的 SASS 工具Compass 參考連結
  131. 131. Copyright © 2012 FITPI. All rights reserved.54Twitter Bootstraphttp://twitter.github.com/bootstrap/
  132. 132. Copyright © 2012 FITPI. All rights reserved.๏ 工程師也能有好樣式54Twitter Bootstraphttp://twitter.github.com/bootstrap/
  133. 133. Copyright © 2012 FITPI. All rights reserved.๏ 工程師也能有好樣式๏ 在頁面上引用外部 CSS、透過 Bootstrap 預先定義的 HTML 結構與 Class 名稱即可使用。例如class="btn"54Twitter Bootstraphttp://twitter.github.com/bootstrap/
  134. 134. Copyright © 2012 FITPI. All rights reserved.๏ 工程師也能有好樣式๏ 在頁面上引用外部 CSS、透過 Bootstrap 預先定義的 HTML 結構與 Class 名稱即可使用。例如class="btn"๏ 適合用在不需特別樣式的地方,例如 CMS 或Prototype。但有自定樣式的地方,例如形象網站就不適合了。54Twitter Bootstraphttp://twitter.github.com/bootstrap/
  135. 135. Copyright © 2012 FITPI. All rights reserved.55CSS3 必學屬性
  136. 136. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明55CSS3 必學屬性
  137. 137. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明๏ background-image: linear-gradient 漸層55CSS3 必學屬性
  138. 138. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明๏ background-image: linear-gradient 漸層๏ border-radius 圓角55CSS3 必學屬性
  139. 139. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明๏ background-image: linear-gradient 漸層๏ border-radius 圓角๏ box-shadow 盒子的陰影55CSS3 必學屬性
  140. 140. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明๏ background-image: linear-gradient 漸層๏ border-radius 圓角๏ box-shadow 盒子的陰影๏ text-shadow 文字的陰影55CSS3 必學屬性
  141. 141. Copyright © 2012 FITPI. All rights reserved.๏ background: rgba 半透明๏ background-image: linear-gradient 漸層๏ border-radius 圓角๏ box-shadow 盒子的陰影๏ text-shadow 文字的陰影๏ transition 換場55CSS3 必學屬性
  142. 142. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久
  143. 143. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。
  144. 144. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。
  145. 145. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。
  146. 146. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。
  147. 147. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。๏ 所有屬性皆單獨一行、以 4 個 Spaces 開頭。
  148. 148. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。๏ 所有屬性皆單獨一行、以 4 個 Spaces 開頭。๏ 顏色碼一律採用小寫。
  149. 149. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。๏ 所有屬性皆單獨一行、以 4 個 Spaces 開頭。๏ 顏色碼一律採用小寫。๏ 屬性值後一律加上分號。
  150. 150. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。๏ 所有屬性皆單獨一行、以 4 個 Spaces 開頭。๏ 顏色碼一律採用小寫。๏ 屬性值後一律加上分號。๏ 採用 HTML 模組化開發、對共用的部份要小心。
  151. 151. Copyright © 2012 FITPI. All rights reserved.CSS 書寫規範56有⼀一致的書寫規範,程式才能⽤用得久๏ 絕對不以樣式命名 HTML 的 id 或 class 屬性。๏ class 與 id 命名採用小寫配合破折號連接。๏ 屬性按照字母順序 (a-z) 做排序。๏ 選擇器後空一格放大括號開頭、大括號結尾占一行。๏ 所有屬性皆單獨一行、以 4 個 Spaces 開頭。๏ 顏色碼一律採用小寫。๏ 屬性值後一律加上分號。๏ 採用 HTML 模組化開發、對共用的部份要小心。以上書寫規範只是建議,你可以⾃自訂
  152. 152. Copyright © 2012 FITPI. All rights reserved.57課程回顧
  153. 153. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。
  154. 154. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。
  155. 155. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。
  156. 156. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式
  157. 157. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式❖ 例如:topnav, leftbar, red12px, bottom-ad, black-bar...
  158. 158. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式❖ 例如:topnav, leftbar, red12px, bottom-ad, black-bar...๏ 選擇器需用結構來命名。
  159. 159. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式❖ 例如:topnav, leftbar, red12px, bottom-ad, black-bar...๏ 選擇器需用結構來命名。❖ 例如:sidebar, nav, extra, ad-lrec...
  160. 160. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式❖ 例如:topnav, leftbar, red12px, bottom-ad, black-bar...๏ 選擇器需用結構來命名。❖ 例如:sidebar, nav, extra, ad-lrec...๏ Compass 讓寫 CSS 更結構化、Sprite 更自動。
  161. 161. Copyright © 2012 FITPI. All rights reserved.57課程回顧๏ 請花點時間看過 CSS 的所有屬性。๏ ID 選擇器:給予樣式設定命名空間。๏ Class 選擇器:最常用來設定 CSS 樣式。๏ 以上兩者的命名都應該避免參雜樣式❖ 例如:topnav, leftbar, red12px, bottom-ad, black-bar...๏ 選擇器需用結構來命名。❖ 例如:sidebar, nav, extra, ad-lrec...๏ Compass 讓寫 CSS 更結構化、Sprite 更自動。๏ Bootstrap 提供很棒的樣式,你的產品適合嗎?
  162. 162. Copyright © 2012 FITPI. All rights reserved.58Q & A

×