【CSS】基礎篇
CSS（Cascading Stylesheets，階層樣式表）是一種樣式表語言，用來打造網站的樣式風格。例如段落文字用藍色、標題文字用紅色、段落置中、背景圖片排列等等，這篇文章是我學習 CSS 的筆記內容。 1. CSS 簡介 CSS（Cascading Stylesheets，階層樣式表）：設定網頁的樣式及佈局。 DOM Tree（Document Object Model，文件物件模型）：網頁的樹狀表示。 Parent Node：Child Node 的父元素（Parent Element）。 Child Node：Parent Node 的子元素（Child Element）。 CSS 屬性可至CSS reference查詢。 CSS comment 語法：/**/。 /* 我是註解 */ CSS 可寫在<style>內，例如： <style> /* selector */ h1 { color: red; } h2 { color: green; } </style> 2. CSS 放置位置 inline styling：跟 HTML 寫在同一行，優先層級最高，但只能對特定標籤設定。 <h1 style="color: red">我是標題</h1> internal styling：把 HTML 與 CSS 放在同一個文件當中，方便撰寫，但多個頁面難以維護。 <style> h1 { color: red; } h2 { color: green; } </style> external styling：多個 HTML 文件可連接同一個 CSS 文件，容易維護。 <head> <link rel="stylesheet" href="./style.css" /> </head> 3. CSS 顏色設定 Color Keywords：關鍵字，如 red、black……。 h1 { color: green; } rgb：光學三原色，數值 0~255，共 256 種不同選擇。 h1 { color: rgb(247, 11, 11); } rgba：同 rgb，但多一個 alpha 儲存透明度，數值 0~1。 h1 { color: rgba(154, 53, 53, 0.632); } hex：十六進制數字代表顏色，數值 0、1、2、……9、A、B、……F。 h2 { color: #ffffff; } HSL：色相、飽和度、亮度。 4. Selectors Universal Selector：匹配任何類型的 HTML element。 * { color: blue; } Element Selector：選擇特定的 HTML element。 h2 { color: blue; } ID Selector：選擇有特定 ID 屬性的 HTML element。 #dog4 { color: blue; } Class Selector：選擇所有特定 class 屬性的 HTML element。 .animal4 { color: blue; } Grouping Selector：一次選擇所有數個 HTML 元素，並逗號分隔。 h1, h2, h3, h4, h5, h6 { color: blue; } Descendant Selector：兩個或多個用空格分隔的選擇器組成。 div.animal4 a { color: blue; } Attribute Selector：選擇所有具有相同屬性的 HTML 元素。 input[type="text"] { color: blue; } 5. Pseudo class、element pseudo-class：指定所選元素的特殊狀態。 input[type="text"]:hover { color: red; } pseudo-element：添加選擇器的關鍵字，設置所選元素的特定部分樣式。 p::before { content: ">>"; color: blue; } 6. CSS 重點概念 Inheritance（繼承）。 Conflicting Styling（樣式衝突）。 Priority 優先順序：Inline Styling、User Stylesheet、User Agent Stylesheet、Inheritance。 CSS 選擇器有不同的 specificities（特定度）：id【specificities(1, 0, 0)】、class【specificities(0, 1, 0)】、tag【specificities(0, 0, 1)】。 Order Rule（順序規則）：有相同的 specificity 的選擇器時，後寫的選擇器樣式會覆寫前面寫的樣式。 放在後面的<link>stylesheet，會覆寫放在前面的<link>stylesheet。 7. CSS 單位 absolute units：有預設數值或現實生活定義的單位。 relative units：相對於某數值的單位。 8. font 設定 文字樣式 text styling：font-size（字體大小）、text-align（水平對齊）、text-decoration（裝飾線外觀）、line-height（文字行距）、letter-spacing（文字水平間距）、font-family（字體優先列表）、text-indent（段落內縮長度）、font-weight（粗體字）。 9. 背景設定 background-color：背景顏色。 background-image：背景圖片。 background-size：背景尺寸。 background-position：背景圖片位置。 background：背景各種設定的 shorthand 設定。 10. Box Model block element 被視為一個 box，box 是由 margin、border、padding、content 組成。 content：顯示內容的區域。 padding：content 周圍的區域，在 content 與 border 之間。 margin：border 以外的區域。 border 可特別設定 border-radius 屬性。 11. width、height、overflow width：指定元素的寬度。 height：指定元素的高度。 width 可設定%，但 height 不行。 visible：content 不會被修剪，可呈現在元素框外，此為預設值。 hidden：內容會被剪裁以適合元素，不顯示滾動條。 scroll：內容將被剪裁以適合填充框，顯示移動軸。 overflow-x、overflow-y 可設定特定方向的 overflow 屬性。 12. content-box 預設 box-sizing 屬性為 content-box。 13. border-box border-box：width、height 屬性包括內容 content、內邊距 padding、邊框 border，但不包括外邊距 margin。 14. inline-block display：outer display type、inner display type。 outer display type：block、inline、inline-block。 inner display type：flex、grid。 15. Position Position：設定元素在文檔中的定位方式，top、right、bottom、left 屬性確定定位元素的最終位置。 Position 可設定的值包括 static/z-index、relative、absolute、fixed、sticky。 16. Stacking Context, Cursor, Table Stacking Context：HTML 元素沿虛擬 Z 軸相對於用戶的 3D 概念化。 表格樣式設定：border-collapse。 響應式表格：overflow-x:auto Opacity：元素的不透明度，0 是完全透明、1 是完全不透明。 Cursor：設定鼠標圖示。 17. Transition Transition 屬性：設定某 CSS 屬性轉換時的 timing function 以及速度。 18. Transform Transform 屬性：旋轉、縮放、傾斜、平移 HTML 元素。 19. Animation Animation 屬性：客製化動畫。