CSS中關於變量的基本教程詳解
CSS中的變量給了我們諸多優點:方便、代碼重用、更可靠的代碼庫和提升防錯能力。
CSS Code複製內容到剪貼板 :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); }
基礎
當使用CSS變量時,你應該瞭解的三個主要組成:
自定義屬性
var()函數
:root偽類
自定義屬性
你已經知道了一些CSS的標準屬性,如color,margin,width和font-size。
下面的示例使用了CSS的color屬性:
CSS Code複製內容到剪貼板 body{ color:#000000;/*The"color"CSSproperty*/ }
自定義屬性僅意味着我們(創建CSS文件的人)去定義屬性的名字。
為了自定義一個屬性名,我們需要用--作為前綴。
如果我們要創建一個值為黑色的、名為text-color的自定義屬性,可以這樣做:
CSS Code複製內容到剪貼板 :root{ --text-color:#000000;/*Acustompropertynamed"text-color"*/ }
var()函數
為了應用自定義屬性,需要利用var()函數,否則瀏覽器不知道他們代表什麼。
如果想要在p、h1和h2中的樣式中使用--text-color,可以這樣使用var()函數:
CSS Code複製內容到剪貼板 :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; }
其等價於:
CSS Code複製內容到剪貼板 p{ color:#000000; font-size:16px; } h1{ color:#000000; font-size:42px; } h2{ color:#000000; font-size:36px; }
:root偽類
我們需要一個地方來放置自定義屬性。雖然可以在任何樣式規則中指定自定義屬性,但到處定義屬性並不是一個好主意,這對CSS的可維護性和可閲讀性是一個挑戰。
:root 偽類代表了HTML文檔的根元素,這是一個放置自定義屬性的好位置,因為我們可以通過其他更具特異性的選擇器來覆蓋自定義屬性值。
CSS變量的好處
可維護性
在一個Web開發項目中,我們經常重複使用一個特定的CSS屬性值:
CSS Code複製內容到剪貼板 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; } out{ margin-bottom:20px; border:3pxsolidgray; border-radius:5px; }
當需要改變某些屬性值時,問題就會暴露出來了。
如果我們手動的改變屬性值,尤其是當CSS文件很大時,不僅會花費大量時間,還可能會範一些錯誤。同樣的,如果我們執行一個批處理查找和替換,就可能會無意中影響其他樣式規則。
我們可以使用CSS變量重寫:
CSS Code複製內容到剪貼板 :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; } out{ margin-bottom:var(--base-bottombottom-margin); border:1pxsolidgray; border-radius:5px; color:var(--text-color); }
假設你現在的客户説由於文本顏色太亮,導致文本難以閲讀,想要改變文本顏色,此時,我們只需要更新一行CSS規則:
CSS Code複製內容到剪貼板 --text-color:black;
提高CSS的可讀性
自定義屬性會使樣式表更加易讀,也會使CSS屬性聲明更有語義。
將這個聲明
CSS Code複製內容到剪貼板 background-color:yellow;
和下面的聲明比較一下
CSS Code複製內容到剪貼板 background-color:var(--highlight-color); font-size:var(--base-font-size);
像yellow和18px一類的屬性值並沒有給我們任何有用的上下文信息,但是當我們閲讀如--base-font-size和--highlight-color一樣的屬性名時,即便在其他人的代碼,我們都能馬上知道這個屬性值是在做什麼。
要注意的事
大小寫敏感
自定義屬性是大小寫敏感的(和普通的CSS規則不一樣)
CSS Code複製內容到剪貼板 :root{ --main-bg-color:green; --MAIN-BG-COLOR:RED; } { background-color:var(--main-bg-color);/*greenbackground*/ } le{ BACKGROUND-COLOR:VAR(--MAIN-BG-COLOR);/*redbackground*/ border-radius:9999em; } , le{ height:100px; width:100px; margin-top:25px; box-sizing:padding-box; padding-top:40px; text-align:center; }
自定義屬性值的解析
當重複聲明自定義屬性時,其賦值遵循通常的`CSS層疊和繼承規則。例如下面的示例:
HTML
XML/HTML Code複製內容到剪貼板Link
CSS
CSS Code複製內容到剪貼板 :root{ --highlight-color:yellow; } body{ --highlight-color:green; } ainer{ --highlight-color:red; } a{ color:var(--highlight-color); }
當移除ainer規則時,鏈接的顏色值將是green。
回退值
當使用var()函數時,可以分配一個回退的屬性值,其作為一個額外參數和第一個參數用,隔開。看下面的示例:
HTML
XML/HTML Code複製內容到剪貼板ABox
CSS
CSS Code複製內容到剪貼板 div{ --container-bg-color:black; } { width:100px; height:100px; padding-top:40px; box-sizing:padding-box; background-color:var(--container-bf-color,red); color:white; text-align:center; }
因為給var()傳遞了一個回退值參數,所以div的背景色最中被渲染成紅色。
無效值
謹防給CSS屬性分配錯誤類型的值。
在下面的示例中,由於自定義屬性--small-button被賦予一個長度單位,它被用在l-button樣式中是無效的(譯者注:因為color的屬性類型值出錯)
CSS Code複製內容到剪貼板 :root{ --small-button:200px; } l-button{ color:var(--small-button); }
避免這種情況的一個好方式是想出具有描述性的自定義屬性名稱。例如將上面的自定義屬性命名為--small-button-width
瀏覽器對CSS變量的支持
CSS變量用起來很方便,但是瀏覽器對其支持情況不太好:
-
WAP的簡介
WAP協議被設計用來在無線客户端(比如移動電話)上展示因特網內容。您應當具備的基礎知識在繼續學習之前,您需要對下面的知識有基本的瞭解:WWW,HTML以及有關網頁構建的基礎知識JavaScriptXML如果您希望首先學習這些項目,請在我們的首頁訪問這些教程。什麼是WAP?無線產...
-
JavaScript數據結構與算法中集合的實現
集合(Set)説起集合,就想起剛進高中時,數學第一課講的就是集合。因此在學習集合這種數據結構時,倍感親切。集合的基本性質有一條:集合中元素是不重複的。因為這種性質,所以我們選用了對象來作為集合的容器,而非數組。雖然數組也能做到所有不重複,但終究過於繁瑣,不如集...
-
ASP.NET新型的投票結果顯示方法
一個投票功能模塊少不了查看投票結果,用進度條顯示各個投票結果可以起到一目瞭然的效果。以下是我的方法,請大家不吝賜教:1:做一張圖片用於做進度條,只需要很小的一個圖片就可以了,如高20px,寬1px。2:在要顯示進度條的單元格中插入image控件,其imageUrl設置為已做好的...
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...