*** css變數的宣告 **
變數名前加兩根連線詞( -- )
body
各種值都可以放入css變數
變數名大小寫敏感
*** 變數讀取 ***
var()函式
body
var()函式可以使用第二個引數,表示變數的預設值。如果該變數不存在,就會使用這個預設值
color:var(--foo,#ccc)
var()函式也可以用在變數的宣告
body
注意,變數名只能用作於屬性值,不能用於屬性名
body
*** 變數值的型別 ***
如果變數值是乙個字串,可以與其他字串拼接
--bar:'hello';
--foo:var(--bar)'world';
body:after
如果變數值是數值,不能與數值單位直接連用。
.foo
數值與單位直接寫在一起是無效的。必須使用calc()函式連線
.foo
如果變數值帶有單位,就不能寫成字串
.foo
.foo
*** 作用域 ***
同乙個css變數,可以在多個選擇器內宣告。讀取的時候,優先順序最高的宣告有效。
藍色綠色
紅色*** 響應式布局 ***
可以在響應式布局的media命令裡面宣告變數,使得不同的螢幕寬度有不同的變數值
body
a@media screen and (min-widthl768px)
}*** 相容處理 ***
對於不支援css變數的瀏覽器,可以採用下面的寫法
a
也可以使用 @support 命令進行檢測
@supports((--a:0))
@supports(not(--a:0))
*** js操作 ***
js也可以檢測瀏覽器是否支援css變數
const issupported=
window.css &&
window.css.supports &&
window.css.supports('--a',0)
if(issupported)else
js操作css變數的寫法
//設定變數
document.body.style.setproperty('--primary','#aaa');
//讀取變數
document.body.style.getpropertyvlaue('--primary').trim();
//刪除變數
document.body.style.removeproperty('--primary');
eg:
事件監聽,事件資訊被存入css變數
const docstyle=document.docuemntelement.style;
document.addeventlistener('mousemove',(e)=>)
以下**中,--foo的值在css裡面是無效語句,但是可以被js讀取。這意味著,可以把樣式設定在css變數中,讓js讀取
--foo:if(x>5) this.width=10;
外邊距重疊 css冷知識
外邊距重疊就是 margin collapse。相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距 摺疊結果遵循下列計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值 兩個相鄰的外邊距都...
css使用變數 使用CSS變數優化CSS長度
css使用變數 您是否曾經不得不編寫大量css，卻迷失了自己的 如果您像我一樣，有時您必須將顏色或文字大小的十六進製制 儲存在可以訪問和重複使用的位置。在本文中，我將分享有關如何使用css變數優化css的知識。css變數是我們定義的值，可在整個css文件中重複使用。css變數 也稱為自定義屬性 在乙...
CSS基礎 使用CSS變數
當我們在開發較大的css檔案時，會遇到使用重複變數的情況，此時可以使用css變數來簡化開發，具體看 示例。宣告css變數 element 使用css變數 element 這裡使用mdn的例子進行說明 one two three four five 我們可以看到上述 中都重複用到了 backgroun...