提高技能的 CSS 指南

Question

大家好，上个月我开始学习 CSS。我做的第一件事是阅读我能在 www.w3school.com 上找到的所有内容，之后我开始阅读 CSS Mastery 2nd版本。我已经建立了几个自己的网站并取得了成功，但我对我所知道的仍然不满意，我什至练习了新的 CSS3 元素。

我在 http://www.cssplay.co.uk/ 上看到很多使用 css 构建的很酷的东西但唯一的问题是没有显示源代码，我不知道血腥的东西是怎么回事。一个很好的例子是:

http://www.cssplay.co.uk/menu/tilt.html

这些只是我在这个网站上看到的东西之一，我想学习如何构建它们。

所以有谁知道任何其他类似的网站对 css 的更高级的东西提供了很好的解释(不是初学者的东西，比如构建一些下拉菜单、滚动或悬停效果)？非常感谢任何建议!

Answer 1

如前所述，Firebug/Chrome Inspector 等工具绝对是必备工具。

我从各种不同浏览器的现实问题中获得了最多的经验。您创建了一个站点，它在特定浏览器中看起来不太好。所以你在网上搜索。找到解决方案并记住它。我认为 CSS 本身是一个相当简单的工具，我将“高级”CSS 归类为掌握使站点跨浏览器和在 IE6/IE7+ 等浏览器中工作所需的各种技术。

此外，永远不要放弃 CSS，如果您发现问题，请尝试寻找答案。大多数时候，会有一个简单的解决方案。

通常，请确保您的 CSS 尽可能简单。我通常发现大多数复杂的 CSS 都可以用相对简单的代码代替，并且发现人们会忘乎所以而忘记简单的技术来实现类似的解决方案。一个这样的问题是在 div 的右侧放置一个按钮，如下所示:

 -----------------------------------------------
                                    |  Button  |
 -----------------------------------------------

您可能会看到有些人会将按钮向右浮动，从而增加不必要的复杂性。 text-align:right 发生了什么？ :-)

最后，确保找到几个您喜欢的博客，例如 http://csstricks.com并阅读它们，注意新技术。尝试并掌握“2 列布局”，了解 block /内联 block /内联、边距折叠、表格、html 表单、IE6/7 hasLayout 之间的区别，等等。如果您尝试从头开始制作网站模板，您将涵盖其中的大部分内容。也许从现有网站开始，看看是否可以实现相同的布局。

我不确定如何使用 CSS 了解它的陷阱而不会错误地遇到它们。