• 技术文章 >web前端 >css教程

    css可以使用变量吗

    青灯夜游青灯夜游2021-04-06 17:24:06原创98

    css可以使用变量。在css中,变量是由CSS作者定义的实体,其中包含要在整个文档中重复使用的特定值;使用自定义属性来设置变量名,并使用var()函数来读取。

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

    CSS 变量当前有两种形式:

    在使用CSS变量的时候, 应该知道的三个主要内容

    1、自定义属性

    我们可以将重复使用的属性定义成自定义属性, 这样在以后需要修改的时候, 只需要修改自定义属性里的属性值就可以了.

    :root {
      --textColor: #444;
    }

    上面的代码就是自定义属性的写法, 需要注意的是, 自定义属性以 -- 开头

    3、var()函数

    我们需要使用var()函数来读取变量, 否则浏览器不知道你的自定义属性是啥东东.

    var()函数还可以指定第二个属性, 表示属性的默认值

    p {
      color: var(--textColor);
    }

    要设置p标签的字体颜色, 可以像上面代码那样写

    它跟 p { color: #444; } 这样是一样的

    3、root伪类

    在说:root伪类之前, 要先说一下CSS自定义属性的作用域问题

    同一个CSS自定义属性, 可以在多个选择器中声明, 读取的时候, 优先级最高的属性生效.

    body {
      --bgColor: red;
    }
    .content {
      --textColor: blue;
    }

    上面的代码, -bgColor的作用域是body, --textColor的作用域是.content 由于这个原因, 最好把自定义属性放在根元素:root里面, 这样的话能保证任何选择器都能读取他们.

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

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 变量
    上一篇:css表格怎么设置中间对齐 下一篇:css中可以实现旋转效果的属性是什么
    第15期线上培训班

    相关文章推荐

    • css如何做三角形• css怎么设置元素高度为20px• css怎样把一张图片分割开• css图片如何设置上边框距离• 用css3实现一个奥运五环

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网