使用css 中自定义属性(变量)

自定义属性（有时候也被称作CSS 变量或者级联变量）是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用。

由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。

- 基本用法

声明一个自定义属性，属性名需要以两个减号（–）开始，属性值则可以是任何有效的 CSS 值。和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {--text-color: red;--border-width: 5px;--bg-color: blue;--text-font-size: 12px;
}

使用：使用一个局部变量时用 var() 函数包裹来表示一个合法的属性值：

element {color: var(--text-color);background-color: var(--bg-color);font-size: var(--text-font-size);
}

注意：自定义属性名是大小写敏感的，–my-color 和 --My-color 会被认为是两个不同的自定义属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css 自定义变量 demo</title><style>:root {--text-color: #101dd5;}h2 {color: var(--text-color)}/*自定义一个容器，给容器中的变量赋值*/section {--text-color: #e52e9c;--font-size: 36px;--bg-color: purple;}span {color: var(--text-color);font-size: var(--font-size);background-color: var(--bg-color);}</style>
</head>
<body><div class="div-wrapper"><h2>这是h2标签</h2></div><section><span>这是一个 span 标签</span></section>
</body>
</html>

总结：

复杂的网站都会有大量的 CSS 代码，通常也会有许多重复的值。
举个例子，同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换（很麻烦，很繁琐）。
自定义属性在某个地方存储一个值，然后在其他许多地方引用它
另一个好处是语义化的标识。比如，–main-text-color 会比#00ff00
更易理解，尤其是这个颜色值在其他上下文中也被使用到
自定义属性受级联的约束，并从其父级继承其值

CSS 自定义属性（变量）

使用css 中自定义属性(变量)相关推荐

妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么一.总结一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
CSS的强大之CSS中的变量
文章目录一. 什么是CSS变量? 二. 如何定义CSS变量? 属性名属性值注意事项三. 如何使用CSS变量? var()方法 calc()方法四. CSS变量可以干什么? 五. CSS变量作 ...
css的属性是变量是怎么表达,CSS自定义变量属性——像less，sass那样在css中使用变量（译）...
初步使用 :root { --main-color: #06c; --accent-color: #006; } /* The rest of the CSS file */ #foo h1 { // ...
css中变量_CSS中的变量
css中变量 CSS | 变数 (CSS | Variables) CSS variables allow you to create reusable values that can be used ...
css 加随机数引用_在CSS中生成随机数
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. Robin Rendle 于2017年1月11日前几天,我遇到了一个特别有趣的问题.我想用random ...
CSS中定义多个链接样式,在CSS中定义【导航栏】超链接样式
1.案例css代码 .divcss5 a:link{ color:#F00}/* 链接默认为红色 */ .divcss5 a:hover{ color:#000}/* 鼠标悬停黑色 */ .divcs ...
c语言中边框所占两列一行,css中的border-collapse属性如何设置表格边框线？（代码示例）...
css中的border-collapse属性如何设置表格边框线?本篇文章就给大家介绍css中的border-collapse属性是什么? border-collapse属性设置表格边框线的方法.有一定 ...
CSS中调用JS函数和变量
在CSS来调用JS程序. 这个技术是网络安全里的,叫做CSS跨站. 我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript: ...
Vue超好玩的新特性：在CSS中引入JS变量
授权转载自: 手撕红黑树 https://juejin.im/post/6856668819344392206 幻想以前做项目的时候经常会这么想: <template><h1> ...

使用css 中自定义属性(变量)

- 基本用法

使用css 中自定义属性(变量)相关推荐

最新文章

热门文章