1. CSS基本概念與語法(一) 2011.5.24 鄒心瑜Hsinyu Chou hsinyu.chou@isobar.com

3. 把內容和樣式分開HTML + CSS = 網頁

5. 無法發展成動態介面(你能任意搬動<td>顯示的位置和順序嗎？)

7. CSS排版的原始碼CSS HTML

10. 良好的習慣與步驟 #wrap #header #navigation h2 Image Image h2h3paragraph h2 paragraph paragraph image #footer 先分析，再動手。 分析網頁內容結構撰寫HTML

11. 良好的習慣與步驟 建立網站檔案架構 webroot style.css css header.jpg images ……. footer.jpg sidebar.jpg ……. global.js js ……. Index.html about.html …….

12. 必備工具 Firefox瀏覽器http://moztw.org/ Firebug: 透視CSS運作情形，網站設計師必備https://addons.mozilla.org/zh-tw/firefox/addon/firebug/(Google Chrome和IE也有各自的工具，但Firebug功能最強) 文字編輯器(Dreamweaver, Aptana…) 切圖軟體(Photoshop, Fireworks…) (練習) http://dl.dropbox.com/u/8057029/CSS-ex1/CSS-ex1.zip

13. 結合CSS與網頁 記得先Reset CSS，讓瀏覽器從原點開始 Eric Meyer Reset, YUI Reset(Yahoo!)

15. 結合CSS與網頁 誰最優先？如果前述三個地方，對同一元件的設定有衝突，結果會如何？ “層疊(Cascading)”= 不同的屬性，加在一起“覆寫(Overwrite)”= 相同的屬性，採用離自己比較近的 Inline(行內CSS) > Embed(html內CSS) > Link(外連CSS)

17. #wrap #header #navigation h2 Image Image h2h3paragraph h2 paragraph paragraph image #footer

19. <p>:文章段落

20. <ul>< li>:條列式內容，常用來做選單

21. <a>連結

22. <img>圖片

23. <span>區段

24. Form元件(<input>,<select>,<textarea>等)

27. id或class的名稱不能以數字開頭，大小寫有區分

28. id或class的名稱最好具有語意

29. 所有網頁幾乎都會有的元素#header #footer#content#navX .red { color: #ff0000 ;} .detail { color:#ff0000;}

31. Class(.)

