html - 越来越专业地学习css

Question

我从过去两年开始开发网站，但我很难学习 CSS(只需花一整天时间创建一个登录框，例如 twitter...)。迟早我会回到表格布局，并完成工作(对于几乎所有我深入挖掘其他人的源代码和谷歌的东西......但我希望我知道如何按照我通常弄清楚的方式去做编程问题而不是整天谷歌......)。

即使过了一段时间，如果我实现了创建完美布局的目标，并返回到 IE 进行测试，一切都变得一团糟。

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

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

你们所有的程序员+设计师是如何工作的？以及，如何掌握 CSS？

Answer 1

How you all programmer+designer work?

在使用 CSS 时，我发现最好先为符合标准的浏览器(我的首选是 FireFox)设计和构建网站。然后，当您在其中看起来正确时，检查它是否适用于 Internet Explorer 和其他浏览器。

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

And, how to master CSS?

有几个重要的事情可以让你的头脑清醒过来，这会让你的 CSS 生活更轻松:我要学习的第一个是 Box model .这是关于这个主题的官方 W3C 文章，它很长，所以我将在下面包含一张图片，它稍微简化了一点:

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

一旦您知道是什么导致事物自行调整大小，布局应该更容易以与表格相同的样式实现。

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

#id 0,1,0,0

.类 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 时可能会遇到的一些错误是:

• The 3px float bug.
• The double margin bug.
• The peekaboo bug.