Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

網頁三本柱之Html與css

494 views

Published on

這是原本要教朋友HTML與CSS時,所做的PPT。
請安心服用 :D

Published in: Technology
  • Be the first to comment

網頁三本柱之Html與css

  1. 1. 網頁三本柱之HTML與CSS By Jaja
  2. 2. 目錄  你不能不知道的HTML5  HTML5新的標籤  HTML5常用標籤介紹  一念天堂一念地獄的CSS3  CSS3語法介紹  權重概念  Box Model
  3. 3. 進入正題前 一定要讓三本柱出場一下
  4. 4. 好像走錯棚了… http://ppt.cc/mOdD
  5. 5. 這才是傳說中的網頁三本柱 http://ppt.cc/1sOV
  6. 6. 今天我們只會先介紹 HTML5君 http://ppt.cc/w1gJ
  7. 7. 今天我們只會先介紹 CSS3妹子 Make Your be Pretty Girl Amazing Animation Imagination can be true http://ppt.cc/IQ~x
  8. 8. 你不能不知道的HTML5  所有的瀏覽器都認識HTML  你可以在上頭畫圖了 ( Canvas|SVG )  原生的媒體播放 (video 標籤)  更多的儲存方式 ( Local Storage )  行動裝置也能Run的很順 http://ppt.cc/uUBp
  9. 9. HTML5新的標籤  版面設計 : <header>, <footer>, <article> and <section>  繪圖 : <svg> and <canvas>  媒體播放 : <audio> and <video>
  10. 10. HTML常用標籤介紹  頁首與頁尾: <header>, <footer>  內容區塊 : <div>  Menu選單 : <ul> and <li>  文字 : <section>,<article>, <p> , <h1>  資料輸入 : <input>  表格 : <table> and <tr> and <td>
  11. 11. 細數標籤二、三事 一個最簡單的標籤會長的像這樣,一定會有開頭跟結尾 <img src=‘a.png’></img> 有時候我們會加上一些屬性 <img src=‘a.png’ height=‘200px’ >
  12. 12. 細數標籤二、三事 但我們大多時候都只會用CSS來控制 EX: <img src=‘a.png’ height=‘200px’ > <img src=‘a.png’ /> <style type=‘css/text’> img { height:200px ; } </style>
  13. 13. 最簡單的網頁結構會長這樣 http://ppt.cc/ZnYx
  14. 14. 實務上我們其實…
  15. 15. 會有幾種排版的方式 http://ppt.cc/QQDd 單欄式
  16. 16. 兩欄式 http://ppt.cc/U3TR
  17. 17. 三欄式 http://ppt.cc/cYon
  18. 18. 現在,讓我們從最簡單到最難一次練習 一遍吧 http://ppt.cc/xPu6
  19. 19. 俗話說的好一個網站CSS用的好 可以給使用者舒服又乾爽的體驗 用的不好… http://ppt.cc/yEyZ
  20. 20. www.sphere.bc.ca/test/sruniverse.html
  21. 21. http://www.thesearethings.com/
  22. 22. 一個最簡單的CSS會像這樣 <head> <title>Page title</title> <style type="text/css"> .background { background-color:#808080; } </style> </head>
  23. 23. 你可以在裡面設定很「多」的CSS屬性 <style type="text/css"> .background { background-color:#808080; width:200px; height:100px; cursor:copy; margin-left:10px; padding-top:10px; } </style>
  24. 24. CSS的屬性一定是 {屬性名稱} : {值} .background { background-color:#808080; }
  25. 25. http://ppt.cc/oV5V
  26. 26. 一般CSS的寫法有三種 <head> <title>Page title</title> <style type="text/css"> div{ background-color:#ff6a00; } #content { background-color:#b6ff00; } .background { background-color:#808080; } </style> </head> 指定網頁標籤 所有div標籤都會套用此CSS
  27. 27. 一般CSS的寫法有三種 <head> <title>Page title</title> <style type="text/css"> div{ background-color:#ff6a00 } #content { background-color:#b6ff00 } .background { background-color:#808080 } </style> </head> 指定特定ID 只有這個ID會套用這個CSS (ID是唯一的)
  28. 28. 一般CSS的寫法有三種 <head> <title>Page title</title> <style type="text/css"> div{ background-color:#ff6a00 } #content { background-color:#b6ff00 } .background { background-color:#808080 } </style> </head> 指定特定Class 只有有使用到這個Class的才會套用此CSS
  29. 29. 舉例來說…
  30. 30. div{ background-color:#ff6a00; } 當我們寫了一個網頁標籤的CSS 則以下的div全部都會套用到此CSS <div><h1>I'm div-01</h1></div> <div><h1>I'm div-02</h1></div> <div><h1>I'm div-03</h1></div> <div><h1>I'm div-04</h1></div> <div><h1>I'm div-05</h1></div>
  31. 31. #content { background-color:#b6ff00; } 如果寫的是ID的CSS 則以下的div 只有ID為content 會套用到此CSS <div id=‘div-01’><h1>I'm div-01</h1></div> <div id=‘div-01’><h1>I'm div-02</h1></div> <div id=‘content’><h1>I'm div-03</h1></div> <div id=‘div-01’><h1>I'm div-04</h1></div> <div id=‘div-01’><h1>I'm div-05</h1></div>
  32. 32. .background { background-color:#808080; } 最如果寫的是Class的CSS 則以下的div 只有Class指定為background 會套用到此CSS <div class=‘header’><h1>I'm div-01</h1></div> <div class=‘leftSide’><h1>I'm div-02</h1></div> <div class=‘background’><h1>I'm div-03</h1></div> <div class=‘footer’><h1>I'm div-04</h1></div> <div class=‘background’><h1>I'm div-05</h1></div>
  33. 33. 簡單練習一下吧! 
  34. 34. CSS套用的方式其實是有順序的 <head> <title>Page title</title> <style type="text/css"> #content { background-color:#ff6a00; } #content { background-color:#b6ff00; } #content { background-color:#808080; } </style> </head> 寫的相同時 由上而下,只有最後一個會被套用
  35. 35. 記得! CSS套用順序,由上而下,如果相同只有最後一個會被套用 上一個記不得的人…現在草已經跟你 一樣高了
  36. 36. 接下來要講「非」一般的CSS
  37. 37. Grouping <style type="text/css"> h1,h2,h3,p,div { background-color:#ff6a00; } </style>
  38. 38. 繼承 <style type="text/css"> #content { background-color:#ff6a00; } .size{ height:200px; } </style> <div id="content"> <div class=‘size’>This Div ID is call "content"</div> </div>
  39. 39. 父與子 <style type="text/css"> div h1{ background-color:#ff6a00; } </style> <div id="content"><h1>This Div ID is call "content"</h1></div>
  40. 40. 父與子(2) <style type="text/css"> div.background{ background-color:#ff6a00; } </style> <div id="content"> <h1 class=‘background’>This Div ID is call "content"</h1> </div>
  41. 41. 其實還有很多種寫法 http://www.w3schools.com/cssref/css_selectors.asp 再講下去就是又新的一天了!
  42. 42. CSS權重 權重的意思就是 黑桃 > 紅心 > 磚塊 > 梅花
  43. 43. 實際上CSS權重是 最高優先權到最低優先權的排名如下: NO1 內行套用的樣式表 (Inline stylesheet) NO2 嵌入套用的樣式表 (Embedded stylesheet) NO3 匯入套用的樣式表 (Imported stylesheet) NO4 外部連接套用的樣式表 (Linked stylesheet) NO5 瀏覽器本身的樣式表 (Browser's own stylesheet)
  44. 44. 內行套用其實就是 <div id="content" > <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> </div> 千萬拜託不要這樣寫,寫了不要說我教的
  45. 45. 想想以後你老了要修改的時候… <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> <div class="size" style="background-color:#b6ff00"> This Div ID is call "content“ </div> MISSION : 請把所有的div背景改成藍色
  46. 46. http://ppt.cc/Xe1I
  47. 47. Box Model 所有你看到的標籤元素 其實都是一個BOX
  48. 48. 盒子模式 (box model) 是在 CSS 中一個 很重要的觀念。 它是用來描述一個元素是如何組成的。 http://ppt.cc/JfoT
  49. 49. Margin 25px Border 25px Padding 25px http://ppt.cc/OZ7r
  50. 50. 根據Box Model,一個元素標籤在計算寬高的時候 要把Margin、Border、Padding一併列入 Width=300px + 50px (左右padding) + 50px (左右Border) + 50px (左右Margin) = 450px !! http://ppt.cc/JfoT http://ppt.cc/OZ7r
  51. 51. Margin  一個標籤元素的最外圍  用來設定各個元素之間的距離 http://ppt.cc/JfoT margin-top (上邊界) margin-right (右邊界) margin-bottom (下邊界) margin-left (左邊界) 你可以這樣設定 你也可以這樣設定 margin: [上面邊界值] [右邊邊界值][下面邊界值] [左邊邊界值]
  52. 52. Border  border-style  border-width  border-color  border-top-, border-left-, border-bottom-, border-right- http://ppt.cc/JfoT Border有以下幾個屬性可以設定
  53. 53. border-top-, border-left-, border-bottom-, border-right- 指的是 你可以分開設定上右下左邊框的Style EX: border-top-color : red ; border-left-color : black; border-bottom-color : blue; border-right-color : green;
  54. 54. border-style http://ppt.cc/po~I
  55. 55. border-width,color  border-width 是用來設定邊框的粗細 一般用px為單位  Border-color 則是用來設定邊框的顏色 一般會用色碼來做顏色的設定 http://ppt.cc/GPux
  56. 56. Padding(留白) http://ppt.cc/JfoT padding-top (上) padding-right (右) padding-bottom (下) padding-left (左) 跟Margin有點類似,一樣有上右下左的分開設定方式 padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值] 也可以直接設定
  57. 57. 練習時間!!~ 
  58. 58. 關於CSS中的"display" 屬性  每個 HTML 元素都有一個預設的 display 值  不同的元素屬性會有不同的預設值  預設值通常是 block 或 inline 其中一個  block 稱為「區塊元素  Inline 稱為「行內元素」
  59. 59. Block vs Inline
  60. 60. 版面配置初探  使用CSS中的position屬性來做元素定位  Float做出內容浮動  搭配Margin定義元素的實際位置  適時的利用clear:both 解除浮動的效果
  61. 61. Tips: 百分比是一種相對於目前容器元素寬度的單位
  62. 62. Position屬性值  Static (預設值) 套用 static 的元素屬於「不會被特別定位」的元素  Relative 相對元素原始位置  Fixed 固定的元素位置 (相對於瀏覽器視窗來定位)  Absolute 元素位置定位是在他所處上層容器的相對位置
  63. 63. 以下來說明如何利用float做排版
  64. 64. http://ppt.cc/U3TR
  65. 65. <body> <div id="Header">Header</div> <div id="Sidebar">Sidebar</div> <div id="body">body</div> <div id="Footer">Footer</div> </body> http://ppt.cc/U3TR
  66. 66. 實際上是會長成這樣
  67. 67. <style type="text/css"> #Header { width: 360px; height: 80px; background-color: #f9c81e; color:#ff0000; } #Sidebar { width: 120px; color: #ff0000; height: 280px; background-color: #cecece; } #body { width: 240px; height: 280px; background-color: #fffaf3; color: #ff0000; } #Footer { color: #ff0000; width: 360px; height: 80px; background-color: #f9c81e; } http://ppt.cc/U3TR
  68. 68. <style type="text/css"> #Header { width: 360px; height: 80px; background-color: #f9c81e; color:#ff0000; } #Sidebar { float:left; width: 120px; color: #ff0000; height: 280px; background-color: #cecece; } #body { width: 240px; height: 280px; background-color: #fffaf3; color: #ff0000; } #Footer { color: #ff0000; width: 360px; height: 80px; background-color: #f9c81e; } </style> 先讓Sidebar “浮”到左邊 http://ppt.cc/U3TR
  69. 69. <style type="text/css"> #Header { width: 360px; height: 80px; background-color: #f9c81e; color:#ff0000; } #Sidebar { float:left; width: 120px; color: #ff0000; height: 280px; background-color: #cecece; } #body { float:left; width: 240px; height: 280px; background-color: #fffaf3; color: #ff0000; } #Footer { color: #ff0000; width: 360px; height: 80px; background-color: #f9c81e; } </style> 因為Sidebar浮起來了,所以你會看到body跑上去 所以我們現在要讓body也浮起來,並往左靠齊 http://ppt.cc/U3TR
  70. 70. <style type="text/css"> #Header { width: 360px; height: 80px; background-color: #f9c81e; color:#ff0000; } #Sidebar { float:left; width: 120px; color: #ff0000; height: 280px; background-color: #cecece; } #body { float:left; width: 240px; height: 280px; background-color: #fffaf3; color: #ff0000; } #Footer { clear:both; color: #ff0000; width: 360px; height: 80px; background-color: #f9c81e; } 注意!現在變成Footer..因為body浮上去了,就自動補位了 為了讓他不會受影響,我們就會加上clear:both;這個屬性值 http://ppt.cc/U3TR
  71. 71. #Header { width: 360px; height: 80px; background-color: #f9c81e; color:#ff0000; } #Sidebar { float:left; width: 120px; color: #ff0000; height: 280px; background-color: #cecece; } #body { float:left; width: 240px; height: 280px; background-color: #fffaf3; color: #ff0000; } #Footer { clear:both; border: 5px solid red; color: #ff0000; width: 360px; height: 80px; background-color: #f9c81e; } 完成!!! http://ppt.cc/U3TR
  72. 72. 輪到你了!!!
  73. 73. Q & A
  74. 74. 參考資源  display屬性 : http://www.w3schools.com/cssref/pr_class_display.asp  Border屬性: http://www.w3schools.com/css/css_border.asp  Selector : http://www.w3schools.com/cssref/css_selectors.asp  版面配置: http://zh-tw.learnlayout.com/

×