教程

Learn CSS

An evergreen CSS course and reference to level up your web styling expertise. Google 出品

选择器教程

CSS Diner

CSS 晚餐,一共 32 个关卡,由简入难,通过 CSS 选择器语法选择跳动的盘子来进行通关,帮你熟悉和记忆选择器相关的语法。

Flex 布局

Flex 布局教程:语法篇

详细介绍了 Flex 布局的语法。

Flexbox Defense

Flexbox 塔防,一共 12 个关卡的塔防游戏,通过 Flex 语法摆放防御塔,阻挡敌方小兵通过。

Flexbox Froggy

FLEXBOX FROGGY 通过写 CSS 代码,送小青蛙回家:将小青蛙放到与其颜色相同的荷叶上。

Gird 布局

CSS Grid 网格布局教程

详细介绍了 Flex 布局的语法。

Grid Garden

Grid Garden,共 28 关,通过 Grid 语法编程,种植,浇灌你自己的胡萝卜园,帮你熟悉和记忆 Grid 语法。和出 FLEXBOX FROGGY 是一个公司。

Grid Critters

网格小动物,数百个关卡,需要付费。你的旅程从神秘的 Grideros 星球开始,你的任务是使用你船上强大的网格工具来拯救外星生物免于灭绝。

作者是一名拥有十多年前端经验的 UI 架构师,为了帮助人们可以轻松愉快的精通 CSS Grid 布局,他选择全职并投入了大量的精力开发了这款游戏。

效果

书籍

《CSS揭秘》

image.png

本书是一本注重实践的教程,作者为我们揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案,攻克每天都会遇到的各种网页样式难题。

作者是 CSS 一姐:Lea Verou。W3C CSS工作组特邀专家,设计CSS语言的委员之一。

作者: [希] Lea Verou
原作名: CSS Secrets: Better Solutions to Everyday Web Design Problems
出版年: 2016-4

《精通 CSS(第3版)》

image.png

本书是CSS设计经典图书升级版,结合CSS近年来的发展,尤其是CSS3和HTML5的特性,对内容进行了全面改写。本书介绍了涉及字体、网页布局、响应式Web设计、表单、动画等方面的实用技巧,并讨论了如何实现稳健、灵活、无障碍访问的Web设计,以及在技术层面如何实现跨浏览器方案和后备方案。

本书还介绍了一些鲜为人知的高级技巧,让你的Web设计脱颖而出。

作者: [英]安迪•巴德 - Andy Budd / [瑞典]埃米尔•比约克隆德 - Emil Björklund
副标题: 高级Web标准解决方案
原作名: CSS Mastery
译者: 李松峰
出版年: 2019-2

《CSS世界》

image.png

本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的从业经验,通过大量的实战案例,详尽解析CSS的相关知识与常见问题。作者还为本书开发了专门的配套网站,进行实例展示、问题答疑。

作为一本CSS深度学习的书,书中介绍大量许多前端开发人员都不知道的CSS知识点。通过阅读本书,读者会对CSS世界的深度和广度有一个全新的认识。

作者: 张鑫旭
出版社: 人民邮电出版社
出版年: 2017-12

张鑫旭老师还出了本 《CSS选择器世界》,深入介绍了 CSS 选择器。

《写给大家看的设计书》

image.png

这本书出自一位世界级设计师之手。复杂的设计原理在书中凝炼为亲密性、对齐、重复和对比4 个基本原则。作者以其简洁明快的风格,将优秀设计所必须遵循的这4 个基本原则及其背后的原理通俗易懂地展现在读者面前。

本书包含大量的示例,让你了解怎样才能按照自己的方式设计出美观且内容丰富的产品。

作者: [美] Robin Williams出版社: 人民邮电出版社
原作名: The Non-Designer’s Design Book
出版年: 2009-1