# 自动生成的字母表

# 课程目标

学习 CSS 新特性阴影
变量的声明和引用
掌握 CSS 计数器具体使用方法
计数器的初始值和步长
计数器的序列值

# 阅读学习

# 变量和计数器

# 阴影

拟态效果是不是很惊艳，如果你还不是很熟练，可以在这里玩玩拟态效果

# 编码一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>计数器和变量练习</title>
  </head>
  <body>
    <figure>
      <div></div>
      <div></div>
      <!-- 一共 26 个 <div>,此处略去 20个-->
      <div></div>
      <div></div>
    </figure>
  </body>
</html>

参考如下示例图，应用 CSS 布局以及计数器等相关知识到上述给出的 HTML 模板代码，实现一个根据首字母自动生成的字母表

应用 flex 或者 grid 布局每个 div 子元素，每个 div 是一个矩形小方格，每行排列 6 个子元素，尽可能多种方案都实现一下
给每一个 div 应用 css3 阴影模拟拟态风格。
用伪元素创建第一个大写字母和小写字母，应用定位知识，让它们所处与示例图一致
声明一个计数器，然后在:before 伪元素中读取大写字母序列,在:after 伪元素中读取小写字母序列
样例中的颜色和样式可以自行设定
注意，因为我们此题是要练习计数器的使用，所以，我们不需要写出所有的字母，只需要在伪元素中写出第一个字母即可

# 编码二

基于上一个任务，添加一个更换主题颜色的功能，请使用 CSS 变量来完成这个功能

应用 CSS 变量重构你的代码，将使用的各种颜色定义成变量
添加两个按钮，实现当按钮点击时，字母表就更换一套主题颜色，具体需要更新背景颜色，大写字母颜色，盒子阴影颜色，小写字母颜色
每一套主题颜色，请使用 CSS 变量进行定义和使用
只需要需要关注 HTML 和 CSS 部分实现，不需要实现 Javascript.

# 提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

这里有很多方法 (opens new window)

# 重构你的代码

学习完这课之后，回顾以前编写代码，尝试用 CSS 变量和计数器重构你的代码，多多练习熟悉它们的用法

# 自测问题

如何声明一个 CSS 变量，使用 CSS 变量
CSS 变量有什么好处？思考它的应用场景
怎么让 CSS 变量在全局范围内都可以访问到
--my-color和 --My-color表示同一个变量对吗？
如果遇到无效的 CSS 变量会发生什么？
CSS 计数器是什么？有什么作用？
请思考一下几个属性的作用，以及语法
- counter-reset
- counter-increment
- content - 插入生成的内容
- counter() 或 counters()
如何实现 CSS 计数器倒数显示，比如本来应该为 1，2，3，结果变为 3，2，1

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

日期，今天的学习总用时，今天学习的目标是什么，是否达成
哪些东西今天了解得比较透彻，说说自己的理解
哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

← 移动 Web 页面布局实践来给图片添加滤镜 →