32. Id(#)CSS選擇符(Selector)： 選到對的東西 h1 { font-size: 19px ;} 選擇符 屬性 值 分號 .article { color: #666666 ; } 選擇符 屬性 值 分號 #header{ height: 100px ; } 選擇符 屬性 值 分號

33. CSS選擇符(Selector)： 選到對的東西 CSS HTML h1{font-size:19px;} <h1> welcome to Viva! </h1><p>Welcome to Viva! This...</p> <div class=“article” > This year we maintain… </div><div class=“feature”> This spring… </div> .article {color:#666666;} <div id=“header” > Welcome to Viva! </div><div class=“header” > This year we maintain… </div> #header {height:100px}

34. CSS選擇符(Selector)： 選到對的東西 CSS HTML <pclass=“section” > Welcome to Viva! This... </p><spanclass=“section” > Welcome to Viva! This... </span> .section {margin:10px} <pclass=“section” > Welcome to Viva! This... </p><spanclass=“section” > Welcome to Viva! This... </span> p.section {margin:10px}

35. CSS選擇符(Selector)： 選到對的東西 CSS HTML <div id=“comment”class=“section”> Hi David,… </div> #comment.section {margin:10px} <divclass=“section” ><p>Welcome to Viva! This... </p> </div> .section p{margin:10px}

37. 群組：多個元件，一起設定，用逗號分開h1, h2, p{color:#666666}

38. 萬用選擇符：*{color:#666666}#footer *{font-size:13px}CSS選擇符(Selector)： 選到對的東西

40. 子嗣選擇符：一層包一層

41. 相鄰子嗣選擇符(IE7以上)：CSS選擇符(Selector)： 選到對的東西 CSS HTML <div class=“section”> <p>Welcome to Viva! This is..</p> <a href=“about.html”>more..</a> <p>Our customers…</p> </div> .section p{margin:10px} CSS HTML <div class=“section”> <p>Welcome to Viva! This is..</p> <a href=“about.html”>more..</a> <p>Our customers…</p> </div> .section > p{margin:10px}

43. 相鄰選擇符(IE7以上)： CSS選擇符(Selector)： 選到對的東西 CSS HTML .h1+p{margin:10px} <p>Our customers…</p> <h1>Welcome to Viva! This is..</h1><p>Our customers…</p>

45. 屬性選擇符(IE7以上)：CSS選擇符(Selector)： 選到對的東西 CSS HTML input[type=“text”]{border:1px solid #000} <input type=“text” /><input type=“radio” /> <input type=“text” /> <input type=“radio” />

47. 與連結<a>相關a:link 有連結a:visited 已造訪a:hover滑鼠滑過去a:active 按下去時請按照順序CSS選擇符(Selector)： 選到對的東西

49. 寫在最後的優先

50. 選擇範圍越小的優先

51. 針對id的設定比class優先

52. Inline(行內CSS) > Embed(html內CSS) > Link(外連CSS)CSS選擇符(Selector)： 選到對的東西 div p{color:#666666;} div.feature p{color:#777777} div#content p{color:#888888} div#content.feature p{color:#999999} <div id=“content” class=“feature”> <p>Welcome to Viva! This is..</p><p>Our customers…</p> </div>

55. 子孫元件會繼承外層父輩元件的屬性設定，除非用更小範圍的選擇器來覆蓋(overwrite)

56. 並不是所有屬性都會被繼承，如背景CSS選擇符(Selector)： 選到對的東西 http://www.slideshare.net/randyconnolly/web-i-06-css

58. CSS屬性：哪些東西可被控制？ 種類 控制區塊 屬性 控制文字 顯示與定位 #header{ height: 100px;} 選擇符 屬性 值 http://www.w3schools.com/css/css_reference.asp

61. 區塊屬性.section{width: 400px;height: 300px;margin: 15px;padding: 10px; background: url(bg.jpg)no-repeat 0 0;border: 2px solid #000; } margin padding Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum height width

63. 顏色碼的簡寫 #00AADD = #0AD padding 亦同 margin: 15px 10px 5px 20px; 上右 下 左 (順時針) margin: 15px 10px 5px; 上 左右 下 margin: 15px 10px; 上下 左右 border: 2px solid #0AD; (= #00AADD) 粗細 款式 顏色

65. 注意:IE6預設的Box Model與其他瀏覽器不同，寬度的數值包含內間距(padding)padding Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum height width

67. display為block的元件才能設寬與高，寬度未設定時自動佔滿整行

68. 預設為block的html元件:<div>,<h1>~<h6>,<p>,<ul>

69. display為inline的元件無法設寬與高，它的寬度跟著框內文字的長度變長，而高則是被line-height影響，會與其他元素並排

70. 預設為inline的html元件:<span>,<a>h1 p ul span a span text text

72. 文字屬性.section{color: #554400;font-size: 13px;font-family: Arial;font-style: italic;font-weight: blod;line-height: 120%;text-align: left;text-indent:0;verticle-align: baseline; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

73. 不會寫，去哪裡查？ W3school (w3school->Learn CSS ->CSS Reference)http://www.w3schools.com/css/css_reference.asp中文版 –http://www.w3school.com.cn/css/css_reference.asp CSS Property Indexhttp://www.blooberry.com/indexdot/css/propindex/all.htm

74. CSS練習 http://dl.dropbox.com/u/8057029/CSS-ex1/CSS-ex1.zip <h1> <img> <h2> <div class=“feature”> <p> <h2> <p> <div class=“section”> <h2> <p> <a> <div id=“footer”>

75. 下回預告 更多屬性、值、單位 Postion定位(static, relative, absolute) 浮動區塊 (float/clear) 排版實作