CSS变量与函数的运用！

发布时间：2024-11-19 18:28:41

CSS变量和函数

一、var()：CSS变量的使用

var() 是 CSS 中用于调用 自定义属性（CSS变量） 的函数，类似于编程中的变量，能够让样式更加灵活和可维护。

1.基本语法

:root {
    --main-color: #008cba; /* 定义CSS变量 */
    --font-size: 16px;
}

.box {
    background-color: var(--main-color); /* 使用CSS变量 */
    font-size: var(--font-size);
}

解释：

--main-color 和 --font-size 是在 CSS 中定义的变量（变量名称以两个连字符 -- 开头）。 var(--变量名) 用来引用这些变量，应用到样式中。

2.特点

灵活性：改动变量的值可以全局生效，避免逐一修改样式。 作用域：CSS变量有作用域，可以被限定在某个选择器中，也可以全局定义在 :root 中。 默认值：支持提供备用值，当变量未定义时使用默认值：

css    color: var(--secondary-color, black); /* 如果 --secondary-color 未定义，使用 black */

3. 实用案例

颜色主题切换

```css    :root {        --background: white;        --text-color: black;    }

.dark-theme {        --background: black;        --text-color: white;    }

body {        background-color: var(--background);        color: var(--text-color);    }    ```

通过切换 class="dark-theme" 可以轻松实现深色主题。

响应式设计

```css    :root {        --font-size: 16px;    }

@media (max-width: 600px) {        :root {            --font-size: 14px;        }    }

p {        font-size: var(--font-size);    }    ```

通过改变变量值实现对小屏幕的自适应。

二、attr()：HTML属性的值用于样式或内容

attr() 是 CSS 中的一种函数，用来获取 HTML属性的值，并将其用作内容或样式的一部分。

1.基本语法

.box::before {
    content: attr(data-value); /* 获取HTML属性值 */
}

attr(attribute-name) 会获取指定元素的某个属性值。 常用场景是将属性值动态显示在页面上，特别是用在 content 属性中。

2.实用案例

动态内容展示

假设有如下 HTML：

```html  

```

我们用 CSS 动态展示 data-value 的值：

css    .box::after {        content: attr(data-value); /* 获取 data-value 的值 */        font-size: 16px;        color: #333;    }

效果：在 .box 的后面会显示其 data-value 的内容（200）。

链接属性显示

HTML：

html    <a href="https://example.com" class="link">Visit</a>

CSS：

css    .link::after {        content: " (" attr(href) ")"; /* 显示链接地址 */        font-size: 14px;        color: gray;    }

效果：链接文字后面会显示其 href 属性的内容：

结合伪类制作提示框

HTML：

html    <button class="tooltip" data-tooltip="点我！">Hover me</button>

CSS：

```css    .tooltip {        position: relative;    }

.tooltip::after {        content: attr(data-tooltip); / 动态获取提示文本 /        position: absolute;        top: -30px;        left: 50%;        transform: translateX(-50%);        background-color: #333;        color: #fff;        padding: 5px 10px;        border-radius: 4px;        white-space: nowrap;        font-size: 12px;        display: none;    }

.tooltip:hover::after {        display: block; / 鼠标悬停时显示 /    }    ```

效果：当鼠标悬停在按钮上时，显示提示框内容。

3.注意事项

attr() 主要用于 content 属性，不能直接应用于样式值（如宽高、颜色等）。 不支持这样写：width: attr(data-width)。 使用前要确保 HTML 属性存在，否则会返回空字符串。

三、对比 var() 和 attr()

| 功能         | var()                                  | attr()                       | | ---------------- | ---------------------------------------- | ------------------------------ | | 作用         | 调用 CSS 变量的值                      | 获取 HTML 属性的值             | | 灵活性       | 适合全局共享样式，如主题切换、响应式设计 | 用于动态显示或读取 HTML 属性值 | | 支持范围     | 任意 CSS 属性                          | 仅限 content 属性            | | 实际应用场景 | 配置全局变量、动态控制主题               | 动态显示 data-* 等属性值     |

评论数：0