颜色
颜色表示方法:
- 英文:red
- rgb表示法:rgb(255, 0, 0)
- 16进制表示法:#FF0000
- 16进制缩写法:#F00 每一位分别表示红绿蓝
- rgba:g代表green
颜色属性
- color:字体颜色
- background-color:背景颜色
字体
- font-family:字体格式
- font-size:字体大小
css变量
定义css变量
.penguin {
/* Only change code below this line */
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
300px;
height: 300px;
}
使用css变量,第二个参数是默认值,找不到变量时使用。(ie浏览器不支持css变量)
.right-cheek {
top: 15%;
left: 35%;
background: var(--penguin-belly, white);
60%;
height: 70%;
border-radius: 70% 70% 60% 60%;
}
变量继承
创建变量时,可以在创建变量的选择器中使用它。该选择器的任何后代中也可用。发生这种情况是因为CSS变量像普通属性一样被继承。
为了利用继承,CSS变量通常在:root
元素中定义,:root
是与文档的根元素(通常是该元素)匹配的伪类选择器html
。
通过在中创建变量:root
,它们将在全局范围内可用,并且可以从样式表中的任何其他选择器进行访问。
:root {
--penguin-skin: gray;
--penguin-belly: pink;
--penguin-beak: orange;
}
重写:root变量
当在其它类中重写了:root的变量,会优先使用重写后类的变量值
:root {
--penguin-skin: gray;
--penguin-belly: pink;
--penguin-beak: orange;
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
/* Only change code below this line */
--penguin-belly: white;
/* Only change code above this line */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
300px;
height: 300px;
}
CSS变量可以简化您使用媒体查询的方式。
例如,当屏幕小于或大于媒体查询断点时,您可以更改变量的值,并且无论使用什么位置,变量都将应用其样式。
在的:root
选择器中media query
,对其进行更改,以便--penguin-size
重新定义并赋予值200px。
另外,重新定义--penguin-skin并赋予其值black。然后调整预览大小以查看此更改。
@media (max- 350px) {
:root {
/* Only change code below this line */
--penguin-size: 200px;
--penguin-skin: black;
/* Only change code above this line */
}
}