CSS 分享 (2) CSS 基本概念與語法

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

2. CSS (Cascading Style Sheet)的作用HTML是網頁的骨幹，CSS控制外觀

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

4. 為什麼要用CSS同時維護很多網頁時，易於修改讓HTML更合語意，因為網頁是同時要給人和機器讀的。便於配合javascript套件(如jQuery)，發展成動態網站介面http://jqueryui.com/themeroller/簡潔的原始碼節省頻寬和硬碟空間有助於提升網站排名為什麼不用table排版避免網頁內容在奇怪的地方被切開(不合語意)

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

6. 大量重複的原始碼，浪費頻寬、不利網站排名Table排版的原始碼

7. CSS排版的原始碼CSSHTML

8. Table並不是完全無用，你可以用table來排版e-dm、電子報、邀請函，任何需要透過e-mail寄出的網頁

9. 非版面佈局，符合table含意的內容(例：日程表、價目表)良好的習慣與步驟分析內容處理HTML處理CSS介面特效(佈局)(骨幹)(外觀)(互動)先處理HTML，再處理CSS。

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

11. 良好的習慣與步驟建立網站檔案架構webrootstyle.csscssheader.jpgimages…….footer.jpgsidebar.jpg…….global.jsjs…….Index.htmlabout.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!)

14. 結合CSS與網頁三種方法Inline(行內CSS)<div style=“font-size:12px;color:#ff6600”>I am orange</div>Embed(html內CSS)<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Welcome to Viva!</title><style type="text/css"> .style1 {color: #ff6600} .footer{height:150px}</style></head>Link(外連CSS)<link rel=“stylesheet” href=“style.css”; type=“text/css”; />

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

16. HTML網頁中的元件一份html文件中會有什麼？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>文件標題</title></head><body></body></html>?

17. #wrap#header#navigationh2ImageImageh2h3paragraphh2paragraphparagraphimage#footer

18. HTML網頁中的元件常用內建元件(html tag)<h1>~<h6>:標題

19. <p>:文章段落

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

21. <a>連結

22. <img>圖片

23. <span>區段

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

25. table元件HTML網頁中的元件客製元件的主角: <div>要幫div取名字，外部CSS才能選到它、控制它<div id=“header” >welcome to Viva!</div><div class=“article” >I am orange</div><h1><img><h2><div class=“feature”><p><h2><p><h2><div class=“section”><p><a><div id=“footer”>

26. CSS選擇符(Selector)：選到對的東西注意：整份html不能有兩個相同的id, 但可以有很多相同的class

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

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

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

30. 語法內建HTML tag

31. Class(.)

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

33. CSS選擇符(Selector)：選到對的東西CSSHTMLh1{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)：選到對的東西CSSHTML<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)：選到對的東西CSSHTML<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}

36. 更多選法

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

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

39. 更多選法

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

41. 相鄰子嗣選擇符(IE7以上)：CSS選擇符(Selector)：選到對的東西CSSHTML<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}CSSHTML<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}

42. 更多選法

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

44. 更多選法

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

46. Pseudo-class

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

48. 誰最優先？

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>

53. 誰最優先？“CSS Selector Specificity”CSS選擇符(Selector)：選到對的東西

54. 繼承

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

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

57. 繼承CSS選擇符(Selector)：選到對的東西<body>...<p> Welcome to Viva! This is..<a href=“…”>read more…</a></p> <p> Our customers…</p>...</body>body{ font-size:13px; color:gray;}

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

59. CSS屬性：哪些東西可被控制？Box Modelwidthheight

60. CSS屬性：哪些東西可被控制？Box Model

61. 區塊屬性.section{width: 400px;height: 300px;margin: 15px;padding: 10px; background: url(bg.jpg)no-repeat 0 0;border: 2px solid #000;}marginpaddingLorem 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 heightwidth

62. CSS屬性：哪些東西可被控制？簡寫(short hand)

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

64. CSS屬性：哪些東西可被控制？Box Model

65. 注意:IE6預設的Box Model與其他瀏覽器不同，寬度的數值包含內間距(padding)paddingLorem 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 heightwidth

66. CSS屬性：哪些東西可被控制？注意: display:block與display:inline

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

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

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

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

71. CSS屬性：哪些東西可被控制？文字

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.aspCSS 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)排版實作

CSS 分享 (2) CSS 基本概念與語法

Recommended

More Related Content

What's hot (17)

Similar to CSS 分享 (2) CSS 基本概念與語法 (20)

More from 知世‧安索帕台北 (使用經驗設計中心) (8)