CSS变量

       我们在学习的编程语言中，都有变量能声明，那CSS中有没有呢？当然有了。

.cor {
  --fontsize: 25px;<!-- 变量声明方式: --变量名:变量值 -->
}

 

且我认为大多数的特性和编程语言一样。如：作用域，css的变量声明的作用域分为全局或局部作用域。局部作用域局部变量只能在声明它的选择器内部使用。而全局作用域能在所有css全部选择器中使用。不过，在使用全局作用域之前，要先声明root选择器。（root：选择器匹配文档中的根元素）然后在root选择器中声明变量。这一点还是和编程语言不太一样的地方。当然，也有一样的地方，全局变量如果在任意选择器中修改css变量的值，就会改变root选择器中的值。（一改全改）。

还有一个重要的东西：媒体查询

媒体查询的作用是为不同的设备定制不同的css样式。这样，在不同的设备查看网页时就不会因为适配导致网页显示不全或比例不对的问题。

使用方法：

<style>
  :root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }

  <!-- 媒体查询声明样式 -->
  @media (max-width: 350px)<!-- 媒体查询的规--> {
    :root {
       --penguin-size: 200px;
      --penguin-skin: black;
    }<!-- 当规则成立时，就改变变量的值 -->
  }
</style>

使用css变量的优点：

可以向编程语言一样，做到一改全改。

代码可读性增强。