
- CSS 教程
- CSS - 首頁
- CSS - 路線圖
- CSS - 簡介
- CSS - 語法
- CSS - 選擇器
- CSS - 引入
- CSS - 測量單位
- CSS - 顏色
- CSS - 背景
- CSS - 字型
- CSS - 文字
- CSS - 圖片
- CSS - 連結
- CSS - 表格
- CSS - 邊框
- CSS - 塊級邊框
- CSS - 內聯邊框
- CSS - 外邊距
- CSS - 列表
- CSS - 內邊距
- CSS - 游標
- CSS - 輪廓
- CSS - 尺寸
- CSS - 捲軸
- CSS - 內聯塊
- CSS - 下拉選單
- CSS - 可見性
- CSS - 溢位
- CSS - 清除浮動
- CSS - 浮動
- CSS - 箭頭
- CSS - 調整大小
- CSS - 引號
- CSS - 順序
- CSS - 定位
- CSS - 連字元
- CSS - 懸停
- CSS - 顯示
- CSS - 聚焦
- CSS - 縮放
- CSS - 平移
- CSS - 高度
- CSS - 連字元字元
- CSS - 寬度
- CSS - 不透明度
- CSS - Z 索引
- CSS - 底部
- CSS - 導航欄
- CSS - 覆蓋層
- CSS - 表單
- CSS - 對齊
- CSS - 圖示
- CSS - 圖片庫
- CSS - 註釋
- CSS - 載入器
- CSS - 屬性選擇器
- CSS - 組合器
- CSS - 根元素
- CSS - 盒模型
- CSS - 計數器
- CSS - 剪下
- CSS - 書寫模式
- CSS - Unicode 雙向
- CSS - min-content
- CSS - 全部
- CSS - 內嵌
- CSS - 隔離
- CSS - 滾動溢位
- CSS - Justify Items
- CSS - Justify Self
- CSS - 製表符大小
- CSS - 指標事件
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - 最大塊級尺寸
- CSS - 最小塊級尺寸
- CSS - 混合模式
- CSS - 最大內聯尺寸
- CSS - 最小內聯尺寸
- CSS - 偏移量
- CSS - 口音色
- CSS - 使用者選擇
- CSS 高階
- CSS - 網格
- CSS - 網格佈局
- CSS - Flexbox
- CSS - 可見性
- CSS - 定位
- CSS - 層
- CSS - 偽類
- CSS - 偽元素
- CSS - @規則
- CSS - 文字效果
- CSS - 分頁媒體
- CSS - 列印
- CSS - 佈局
- CSS - 驗證
- CSS - 圖片精靈
- CSS - 重要
- CSS - 資料型別
- CSS3 教程
- CSS3 - 教程
- CSS - 圓角
- CSS - 邊框圖片
- CSS - 多背景
- CSS - 顏色
- CSS - 漸變
- CSS - 盒陰影
- CSS - 盒裝飾中斷
- CSS - 游標顏色
- CSS - 文字陰影
- CSS - 文字
- CSS - 2D 變換
- CSS - 3D 變換
- CSS - 過渡
- CSS - 動畫
- CSS - 多列
- CSS - 盒尺寸
- CSS - 工具提示
- CSS - 按鈕
- CSS - 分頁
- CSS - 變數
- CSS - 媒體查詢
- CSS - 函式
- CSS - 數學函式
- CSS - 遮罩
- CSS - 形狀
- CSS - 樣式圖片
- CSS - 特異性
- CSS - 自定義屬性
- CSS 響應式
- CSS RWD - 簡介
- CSS RWD - 視口
- CSS RWD - 網格檢視
- CSS RWD - 媒體查詢
- CSS RWD - 圖片
- CSS RWD - 影片
- CSS RWD - 框架
- CSS 工具
- CSS - PX 到 EM 轉換器
- CSS - 顏色選擇器和動畫
- CSS 資源
- CSS - 有用資源
- CSS - 討論
CSS - 自定義屬性
自定義屬性是 CSS 中的變數,用於在樣式表中儲存和重用值。它們與其他程式語言中的變數相同。
在 CSS 中宣告自定義屬性
以下程式碼展示瞭如何在 CSS 中宣告自定義屬性。
:root { --primary-color: #3498db; --font-size-large: 1.5rem; } body{ background-color: var(--primary-color); font-size: var(--font-size-large) }
在 CSS 中使用自定義屬性時,需要考慮以下幾點。
- 您可以在樣式表中的任何選擇器中定義自定義屬性,但如果您在**:root**選擇器中定義自定義屬性,則它將在整個樣式表中具有作用域。
- var函式用於將變數值應用於任何元素上的 CSS 屬性。
- CSS 不允許在媒體查詢或容器查詢中使用自定義屬性,也不能使用它們來設定 CSS 屬性或選擇器的名稱。
- 自定義屬性區分大小寫。
CSS 自定義屬性示例
以下程式碼展示了在 CSS 中使用自定義屬性的示例。在這裡,您可以看到我們將顏色 '#0044cc' 定義為 blue,因此開發人員可以透過使用變數 blue 來重複使用此顏色。
示例
<!DOCTYPE html> <html lang="en"> <head> <style> :root { --main-bg-color: #f0f0f0; --main-text-color: #333; --primary-font: 'Arial', sans-serif; --padding: 10px; --blue: #0044cc; --header-text: #fff; --container-bg: #fff; } body { background-color: var(--main-bg-color); color: var(--main-text-color); font-family: var(--primary-font); padding: var(--padding); } header { background-color: var(--blue); color: var(--header-text); padding: var(--padding); } .container { background-color: var(--container-bg); padding: var(--padding); } </style> </head> <body> <header> <h1>Welcome to My Website</h1> </header> <div class="container"> <p> This is a container with a background color defined using variables. </p> </div> </body> </html>
自定義屬性回退值
我們可以為自定義屬性定義回退值,以確保您的 CSS 程式碼仍然有效並在變數未定義的情況下也能工作。
回退值不用於使 CSS 自定義屬性在舊版瀏覽器中工作。它們僅在支援 CSS 自定義屬性的瀏覽器中用作備份,以防變數未定義或具有無效值。
示例
在下面的示例中,我們只為白色定義了顏色陰影,但也在使用黑色變數。由於我們為黑色變數定義了回退值,因此不會出現任何錯誤。
<!DOCTYPE html> <html> <head> <style> :root { --white-color: #f0f0f0;/* Shade for white */ /* Custom Property for black is not defined */ } .box { text-align: center; padding: 20px; background-color: var(--white-color, white); color: var(--black-color, black); } .box1, .box2 { display: inline-block; background-color: var(--black-color, black); color: var(--white-color, white); width: 100px; height: 50px; } </style> </head> <body> <div class="box"> <h2>Tutorialspoint</h2> <p> How to code a website using HTML and CSS </p> <div class="box1"> HTML </div> <div class="box2"> CSS </div> </div> </body> </html>
自定義屬性的繼承
在 CSS 中,自定義屬性預設從父元素繼承到子元素。在父元素上宣告的任何變數都將可用於其所有後代,除非被覆蓋。
.container { --main-bg-color: black; --text-color: white; } .child { /* Use inherited value from parent for background color*/ background-color: var(--main-bg-color); /* Overrides the parent’s value for text color*/ --text-color: lightgrey; color: var(--main-bg-color); }
示例
以下示例演示了使用 CSS 自定義屬性以及繼承。
<!DOCTYPE html> <html> <head> <style> :root { --white-color: #f0f0f0; --black-color: rgb(0, 0, 21); } .box { --box-background: var(--white-color); background-color: var(--box-background); text-align: center; padding: 20px; } .box1, .box2 { display: inline-block; background-color: var(--black-color); /* Box Background is defined at parent box */ color: var(--box-background); width: 100px; height: 50px; } </style> </head> <body> <div class="box"> <h2>Tutorialspoint</h2> <p> How to code a website using HTML and CSS </p> <div class="box1"> HTML </div> <div class="box2"> CSS </div> </div> </body> </html>
廣告