6 个学习 CSS 的免费在线游戏网站-技术圈

以下内容来自公众号逆锋起笔，关注每日干货及时送达

英文 | https://medium.com/dare-to-be-better/free-online-games-to-learn-css-649881ba7579

翻译 | 杨小爱

CSS 是我们用来设计 HTML 文档样式的语言，它描述了 HTML 元素在浏览器中的显示方式。但是，虽然了解 CSS 的基础知识很重要，但现在几乎不使用纯 CSS。

现代开发人员大多使用 CSS 扩展语言（如 Saas）和 CSS3 网页布局模型（如 Flexbox）来设计他们的网站。

但不要气馁——所有这些概念都是相互建立的，而且CSS也不是那么难的事情，只要您愿意多花时间去寻找一些好的学习资源和练习CSS。

如果您刚开始学习 HTML 和 CSS，会觉得很枯燥，但是如果我们采用游戏得方式一起来学习CSS的话，您会觉得它非常有趣。

因此，今天我们就从第一个游戏开始，然后一个一个地完成它们。

这些游戏可以帮助你提升学习的有信心，同时还能增加学习的趣味性，以便帮助您更好的学习与理解CSS flexbox、grid，或者通过与来自世界各地的其他玩家竞争来完善他们的 CSS 技能。

现在，我们就开始吧。

01、CSS Diner

地址：https://flukeout.github.io/

非常适合：初学者学习和练习 CSS 和 HTML

如果您是一个零基础的初学者，最好从 CSS Diner 之类的游戏开始。在您准备好掌握更复杂的主题（如 CSS flexbox 或网格）之前，请先了解 HTML 标签、类、id 和其他重要概念。完成此游戏的 32 个级别后，您将拥有坚实的基础，并准备好进入下一个游戏。

02、Grid Garden

地址：https://cssgridgarden.com/

非常适合：学习 CSS 网格

使用 CSS 网格种植胡萝卜园。在这个有趣的小游戏中，您必须通过掌握 CSS 网格（一个用于创建二维网格布局的强大模块）来浇灌胡萝卜作物并毒害杂草。有了它，您可以轻松定义网站上的列、行和网格模板区域。只需打开游戏并立即开始玩 - 无需注册！微信搜索readdot，关注后回复视频教程获取23种精品资料

03、Flexbox Zombies

地址：https://mastery.games/flexboxzombies/

非常适合：学习 CSS flexbox 布局