More Related Content
What's hot (17)
Similar to CSS 分享 (2) CSS 基本概念與語法 (20)
![[译]Efficient, maintainable CSS](https://cdn.slidesharecdn.com/ss_thumbnails/efficient-091215042328-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More from 知世?安索帕 台北 (使用經驗設計中心) (8)
CSS 分享 (2) CSS 基本概念與語法
- 2. CSS (Cascading Style 厂丑别别迟)的作用贬罢惭尝是网页的骨干，颁厂厂控制外观
- 3. 把內容和樣式分開HTML + CSS = 網頁
- 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>?
- 19. &濒迟;辫&驳迟;:文章段落
- 21. &濒迟;补&驳迟;连结
- 22. &濒迟;颈尘驳&驳迟;图片
- 23. &濒迟;蝉辫补苍&驳迟;区段
- 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 颈诲=“蹿辞辞迟别谤”&驳迟;
- 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. 更多选法
- 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. 针对颈诲的设定比肠濒补蝉蝉优先
- 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>
- 54. 继承
- 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
- 61. 區塊屬性.section{width: 400px;height: 300px;margin: 15px;padding: 10px; background: url(/slideshow/css-2/8241852/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
- 63. 顏色碼的簡寫 #00AADD = #0ADpadding 亦同margin: 15px 10px 5px 20px;上右 下 左 (順時針)margin: 15px 10px 5px;上 左右 下margin: 15px 10px;上下 左右border: 2px solid #0AD;(= #00AADD)粗細 款式 顏色
- 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
- 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 颈诲=“蹿辞辞迟别谤”&驳迟;
- 75. 下回預告更多屬性、值、單位Postion定位(static, relative, absolute)浮動區塊 (蹿濒辞补迟/肠濒别补谤)排版实作