CSS中變量的基本教程詳解

時(shí)間：2024-10-20 03:43:40 CSS 我要投稿

相關(guān)推薦

CSS中關(guān)于變量的基本教程詳解

　　CSS中的變量給了我們諸多優(yōu)點(diǎn)：方便、代碼重用、更可靠的代碼庫(kù)和提升防錯(cuò)能力。

　　示例

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --base-font-size:16px; --link-color:#6495ed; } p{ font-size:var(--base-font-size); } a{ font-size:var(--base-font-size); color:var(--link-color); }

　　基礎(chǔ)

　　當(dāng)使用CSS變量時(shí)，你應(yīng)該了解的三個(gè)主要組成：

　　自定義屬性

　　var()函數(shù)

　　:root偽類

　　自定義屬性

　　你已經(jīng)知道了一些CSS的標(biāo)準(zhǔn)屬性，如color,margin,width和font-size。

　　下面的示例使用了CSS的color屬性：

　　CSS Code復(fù)制內(nèi)容到剪貼板 body{ color:#000000;/*The"color"CSSproperty*/ }

　　自定義屬性僅意味著我們（創(chuàng)建CSS文件的人）去定義屬性的名字。

　　為了自定義一個(gè)屬性名，我們需要用--作為前綴。

　　如果我們要?jiǎng)?chuàng)建一個(gè)值為黑色的、名為text-color的自定義屬性，可以這樣做：

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --text-color:#000000;/*Acustompropertynamed"text-color"*/ }

　　var()函數(shù)

　　為了應(yīng)用自定義屬性，需要利用var()函數(shù)，否則瀏覽器不知道他們代表什么。

　　如果想要在p、h1和h2中的樣式中使用--text-color，可以這樣使用var()函數(shù)：

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --text-color:#000000; } p{ color:var(--text-color); font-size:16px; } h1{ color:var(--text-color); font-size:42px; } h2{ color:var(--text-color); font-size:36px; }

　　其等價(jià)于：

　　CSS Code復(fù)制內(nèi)容到剪貼板 p{ color:#000000; font-size:16px; } h1{ color:#000000; font-size:42px; } h2{ color:#000000; font-size:36px; }

　　:root偽類

　　我們需要一個(gè)地方來放置自定義屬性。雖然可以在任何樣式規(guī)則中指定自定義屬性，但到處定義屬性并不是一個(gè)好主意，這對(duì)CSS的可維護(hù)性和可閱讀性是一個(gè)挑戰(zhàn)。

　　:root 偽類代表了HTML文檔的根元素，這是一個(gè)放置自定義屬性的好位置，因?yàn)槲覀兛梢酝ㄟ^其他更具特異性的選擇器來覆蓋自定義屬性值。

　　CSS變量的好處

　　可維護(hù)性

　　在一個(gè)Web開發(fā)項(xiàng)目中，我們經(jīng)常重復(fù)使用一個(gè)特定的CSS屬性值：

　　CSS Code復(fù)制內(nèi)容到剪貼板 h1{ margin-bottom:20px; font-size:42px; line-height:120%; color:gray; } p{ margin-bottom:20px; font-size:18px; line-height:120%; color:gray; } img{ margin-bottom:20px; border:1pxsolidgray; } .callout{ margin-bottom:20px; border:3pxsolidgray; border-radius:5px; }

　　當(dāng)需要改變某些屬性值時(shí)，問題就會(huì)暴露出來了。

　　如果我們手動(dòng)的改變屬性值，尤其是當(dāng)CSS文件很大時(shí)，不僅會(huì)花費(fèi)大量時(shí)間，還可能會(huì)范一些錯(cuò)誤。同樣的，如果我們執(zhí)行一個(gè)批處理查找和替換,就可能會(huì)無意中影響其他樣式規(guī)則。

　　我們可以使用CSS變量重寫：

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --base-bottombottom-margin:20px; --base-line-height:120%; --text-color:gray; } h1{ margin-bottom:var(--base-bottombottom-margin); font-size:42px; line-height:var(--base-line-height); color:var(--text-color); } p{ margin-bottom:var(--base-bottombottom-margin); font-size:18px; line-height:var(--base-line-height); color:var(--text-color); } img{ margin-bottom:var(--base-bottombottom-margin); border:1pxsolidgray; } .callout{ margin-bottom:var(--base-bottombottom-margin); border:1pxsolidgray; border-radius:5px; color:var(--text-color); }

