返回 前端
Awesome CSS Learning
Awesome css learning
Awesome CSS Learning 
¶
> 一个很棒的列表，仅限于最好的 CSS 学习资源
这份榜单主要是关于 CSS – 语言和模块. 与命名约定、架构范例、框架、预处理器、后处理器、CSS-in-JS 或当今 CSS 生态系统的其他方面无关.
请阅读 contribution guidelines 在贡献之前.
CSS References¶
CSS in a nutshell¶
- Introduction to CSS - 这个截屏视频系列将在大约一小时内教您 CSS 的基础知识.
Fundamental concepts¶
- The cascade - 本文解释了级联是什么以及它对您有何影响.
- Specificity and inheritance - 了解特异性和继承对于掌握 CSS 很重要. 这篇文章会有所帮助.
- CSS Box Model - 一篇解释网络布局基础的文章.
- 还可以查看有关的详细信息 box-sizing 财产.
- Responsive Design - 有关响应式设计各个方面的广泛信息，使网站看起来很棒并且适合所有人.
CSS units¶
- The Lengths of CSS - 涵盖绝对和相对单位的概述.
- Fun with Viewport Units - 传授基础知识并展示一些漂亮的用例.
Selectors¶
- Basic CSS Selectors - 介绍您需要了解的非常基本的 CSS 选择器.
- Advanced CSS Selectors - 提升你的知识水平. 从属性选择器到 CSS3 伪类.
- CSS Diner - 了解如何在这个有趣的小游戏中使用 CSS 选择器.
Custom properties (aka CSS variables)¶
- CSS Variables: Why Should You Care? - CSS 变量的简短介绍.
- Locally Scoped CSS Variables: What, How, and Why - 描述局部作用域 CSS 变量的优点.
- Using CSS variables correctly - 使用 CSS 变量的模式和反模式.
- Everything you need to know about CSS Variables - 使用真实示例超越 CSS 变量基础知识的深度文章.
- Getting Reactive with CSS - 令人兴奋的讨论在 JavaScript 中结合 CSS 变量和函数式反应式编程的可能性.
Layout¶
- Learn CSS Layout - 在 5 章中了解 CSS 布局技术.
- Layout Land - 关于新 CSS 布局可能性的 Jen Simmons 视频系列.
- Laying Out The Future With Grid And Flexbox - 引入了一个新的布局系统，包括 Flexbox、CSS Grid 和 Box Alignment Module.
Classic layouting¶
- Floats - 关于如何使用（和清除）浮动的深入信息.
- Positioning Types - 深入了解一些与CSS定位布局方式相关的鲜为人知的事情.
- inline-block - 显示在哪些情况下使用显示属性“inline-block”进行布局是有意义的.
Flexbox¶
- A Complete Guide to Flexbox - 所有你需要知道的关于 Flexbox 的信息都在一页上.
- Flexbox playground - 在 CodePen 上玩 Flexbox 示例.
- Flexbox Defense - 浏览器中的塔防游戏，让您在乐趣中学习 Flexbox.
- Flexbox Froggy - 通过一个涉及青蛙和睡莲叶的有趣游戏来学习 Flexbox 的所有基础知识.
- Flexbugs - 社区策划的 flexbox 问题列表和它们的跨浏览器解决方法.
- Flexbox Zombies - 一个由故事情节驱动的培训课程，您可以在其中使用 Flexbox 和弩来猎杀僵尸.
- What the Flexbox? - 一个简单、免费的 20 个视频课程，将帮助您掌握 CSS Flexbox！
Grid¶
- A Complete Guide to Grid - 所有您需要了解的有关一页 CSS 网格布局的信息.
- Grid by Example - 除了如何使用 Grid 的示例外，该站点还提供其他有用的学习资源.
- Designing with Grid - 谈论 CSS Grid 提供的新布局可能性.
- Grid Garden - 可爱的游戏，您可以在其中编写 CSS 代码来种植您的胡萝卜园.
- GridBugs - 社区策划的网格互操作问题列表及其解决方法.
- Grid Critters - 通过掌握冒险游戏来学习 CSS 网格布局.
- CSS Grid - 与 Wes Bos 一起学习 CSS 网格 - 免费的 4 小时视频课程，25 个视频.
Animation¶
- CSS Transitions and Transforms for Beginners - 介绍 CSS 转换和 CSS (2D) 转换.
- All you need to know about CSS Transitions - 还涉及从链接和事件到硬件加速和动画功能的高级主题.
- CSS 3D transforms - 多页教程，包含卡片翻转和旋转木马效果等示例.
- CSS Animation for Beginners - 使用关键帧传授 CSS 动画的概念.
- animatable - 漂亮的小页面展示了哪些 CSS 属性是可动画的.
Related¶
Awesome JavaScript Learning - 一个仅限于最佳 JavaScript 学习资源的小列表.