mins Dream

CSS 變數

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

2D 和 3D 變換(Transforms)

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

CSS 過渡(Transitions)和動畫(Animations)

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

單位與尺寸

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

媒體查詢(Media Queries)

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