提高 Web 开发技能的 20 大 CSS3 教程
已发表: 2022-05-06级联样式表 (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 复习笔记
注释和样式指南是许多网页设计师的驱动力。 我们必须记住将我们最喜欢的笔记资源放在一边，以便将来参考。 就 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 幻灯片
带有 CSS3 的幻灯片？ 那一定是不可能的！ 这些概念通常针对 JavaScript 或 jQuery 等语言。 这些语言使在旅途中创建动态内容变得容易。 但是 CSS3 呢？ Jonathan Snook 并没有向我们承诺任何新的东西，相反，他给我们提供了一个示例，说明我们如何使用 CSS3 动画效果来创建幻灯片体验，而无需使用任何外部资源，例如 JavaScript。 他的 CSS3 动画小介绍性教程是创造力战胜怀疑的完美例子。
CSS 模块——大规模解决 CSS 的挑战
CSS 将不可避免地超越其当前的限制，就像 JavaScript 所做的那样。 回顾 CSS 的古老历史，我们在能够操纵颜色和元素外观方面已经取得了长足的进步，如今 CSS 为希望使用单一语言完成所有工作的开发人员提供了一个更加复杂的工具箱开发任务。 CSS 模块用于帮助开发人员更好地对齐他们的 CSS 代码，然后当应用程序或项目开始失控时可以对其进行扩展。 在这篇精彩的教程中，Tom Cornilliac 解释了我们如何组合不同的样式表并将它们用作我们通过 React 等框架启动的项目的模块。 谁知道导入样式表和访问它们的预定义函数会很容易。
在 SVG 中动画剪辑元素
SVG 和 CSS3 动画是 Web 开发中最热门的主题之一。 这要归功于我们开始不再需要使用繁重的图像和动画文件来显示我们的内容，而是设计师正在学习如何使用浏览器的本地语言来模仿这些精确的动画。 Dennis Gaebel Jr 向我们介绍了如何使用 CSS 剪辑来实现令人惊叹的动画效果和使用令人惊叹的矢量视觉效果。
富有表现力的 CSS
很长一段时间以来，富有表现力一直是开发者社区中的一个新词。 这是一个从编程语言中的表达性概念松散地借用的术语。 如果一种编程语言允许您以易于理解的代码自然地表达您的想法，那么它通常被认为是富有表现力的。 一般来说，“富有表现力”并不是什么新鲜事。 开发人员多年来一直在谈论这个问题。 尽管如此，每次在野外发布新功能时，开发人员，尤其是设计人员都需要一些时间来适应他们富有表现力的工作流程，因此有时项目可能会变得一团糟，并陷入太多试图同时工作的功能。 表现力是编写代码的轻量级方法，效果很好，看起来不错，并且易于维护。 以此作为风格指南，别忘了对作者表示感谢； 约翰·波拉塞克。
响应式设计中的动画
正如在整篇文章中已经了解到的，动画和响应是设计师的两个非常热门的话题，对于那些希望真正测试现代 Web 开发能力极限的人来说，将两者结合起来变得越来越有趣。 Val Head 发表了一篇非常有见地的文章，关于在响应式网页设计中使用 CSS3 动画，以及如何在不失去其价值的情况下最好地呈现这些动画。 用其他成功网站的几个展示演示占据了这篇文章，这些网站已经在桌面和移动设备上建立了动画。
为什么我对原生 CSS 变量感到兴奋
CSS 自定义属性，也称为变量，通过启用动态功能帮助 CSS3 开发人员加快 CSS3 开发过程。 预处理器已经这样做了一段时间了。 许多人已经适应了永久使用预处理器的想法。 尽管如此，不可避免地所有这些功能（在标准中可用）都会在现代浏览器中找到它们的方式。 没有什么比在原生环境中开发更好的了，不用担心外部软件的维护和可靠性。 作为一名 Google 工程师，Philip Walton 花了他宝贵的时间整理了一篇关于新 CSS 功能的非常有见地的作品，以及为什么社区应该接受这样的变化，而不是担心语法外观等愚蠢的事情。
完整 CSS 中的 Twitter 心脏动画
Twitter 一直都是新闻，而且有很多很好的理由。 其中一个原因是 Twitter 决定用“爱”图标切换“收藏”按钮。 这是一个大胆但必要的举措，可以在网站周围建立一种更加以社区为导向的感觉。 该公告是在 Twitter 的一个官方账户上通过动画 GIF 图像发布的。 它展示了一个很酷的“心脏飞溅”动画，并附有文字。 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 开发者网络仍然是所有 HTML5、CSS3 和 JavaScript 的主要来源之一。 完全由社区驱动，MDN 以最适合您的学习速度和对 CSS3 的整体理解的方式为所有提到的语言提供样式指南。