什么是 CSS 自定义属性？

在本文中，我们将了解 CSS 自定义属性及其实现。 CSS 自定义属性也称为 CSS 变量或级联变量。这些实体包含将在整个文档中重用的特定值，并且可以使用 var()函数访问（例如，color:(–primary-color);）。前缀为 – 的属性名称描述了自定义属性，它们的值将在使用 var()函数的其他声明中使用。

通常，当我们为可能包含大量 CSS 属性的大型网站设计样式时，很可能我们多次使用了类似的值。管理大尺寸的样式属性真的很困难。为了处理这个问题，自定义属性允许我们在一个地方声明一个变量，可以引用到多个其他地方。这将减少管理代码的工作量，因为我们可以通过在一个地方进行更改来轻松地更新值。

句法：

• 对于变量：

var( --custom-name, value )

参数： var()函数接受下面列出的两个参数：

• –custom-name：它是接受自定义属性名称的必需参数。
• value：可选参数。它接受自定义属性无效时使用的后备值。

句法：

• 对于自定义属性：

--custom-name: values;

分配给自定义属性的值将与一个或多个标记的任何序列匹配，直到序列中断并且不再包含任何有效标记。

我们将创建一些 CSS 变量并定义这些 CSS 变量的值，使用它们来设置 HTML 组件的样式。

示例 1：在此示例中，我们将为背景颜色、主要字体颜色和标题属性创建 CSS 变量。

HTML

   

    

   

    
GeeksForGeeks
    
A Computer Science portal for geeks.
   
    click here

   

输出：

示例 2：在此示例中，我们将使用 box-shadow-color 属性在鼠标悬停时创建阴影效果。

HTML

  

    

  

    
Hover me to see the effect
    
GeeksforGeeks

  

输出：

示例 3：为了了解 CSS 自定义属性的重要性，我们将创建一个网页，在其中我们只需使用 CSS 自定义属性和一些普通的 JavaScript 即可更改容器的主题。

首先，我们将为深色主题和浅色主题定义一些样式属性。默认情况下，我们将容器的主题设置为深色。我们还将使用主题 CSS 自定义属性来设置我们的 HTML 网页元素的样式。

HTML

  

    
        :root {
            --background-color: #000;
            --primary-font-color: #302AE6;
            --heading-color: #14ac60;
            --link-color: #ae2ab3;
        }
  
        /* Light theme */
        [theme="light"] {
            --background-color: #eee;
            --primary-font-color: #000;
            --heading-color: #303030;
            --link-color: #302AE6;
        }
  
        .container {
            background-color: var(--background-color);
            height: 400px;
            width: 300px;
            border: 2px solid green;
        }
  
        h1 {
            color: var(--heading-color);
        }
  
        p {
            color: var(--primary-font-color);
        }
  
        a {
            color: var(--link-color);
        }
    

  

    
        
            GeeksForGeeks
  
            A Computer Science portal for geeks.
  
            click here
        
        
            Check the checkbox to change theme
            
        
    
  
    
        const Switch = document.querySelector(
            '.checkbox-theme input[type="checkbox"]');
  
        /* Function to change theme*/
        function changeTheme(e) {
            if (e.target.checked) {
                document.documentElement
                    .setAttribute('theme', 'light');
            }
            else {
                document.documentElement
                    .setAttribute('theme', 'dark');
            }
        }
        Switch.addEventListener(
            'change', changeTheme, false);
    

  

输出：

支持的浏览器：

• 谷歌浏览器 49.0
• 微软边缘 15.0
• 火狐 31.0
• 野生动物园 9.1
• 歌剧 36.0