提高 Web 开发技能的 20 大 CSS3 教程

级联样式表 (CSS) 不仅仅是一种用于设计 Web 样式的语言。 它正在慢慢成长为一种完全有能力的语言，可以处理动态设计方面的问题。 在许多方面，CSS 可以替代传统的 HTML 和 JavaScript，以实现交互性以及对外部库和代码片段的依赖。 我们今天在网络上看到的所有样式都是直接通过 CSS 实现的。 随着标准的不断提高和改进，掌握最新情况比以往任何时候都更加重要。 Web 浏览器呈现 CSS，很像 HTML，这有时意味着旧浏览器无法支持新功能。

近年来，前端 Web 开发和 Web 设计的入门肯定变得更加容易。 我们看到更多的教程、指南和课程可供注册。但归根结底，归根结底是愿意使用新学到的技能并将其应用到现实生活中的项目中。 CSS 是需要用户使用特定模式和布局选项来应用于 JavaScript 和 HTML 等语言的脚本语言之一。 使用 HTML 和 CSS 构建新网站时，最好按部就班地充分应用所学知识。

我们今天的目标是涵盖来自领先的前端开发人员和设计师的最突出和最现代的 CSS3 教程。 这里所有的教程都是基于最新的标准来帮助你成为一个更好的网页设计。 在文章的最后，我们还会提到一些 CSS3 学习资源以供进一步学习。 像任何编程语言一样，为了更好地理解某些东西，我们最好允许自己通过动态在线平台或在我们自己的个人代码编辑器中进行一些重复编码。

在 CSS 中编辑图像

在网页设计中使用图像是完全有道理的，但故事比这更具技术性。 虽然在网页设计中使用自己喜欢的照片很有趣，但有时我们必须考虑一些事情。 图像文件大小是否适合我们的项目？ 我们可以通过 CSS 而不是通过 Photoshop 等外部应用程序添加过滤器吗？ 我们真的可以用 CSS 做什么来帮助我们的照片看起来更好？ Una Kravets 带我们踏上 15 分钟的旅程。 在其中，她谈到了 CSS 图像编辑以及我们如何将 CSS 转换为更像是一个独立的图像编辑软件平台，而不仅仅是一种操作设计方面的方法。

使用现代 CSS 构建响应式图像网格

继续图像的主题，这里我们有 George Martsoukos。 他向我们展示了一个关于如何使用现代 CSS3 函数构建响应式图像网格的简单轻量级教程。 图像网格（或有时称为画廊）都是关于在网格的上下文中显示视觉内容。 这些网格对于分享他们的照片或使用图像网格作为扩展他们的投资组合项目的人来说非常有用。 在本教程中，George 向我们介绍了确保我们创建的网格对桌面和移动应用程序具有同等响应能力的过程。

学习 CSS 布局

网页设计是关于布局的一切。 我们创建一个布局，然后使用其他可用的元素和函数来设计它的样式，并以此为基础。 众所周知，许多网页设计布局完全依赖于 CSS。 学习 CSS 可以让我们更多地了解网站布局及其工作原理。 但是，如果您还不具备这些知识，Mikito Takada 写了一本在线书籍，该书籍分为 5 个不同的章节，介绍如何正确地使用 CSS3 创建布局。 他谈到了定位，还谈到了对齐不同的框元素以开始创建网格元素，他现在更深入地介绍了定位和可用功能。 他将最后两章专门用于 Flexbox（CSS 函数）。 还有一篇关于他自己成为网页设计师的旅程中最好的 CSS 样式提示和技巧的文章。

CSS 复习笔记

