@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

/*
    多行注释
    .sass .scss
    sass格式会省略花括号和分号 所以常用scss存储
*/
/*
 混合宏
 @mixin 声明
 @include 调用
*/
/*
    继承
    声明方式：已存在的基类
    .class{}/.xxx{}
    调用：@extend
*/
.vase {
  font-size: 20px;
  color: purple;
}

/*
  占位符
  %placeholder
  声明：%xxxx
  调用：@extend 
*/
/*
    函数：
    @function 函数名（形参） { @return xx }  
    函数名（实参）px
*/
/*
    操作符：
    +:前后单位必须统一
    -:前后需要空格
    *:只允许一个数值带单位
    /:在括号中进行运算 后面拼接单位
    颜色：颜色值分段运算
*/
.box {
  width: 600px;
  height: 400px;
  font-size: 30px;
  border: 3px solid red;
  background: yellow;
}

h1 {
  color: blue;
}

h2 {
  color: blue;
}

ul {
  overflow: hidden;
}

ul li {
  float: left;
  margin-left: 5px;
  border-bottom: 2px solid #f00;
}

ul li a {
  color: #000;
  font-size: 40px;
  font-weight: bold;
}

ul li a:hover {
  color: red;
}