via添加自定义css（css自定义变量）
本文目录
css自定义变量
css是可以支持变量，且所有主流浏览器都支持。css变量又称"css自定义属性",css的变量声明是以“--”前缀，而前缀是"$"或"@"被预处理器sass或less占用，所以，css以"--"开头可以避免与预处理器产生冲突,
2.属性名可以包含数字，字母，以及下划线或者短横线，也可以是中文，日文或者韩文，但不能是属性名或数字开头，不能包含$，[，^，(，%等字符。
3.变量--primary只能用属性值，不能用作属性名
4.数字和单位直接写一起需使用calc()函数
拓展
cal()函数支持 "+", "-", "*", "/" 运算，需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
5.变量的值是字符串时，可以直接拼接
6.var()函数第二个参数是设置默认值，若该变量不存在，则使用此默认值
7.css变量可以在任意选择器中使用包括在标签元素style及@media中
若想了解更深可看大神文章：
***隐藏网址***
***隐藏网址***
自定义css怎么添加在现有样式上添加组件
css中直接使用给出的css变量赋值即可。自定义css添加在现有样式上添加组件直接使用给出的css变量赋值即可。自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。
论述dreamweaver中添加自定义样式的基本操作步骤
一般添加css样式表的方式有3种！
一种是引入css样式表，引入css样式表一般用link的方式引入，代码如下
《link href="路径和css样式表的名称" rel="stylesheet" type="text/css"》
如果对写代码不是很流利的话可以用DW 手动引入，操作步骤图片如下：
选择好了点击确认就可以了。添加好了之后你会看到就是上面所示的代码！
那么第二种添加css样式的方法是网页里添加css样式
《style》
.header{}
《/style》（这种方式不推荐哦）
第三种就是在你需要给某个区块添加特殊的样式比如 你的div区块里的特定区块需要单独添加一个样式。
例如：
《div class="main_left"》
《ul》
《li class="name"》《/li》
《li class="neirog"》
《p style="color:#F00;"》《/p》
《/li》
《/ul》
《/div》
如上所示 在给P 标签添加了一个样式，这种方法也不是很推荐的！ 除特定的需求除外。
css规则定义属性
css自定义属性
css自定义属性分为全局定义属性和局部定义属性。
一：全局
1.定义：
：root{ //此处的root是固定的。
--them-color:blue; //自定义属性时以--开头，告诉浏览器这是自定义的。
}
2.使用：
《style type="text/css"》
.div{
background-color:var(--them-color);
//如果自定义的属性出不来或其他问题，可在之后写属性值。例如：background-color:var(--them-color，blue);
也可写另一个属性名：background-color:var(--them-color，var(--them-color1));
}
《/style》
《div class="div"》111《/div》
二：局部
1：定义
.foo{
--them-color:yellow;
}
.div{
color:var(--them-color);
}
2:使用：
《div class="foo div"》121321《/div》 //此处的foo相当于一个基类，目的是存取所有的属性值，他的子元素从这个库里取属性。
例子：
《style type="text/css"》
.foo{
--them:yellow;
--width-outer:800px;
--height-outer:400px;
--width-inner:100px;
--height-inner:100px;
--bg-inner1:red;
--bg-inner2:orange;
--bg-inner3:purple;
}
.div{
width: var(--width-outer);
height: var(--height-outer);
border:1px solid var(--them);
margin: 20px auto;
}
.foo div:nth-child(1){
width: var(--width-inner);
height: var(--height-inner);
background-color: var(--bg-inner1);
}
.foo div:nth-child(2){
width: var(--width-inner);
height: var(--height-inner);
background-color: var(--bg-inner2);
}
.foo div:nth-child(3){
width: var(--width-inner);
height: var(--height-inner);
background-color: var(--bg-inner3);
}
《/style》
《body》
《div class="div"》
《div》《/div》
《div》《/div》
《div》《/div》
《/div》
《/body》
四：总结
在一个组件里或者全局将经常使用的属性提取出来，比如主题色，用的时候直接使用变量。便于维护代码，改的时候直接改一处即可。
更多文章：
2026年1月22日 08:30
2026年6月10日 01:30
offset函数提取不重复数据（EXCEL怎样提取不重复值到另一个表格中）
2026年6月4日 09:45
javacontinue语句的作用（有关Java语言continue的用法）
2026年3月5日 08:45
2025年9月17日 18:30
2026年9月17日 08:45
android系统采用linux系统内核（安卓1.0明显是基于linux内核开发的，安卓1.0是不是linux套壳）
2025年7月26日 09:45
2025年7月30日 19:45
2026年8月19日 11:30
html导入表格标签（在网页上插入一个表格，表格相关的HTML标记有哪些）
2025年7月7日 20:15
2025年6月7日 07:30
2026年8月16日 06:00
2026年1月13日 19:00
vbs空格键加alt键代码怎么写（VBS模拟按键方法，详细点，每步要讲解，谢了）
2026年9月3日 09:00
2025年6月30日 03:15
2026年8月24日 14:00
2026年8月11日 13:15
2025年9月14日 01:15
