自定义CSS的三中方方式：
一、行间样式表
行间样式表是指将CSS样式编码写在HTML标签中，格式如下
<h1 style="font-size:12pxcolor:#000FFF">我的CSS样式。
</h1>
行间样式表由HTML元素的HTML元素的style支持，只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式，但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
二、内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中，稍微不同的是前者可以将样式表放在一个固定的位置，格式如下
<html><head>
<title>内部样式表</title>
<style type="text/css">
h1{font-size:12px
color:#000FFF
}
</style>
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
内部样式表编码是初级的应用形式，不能达到跨页面使用所以不适合使用。
三、外部样式表
外部样式表是CSS应用中最好的一中形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。多个网页可以调用一个样式文件表，这样能够实现代码的最大限度的重用及网站文件的最优化配置，格式如下
<html><head>
<title>外部样式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
在style.css中的代码为
h1{font-size:12pxcolor:#000FFF
}
我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式，并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.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中
若想了解更深可看大神文章：
https://www.ruanyifeng.com/blog/2017/05/css-variables.html
https://www.zhangxinxu.com/wordpress/2016/11/css-css3-variables-var/
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>
四：总结
在一个组件里或者全局将经常使用的属性提取出来，比如主题色，用的时候直接使用变量。便于维护代码，改的时候直接改一处即可。