注释和样式指南是许多网页设计师的驱动力。 我们记得把自己最喜欢的笔记资源放在一边，以便日后参考，这一点非常重要。 就 CSS3 而言，CSS Refresh Notes 是 GitHub 社区的最爱之一； 数百颗星，以及大量关于如何扩展此资源以使其成为最佳资源的社区投入。 CSS Refresh Notes 侧重于 CSS3 开发中最重要的方面。 它还可以让设计师快速了解大多数 CSS3 功能的参考注释。 无论是您需要帮助的定位或选择器，也许是响应式设计的媒体查询，或者如何在您的 CSS3 设计模式中最好地使用 SVG — 即使您没有立即感觉到，这些注释也会派上用场。

变量：CSS 架构的支柱

近年来，预处理器真正起飞了，它们是简单的框架和工具集，允许设计人员使用 mixin、函数和变量等内容扩展基本的 CSS3 功能。 您通常希望在诸如 JavaScript 之类的硬编码编程语言中看到的那种功能。 可以说，每个人都应该精通 CSS3，才能在不使用预处理器的情况下顺利编码。 尽管如此，诸如开发时间之类的事情仍然很重要。 变量有助于在更动态的环境中使用 CSS3。 这就是为什么 Karen Menezes 将您能找到的关于这个主题的最广泛的内容之一放在一起。

使用 Flexbox 设计产品页面布局

Flexbox 是一种新的 CSS3 布局模式，旨在帮助设计师针对各种设备优化设计。 新功能对许多人来说仍然是新的和陌生的，但 Flexbox 的使用在电子商务等领域变得越来越流行。 这个 CSS3 教程来自 Shopify 的团队，他们正在做一份报告，介绍他们如何在 Flexbox 的帮助下设法创建他们最新的 Shopify 模板之一，过程采取了什么以及最终结果是什么样的。 了解 Shopify 在电子商务市场的声誉，并自己沉迷于教程，这可能是帮助您更多地了解 Flexbox 以及如何开始在自己的网页设计中使用它的最方便的指南之一。

我所知道的关于使用 CSS 的响应式网页排版的一切

当人们想到响应式网页设计时，很多时候他们都在考虑将标准网站转变为适合移动设备的网站。 这不是错误的理解，但肯定还有更多。 Zell Liew 写了一篇关于如何使用响应式 Web 排版的精彩文章，以及在所有设备类型上为您的排版模式建立坚实基础所需要的内容。 不用说，教程评论部分也变得非常有用。 这完全归功于社区网页设计师的额外投入。

最简单的 CSS 幻灯片

用 CSS3 制作幻灯片？ 那一定是不可能的！ 此类概念通常针对 JavaScript 或 jQuery 等语言。 这些语言可以轻松地随时随地创建动态内容。 但是 CSS3 呢？ Jonathan Snook 并没有真正向我们承诺任何新东西，而是向我们展示了如何使用 CSS3 动画效果创建幻灯片体验而无需使用任何外部资源（例如 JavaScript）的示例。 他的 CSS3 动画小入门教程是创造力战胜怀疑的完美例子。

CSS 模块——大规模解决 CSS 的挑战

CSS 将不可避免地超越其当前的限制，就像 JavaScript 那样。 回顾 CSS 的过去，我们在能够操纵颜色和元素外观方面已经走了很长一段路，如今 CSS 为希望使用一种语言来完成所有工作的开发人员提供了一个更加复杂的工具箱开发任务。 CSS Modules 用于帮助开发人员更好地对齐他们的 CSS 代码，然后当应用程序或项目开始失控时可以扩展这些代码。 在这个精彩的教程中，Tom Cornilliac 向我们解释了我们如何组合不同的样式表并将它们用作我们通过 React 等框架启动的项目的模块。 谁知道导入样式表并访问它们的预定义功能会如此简单。

内容显示模式

