CSS自定义属性改变网站布局和颜色

使用CSS自定义属性和Web存储API更改站点的布局和颜色。

 
 
 
 
CSS自定义属性（通常称为CSS变量）一直在稳步进入浏览器一段时间。随着3月份微软Edge 15的发布，现在所有主流的现代浏览器都支持它。

这意味着对于不需要支持诸如Internet Explorer之类的传统浏览器而不负担的项目，可以考虑使用CSS变量（所有意图和目的） - 安全使用。新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

编写更好CSS的指南
许多开发人员已经使用具有诸如Sass或Less之类的预处理器的变量作为减少代码重复的手段。本机CSS变量的工作方式大致相同，但不需要任何额外的构建步骤，像常规CSS属性一样级联，最重要的是在运行时可用。

这些优点使本机CSS变量成为其预处理器兄弟姐妹的一个优势，为开发人员打开了大量有趣的事情，而且代码少得多。

在本教程中，我们将探索如何使用CSS变量实现网站建立到名为NoteApp的模拟Web应用程序。这将涉及编写CSS和JavaScript以允许用户更改颜色方案并切换显示的列数。然后，我们将利用Web Storage API来确保为将来的会话保存任何更改。

获取教程文件

首先，从Web Designer的FileSilo下载项目文件。要做到这一点，去吧FileSilo在本教程旁边选择免费资料和免费内容。注意：首次用户必须注册才能使用FileSilo。

01.设置工作区

在“ / website-template ”目录中，您将找到静态NoteApp网页，我们将使用CSS变量和Web Storage API实现网站建设。打开您首选文本编辑器中的目录。

02.设置我们的CSS变量

在' main.css '中，您会发现很多项目的CSS。在顶部，创建一个针对“ root ”伪类的块。在其中定义变量，如下面的代码段。该根块包含全局变量，它将像任何常规的CSS属性一样级联到我们的样式表中。

:root {
  --primary: #2F353E;
  --secondary: #2B9BCA;
  --tertiary: #F3583F;
  --quaternary: #E0E1E2;
  --quinary: #FFFFFF;
}
03.用变量替换颜色

通过手动或使用find / replace进行样式表，并从根块中与其对应的变量交换任何静态颜色十六进制代码。为此，请使用var函数并传递变量的名称。这告诉浏览器引用该