每個前端開發者都應該了解的10個CSS函數

CSS（層疊樣式表）是一種樣式表語言，用於描述以 HTML 編寫的文件的外觀和格式。它是 Web 開發的重要組成部分，因為它允許開發人員控制其網站和應用程式的外觀。

在本文中，我們將討論一些最有用的CSS函數，每個前端開發人員都應該熟悉。這些函數可以用於為您的網站或應用程式添加樣式和格式，並可以大大改善使用者體驗。

像其他程式語言一樣，CSS中的函數透過提供一行解決方案來簡化任務。但與其他程式語言不同的是，CSS中函數的結果實際上不會影響網站上的任何邏輯，它只用於影響網站中存在的視覺元素。

下面列出了CSS中可用的許多不同類型的函數：

• 自訂屬性的功能

• #顏色函數

• 偽類選擇器函數

• #動畫函數

• 過濾函數

• 尺寸與縮放函數

• #比較函數

• 邏輯函數

在CSS中還有許多其他類型的函數可用。但本文只討論其中的10個函數供我們使用。

var() 函數

CSS 中唯一可用的自訂屬性函數是 var 函數。每當我們需要在 CSS 中使用自訂屬性時，都會使用 var 函數來引用它

範例

下面給出了使用 var 函數引用自訂屬性的範例 -

html {
   --background-color: teal;
}
div {
   background-color: var(--background-color);
}

calc() 函數

CSS 中用於數學/算術計算的最常見函數是 calc 函數。它與我們上面討論的 var 函數一起廣泛用於動態計算屬性值。

範例

p {
   height: calc(100px – 80px);
}

我們也可以將calc與其他形式單位一起使用，例如em、rem等。

url()函數

您需要新增到網站的資源通常位於多個不同的位置。所以這個時候，我們需要一個函數，可以用來將這些資源載入到CSS檔案中。 url 函數正是這樣做的，它將資源從來源位置連結並載入到目標位置，即 CSS 檔案。您可以連結所有類型的資源，例如圖片、svgs、字體、樣式表等

範例

body{
   background-image: url(/fonts/myFont);
}

rgb()函數

在設計網站時，我們經常需要使用顏色。 CSS 提供了多種使用顏色的方式，例如十六進位代碼、顏色名稱等。一種表示顏色的方式是使用它們的 RGB 值，而 rgb() 函數允許我們將這些十六進位程式碼轉換為 RGB，並在樣式表中使用它們。

範例

html{
   color: rgb(255, 255, 255);
}

我們可以使用另一個函數rgba，它可以用來控制定義顏色的不透明度。

hsl()函數

另一個可用來表示顏色的函數是 hsl 函數。它將顏色定義為色相、飽和度和亮度值。一些開發人員傾向於使用它而不是 RGB。

範例

html{
   color: hsl(100, 50%, 80%);
}

就像 rgb 一樣，hsl 也有一個更改版本 hsla，它也控制定義顏色的不透明度。

blur() 函數

為了對元素進行區分，我們使用模糊函數。

範例

.someClass{
   filter: blur(67%);
}

不透明度（opacity()）函數

元素的不透明度是對應元素的可見性。它指定透過該背景可以看到多少背景。

範例

.someClass{
   filter: opacity(0.75);
}

The nth-child() function

的中文翻譯為：

nth-child() 函數

當我們必須選擇父元素的特定子元素時，我們可以使用nth-child函數。它是一個偽類選擇器函數，並根據您的需求進行了一些更改以針對不同的元素。

範例

.someClass:nth-child(3){
   Color: black;
}

它的一些變化是 nth-last-child，nth-of-type，nth-last-of-type等等。

scale()函數

此函數可讓您控制元素及其子元素的大小。我們也可以定義希望發生此變更的軸。

範例

.someClass{
   transform: scale(100%);
}

translate() 函數

此函數允許您更改元素的位置。我們甚至可以指定元素需要更改到的軸。

範例

.someClass{
   transform: translate(30%);
}

結論

在本文中，我們討論了函數、它們在 CSS 中的用途、它們與函數以及其他程式語言的差異。我們也學習了 CSS 中可用的不同類型的函數。最後我們看到了每個前端開發人員都需要知道的 CSS 中最常用的 10 個函​​數。這些只是一些最受歡迎的功能，但總有更多東西要學習。

以上是每個前端開發者都應該了解的10個CSS函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！