Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

調配網站的明星花露水

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
CSS modules 簡單玩
CSS modules 簡單玩
Cargando en…3
×

Eche un vistazo a continuación

1 de 46 Anuncio

Más Contenido Relacionado

A los espectadores también les gustó (20)

Similares a 調配網站的明星花露水 (20)

Anuncio

Más reciente (20)

Anuncio

調配網站的明星花露水

  1. 1. 調配網站的明星花露水 LESSON 4
  2. 2. 調配網站的明星花露水 LESSON 4 1. CSS 的基礎 2. CSS 的觀念 3. CSS 範例教學
  3. 3. 我們透過HTML 建⽴立網站基本內容 透過 CSS美化你的網站
  4. 4. 圖⽚片來源 設定網⾴頁內容配置及樣式 (Cascading Style Sheets)
  5. 5. 圖⽚片來源
  6. 6. How to include CSS in your website?
  7. 7. How to include CSS in your website? 1. 加⼊入外部CSS 在<head></head>標籤內,使⽤用link標籤載⼊入外部 CSS 檔案 <link rel="stylesheet" href=“路徑/檔名.css”>
  8. 8. DEMO
  9. 9. body{ background-color:yellow; } 新增⼀一個CSS檔案,新增網⾴頁背景顏⾊色為⿈黃⾊色 CSS main.css
  10. 10. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css載⼊入⽅方法1</title> <link rel=“stylesheet” href=“main.css”> </head> <body> </body> </html> <head></head>標籤內,加⼊入外部 CSS 檔案 HTML index.html
  11. 11. How to include CSS in your website? 2. 加⼊入內部CSS 在<head></head>標籤內,使⽤用style標籤載⼊入內部 CSS 檔案
  12. 12. DEMO
  13. 13. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css載⼊入⽅方法2</title> <style> .title{ color: blue; } </style> </head> <body> <h1 class="title">Hello Anna.</h1> </body> </html> <head></head>標籤內,加⼊入內部 CSS 檔案 HTML index.html
  14. 14. How to include CSS in your website? 3. 加⼊入內崁CSS 在該元素的起始標籤內,使⽤用style屬性套⽤用CSS <div style="CSS屬性名:屬性值;">任意內容</div>
  15. 15. DEMO
  16. 16. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css載⼊入⽅方法3</title> </head> <body> <h3 style="color:#aaa;">Nice to meet you.</h3> </body> </html> HTML標籤內,加⼊入內崁 CSS 檔案 HTML index.html
  17. 17. How to include CSS in your website? 4. 在CSS檔案匯⼊入其它CSS樣式 在css檔案內使⽤用!import ⽅方法來匯⼊入其他樣式檔 @import url(檔名.css);
  18. 18. DEMO
  19. 19. h1,h3{ text-align: center; } 新增⼀一個layout.css檔案,將h1與h3的標題⽂文字置中對⿑齊 CSS layout.css
  20. 20. @import url(layout.css); 再新增⼀一個CSS檔案,載⼊入layout.css檔案 CSS main.css
  21. 21. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css載⼊入⽅方法4</title> <link rel="stylesheet" href="main.css"> </head> <body> <h1>Hello Anna.</h1> <h3>Nice to meet you.</h3> </body> </html> body標籤內,加⼊入網⾴頁內容 HTML index.html
  22. 22. How to include CSS in your website? 1. 加⼊入外部CSS 2. 加⼊入內部CSS 3. 崁⼊入內部CSS 4. import外部CSS 在<head></head>標籤內,使⽤用link標籤載⼊入外部 CSS 檔案 在<head></head>標籤內,使⽤用style標籤載⼊入內部 CSS 檔案 在該元素的起始標籤內,使⽤用style屬性套⽤用CSS 在css檔案內使⽤用!import ⽅方法來匯⼊入其他樣式檔
  23. 23. CSS 基本結構
  24. 24. 圖⽚片來源
  25. 25. 調配網站的明星花露水 LESSON 4 1. CSS 的基礎 2. CSS 的觀念 3. CSS 範例教學 selectors css specificity Box Model
  26. 26. 圖⽚片來源 Simple selectors
  27. 27. 圖⽚片來源 Class selectors(類別選擇器) ID selectors(ID選擇器) Type selectors(標籤選擇器) Universal selector(通⽤用選擇器) Attribute selectors(屬性選擇器) .box #box01 p * p[title]
  28. 28. DEMO
  29. 29. 圖⽚片來源 Combinators
  30. 30. 圖⽚片來源 Groups of selectors(群組選擇器) Descendant combinator(後代選擇器) Child combinator(⼦子選擇器) Pseudo-classes(偽類選擇器) Pseudo-elements(偽元素選擇器) .box1,.box2 .anna .box1 anna > .box1 .box:hover .box:before
  31. 31. DEMO
  32. 32. 圖⽚片來源
  33. 33. DEMO
  34. 34. 圖⽚片來源
  35. 35. Box Model
  36. 36. 圖⽚片來源
  37. 37. DEMO
  38. 38. Content padding border margin
  39. 39. 調配網站的明星花露水 LESSON 4 1. CSS 的基礎 2. CSS 的觀念 3. CSS 範例教學
  40. 40. 範例
  41. 41. 調配網站的明星花露水 LESSON 4 1. CSS 的基礎 2. CSS 的觀念 3. CSS 範例教學
  42. 42. 分享結束,很高興認識大家 ,謝謝:)

×