以下内容来自公众号逆锋起笔，关注每日干货及时送达
英文 | 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 网格
03、Flexbox Zombies
地址： https://mastery.games/flexboxzombies/
非常适合：学习 CSS flexbox 布局
Flexbox 是任何前端开发人员都应该掌握的另一个概念。在这款游戏中，每一章都会解开部分情节，让您有机会学习和实践新的 flexbox 概念。
04、Flexbox Froggy
地址： https://flexboxfroggy.com/
非常适合：学习和练习 CSS flexbox 布局
这个游戏很像 Grid Garden，但用于学习 CSS flexbox。它有 24 个级别，您可以按任何顺序练习。
05、Flexbox Defense
地址： http://www.flexboxdefense.com/
非常适合：学习和练习 CSS flexbox
这是另一个以有趣的方式学习 CSS flexbox 的简单浏览器游戏。无需注册，如果您需要快速提醒，您可以跳到任何级别。
06、CSS Battle
地址： https://cssbattle.dev/
非常适合：练习 HTML 和 CSS，与他人竞争
自己玩不如和别人竞争好玩！CSS Battle 是一款非常容易上瘾的 CSS 高尔夫游戏，具有各种级别和排行榜，玩家可以在其中尝试仅使用几行 CSS 来直观地复制“目标”。
总结
以上就是我今天跟您分享的6个学习CSS的有趣网站，希望对您学习提升CSS技能有所帮助，如果您觉得有用的话，也请您将这篇文章分享给您的朋友，也许能够帮助到他。
最后， 感谢您的阅读，喜欢的话，请记得点赞我，关注我。
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