　　假設(shè)你現(xiàn)在的客戶說由于文本顏色太亮，導(dǎo)致文本難以閱讀，想要改變文本顏色，此時(shí)，我們只需要更新一行CSS規(guī)則：

　　CSS Code復(fù)制內(nèi)容到剪貼板 --text-color:black;

　　提高CSS的可讀性

　　自定義屬性會(huì)使樣式表更加易讀，也會(huì)使CSS屬性聲明更有語(yǔ)義。

　　將這個(gè)聲明

　　CSS Code復(fù)制內(nèi)容到剪貼板 background-color:yellow;

　　和下面的聲明比較一下

　　CSS Code復(fù)制內(nèi)容到剪貼板 background-color:var(--highlight-color); font-size:var(--base-font-size);

　　像yellow和18px一類的屬性值并沒有給我們?nèi)魏斡杏玫纳舷挛男畔�，但是�?dāng)我們閱讀如--base-font-size和--highlight-color一樣的屬性名時(shí)，即便在其他人的代碼，我們都能馬上知道這個(gè)屬性值是在做什么。

　　要注意的事

　　大小寫敏感

　　自定義屬性是大小寫敏感的（和普通的CSS規(guī)則不一樣）

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --main-bg-color:green; --MAIN-BG-COLOR:RED; } .box{ background-color:var(--main-bg-color);/*greenbackground*/ } .circle{ BACKGROUND-COLOR:VAR(--MAIN-BG-COLOR);/*redbackground*/ border-radius:9999em; } .box, .circle{ height:100px; width:100px; margin-top:25px; box-sizing:padding-box; padding-top:40px; text-align:center; }

　　自定義屬性值的解析

　　當(dāng)重復(fù)聲明自定義屬性時(shí)，其賦值遵循通常的CSS層疊和繼承規(guī)則。例如下面的示例：

　　HTML

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板Link

　　CSS

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --highlight-color:yellow; } body{ --highlight-color:green; } .container{ --highlight-color:red; } a{ color:var(--highlight-color); }

　　當(dāng)移除.container規(guī)則時(shí)，鏈接的顏色值將是green。

　　回退值

　　當(dāng)使用var()函數(shù)時(shí)，可以分配一個(gè)回退的屬性值，其作為一個(gè)額外參數(shù)和第一個(gè)參數(shù)用,隔開�？聪旅娴氖纠�

　　HTML

　　XML/HTML Code復(fù)制內(nèi)容到剪貼板ABox

　　CSS

　　CSS Code復(fù)制內(nèi)容到剪貼板 div{ --container-bg-color:black; } .box{ width:100px; height:100px; padding-top:40px; box-sizing:padding-box; background-color:var(--container-bf-color,red); color:white; text-align:center; }

　　因?yàn)榻ovar()傳遞了一個(gè)回退值參數(shù)，所以div的背景色最中被渲染成紅色。

　　無效值

　　謹(jǐn)防給CSS屬性分配錯(cuò)誤類型的值。

　　在下面的示例中，由于自定義屬性--small-button被賦予一個(gè)長(zhǎng)度單位，它被用在.small-button樣式中是無效的(譯者注：因?yàn)閏olor的屬性類型值出錯(cuò))

　　CSS Code復(fù)制內(nèi)容到剪貼板 :root{ --small-button:200px; } .small-button{ color:var(--small-button); }

　　避免這種情況的一個(gè)好方式是想出具有描述性的自定義屬性名稱。例如將上面的自定義屬性命名為--small-button-width

　　瀏覽器對(duì)CSS變量的支持

　　CSS變量用起來很方便，但是瀏覽器對(duì)其支持情況不太好：

【CSS中變量的基本教程詳解】相關(guān)文章：

css屬性定位教程07-23

CSS入門教程01-25

朝鮮族舞蹈基本動(dòng)作教程詳解09-23