PHP程序员小白到大牛集训(12期免息)
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    css里面能用var变量吗

    原创2022-06-06 16:57:42456 关注公众号:每天精选资源文章推送

    css里面能用var变量;可以利用var()函数来插入css变量的值,css变量可以访问DOM,也可以利用该函数来读取变量,语法为“var(变量名, value)”,第二个参数的值可用于表示变量的默认值。

    本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

    css里面能用var变量吗

    var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。

    var() 函数用于插入 CSS 变量的值。

    CSS 变量可以访问 DOM,这意味着您可以创建具有局部或全局范围的变量,使用 JavaScript 来修改变量,以及基于媒体查询来修改变量。

    使用 CSS 变量的一种好方法涉及设计的颜色。您可以将它们放在变量中,而不必一遍又一遍地复制和粘贴相同的颜色。

    var() 函数的语法如下:

    var(name, value)

    name 必需。变量名(以两条破折号开头)。

    value 可选。回退值(在未找到变量时使用)。

    var() 如何工作

    首先:CSS 变量可以有全局或局部作用域。

    全局变量可以在整个文档中进行访问/使用,而局部变量只能在声明它的选择器内部使用。

    如需创建具有全局作用域的变量,请在 :root 选择器中声明它。 :root 选择器匹配文档的根元素。

    如需创建具有局部作用域的变量,请在将要使用它的选择器中声明它。

    下面的例子与上面的例子相同,但是在这里我们使用 var() 函数。

    首先,我们声明两个全局变量(--blue 和 --white)。然后,我们使用 var() 函数稍后在样式表中插入变量的值:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    :root {
      --blue: #1e90ff;
      --white: #ffffff; 
    }
    body {
      background-color: var(--blue);
    }
    h2 {
      border-bottom: 2px solid var(--blue);
    }
    .container {
      color: var(--blue);
      background-color: var(--white);
      padding: 15px;
    }
    button {
      background-color: var(--white);
      color: var(--blue);
      border: 1px solid var(--blue);
      padding: 5px;
    }
    </style>
    </head>
    <body>
    <h1>使用 var() 函数</h1>
    <div class="container">
      <h2>Welcome to Shanghai!</h2>
      <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
      <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China.</p>
      <p>
        <button>Yes</button>
        <button>No</button>
      </p>
    </div>
    </body>
    </html>

    输出结果:

    31.png

    (学习视频分享:css视频教程

    以上就是css里面能用var变量吗的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:css
  • 相关文章

    相关视频


    专题推荐