《六》CSS 中的自定义属性

自定义属性:也可以称作 CSS 变量或者级联变量,是由 CSS 作者定义的。由自定义属性标记来设定值(例如: --main-color: black;),由 var() 函数来获取值(例如: color: var(--main-color);)它包含的值在整个 CSS 文档中都可以重复使用。

自定义属性会继承。

基本用法:

  1. 声明一个自定义属性,需要写在规则集之内,属性名需要以两个减号 --开始,属性值可以是任何有效的 CSS 值。

    规则集指定的选择器定义了自定义属性的作用域。最佳实践是定义在根伪类 :root 下,这样就可以在 HTML 文档的任何地方访问到它了。

    :root {--main-bg-color: brown;
    }
    
  2. 使用时用 var() 函数包裹自定义的属性名。
    .container {background-color: var(--main-bg-color);
    }
    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/184138.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯每日一题2023.11.30

题目描述 九数组分数 - 蓝桥云课 (lanqiao.cn) 题目分析 此题目实际上是使用dfs进行数字确定,每次循环中将当前数字与剩下的数字进行交换 eg.1与2、3、4、、、进行交换 2与3、4、、、进行交换 填空位置将其恢复原来位置即可,也就直接将其交换回去即可…

Golang实践录:读取yaml配置文件

本文对 yaml 文件进行解析。 下载 yaml执行 go get github.com/spf13/viper 安装。 golang 有很多库可以解释 yaml 文件。本文选用 viper 进行解析,执行 go get github.com/spf13/viper 安装。 yaml语法规则 yaml对大小写敏感。yaml的层级关系只能使用空格缩进&a…

Apache httpd-2.4安装并配置转发

目录 一、写在前面二、下载Apache三、编译安装依赖库3.1 编译安装apr3.2 编译安装apr-util3.3 编译安装pcre 四、编译安装及启动Apache4.1 编译安装Apache4.2 启动Apache 五、配置Apache5.1 备份 httpd.conf5.2 启用代理模块5.3 修改监听端口5.4 配置转发规则 六、常用指令6.1 …

Windows核心编程 注册表

目录 注册表概述 打开关闭注册表 创建删除子健 查询写入删除键值 子健和键值的枚举 常用注册表操作 注册表概述 注册表是Windows操作系统、硬件设备以及客户应用程序得以正常运行和保存设置的核心"数据库",也可以说是一个非常巨大的树状分层结构的…

Docker篇之docker部署harbor仓库

一、首先需要安装docker step1:安装docker #1、安装yun源 yum install -y yum-utils #2、配置yum源 yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo # 如果上面源不稳定的话,更换为下列的aliyun源 yu…

7-2 凯撒密码(生成字母映射字典)

分数 20 作者 python备课组 单位 福州大学至诚学院 凯撒密码是密码学中一种简单且广为人知的加密技术,其本质是将明文中的所有字母按照字母表的顺序向后偏移固定数目后变成密文。例如,当偏移数目为3时,字母a映射成d,字母p映射成s&#xff…

学计算机大学可能会踩得坑!一定要注意!

真希望刚上大学时,就有人能告诉我这个,建议收藏! 很多人可能刚进大学时踌躇满志,气吞山河,但却随着时间流逝,慢慢会开始对自己的未来感到迷茫,开始害怕做决定、害怕踩坑,不知道自己该…

助力商品数字化管理,基于yolov5开发构建全系列【n/s/m/l/x】不同参数量级检测模型

在很多大型商超购物场所里面,商品的数字化信息管理系统是很重要的一环,能够做到对商品的快速精准管理,而基于CV视角的自动化智能化识别系统能够定位识别商品信息对于数字化水平的提升有着很大的帮助,本文的核心思想就是想要基于自…

网易区块链,网易区块链赋能赣州脐橙数字藏品,数字指纹解决方案

目录 网易区块链 网易区块链赋能赣州脐橙数字藏品,助力革命老区三农之路 数字指纹解决方案 网易区块链 网易区块链成立于2017年,致力于Web3.0区块链技术的研发和应用。自主研发的区块链“天玄”引擎,在单链场景下支持每秒最高30万笔交易,单日可处理上链数据超10亿。 与…

