CSS中的函式

2022-10-04 02:27:12 字數 737 閱讀 4681

隨著css不斷的發展和變革,css語言也想其它的程式語言一樣,具備了變數、邏輯操作和函式等特性,雖然都很是基礎,但卻是在變化在進步.

css中的函式不像其他功能模組有自己獨立的規範,但是他真的存在於css中,而且平常中也有使用css函式,就拿css中最早的函式之一calc()來說吧,如果賦值給width那麼是用來指定寬度的值,但是如果給border-width 那麼就是用來指定邊框的粗細,賦值不同的物件不同,代表的作用也是不同的。

css的函式有著其自身的特徵,簡單地說,css中帶有小括()的一般會被認為是css的函式。在css中使用()的地方主要有css選擇器和css屬性值。比如:

雖然css不能建立自己的函式(自定義函式),也不能具備複雜的邏輯能力,但css函式也具備一些簡單的邏輯處理能力。比如上圖中的:not()選擇器(也稱為函式),就可以過濾掉.active的類名。

css函式主要服務於css的選擇器和屬性,它有著乙個最基本的特性,那就是帶有乙個小括號()標記符,在括號內可以放置值(引數)。

時至今日,w3c規範中並沒有乙份獨立的規範來描述css函式,但這些函式的確存在,並且散落在不同的功能模組中

上圖中的函式大部分都有檔可查,w3c規範對其做出詳細的描述。其中有很多是我們熟悉的,比如偽類選擇器函式、漸變函式、顏色函式、濾鏡函式等,當然也有我們不太熟悉(甚至從未見過的)函式,比如數學函式和其他函式所列的。

css中的函式

如果你使用過 css 預處理器,比如 sass,以下示例你或許碰到過 foo 或者 使用sass變數 width one 100px width two 50px bar其實,css中也帶有如上面這個 一樣的簡單表示式運算 value specified in css foo並且,css的表示式和使...

CSS3中 的 calc 函式

css3 的 calc 函式。這裡的意思是設定寬度比100 的寬度少30px。calc 函式用於動態計算長度值。calc 函式支援 運算 calc 函式使用標準的數 算優先順序規則 在less中使用以下樣式寬度計算錯誤 width calc 100 30px 計算出來是 width 70 分析 px...

CSS3中的 calc 計算函式

calc 函式用於動態計算長度值 clac 巢狀 calc 函式可以巢狀。在函式裡邊,會被視為簡單的括號表示式,如下例所示。foo 函式的計算值如下所示 foo 例項 1.我們可以創造乙個表示式,用乙個百分比減掉乙個畫素值 foo 本例中,foo 元素總是小於它父元素寬度 50px。2.使用 cal...