CSS - 自定義屬性

自定義屬性是 CSS 中的變數，用於在樣式表中儲存和重用值。它們與其他程式語言中的變數相同。

在 CSS 中宣告自定義屬性

以下程式碼展示瞭如何在 CSS 中宣告自定義屬性。

:root {
    --primary-color: #3498db;
    --font-size-large: 1.5rem;
}
body{
    background-color: var(--primary-color);
    font-size: var(--font-size-large)
}

在 CSS 中使用自定義屬性時，需要考慮以下幾點。

您可以在樣式表中的任何選擇器中定義自定義屬性，但如果您在**:root**選擇器中定義自定義屬性，則它將在整個樣式表中具有作用域。
var函式用於將變數值應用於任何元素上的 CSS 屬性。
CSS 不允許在媒體查詢或容器查詢中使用自定義屬性，也不能使用它們來設定 CSS 屬性或選擇器的名稱。
自定義屬性區分大小寫。

CSS 自定義屬性示例

以下程式碼展示了在 CSS 中使用自定義屬性的示例。在這裡，您可以看到我們將顏色 '#0044cc' 定義為 blue，因此開發人員可以透過使用變數 blue 來重複使用此顏色。

示例

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        :root {
            --main-bg-color: #f0f0f0;
            --main-text-color: #333;
            --primary-font: 'Arial', sans-serif;
            --padding: 10px;
            --blue: #0044cc;
            --header-text: #fff;
            --container-bg: #fff;
        }
        
        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
            font-family: var(--primary-font);
            padding: var(--padding);
        }
        
        header {
            background-color: var(--blue);
            color: var(--header-text);
            padding: var(--padding);
        }
        
        .container {
            background-color: var(--container-bg);
            padding: var(--padding);
        }
    </style>
</head>

<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <div class="container">
        <p>
            This is a container with a background color 
            defined using variables.
        </p>
    </div>
</body>

</html>

自定義屬性回退值

我們可以為自定義屬性定義回退值，以確保您的 CSS 程式碼仍然有效並在變數未定義的情況下也能工作。

回退值不用於使 CSS 自定義屬性在舊版瀏覽器中工作。它們僅在支援 CSS 自定義屬性的瀏覽器中用作備份，以防變數未定義或具有無效值。

示例

在下面的示例中，我們只為白色定義了顏色陰影，但也在使用黑色變數。由於我們為黑色變數定義了回退值，因此不會出現任何錯誤。

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;/* Shade for white */
            /* Custom Property for black is not defined */
        }
        .box {
            text-align: center;
            padding: 20px;
            background-color: var(--white-color, white);
            color: var(--black-color, black);
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color, black);
            color: var(--white-color, white);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

自定義屬性的繼承

在 CSS 中，自定義屬性預設從父元素繼承到子元素。在父元素上宣告的任何變數都將可用於其所有後代，除非被覆蓋。

.container {
    --main-bg-color: black;
    --text-color: white;
}

.child {
    /* Use inherited value from parent for background color*/
    background-color: var(--main-bg-color);

    /* Overrides the parent’s value for text color*/
    --text-color: lightgrey; 
    color: var(--main-bg-color); 
}

示例

以下示例演示了使用 CSS 自定義屬性以及繼承。

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --white-color: #f0f0f0;
            --black-color: rgb(0, 0, 21);
        }
        .box {
            --box-background: var(--white-color);
            background-color: var(--box-background);
            text-align: center;
            padding: 20px;
        }
        .box1, .box2 {
            display: inline-block;
            background-color: var(--black-color);
            /* Box Background is defined at parent box */
            color: var(--box-background);
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Tutorialspoint</h2>
        <p> How to code a website using HTML and CSS </p>
        <div class="box1"> HTML </div>
        <div class="box2"> CSS </div>
    </div>
</body>

</html>

列印頁面