CSS Zen Garden

CSS 设计之美

一个展示基于 CSS 的设计能实现何种效果的示例。 从列表中选择任何样式表，将其加载到此页面中。

下载示例 html file 和 css file

通往启蒙之路

一条黑暗而沉闷的道路上，散落着特定于浏览器的标签、不兼容的 DOM、损坏的 CSS 支持以及被废弃的浏览器的遗迹。

我们必须清除过去的思想。 由于 W3C、WaSP 和主要浏览器创建者等人士的不懈努力，Web 启蒙已经实现。

CSS Zen Garden 邀请您放松身心，并沉思大师们的重要课程。 开始清晰地看问题。 以新的和令人振奋的方式学习使用历史悠久的技术。 与 Web 合而为一。

这是关于什么的？

持续需要展示 CSS 的强大功能。 Zen Garden 旨在激发、激励和鼓励参与。 首先，查看列表中一些现有的设计。 单击任何一个都将把样式表加载到此页面中。 HTML 保持不变，唯一改变的是外部 CSS 文件。 是的，确实如此。

CSS 允许完全控制超文本文档的样式。 唯一能让人感到兴奋的方式是展示它真正能达到的效果，一旦缰绳掌握在那些能够从结构中创造美的人手中。 设计师和程序员都为 Web 的美做出了贡献； 我们总是可以进一步推动它。

参与

强大的视觉设计一直是我们的重点。 您正在修改此页面，因此也需要强大的 CSS 技能，但是示例文件已进行了充分的注释，即使是 CSS 新手也可以将其用作起点。 请参阅 CSS Resource Guide，以获取有关使用 CSS 的高级教程和技巧。

您可以随意修改样式表，但不能修改 HTML。 如果您以前从未以这种方式工作过，那么起初可能会感到畏惧，但请按照列出的链接了解更多信息，并使用示例文件作为指南。

下载示例 HTML 和 CSS 以在本地副本上工作。 完成您的杰作后（请不要提交未完成的作品），将您的 CSS 文件上传到您控制下的 Web 服务器。 向我们发送一个链接，指向该文件和所有相关资产的存档，如果我们选择使用它，我们将下载它并将其放置在我们的服务器上。

益处

为什么要参与？ 为了获得认可、灵感和一种资源，我们可以共同参考，向人们展示 CSS 真正可以实现的惊人效果。 该站点既是当今 Web 工作者的灵感来源，又是未来学习者的学习工具，也是我们所有人都可以期待的未来技术库。

要求

在可能的情况下，我们希望看到主要使用 CSS 1 和 2。 CSS 3 和 4 应仅限于广泛支持的元素，或应提供强大的回退。 CSS Zen Garden 是关于功能性、实用性的 CSS，而不是只有 2% 的浏览者才能看到的最新前沿技巧。 我们唯一真正的要求是您的 CSS 能够通过验证。

幸运的是，以这种方式进行设计可以很好地展示各种浏览器现在如何实现 CSS。 遵循指南时，您应该在大多数现代浏览器中看到相当一致的结果。 由于如今 Web 上用户代理的数量众多 - 尤其是考虑到移动设备 - 因此可能无法在每个平台上实现像素完美的布局。 没关系，但在尽可能多的设备上进行测试。 您的设计应至少在 IE9+ 以及最新的 Chrome、Firefox、iOS 和 Android 浏览器（由超过 90% 的人口使用）中运行。

我们要求您提交原创作品。 请遵守版权法。 请尽量减少令人反感的材料，并尝试将独特而有趣的视觉主题融入您的作品中。 我们已经不需要另一个与花园相关的设计了。

这既是一个学习练习，又是一个演示。 您保留对图形的完全版权（有少量例外，请参阅 提交指南），但我们要求您根据与 本网站上的 Creative Commons 许可 相同的 Creative Commons 许可发布您的 CSS，以便其他人可以从您的作品中学习。

由 Dave Shea 设计。 带宽由 mediatemple 慷慨捐赠。 现在可用：Zen Garden, the book。

HTML CSS CC A11y GH

选择一个设计:

存档:

资源:

*[CSS]: Cascading Style Sheets *[DOM]: Document Object Model *[W3C]: World Wide Web Consortium *[WaSP]: Web Standards Project *[HTML]: HyperText Markup Language *[CSS 1 & 2]: Cascading Style Sheets, levels 1 and 2 *[CSS 3 & 4]: Cascading Style Sheets, levels 3 and 4 *[FAQ]: Frequently Asked Questions