css可以使用变量吗


本文摘自PHP中文网,作者青灯夜游,侵删。

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

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

CSS 变量当前有两种形式:

  • 变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值

  • 自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

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

  • 自定义属性

  • var()函数

  • :root伪类

1、自定义属性

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

1

2

3

:root {

  --textColor: #444;

}

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

3、var()函数

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

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

阅读剩余部分

相关阅读 >>

详解css z-index的权重问题

css background-blend-mode属性怎么用?

html中使用css的方法有哪几种

css怎么设置4个div并排显示

css怎么设置超链接颜色

css怎么设置斜体字效果

css border-image-repeat属性怎么用

css怎么在input中插图片

css border-bottom属性怎么用?

css如何设置链接颜色

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...