IT課程 CSS基礎 019_HelloCSS
什麼是 CSS ？
CSS（Cascading Style Sheets，層疊樣式表）和 HTML 類似，CSS 也不是真正的編程語言，甚至不是標記語言。CSS 是一門樣式表語言，用於為 HTML 元素添加樣式，描述 HTML 文檔外觀，控制 HTML 文檔元素的顏色、大小、字體、佈局等。
CSS 是 Web 開發的重要組成部分，它可以幫助您創建美觀、易於使用的 Web 頁面。
CSS 的基本結構
CSS 樣式由選擇器和屬性組成。選擇器用於選擇要應用樣式的 HTML 元素。屬性用於指定樣式的值。
示例：
p { color: red;}效果：
結構解析：
[!小結]
選擇器（Selector） HTML 元素的名稱位於規則集開始。它選擇了一個或多個需要添加樣式的元素（在這個例子中就是
<p>元素）。要給不同元素添加樣式，只需要更改選擇器。聲明（Declaration） 一個單獨的規則，如 color: red; 用來指定添加樣式元素的屬性。CSS聲明總是以分號 ; 結束，聲明總被大括號 {} 括起來:
屬性（Properties） 改變 HTML 元素樣式的途徑（本例中 color 就是
<p>元素的屬性）。CSS 中，由編寫人員決定修改哪個屬性以改變規則。屬性的值（Property value） 在屬性的右邊，冒號後面即屬性的值，它從指定屬性的眾多外觀中選擇一個值（我們除了 red 之外還有很多屬性值可以用於 color ）。
如何引用 CSS ？
內聯引用：
將 CSS 代碼直接寫在 HTML 標籤中，使用 style 屬性。
內聯引用是將樣式代碼直接寫在HTML標籤中，是一種簡單快捷的方法。內聯引用的優點是方便快捷，適用於少量樣式。但是，內聯引用也存在以下缺點：
- 不利於樣式複用，難以維護。
- HTML文件混亂，不符合分離原則。
- 不利於瀏覽器緩存，影響性能。
示例：
<div style="color: red; font-size: 16px;">這是一個紅色的字體</div>效果：
內部引用：
將 CSS 代碼寫在 <style> 標籤中，放在 <head> 標籤內。
內部引用是將樣式代碼寫在HTML文件的style標籤中，是一種相對折中的辦法。內部引用的優點是樣式和HTML文件分離，易於維護。此外，內部引用可以利用瀏覽器緩存提高加載速度。但是，內部引用也存在以下缺點：
- 頁面加載時需要額外網絡請求，效率相對較低。
- 樣式和HTML文件仍有一定耦合度。
示例：
div { color: red; font-size: 16px;} <div>這是一個紅色的字體</div>效果：
外部引用：
將 CSS 代碼寫在一個單獨的 CSS 文件中，然後使用 link 標籤引入。
外部引用是將樣式代碼寫在單獨的CSS文件中，是一種比較規範的方法。外部引用的優點是樣式和HTML文件完全分離，易於維護。此外，外部引用可以通過CDN加速，提高文件加載速度。外部引用還支持壓縮和合併，減小文件大小。但是，外部引用也存在以下缺點：
- 頁面加載時需要額外網絡請求，但可以通過優化。
- 依賴外部資源，可能導致阻塞或加載失敗。
- 在開發過程中可能需要多次請求外部文件。
示例：
<head>
<!-- 在當前目錄中，引用子文件夾 styles 中的樣式表文件 --><link rel="stylesheet" href="style.css" />
<!-- 在當前目錄中，引用子文件夾 styles 中的子文件夾 general 中的樣式表文件 --><link rel="stylesheet" href="/style.css" />
<!-- 在當前目錄的父級目錄中，引用子文件夾 styles 中的樣式表文件 --><link rel="stylesheet" href="../styles/style.css" />
</head>div { color: red; font-size: 16px;}效果：
層疊順序與優先級
CSS層疊順序（Cascading Order）和優先級（Specificity）是決定CSS顯示樣式效果的兩個關鍵因素。
層疊順序：CSS層疊順序定義了樣式規則的權重，從高到低的順序是。
- 重要性（!important）： 使用!important聲明的樣式規則，優先級最高。但應慎用，因為濫用會導致維護困難。
- 作者樣式（Author Styles）： 由網頁開發者定義的樣式，包括外部樣式表、內部樣式表和內聯樣式。優先級介於用戶樣式和用戶代理樣式之間。
- 用戶樣式（User Styles）： 用戶通過瀏覽器插件或用戶設置的樣式，優先級高於用戶代理樣式，如：字體插件。
- 用戶代理樣式（User Agent Styles）： 瀏覽器自身的默認樣式，具有最低的優先級，如：字體。
優先級：當有多個同一層級，或存在多個相互衝突的樣式規則時，CSS按優先級顯示樣式效果。
- 內聯樣式（Inline Styles）： 指定在HTML標籤內的樣式，優先級最高。
- ID選擇器（id）： 通過ID選擇器指定的樣式，如：#header。
- 類選擇器、屬性選擇器和偽類選擇器（class）： 通過class類選擇器指定的樣式，如：
.container。通過屬性選擇器指定的樣式，如：[type="text"]。通過偽類選擇器指定的樣式，如：:hover。 - 元素選擇器： 指定HTML元素名稱的選擇器，如
div、p。
在優先級相同的情況下，後定義的規則優先級高。
示例：
#header { color: red;}
.container p { color: blue;}
p { color: green;}CSS繼承
CSS繼承是指子元素從父元素繼承一些屬性值的特性。繼承是CSS中的一個重要的特性，它可以簡化樣式的編寫，提高代碼的可維護性。不是所有的CSS屬性都可以繼承，只有一部分屬性被定義為可繼承的。
CSS繼承的屬性主要有以下幾種：
- 文本屬性：font-family、font-size、font-weight、font-style、color、text-decoration、text-align、line-height、letter-spacing、word-spacing
- 顏色屬性：background-color、border-color、color、outline-color
- 邊框屬性：border-width、border-style、border-color
- 盒子模型屬性：margin、padding、width、height、display、float、position、z-index
不具備繼承性的CSS屬性，例如，width、height、margin、padding等盒子模型相關的屬性，定位（position）、浮動（float）、清除浮動（clear）等佈局相關的屬性。
常用的CSS屬性及其作用：
基本屬性 width、height：設置元素的寬度和高度。 margin：設置元素的邊距。 padding：設置元素的內邊距。 color、background-color：設置元素的顏色和背景顏色。 font-size、font-family、font-weight、font-style：設置元素的字體大小、字體、字體粗細和字體樣式。
佈局屬性 display：設置元素的顯示方式。 float：設置元素的浮動方式。 position：設置元素的位置。 top、left、right、bottom：設置元素的頂部、左側、右側和底部位置。 z-index：設置元素的層疊順序。
文字屬性 text-align：設置元素的文本對齊方式。 text-decoration：設置元素的文本修飾。 line-height：設置元素的行高。 font-variant：設置元素的字體變體。 text-transform：設置元素的文本轉換。 letter-spacing、word-spacing：設置元素的字符間距和單詞間距。
邊框屬性 border：設置元素的邊框樣式。 border-width：設置元素的邊框寬度。 border-style：設置元素的邊框樣式。 border-color：設置元素的邊框顏色。 border-radius：設置元素的邊框圓角。
背景屬性 background：設置元素的背景。 background-color：設置元素的背景顏色。 background-image：設置元素的背景圖片。 background-repeat：設置元素的背景圖片重複方式。 background-position：設置元素的背景圖片位置。 background-size：設置元素的背景圖片大小。
過渡屬性 transition：設置元素的過渡效果。 transition-property：設置元素過渡的屬性。 transition-duration：設置元素過渡的時間。 transition-timing-function：設置元素過渡的函數。 transition-delay：設置元素過渡的延遲。