内容就是一切。 即使是那些缺乏适当的网站展示技巧但仍然能够保持高内容质量的网站，通常也是人们最常参考的网站。 这方面的好例子是像 Reddit 和 Hacker News 这样的网站——内容丰富的网站，在网站设计中没有真正的强制措施。 内容显示模式不是关于显示模式，而是整体内容元素设计如何协同工作以提供在内容显示和实际内容之间完全集成的浏览体验。 这个来自 Dan Mall 的教程是关于内容显示模式的最简洁的指南之一，他的经验报告不言自明——他曾为 TechCrunch 等网站的重新设计项目工作过，甚至我们不得不承认，新的 TechCrunch 设计非常时尚！

在 SVG 中动画剪辑元素

SVG 和 CSS3 动画是目前 Web 开发中最热门的话题之一。 这是因为我们开始不再需要使用大量图像和动画文件来显示我们的内容，而是设计师正在学习如何使用本地语言在浏览器中模仿这些精确的动画。 Dennis Gaebel Jr 向我们简要介绍了使用 CSS 剪辑来实现令人惊叹的动画效果，以及使用令人惊叹的矢量视觉效果。

富有表现力的 CSS

很长一段时间以来，Expressive 一直是开发者社区中的一个创造术语。 这是一个从编程语言中的表达性概念松散地借用的术语。 如果一种编程语言允许您用易于理解的代码自然地表达您的想法，那么它通常被认为是富有表现力的。 一般来说，“富有表现力”并不是什么新鲜事，开发者们已经讨论了很多年了，但是每当一个新功能在野外发布时，开发者特别是设计师需要一些时间来适应他们的表现力工作流程，所以有时项目可能会变得一团糟，并陷入试图同时工作的太多功能中。 Expressive 是一种轻量级的方法来编写运行良好、看起来不错且易于维护的代码。 以此作为风格指南，不要忘记向作者表示感谢； 约翰·波拉切克。

响应式设计中的动画

正如文章中已经了解到的，动画和响应式是设计师的两个非常热门的话题，对于那些希望真正测试现代 Web 开发能力极限的人来说，将两者结合起来变得越来越有趣。 Val Head 发表了一篇非常有见地的文章，内容涉及在响应式网页设计中使用 CSS3 动画，以及如何在不失去价值的情况下最好地呈现这些动画。 在文章中包含来自其他成功网站的几个展示演示，这些网站已经在桌面和移动设备上建立了自己的动画。

为什么我对原生 CSS 变量感到兴奋

CSS 自定义属性，也称为变量，通过启用动态功能帮助 CSS3 开发人员加快 CSS3 开发过程。 预处理器已经这样做了一段时间了，许多人已经适应了永久使用预处理器的想法，但不可避免地，所有这些特性（在标准中可用）都会进入现代浏览器，因为没有什么比开发更好的了原生环境，无需担心外部软件的维护和可靠性。 作为一名 Google 工程师，Philip Walton 花费了宝贵的时间来整理一篇关于新 CSS 功能的非常有见地的工作，以及为什么社区应该接受这种变化，而不是担心语法外观等愚蠢的事情。

完整 CSS 中的 Twitter 心脏动画

Twitter 到处都是新闻，原因有很多。 其中一个原因最终是因为 Twitter 决定用“爱”图标切换“收藏”按钮。 在网站周围建立一种更加以社区为导向的感觉是一项大胆但必要的举措。 该公告是通过一个 GIF 动画图片在 Twitter 的一个官方帐户上发布的。 它展示了一个很酷的“心脏飞溅”动画，并附有文字。 设计师 Nicolas Escoffier 有兴趣看看他是否能够仅使用纯 CSS3 将类似的动画拼凑在一起，然后猜猜看——他成功了，社区也很高兴！

说真的，使用图标字体

SVG 让网络变得更美好。 尽管时至今日，开发人员必须考虑到这样一个事实，即许多人仍在使用过时的移动操作系统版本浏览网页，而这种洞察要求开发人员加倍努力才能使事情正常进行。 图标字体仍在被其他人学习。 但是，此功能在现代开发人员市场中变得非常流行，在这些市场中，开发人员希望创造无缝且愉快的工作体验。

