Question

我自从过去两年开始开发网站，我很难学习CSS（只花了一整天创建像twitter这样的登录框......）。我迟早会回到桌面布局，完成任务（几乎所有我深入研究其他源代码的东西和谷歌就像地狱......但我希望我知道怎么做，就像我通常想出的那样整天编程问题而不是谷歌......）。

甚至在一段时间后如果我达到创建完美布局的目标，并回到IE进行测试，一切都搞砸了。

我是唯一一个开发它的人，所以通常70％的时间花在设计上，30％花在编程上。

我想我需要学习更多东西，这样我就可以花更少的时间调整布局，花更多时间编程。

你们所有程序员和设计师的工作方式如何？而且，如何掌握CSS？

Answer 1

你们所有的程序员和设计师如何工作？

使用CSS时，我发现最好先为符合标准的浏览器设计和构建网站（我的偏好是FireFox）。然后，当您看到它时，请检查Internet Explorer和其他浏览器。

对于任何复杂性的设计，不幸的是，多个浏览器会花时间修复规则，直到它一致为止。

而且，如何掌握CSS？

有几个重要的东西包裹你的头，这将使你的CSS生活更轻松：我要学的第一个是Box model。这是关于这个主题的官方W3C文章，这篇文章很长，所以我也会在下面添加一个图片，这简化了一下：

alt text

重要的是要注意浏览器以不同方式计算它。

一旦你知道是什么导致了自己的尺寸，布局应该更容易以与表格相同的方式实现。

帮助我解决正在发生的事情的第二个问题是特异性 This article帮助我解决了这个问题。基本的总结是每种类型的选择器（元素，类，id）都有一个权重归属于它，如果一个元素的css值具有更高的权重，那么它将不会被覆盖。

#id 0,1,0,0

.class 0,0,1,0

p 0,0,0,1

1,0,0,0

因此，无论你的css文件说什么都没关系，内联样式优先。例如：

a {color: red;}                                               (0,0,0,1)
.class1 a {color: blue;}         Overwrites red               (0,0,1,1) 
#id1 a {color: green;}           Overwrites blue              (0,1,0,1) 
#id1 .class1 a {color: yellow;}  Overwrites green             (0,1,1,1) 
#id2 a {color: red;}             Overwrites green, NOT yellow (0,1,0,1) 
#id1 #id2 a {color: black;}      Overwrites yellow and red    (0,2,0,1)

我还在阅读这篇文章。两次。

要学习的第三件事是如何支持以前的浏览器（如IE6）以及它们会困扰你的错误。我是这个网站的粉丝：http://www.positioniseverything.net/ 它们以清晰度和解决方案覆盖了在使用CSS实现跨浏览器支持时将遇到的大量浏览器错误。

IE6可能遇到的一些错误是：

Answer 2

我已经做了12年以上的网络工作。我经历过表格布局，框架，DHTML，XHTML，CSS，Ajax ......我记得第一次看到CSS时，我想“WTH就是这个烂摊子？我永远不需要这个。”一年后，我发现自己正在学习它，事实上你可以用它来做一些非常强大的事情。但要学习并学好它，需要时间和奉献精神。

一些提示，使用像Eric Meyer这样的CSS重置。 http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/。这将中和许多特定于浏览器的格式化，因此您可以从一个干净的平板开始，但不会像其他重置那样开销。

确保您有一个结构良好的HTML / XHTML文档，顶部有所需的DOCTYPE。不同的浏览器会根据不同的DOCTYPE以不同的方式呈现页面。

CSS也是一种不同的思维方式。然而，在您可能在此区块中放置图形之前，突然您正在考虑图层和背景。也许图形根本不在一个块中，而是有填充和背景图像本身。以不同的方式看待事物需要时间。

最后，我会承认，经过这么多年，我仍然会回到表格来布置我的大多数表格。 CSS很棒，但它不是圣杯。务实。您可能希望观看http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4的第一部分，其中Crockford概述了这些Web标准的一些历史记录，例如HTML和CSS以及他对这些标准的看法。

Answer 3

除了这里的其他好建议外，我还发现使用合适的工具进行开发可以提供很大的帮助。

首先，我发现在像Notepad++这样的编辑器中编写CSS可以提供帮助，因为语法突出显示可以随时发现令人沮丧的小错误。

我也使用Firefox进行初始测试，并确保设置DOCTYPE，如上所述。

我还使用了一个名为Firebug的优秀Firefox插件，它允许您检查页面的DOM元素并更改其CSS以便立即了解CSS的外观，以及许多其他功能。

然后我确保HTML和CSS都符合W3C标准。这可以在http://validator.w3.org/和http://jigsaw.w3.org/css-validator/在线完成，也可以通过另一个名为Html Validator的Firefox插件在线完成。

此外，我发现当我想在Javascript中操作页面时，我发现使用Javascript框架jQuery非常有用，从HTML / DOM / CSS细节中抽象出来并允许经过充分测试的跨浏览器兼容性。

也许看一下CSS框架。对于许多常见的布局情况，这些都经过了久经考验的CSS样式。我听说Frame是推荐的，对我来说很好看。

我发现单个大型CSS文件难以管理和阅读。但我担心将文件拆分成较小的部分（例如，每页一个CSS文件）会降低页面加载速度。解决方案是使用Minify。它允许CSS文件作为单个文件提供，以及“压缩”结果以消除冗余间距等。它非常易于使用，并且当浏览器缓存网站的旧CSS文件时也会消除问题。

Answer 4

2年前我遇到过类似的问题。我阅读了CSS 2.1规范（从W3C免费下载） - 它很难阅读 - 并且使用FF进行来回加载测试，但它确实巩固了我对CSS的理解（后来很快就加入了涉及CSS的项目）。大多数上市的CSS书籍都太实用，无法深入理解（您可以自由地应用于自己的概念）

Answer 5

css很难，所以不要指望一些神奇的东西;我建议的是线框图：http://articles.sitepoint.com/article/wire-frame-your-site

Answer 6

您应该查看Opera Web Standards Curriculum。有一些关于CSS的优秀文章。至少阅读Chris Heilmann的介绍。

Answer 7

我在线上课 - http://www.sitepoint.com/courses/css-live

这太棒了。它非常便宜并且非常好地理解了CSS

Answer 8

如果您不完全了解CSS的语言，您将不必要地浪费大量时间。编程非常耗时，因为它是!!

我不建议您通过访问网站开始学习CSS。你需要一个坚实的基础。为此，我推荐Andy Budd的 CSS Mastery 。这是一个快速阅读（阅读封面到封面），以及此后的一个很好的参考。书中有一个例子可以帮助你在5分钟内以非常灵活的方式编写登录表单。

接下来，您将需要CSS重置和基础：

学习css越来越专业

8 个答案: