css 基本属性

颜色

颜色表示方法：

• 英文：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 */
    }
  }