css变量的使用
2024-10-09 02:11:17
css变量的使用
1.介绍:我们也可以在css中定义变量,和less、sass一样,通过--来定义变量
div { /* 开始定义变量 */ --color: red; /* 通过var()函数来使用变量,第二个参数指定默认值 */ color: var(--color, green)
} /* 也可以将变量定义到跟部中,这样所有的选择器都可以使用 */ :root { --color: red; --foo: 20px;
} div { color: var(--color) font-size: var(--foo)
} p { color: var(--color) font-size: var(--foo)
} /* 使用乘除加减计算px,此时必须使用calc()函数 */ div { --foo:; font-size: calc(var(--foo) * 6px);
} /* 定义响应式的变量 */ @media screen and (max-width: 768px) { body { --backColor: red;
}
} body { background: var(--backColor);
} /* @supports是CSS3新引入的规则之一,主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式. */ @supports (display: flex) { .div { color: red;
}
}
最新文章
- [LeetCode] Palindrome Number 验证回文数字
- poj1664-放苹果(递归)
- He faced a maximum sentence of three years.
- PHP数据的序列化/反序列化
- 文本处理命令--wc、sed
- MacTerminal快捷键
- fuelSources
- [TYVJ] P1031 热浪
- python - list, cllections模块的deque对象
- Amzon MWS API开发之 上传数据
- Leetcode018 4Sum
- AngularJS创建新指令 - 基本功能
- UVA - 247 Calling Circles Floyd判圈
- VxWorks6.6 pcPentium BSP 使用说明(一):基本概念
- Android layout_margin 无效的解决办法
- c++第七周学习小结
- vue-router的history模式发布配置
- SSE图像算法优化系列六:OpenCv关于灰度积分图的SSE代码学习和改进。
- CAD{绘制坡道)(绘制楼梯)5.26
- English trip V1 - B 17. Giving Information 提供信息 Teacher:Taylor Key: Person Information