CSS自定義屬性

2021-10-02 09:00:17 字數 574 閱讀 4302

1.自定義屬性的使用方法

自定義屬性分為:

區域性自定義屬性

全域性自定義屬性

使用 「–」宣告自定義屬性 使用兩個 「-」宣告

例如: --bg-color: red 注意這裡有乙個:(冒號)

這樣就宣告了乙個自定義屬性 bg-color==和red

宣告後如何使用:

var(–自定義屬性名) 括號還是要加上兩個「-」

background:var(–bg-color)

這樣等同於 --bg-color=red

那麼我們為什麼要這樣宣告更麻煩

有些情況下這樣會更加便利

自定義屬性的方法就類似程式設計中的全域性常量 比如π 宣告後一處修改處處修改

下面介紹一下全域性和區域性的宣告方式

//在root下宣告就是全域性

:root

img

2.自定義屬性目前的相容性

CSS自定義屬性Expression

css的出現使網頁製作者在對網頁元素的控制方便許多,當然,有利必有弊,css只能對顏色 大小 距離等靜態樣式有效,對於要實現某些html元素的動態樣式就顯得有些力不從心。有了css的自定義屬性expression,可以自己定義屬性,自己在屬性裡寫需要的 這樣就可以結合css的特性與js特效,實現對整...

CSS 自定義屬性(變數)

var 函式用來獲取和使用 css 變數 css variables var 複製 語法 root 複製 用途 相容性目前沒有瀏覽器支援,chrome 之前支援後來又移除 參考通過下面的方式來宣告變數 variable name variable value 複製 變數名區分大小寫,變數值可以是顏色...

學習CSS自定義屬性

css變數 1.宣告css變數 body 有效 foo 4.變數的作用域 變數的作用域與css層疊樣式的規則一致 blue green red全域性變數通常放在 root 裡面 基本的語法就這些,詳情請看 1.宣告css變數 body 有效 foo 4.變數的作用域 變數的作用域與css層疊樣式的規...