CSS 基本资源指南

CSS 是一个广泛的话题，因为它本身比表面上看起来要复杂得多。随着网格、弹性框和各种动画工具（更不用说预处理器！）的不断涌现，像这样的指南很难概括这个主题。即便如此，在本指南中，我还是精选了我认为最有帮助或经常使用的课程、文章和其他资源。

基本介绍

MDN：CSS：层叠样式表

MDN 指南是 Web 开发人员事实上的标准文档。

Odin 项目 CSS 简介

“在这里，我们将比您以前更深入地介绍每个基础 CSS 概念。”

CSS 基础

您或许听说过样式与内容分离的理念，但却深陷嵌套表格和过时标记的泥潭。如果真是这样，那么您来对地方了！

20分钟学会CSS

“在本视频中，我们将在 20 分钟内介绍使用 CSS 所需了解的所有内容。”

面向初学者的 CSS 速成课程

“在这个视频里，我会尽可能多地讲解 CSS。我们会学习样式、选择器、声明等等。”

如何学习 CSS

你不需要记住每个 CSS 属性和值，因为有很多好地方可以查找它们。不过，有一些基本的东西可以让你更容易使用 CSS。

弹性盒子

MDN 上的新 Flexbox 指南

MDN 指南列表和学习 flexbox 的有用大纲。

什么是 Flexbox？！

“一个简单、免费的 20 个视频课程，可帮助您掌握 CSS Flexbox！”

20分钟学会Flexbox CSS

“在这个简短的视频中，我们将介绍 CSS Flexbox 模型。”

Flexbox 基础知识

另一个关于 flexbox 的简短课程

弹性盒青蛙

“欢迎来到 Flexbox Froggy，在这个游戏中您可以通过编写 CSS 代码来帮助 Froggy 和朋友们！”

网格

MDN：CSS 网格布局

CSS 网格的一系列指南和参考

CSS 网格。

“通过 25 个精彩视频与 Wes Bos 一起学习 CSS Grid”

CSS 网格布局速成课程

“在本视频中，我们将了解新的 CSS 网格布局以及如何创建基于网格的布局和对齐。”

5 分钟学会 CSS 网格 - 初学者教程

“网格布局是网站设计的基础，而 CSS 网格模块是创建网格布局最强大、最简单的工具。”

动画片

MDN：使用 CSS 动画

MDN 动画资源指南

你好，动画！

“欢迎来到我们的 CSS 动画课程，好奇的 CSS 探索者！”

CSS动画

“CSS 动画文章、技巧和教程。”

CSS3 动画与过渡速成课程

“这是一门适合初学者的速成课程，讲解如何使用关键帧和 CSS 过渡来实现 CSS 动画。”

组织

组织 CSS 的方法

开发人员 Ben Frain 曾经说过，编写 CSS 代码很容易，但扩展和支持它却很难。本文介绍了解决此问题的一系列解决方案。

CSS 在 __

“不同公司的 CSS 样式指南或方法的集合”

CSS 架构：CSS 文件组织

“良好的 CSS 架构的一部分是文件组织。”

绩效与组织

“能够扎实理解并编写 HTML 和 CSS 是一项很棒的专业知识。”

预处理器

CSS 预处理器

MDN 词汇表定义，包含一些最流行的预处理器的链接。

CSS 预处理器简介：SASS、LESS 和 Stylus

CSS 预处理器伴随我们的开发工作已经很多年了。最初实现时，它们功能有限。但如今，它们已成为 CSS 开发的关键要素和必备工具。

SCSS 和 Sass

对 SCSS 和 Sass 的全面概述，可以说是最广泛的预处理器。

CSS预处理器

免费代码营预处理器指南。

其他资源

CSS技巧

这可能是有关 CSS 的最主要的来源。

CSS 专业技巧

“一系列技巧助您提升 CSS 技能”

CSS 参考

“免费的 CSS 视觉指南”

巴菲奇

“这不是您应得的 CSS 特异性指南，而是您现在需要的指南。”

重新学习 CSS 布局

如果你发现自己在 CSS 布局上苦苦挣扎，那么你很可能正在为浏览器做决定，而这些决定本该由浏览器自己决定。《Every Layout》将通过一系列简单、可组合的布局，教你如何更好地利用浏览器和 CSS 内置的算法。