偽類和偽元素 在 CSS 中，偽類和偽元素提供了一種方法，可以選擇和樣式化特定的元素狀態或者特定部分。這些功能使得設計更加靈活和強大。 1. 偽類（Pseudo-classes） 偽類是一種用來選擇元素的特殊狀態的 CSS 選擇器。例如，當元素被鼠標懸停時、當元素是第一個子元素時、或者當元素被聚焦時，偽類都可以用來指定特定樣式。 語法： selector:pseudo...

CSS 變數 CSS 變數（也稱為自定義屬性）使得在樣式表中使用變量來存儲值變得可能。這些變數可以在整個樣式表中重複使用，並且可以根據需要靈活地更改，使得樣式更加一致、可維護和可重複使用。 1. 定義 CSS 變數 CSS 變數的語法很簡單。變數名稱通常以兩個連字號 (--) 開頭，並且可以在任何選擇器的作用域中定義。 語法： :root { --變數名稱: ...

2D 和 3D 變換 CSS 變換（Transforms）允許你改變元素的形狀、大小、位置和旋轉角度，使網頁元素呈現出不同的視覺效果。變換分為兩種：2D 變換和 3D 變換。2D 變換在二維平面上操作，3D 變換則增加了深度感，使元素呈現出三維效果。 1. 2D 變換（2D Transforms） 2D 變換允許你在平面上（X 軸和 Y 軸）改變元素的形狀或位置。常用的 2D 變換函數...

過渡與動畫 CSS 過渡（Transitions）和動畫（Animations）使網頁元素能夠在狀態之間平滑過渡，從而提高用戶體驗和視覺效果。使用過渡和動畫，你可以讓頁面更具動感，並吸引用戶的注意力。 1. CSS 過渡（Transitions） 過渡是一種讓 CSS 屬性在一段時間內平滑改變的技術。它通常用於鼠標懸停、焦點事件或其他狀態變化時的效果。要創建過渡，需要使用 tran...

單位與尺寸 在 CSS 中，單位和尺寸是用來定義元素的大小、間距、字體大小等屬性的數值。正確使用單位可以使網頁設計更加靈活和響應式。CSS 中的單位主要分為兩類：絕對單位和相對單位。 1. 絕對單位 絕對單位（Absolute Units）是固定不變的，通常適合用於印刷設計，但在響應式設計中較少使用。以下是常見的絕對單位： px（像素，Pixels）：最常用的單位之一，1p...

媒體查詢 媒體查詢（Media Queries） 是 CSS3 中引入的一種功能，允許開發者根據不同設備的特性（如螢幕大小、解析度、方向等）來定義不同的樣式。通過媒體查詢，我們可以為各種設備提供針對性的樣式，從而實現響應式網頁設計（Responsive Web Design）。 1. 媒體查詢的基本語法 媒體查詢的語法通常使用 @media 規則，結合媒體類型（如 screen、pri...

CSS Grid 進階 在學習了 CSS Grid 的基礎知識後，接下來我們將深入了解其進階應用。進階使用 CSS Grid，可以更靈活地設計複雜的二維佈局，實現更具創意和響應性的網頁設計。 1. 網格佈局的進階屬性 grid-template: 是 grid-template-rows、grid-template-columns 和 grid-template-areas ...

CSS Grid 基礎 CSS Grid 是一種二維佈局系統，用於在網頁中構建複雜的佈局結構。與 Flexbox 不同，Grid 可以同時處理行和列的佈局，這使得它特別適合需要在兩個維度（水平和垂直）上進行控制的佈局情況，如網格佈局、畫廊、數據面板等。 1. Grid 基本概念 CSS Grid 的佈局結構包括以下主要元素： 網格容器（Grid Container）：設置為...

Flexbox 進階 在了解 Flexbox 的基礎概念後，可以進一步探索一些進階技巧和應用場景，來更靈活地控制佈局。在這一部分，我們將介紹 Flexbox 的進階屬性、常見佈局模式和實踐技巧。 1. Flexbox 進階屬性 除了前面提到的基本屬性外，還有一些進階的 Flexbox 屬性可幫助處理更複雜的佈局需求。 order: 控制彈性項目的排列順序。 ...

Flexbox 基礎 Flexbox（Flexible Box Layout，彈性盒子佈局）是一種一維的 CSS 佈局模型，旨在簡化在一條軸線（水平或垂直）上排列元素的過程。Flexbox 是創建響應式佈局和動態調整元素大小的理想選擇，特別適用於不確定或動態改變的元素數量或大小的佈局情況。 1. Flexbox 的基本概念 Flexbox 佈局主要涉及兩種角色： 彈性容器（F...