奇葩问题:arp缓存、ip地址冲突(实际是ip地址被占用导致arp缓存出现问题)

文章目录 今天遇到个奇葩的问题 今天遇到个奇葩的问题 今天遇到个奇葩的问题,我把我们192.168.1.116的盒子ip改成192.168.2.116后,再改回来,发现我们盒子的http服务始终无法访问,用Advanced IP Scanner扫描一下,发现就…

插槽slot使用

场景&#xff1a;el-button是绝对定位&#xff0c;希望它能根据query组件&#xff08;公共组件&#xff09;定位&#xff0c;query组件是相对定位。 <query :queryArr"queryParams" class"query"><div class"btn"><el-button cla…

Open3D 点对点的ICP配准算法

一、主要函数 1、该类TransformationEstimationPointToPoint提供用于计算点对点ICP目标函数的残差和雅可比矩阵的函数。函数registration_icp将其作为参数并运行点对点ICP以获得结果。 2、该函数evaluate_registration计算两个主要指标。fitness计算重叠区域&#xff08;内点对…

NIO网络编程

Netty学习之NIO基础 - Nyimas Blog 1、阻塞 阻塞模式下&#xff0c;相关方法都会导致线程暂停 ServerSocketChannel.accept 会在没有连接建立时让线程暂停SocketChannel.read 会在通道中没有数据可读时让线程暂停阻塞的表现其实就是线程暂停了&#xff0c;暂停期间不会占用 c…

shell 正则表达式

目录 正则表达式 正则表达式含义 代表字符 表示次数 位置锚点 分组 或 元字符 扩展正则表达式 命令举例 如何查找 IP 地址 表示 qq号 表示手机号 正则表达式 shell &#xff1a;/bin/bash 正则表达式&#xff1a;匹配的是文章中的字符 通配符&#xff1a;匹配的…

C# 友元程序集

1.友元程序集 使用友元程序集可以将internal成员提供给其他的友元程序集访问。 程序集FriendTest1.dll [assembly:InternalsVisibleTo("FriendTest2")] namespace FriendTest1 {internal class Friend{string name;public string Name > name;public Friend(str…

C语言第三十九弹--判断闰年and打印1000-2000之间闰年

使用C语言判断闰年and打印1000-2000之间闰年 普通闰年&#xff1a;公历年份是4的倍数&#xff0c;且不是100的倍数的&#xff0c;为闰年&#xff08;如2004年、2020年等就是闰年&#xff09;。 世纪闰年&#xff1a;公历年份是整百数的&#xff0c;必须是400的倍数才是闰年&a…

手敲myarraylist,深入了解其运行逻辑

1、自定义MyArrayList类 该类里面基本有两个属性&#xff0c;一个是用来存放数据的数组&#xff0c;另外一个是用来描述已经存放数据的数量。同时设置arraylist表的默认长度为10&#xff1b;代码如下&#xff1a; public class MyArrayList {private int[] elem;private int u…

kubernetes七层负载Ingress搭建(K8S1.23.5)

首先附上K8S版本及Ingress版本对照 Ingress介绍 NotePort&#xff1a;该方式的缺点是会占用很多集群机器的端口&#xff0c;当集群服务变多时&#xff0c;这个缺点就愈发的明显(srevice变多&#xff0c;需要的端口就需要多) LoadBalancer&#xff1a;该方式的缺点是每个servi…

Retrofit中的注解

一、Retrofit中的注解有那些&#xff1f; 方法注解&#xff1a;GET ,POST,PUT,DELETE,PATH,HEAD,OPTIONS,HTTP标记注解&#xff1a;FormUrlEncoded&#xff0c;Multpart&#xff0c;Streaming参数注解&#xff1a;Query&#xff0c;QueryMap&#xff0c;Body&#xff0c;Field…

2336. 无限集中的最小数字 --力扣 --JAVA

题目 现有一个包含所有正整数的集合 [1, 2, 3, 4, 5, ...] 。 实现 SmallestInfiniteSet 类&#xff1a; SmallestInfiniteSet() 初始化 SmallestInfiniteSet 对象以包含 所有 正整数。int popSmallest() 移除 并返回该无限集中的最小整数。void addBack(int num) 如果正整数 n…