zoukankan      html  css  js  c++  java
  • CSS自定义变量

     试想下在复杂的项目中,CSS样式会不断累加,看到纯数值的属性值,我们很难理解它们的含义,如果我们可以给它们取一个变量名来表示它们的含义,这样更加便于我们理解和复用,于是就有了CCS变量的出现。

    如何使用它呢?

    在定义变量时一定要添加--前缀,在使用它时需要使用var()函数,并且它也有作用域范围,如果需要设置全局作用域,我们可以在html标签上定义变量,如果要设置局域变量,我们需要在作用范围的上代选择器定义变量,演示代码如下:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Static Template</title>
        <style>
          html {
            --color-default: red;
            color: var(--color-default);
          }
          .two {
            --color-default: green; // 改变了属性值变量的值
            color: var(--color-default);
          }
        </style>
      </head>
      <body>
        <p class="one">paragraph one</p>
        <p class="two">paragraph two</p>
      </body>
    </html>
  • 相关阅读:
    java ,js获取web工程路径
    js 无刷新分页代码
    js 获取时间对象代码
    jquery 文本框失去焦点显示提示信息&&单击置空文本框
    CodeForces
    nth_element() O(n)复杂度求第k+1小元素
    CodeForces
    HDU
    杜教BM
    J
  • 原文地址:https://www.cnblogs.com/re-doc/p/14144398.html
Copyright © 2011-2022 走看看