CSS 产品放大——没有 JavaScript

在电子商务中，它是放大，但也是放大，使客户可以放大更接近产品并探索其肉眼不可见的方面。 这绝对是一个很酷的效果，但对许多人来说，这对其业务的成功至关重要。 Michael Weaver 是一名 CSS3 黑客，他提出了一个想法，即在不使用任何 JavaScript 代码的情况下创建一个放大小部件，他成功地完成了这一壮举，现在任何人都可以浏览他的代码并在他们的网站上制作类似的小部件。

使用 CSS3 Flexbox 的真正响应式表格

表格帮助我们以更友好的方式排列我们的信息。 有时，样式良好的表格元素甚至不会作为一个元素出现。 但是借助 jQuery、HTML5 和 JavaScript 的可扩展性，我们可以让我们的表格更像 Excel 文档，而不是其他任何东西。 Vasan Subramanian 发布了一个深刻的教程，介绍如何使用 CSS3 的 Flexbox 功能为您的下一个网站或应用程序项目创建令人惊叹的响应式表格。

优化 CSS 交付

最后一个 CSS3 教程将是关于速度的，以及如何更好地编写我们的样式表以至少保证一些超出普通的速度提升。 Optimize CSS Delivery 是一份技术风格指南，展示了如何在不影响任何资源的情况下编写原生 CSS 代码。 编写 CSS 应该很有趣，这就是本教程的内容。

现代 CSS3 学习资源

如果没有适当的基础，从教程中学习有时会令人生畏。 这是有道理的，一个教程在它耗尽之前只能涵盖特定主题的这么多内容，教程适用于那些之前已经构建过一些东西，并希望扩展那些具有新功能、有趣概念和其他可能性启发的项目的人由社区。 为了帮助您更好地理解我们在帖子中讨论的 CSS3 教程，我们将列出一些非常棒的免费资源，用于在线学习 CSS3（现代的）。

完整的 CSS3 教程

同样，我们强调需要展示教程资源，以帮助您了解有关 CSS 的所有内容。 这个资源是一个完整的 CSS3 教程，它讨论了 CSS3 特性及其在现实世界中的用途。 本教程全面讨论了选择器、高级选择器、框模型、文本和字体以及其他功能，并提供了大量示例供您开始使用。 任何开始 CSS 开发的人都可以通过几个简单的项目迅速实现他们的进步。

CSS 教程

W3Schools 是初学者前端开发的家。 该资源已帮助数以百万计的开发人员更好地理解 HTML 和 CSS 的某些部分。 它还提供您在其他任何地方都找不到的免费学习内容。 W3Schools 是一个完美的 CSS 学习场所，适合那些对网络真正缺乏经验并希望快速上手的人。

HTML 和 CSS

你不能从头开始学习 CSS3 或 HTML5，而不去尝试 Codecademy。 甚至推荐信部分也充满了关于人们在完成 Codecademy 学习后如何找到高薪工作的评论。 许多教程站点通过代码示例教授直接语法。 另一方面，Codecademy“强迫”你玩弄代码。 这是通过每个学习课程背后的人员分配的直接和交互式任务来完成的。 这样的平台已经变得非常流行，现在几乎可用于所有编程语言。 毫无疑问，这是一种非常有效的学习方式。

学习 CSS 布局

我们之前在这篇文章中已经了解到布局是 CSS3 的基础。 但是现在，是时候真正运用这个概念了。 让我们通过一个未来的例子来了解 CSS3 布局属性如何工作以及我们可以用它们做什么。 给自己分配几天时间来完成本教程。 之后，您将处于理解布局属性及其用法的坚实中间水平。

CSS – 学习网络

Mozilla Developer Network 仍然是 HTML5、CSS3 和 JavaScript 的主要来源之一。 MDN 完全由社区驱动，以最适合您的学习速度和对 CSS3 的整体理解的方式提供所有提到的语言的样式指南。