使用 CSS 自定义属性

这篇具有很好参考价值的文章主要介绍了使用 CSS 自定义属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们常见的网站日夜间模式的变化,其实用到了 css 自定义属性。

 CSS 自定义属性(也称为 CSS 变量)是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值,使得样式更易于维护和修改。

:root {
  --main-color: #06D6A;
}

在这个例子中,我们定义了一个名为 --main-color 的 CSS 自定义属性,并将其值设置为 #06D6A

然后,在任何需要使用这个颜色的地方,你可以使用 var() 函数来使用这个自定义属性,像这样:

body {
  background-color: var(--main-color);
}

在这个例子中,背景颜色会使用在 :root 中定义的 --main-color 属性的值,即 #06D6A

CSS 自定义属性可以帮助你更有效地组织和复用样式,使你的 CSS 更加简洁和易于维护。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container1,
        .container2 {
            display: flex;
            margin: 0 auto;
            width: 550px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid #cccccc;
        }

        .container1 div,
        .container2 div {
            flex: 1;
            border: 1px solid #cccccc;
        }

        /* 定义 css变量 选择器定义变量的范围 */
        html {
            --main-color: skyblue;
        }

        .container1 div {
            /* var() 输入css变量 */
            background-color: var(--main-color);
        }

        .container2 div {
            /* var() 输入css变量 */
            color: var(--main-color);
        }
    </style>
</head>

<body>
    <div class="container1">
        <div>box1</div>
        <div>box2</div>
        <div>box3</div>
    </div>
    <div class="container2">
        <div>box4</div>
        <div>box5</div>
        <div>box6</div>
    </div>
</body>

</html>

 最后结果:

使用 CSS 自定义属性,css样式,css,前端文章来源地址https://www.toymoban.com/news/detail-609275.html

到了这里,关于使用 CSS 自定义属性的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)
  • 使用 CSS 自定义属性

    我们常见的网站日夜间模式的变化,其实用到了 css 自定义属性。   CSS 自定义属性(也称为 CSS 变量)是一种在 CSS 中预定义和使用的变量。它们提供了一种简洁和灵活的方式来通过多个 CSS 规则共享相同的值,使得样式更易于维护和修改。 在这个例子中,我们定义了一个名

    2024年02月15日
    浏览(32)
  • 如何使用自定义的CSS规则来定义特定类型的元素样式

    当我们需要对某些特定类型的元素进行样式定义时,可以使用自定义的CSS规则来实现。下面我们将从新手的角度,用幽默的语气来解释如何使用自定义CSS规则来定义特定类型的元素样式。 首先,让我们来看看如何使用自定义CSS规则来定义特定类型的元素样式。假设我们有一个

    2024年02月05日
    浏览(51)
  • 前端使用css去除input框的默认样式

    2024年01月23日
    浏览(60)
  • 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

    目录 一、CSS声明全局变量 二、使用el plus 和 el ui的自带样式 1、element plus—— var.scss位置 2、element ui—— var.scss位置 三、修改el plus 和 el ui中的自定义样式变量(方法一致) 本萌新最近在写网页时使用到了element plus中自带的CSS全局样式定义,本文将从CSS声明全局变量的方法出

    2024年01月22日
    浏览(58)
  • CSS 常用样式 之字体属性

    font-weight(字体粗细) 字体粗细用于设置文本的粗细程度,可以使用如下的值: normal:正常字体(默认) bold:加粗字体 bolder:更加加粗 lighter:更加细 代码实例如下: font-style(字体风格) 字体风格用于设置文本的风格,可以使用如下的值: normal:正常字体(默认) ita

    2024年02月07日
    浏览(55)
  • 大前端04-固定组件在屏幕位置,随着滑轮滚动——使用css样式:position

    在遇到一些很长,很长的页面时候我们希望组件能够跟随用户操作,悬浮在固定位置,因此我们可以使用postition组件 CSS 的 position 属性用于设置元素在页面上的定位方式。它有 5 个可能的值: static 、 relative 、 absolute 、 fixed 和 sticky 。下面分别对这些值进行介绍,并给出一些

    2023年04月12日
    浏览(50)
  • 〖大前端 - 基础入门三大核心之CSS篇㉒〗- 过渡属性的基本使用

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2023年04月19日
    浏览(58)
  • 使用CSS自定义浏览器滚动条样式 (webkit 已最新支持 scrollbar-width)

    浏览器默认的滚动条样式简单醒目,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一必须修改滚动条的样式。 从滚动条效率和兼容性上选择,可以直接在默认滚动条的基础上进行样式修改。现已有更多相关详细设置的文章、本标题内容仅作概述及引用 不再赘述

    2024年02月20日
    浏览(53)
  • 定义公共样式css

    index.less 文件 页面用法

    2024年01月19日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包