越来越专业地学习css

我从过去两年开始开发网站，我很难学习CSS（只花了一整天的时间创建像twitter一样的登录框...）。迟早我会回到桌面布局，并完成任务（几乎所有我深入到其他源代码和谷歌喜欢地狱......但我希望我知道如何做到这一点，我的方式，我平时搞清楚我的编程问题而不是Google整天......）。越来越专业地学习css

即使在某个时候，如果我实现了创建完美布局的目标，并返回到IE进行测试，一切都会搞砸。

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

我想我需要学习更多的东西，以便我花更少的时间调整布局和更多的时间来编程。

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

来源

2010-07-10 iamgopal

掌握CSS是不够救你脱离IE6。 – TNi 2010-07-10 07:39:35

彻底学习CSS，以及一些IE怪癖，真的帮助我使用IE6。现在几乎所有我做的事情都只是在Ie6/7中做了很少的修改。 – JAL 2010-07-10 18:38:57

这是一个链接，可能会帮助你：http://www.quirksmode.org/ – Alerty 2010-07-10 18:50:12

所有的程序员+设计师是如何工作的？

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

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

而且，如何掌握CSS？

有几个improtant的东西来包装你的头左右，这将使你的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遇到的错误是：

来源

2010-07-10 10:28:15 staticbeast

IE6在标准模式下不使用MS的盒子模型，是吗？ – JAL 2010-07-10 18:39:43

任何人都知道http://www.molly.com/2005/10/06/css2-and-css21-specificity-clarified/的最新链接？ – Antony 2011-05-17 19:38:59

@Antony我用“The Wayback Machine”链接更新了它。我会尽力联系原作者，看看我是否可以在将来反映它，因为它看起来像博客已被删除，但现在会做。 – staticbeast 2011-05-17 23:24:49

2年前我有类似的问题。我阅读了CSS 2.1规范（从W3C免费下载） - 它很难阅读 - 用FF来回加载测试，但它确实巩固了我对CSS的理解（以及后来与CSS有关的项目）。大多数市场化的CSS书籍太实际了，以至于无法深入了解（您可以自由应用于您自己的概念）

来源

2010-07-10 07:09:25

css很难做到地狱，所以不要期待一些神奇的东西;我建议的事情是wireframing：http://articles.sitepoint.com/article/wire-frame-your-site

来源

2010-07-10 07:10:50

我一直在做网络工作12年以上。我经历过桌面布局，框架，DHTML，XHTML，CSS，Ajax ......我记得我第一次看到CSS，我以为“WTH是这个烂摊子？我永远不会需要这个。”一年后，我发现自己了解它，而且事实上你可以用它做一些非常有用的事情。但要学习和学习，需要时间和奉献精神。

一些提示，使用像埃里克迈耶的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）的历史以及他看到的与他们有关的问题。

来源

2010-07-10 07:25:04 Timothy

我喜欢doctype建议最好的，它的越野车多少文档可以改变布局。谢谢。 – iamgopal 2010-07-10 14:22:57