CSS 語法教學
9 likes4,679 views
本文件是关于在2015年4月18日于元智大学举办的CSS语法教学工作坊的内容，主要涵盖了CSS的基础语法、如何在HTML中引入CSS、以及CSS如何控制网页的样式与排版。文档详细介绍了CSS的基本概念、选择器、样式声明，以及排版和盒子模型的相关知识。最后，工作坊还提到了通过CSS进行样式设置的实用技巧和作业任务。
CSS 語法教學
- 2. 單元主題 • 學習 CSS 基礎語法，包括： - 在 HTML 裡引⼊入 CSS 的⽅方式 - 顏⾊色、背景 - ⽂文字、連結 - Box、邊框 - 基礎網⾴頁排版
- 3. CSS 基本概念
- 5. 各⾃自分⼯工、協同合作 • HTML、CSS、Javascript的關係 - HTML 只處理資料結構，如：⽂文字、圖⽚片、 內容層級 - CSS 專⾨門處理顯⽰示，如：⽂文字⼤大⼩小、顏⾊色、 排版 - Javascript 專⾨門處理互動，如：圖⽚片輪播、播 聲⾳音、播影⽚片
- 6. CSS 簡介 • CSS = Cascading Style Sheets • 透過規則語法 (rules) 的設計，指定 (selector) ⺫⽬目標元素的樣式屬性 (property & value)，為 你的 HTML ⽂文件增加樣式 • CSS 對瀏覽器來說，就是⼀一條⼜又⼀一條的規 則，瀏覽器會逐步套⽤用 • 純⽂文字格式，副檔名為 .css
- 7. 引⼊入 CSS 的⽅方式 • External (外部引⼊入) - 把 CSS 寫在外部的 .css 檔案 • Internal (內部引⼊入) - 把 CSS 寫在 HTML Style Tag 區域內 • Inline (⾏行內引⼊入) - 直接在某個 Tag 上增加 style 屬性，內嵌 CSS 語法
- 8. External CSS • 在 HTML 內指定外部 CSS 檔案 • 只要在不同 HTML 引⼊入同⼀一個 CSS 檔案，樣 式即可共⽤用 • 本⼯工作坊所有⽰示範將會以此⽅方式進⾏行
- 9. Internal CSS • 在 HTML 的 head 區塊內，使⽤用 style 標籤， 在標籤內撰寫 CSS 語法 • 此部份的語法，僅會套⽤用在同⼀一 HTML ⾴頁 ⾯面，⾴頁⾯面間無法共⽤用
- 10. Inline CSS • 直接在某個 HTML Tag 上增加 style 屬性，內 嵌 CSS 語法 • 此 CSS 語法僅作⽤用於該 HTML Tag，並不會影 響其他標籤
- 11. CSS 語法
- 12. CSS 語法 • 語法組成 - 選擇器 (selector) - 宣告 (declaration) 組成 ‣ 屬性 (property) ‣ 值 (value)
- 13. CSS 規則 (rules) p { } color:green; 選擇器 (selector) 宣告 (declaration) 指定段落⽂文字顏⾊色為綠⾊色 分號 屬性 (property) 值 (value) 冒號
- 14. 常⽤用 CSS 選擇器 • Type (Tag) Selector • ID Selector • Class Selector • Child Selector • Descendant Selector
- 15. Type (Tag) Selector • 直接套⽤用在某⼀一種 HTML Tag 上 <p>段落⽂文字</p> p { color: red; } HTML： CSS：
- 16. ID Selector • 在 HTML 內⽤用 id 這個屬性取⼀一個唯⼀一的名 稱，在 CSS 裡即可使⽤用 #id 來選擇到該元素 <div id="header"> </div> #header { color: red; } HTML： CSS：
- 17. Class Selector • 在 CSS 定義⼀一個 .class 的分類後，在 HTML 裡設定 class 屬性後，即可套⽤用此類別 <div class="new"> </div> .new { color: red; } HTML： CSS：
- 18. Child Selector • 只要是某⼀一個元素的後代，即可被套⽤用這個 規則 <p> <a>link</a> </p> p>a { color: red; } HTML： CSS：
- 19. Descendant Selector • 依選擇器的階層關係進⾏行選擇，只要符合條 件的都會被選取 <div> <a>link1</a> <p> <a>link2</a> </p> </div> div a { color: red; } HTML： CSS：
- 20. 語法特性 • CSS 無法單獨運作，⼀一定要搭配 HTML。且 CSS 僅控制樣式，無法改變 HTML 的結構 • CSS 是⼀一條⼀一條的規則，不論是⽤用哪⼀一種引 ⼊入⽅方式，瀏覽器都會將所有規則逐⼀一套⽤用 • 顯⽰示屬性依 HTML 結構進⾏行繼承，若不同的 規則間若重複，則會依照權重進⾏行顯⽰示
- 21. 語法權重 • CSS 語法有串接 (cascade) 的概念。換句話 說，各元素設定是可以被覆寫的。 • 權重優先序： - 後⾯面的規則覆寫前⾯面 - 特定指定的規則覆寫廣域指定的 - !important 覆寫所有其他的 ⼝口訣：先聽 important、離我愈近就聽誰的
- 22. 顏⾊色
- 23. 前景顏⾊色 • ⽤用 CSS 設定段落的前景顏⾊色 <p> Some Text… </p> p { color: green; } HTML： CSS：
- 24. 背景顏⾊色 • ⽤用 CSS 設定段落的背景顏⾊色 <p> Some Text… </p> p { color: white; background-‐color: black; } HTML： CSS：
- 25. ⾊色彩系統 • ⾊色彩名稱 -‐ white, green, black, yellow… • HEX 顏⾊色代碼 -‐ #ff0000 • RGB 顏⾊色數值 -‐ rgb(255, 0, 0);
- 26. 透明度 • CSS 3 裡增加了對顏⾊色透明度的⽀支援，可以 ⽤用 opacity 或 rgba 語法設定 <p> Some Text… </p> p { color: rgba (0, 0, 0, 0.5); opacity: 0.5; } HTML： CSS：
- 27. 背景
- 28. 背景圖⽚片 • 透過 CSS 將圖⽚片放在任何元素當背景 <h1> Website Title </h1> h1 { background-‐image: url("../img/bg.png"); } HTML： CSS：
- 29. 設定圖⽚片重複排列 • 背景圖⽚片可以設定其重複排列的⽅方式 (repeat, repeat-‐x, repeat-‐y, no-‐repeat) <h1> Website Title </h1> h1 { background-‐image: url("../img/bg.png"); background-‐repeat: no-‐repeat; } HTML： CSS：
- 30. 背景圖⽚片對⿑齊及位置 • 透過 CSS 設定背景圖⽚片的對⿑齊⽅方式或位置 <h1> Website Title </h1> h1 { background-‐image: url("../img/bg.png"); background-‐repeat: no-‐repeat; background-‐position: left center; } HTML： CSS：
- 31. 對⿑齊⽅方式圖解 left top left center left bottom center top center center center bottom right top right center right bottom
- 32. ⽂文字與連結
- 33. 字型 • 設定⽂文字使⽤用的字型 <h1> Website Title </h1> h1 { font-‐family: Arial, Verdana, sans-‐serif; } HTML： CSS：
- 34. 字型種類 • Serif - 襯線體 (明體類) • Sans-Serif - 無襯線體 (⿊黑體類) • Monospace - 等寬字體 (常⽤用於顯⽰示程式碼)
- 35. 字型套⽤用策略 • 如媒體特性⼀一節所述，使⽤用者的電腦內不⼀一 定有指定的字型。因此 CSS 在套⽤用字型時， 會依照指定的順序逐⼀一套⽤用，若還是找不到 時，就會使⽤用系統預設字型。 • 依以下策略設定字型：⾃自⼰己期望的顯⽰示字型 > 各平台替代字型 > 通⽤用字型 • 使⽤用 Web Font ⽅方案
- 36. ⽂文字樣式 • 設定⽂文字⼤大⼩小、粗細、斜體、底線、⼤大⼩小寫 <h1> Website Title </h1> h1 { font-‐family: Arial, Verdana, sans-‐serif; font-‐size: 20px; font-‐weight: bold; font-‐style: italic; text-‐decoration: underline; text-‐transform: uppercase; } HTML： CSS：
- 37. ⽂文字縮排 • 設定⽂文字縮排距離 <h1> Website Title </h1> h1 { font-‐family: Arial, Verdana, sans-‐serif; font-‐size: 20px; font-‐weight: bold; font-‐style: italic; text-‐decoration: underline; text-‐transform: uppercase; text-‐indent: -‐9999px; } HTML： CSS：
- 38. ⽂文字對⿑齊 • 設定⽂文字對⿑齊⽅方式 <p> My text... </p> p { text-‐align: center; } HTML： CSS：
- 39. 連結狀態與樣式 • 設定連結在不同狀態的樣式 <a href="#"> paragraph… </a> a:link { /* style */ } a:visited { /* style */ } a:hover { /* style */ } a:active { /* style */ } ⼝口訣：love and hate HTML： CSS：
- 40. Box 與邊框
- 41. Box Model • 所有的 HTML 元素都可以被視為⼀一個⽅方框 (Box) • 在使⽤用 CSS 排版時，提到⼀一個 Box，包含了 四個區域： - content - padding - borders - margins
- 42. Box Model 圖解
- 43. Box Model 各區域空間 • Content - 被這個 HTML 元素包含的所有內 容，通常是⽂文字或影像 • Padding - 內容與邊框之間的距離，背景顏⾊色 也會延伸⾄至這個區域 • Border - Box 本⾝身的邊框，邊根內包含了 content和padding • Margin - Box 外圍和其他 Box 之間的間距， 基本上是透明的，並包含背影顏⾊色
- 44. 了解 Box 的空間 • 還記得嗎？Google Chrome 有提供 Developer Tool，當點選到不同的 DOM 元素時，它會 ⾃自動把 Box 的空間畫出來給你看，從中了解 到該 Box 所佔有的空間為何？ • Brackets 也有對應的功能，在開始即時預覽 的狀態下，在 Brackets 裡點選 HTML 原始 碼，在 Google Chrome 的視窗裡也會把該元 素所佔 Box 繪製出來
- 45. 把 Box 畫出來 • 當然，我們也可以⾃自⼰己使⽤用 CSS 裡的 border 屬性，把每⼀一個元素的 Box 畫出來 * { border: 1px solid #ff0000; }
- 46. * { border: 1px solid #ff0000; } border 屬性 • CSS 屬性內，設定 Box 邊框的語法 屬性 (property) 值 (value) 粗細 樣式 顏⾊色
- 47. padding 與 margin • 設定 Box 的 padding 與 margin <p> paragraph... </p> p { padding: 10px; margin: 10px; } HTML： CSS：
- 48. width 與 height • 設定 Box 的寬與⾼高 <p> paragraph... </p> p { width: 100px; height: 20px; max-‐width: 120px; min-‐width: 80px; max-‐height: 30px; max-‐height: 15px; } HTML： CSS：
- 49. 當內容超出 Box 時 • 設定當內容超出 Box 時該怎麼顯⽰示？ (hidden or scroll) <p> paragraph... </p> p { width: 100px; height: 20px; overflow: hidden; } HTML： CSS：
- 50. 排版
- 51. 網⾴頁排版基礎 • 先在 HTML 內，將各區塊的元件以 div 標籤 將其群組起來，並以 id 命名 header navigation sidebar footer content logo
- 53. 改變元素屬性 • 透過 display 的設定，可以改變元素先天的 屬性，常⽤用於排版技巧上 <ul> <li>opt1</li> <li>opt2</li> </ul> li { display: inline; } HTML： CSS：
- 54. 設定 content 及 sidebar • 設定 content 及 sidebar 的區塊，讓這兩塊分 別排在 main 區域內的左右 #content { width: 750px; float: left; } #sidebar { width: 200px; float: right; }
- 55. float 屬性 • 讓指定元件以浮動的⽅方式進⾏行排版位置調整 #content { float: left; } 屬性 (property) 值 (value) 浮右 (right) 浮左 (left)
- 56. 調整 main 以免重疊 • 因為 content 和 sidebar 變成浮動，造成 main 內部空間為 0，透過設定 width 及 overflow 修正這個問題，並把 footer 往下 擠 #main { overflow: auto; width: 100%; }
- 57. overflow 屬性 • 定義元素超過某個範圍的時候該如何呈現， 搭配 width: 100% 的設定，可以修正 float 造成容器⾼高度為 0 的問題 #main { overflow: auto; } 屬性 (property) 值 (value) ⾃自動 (auto) 隱藏 (hidden) 捲軸 (scroll) 顯⽰示 (visible)
- 58. CSS 的註解語法 • CSS 跟 HTML ⼀一樣有註解語法，設定為註解 的規則就不會被執⾏行 #header { /* 被註解掉的內容 */ }
- 59. 成果⽰示意
- 60. Cheat Sheet • 把所有常⽤用的語法整理成⼀一張表格，可在你 撰寫語法的同時，隨時查找！ • 可參考： - http://www.cheatography.com/ - Google Search：css cheat sheet
- 61. 單元⼩小結 • 在這個單元裡，我們學會了基礎的 CSS 語 法，包括： - 如何在 HTML 裡引⼊入 CSS？ - CSS 語法規則 - 如何⽤用 CSS 設定 HTML 元素的顯⽰示樣式， 並⽤用 CSS 進⾏行簡單的排版
- 62. 課後任務 • Wireframe 繪製練習 • 依照⾃自⼰己的網站架構圖，繪製每⼀一⾴頁的 Wireframe • 參考今⽇日所學的 HTML、CSS 語法，完成 「我的第⼀一個網站」作業 (可參考作業⽰示範 完成練習)。練習過程中，請確認⾃自⼰己了解所 學的語法
- 63. 問與答 學員可開始練習、實作
- 64. 下週主題 • 主題：網站設計與前端框架 • 內容： - 什麼是前端框架？ - 如何運⽤用前端框架來設計網站？ - Twitter Bootstrap 有哪些元件可以讓我們迅 速的網站網站樣板的製作？