前端開發者必須掌握的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檔案。您可以連結所有型別的資源，例如影像、SVG、字型、樣式表等。

示例

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() 函式

要對元素應用模糊效果，我們使用blur函式。

示例

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

opacity() 函式

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

示例

.someClass{
   filter: opacity(0.75);
}

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個函式。這些只是一些最流行的函式，但總有更多內容需要學習。