CSS變數教程

2021-10-25 15:24:35 字數 764 閱讀 9979

css也是支援自定義變數的,而且功能也很強大

主要作用:

1.提採樣式中重複的**值

2.簡化相似的**

css變數,又叫做「css自定義屬性」

css變數宣告的時候,變數名前面要加兩根連詞線(–)

body
–變數名:屬性值

(注意:變數名大小寫敏感)

是用於讀取變數的

a
var()函式還可以使用第二個引數,表示預設值,如果該變數不存在的時候,就會使用這個預設值

color: var(--foo, #7f583f);
當變數值是數值,不能直接與數值單位直接連用

.foo
這裡必須使用calc()函式,將他們連線

.foo
css變數讀取的時候,優先順序最高的宣告生效,這與css層疊的規則一樣,也就是說變數的作用域就是它所在的選擇器的有效範圍

.a 

.b .c

.d

這裡是a包裹b,b包裹c,c包裹d的結構,定義了乙個–c的變數

d元素讀取的時候,加入了乙個預設值red,如果讀取不到–c的話,預設是red

當我們將d元素的–c:yellow注釋掉的話,會顯示上一級定義的變數的值green,層層向上

因此,一般會將全域性變數放在根元素:root裡面,確保任何選擇器都能讀取

css使用變數 使用CSS變數優化CSS長度

css使用變數 您是否曾經不得不編寫大量css,卻迷失了自己的 如果您像我一樣,有時您必須將顏色或文字大小的十六進製制 儲存在可以訪問和重複使用的位置。在本文中,我將分享有關如何使用css變數優化css的知識。css變數是我們定義的值,可在整個css文件中重複使用。css變數 也稱為自定義屬性 在乙...

CSS教程 CSS定位屬性

css 為定位和浮動提供了一些屬性,利用這些屬性,可以建立列式布局,將布局的一部分與另一部分重疊,還可以完成多年來通常需要使用多個 才能完成的任務。定位的基本思想很簡單,它允許你定義元素框相對於其正常位置應該出現的位置,或者相對于父元素 另乙個元素甚至瀏覽器視窗本身的位置。顯然,這個功能非常強大,也...

CSS設計教程

veerle pieters發布了乙個名為 設計css模板 的教程系列,它對許多現有教程進行了令人耳目一新的更改,首先集中於設計,最後只討論了使用css的實現。它分為四個部分 第1 部分 第2 部分 第3 部分 第4部分 而設計的來講,我碰到乙個很好的例子,今天的新鮮css設計排在跋terhorst...