应用错误收集

以正确的方式重新学习CSS

时间：2009-10-15 17:52:59

标签： css user-interface frontend

我是一名从事网络开发两年多的程序员。尽管过去两年我一直在做前端工程，但我认为我并没有以正确的方式做到这一点 例如：

我仍然使用表格进行布局，而不仅仅使用CSS。我还没有找到一种正确呈现数据对齐和表格的方法。
我不知道display: none和visibility: hidden之间的区别（好吧，我现在知道了。但是有很多情况，例如填充，边距，溢出等）
我没有真正遵循继承方式来编写CSS。几乎每种风格都以#而不是类开始。
每当页面加载缓慢时，html元素就会不合适，只有当它完全加载时才会按顺序排列。
我不知道萤火虫的照片是什么传递的（顺便说一下，萤火虫是我的救世主。如果没有萤火虫，生活将是不可能的）

alt text

每当布局乱七八糟时，我都很想使用position：absolute。它总是会陷入更大的混乱。

我知道我做了很多错事（我需要把它弄好），但是我设法让事情到位并以某种方式显示出来，只是看到它在不同的浏览器中搞砸了。

我不想在CSS或CSS上做假人的入门。我知道的不止于此。我想以正确的方式学习CSS。专注于我上面展示的例子和纠正它们之类的问题。

您能否指出我的资源或添加CSS开发人员使用的常用建议和提示，以使其正确。

19 个答案:

答案 0 :(得分：23)

Jeffrey Zeldman查看Designing With Web Standards。

答案 1 :(得分：12)

以下是一些生活的一般规则：

表适用于表格数据。如果您呈现的数据属于表格，请不要试图用<div>制作网格。没有意义。
就布局而言，使用<div>标签，远离桌子。很好地了解 float 属性。使用CSS3，显示属性将会有新的改进标准。学习它们。
display: none从视口中完全删除元素。相反，visibility: hidden保留了该元素本来会占用的空白。在这两种情况下，元素都保留在DOM中。
类和ID的一般规则。页面元素和ID应该与每页具有一对一的关系。例如，＃Column1，＃Column2，＃Footer，＃Header。另一方面，页面元素和类应该是多对一关系，例如：.container或.navLink。当你知道你将要使用特定元素时使用类。
从效率的角度思考。您拥有的样式规则越少，页面加载的速度就越快，调试就会出现更简单的样式问题。

我还有大约一百万个要说的内容，但这应该让你开始。

答案 2 :(得分：10)

对于布局驱动的CSS，请务必查看Everything You Know About CSS Is Wrong。它有点尖端，因为IE 7不支持display: table（可惜，我知道），但它确实涵盖了传统的布局CSS技术，如浮动和绝对定位，并提供从基于表格的布局到基于表格的布局的良好过渡CSS的。我强烈推荐它。

我不知道你是在构建任何动态语言，还是只编写原始HTML，但你也应该考虑在你的项目中使用SASS，因为我觉得它有助于强制你要多注意继承。否则，查看更多“基本”教程（如CSS for Dummies）可能实际上会有所帮助，因为它们会详细介绍CSS的基本原理。

最后，当您在语境下具有语义正确的（x）html时，CSS效果最佳。在我看来，当你在下面有很好的，语义正确的html时，最容易看到和学习“好”的CSS。 Here's a good overview of when to use what tags。一般来说，我觉得最好用不要考虑什么？来编写我的内容，然后再使用CSS来使其变得华丽。

与往常一样，您可以在CSS Tricks获取大量巧妙的提示和技巧，这些提示和技巧一直帮助我了解有关语言正确用法的更多信息（例如，当我了解overflow: auto时浮动元素！天才！）。

希望有所帮助！

答案 3 :(得分：9)

访问CSS Zen Garden，了解您只能使用CSS执行的操作。
访问W3 schools并按照教程操作。这对你来说似乎很简单，但你会学到基本的东西。
访问某些网站，例如A list Apart，了解如何操作和学习技巧。
查看CSS框架是否符合您的需求（例如960 Grid）。

答案 4 :(得分：5)

我假设您已经安装了Firebug？

此外， http://www.doctype.com可能会获得更相关的结果。

答案 5 :(得分：3)

练习，练习，练习。你知道你不知道的，这是我心中成功的关键。你做的每一个项目，都试着提高你的技能，最终以正确的方式做到第二天。

Eric Meyer的Cascading Style Sheets 2.0 Programmer's Reference是一个很好的资源，可以准确理解选择器和规则是如何工作的，并且也是一个很好的参考。

关于你发布的内容的一些想法。

Master Reset样式表将会帮助解决浏览器差异。
表格数据应使用表格它的布局应避免使用表格标签有利于css。

答案 6 :(得分：2)

这里有很多人提供了很好的建议。我再添加两个：

首先，尝试编写有效的（X）HTML。您可以使用 W3C's HTML validator 轻松测试HTML代码。主要关注内容，而不是风格。
其次，尝试编写有效的CSS，最好是在单独的.css文件中。避免使用style属性。（如果你想支持Redmond的某些旧浏览器，这部分可能很难）。您可以使用 W3C's CSS validator 。

答案 7 :(得分：1)

阅读Eric Meyer的CSS: The Definitive Guide。他解释了为什么CSS被创建，它是如何工作的（根据标准），并将为您提供理解更精细点的背景。它也是一个很好的参考。

答案 8 :(得分：1)

我认为你应该根据你的布局需要使用所谓的“ css框架”（例如960.gs）。

它们快速可靠，足以构建跨浏览器布局，并且易于阅读和理解，因此您可以在编码时学习所有良好实践。

CSS很简单，不是真正的编程语言：不要害怕“框架”这个词;）

答案 9 :(得分：1)

Firebug中的实验

我不知道这张照片是什么萤火虫正在传播

Firebug本身可以帮助你。这样做：

创建一个包含一些文字的div。
使用CSS为其提供padding: 5px; margin: 5px; border: 1px solid black;
在你的问题中显示，在Firebug中检查它。
点击它显示的框模型中的任何一个数字，然后开始按向上和向下箭头（或键入不同的数字）。
了解它如何实时变化？这是关于Firebug的最好的事情之一：它允许你在不重新加载的情况下进行调整，然后在看起来正确时修改你的样式表。
继续这样做，直到您了解填充，边距和边框的工作方式。

答案 10 :(得分：0)

对我来说，Michael Bowers的Pro CSS and HTML Design Patterns改变了这一切。不再是无休止的试错，而是问题 - 模式 - 解决方案。不可缺少的。

答案 11 :(得分：0)

基础非常简单，如果你已经没有一些css编码了，你应该真的很容易。

关于跨浏览器布局的最佳实践，浏览器怪癖，黑客和其他粗略的东西是另外的。

这是我建议的阅读清单，所有这些都在我的书架上，当然值得一读！如果你问我，如果你是一名网站设计师，我会说这些是你应该阅读的书。

答案 12 :(得分：0)

每当页面加载缓慢时，html元素就会不合适，只有在它完全加载时才会按顺序排列。

您是否将样式表放在<head>部分的顶部？
您是在宣布图片的明确尺寸，还是浏览器必须猜测，然后在图片显示时重新排列？

答案 13 :(得分：0)

好吧，我会尽我所能解决其中的一些问题。

display:none和visibility:hidden之间的区别在于设置显示时，不保留该项目的空间。所以想象一下，当显示器设置时，项目“离开”页面。而如果您使用可见性选项，则元素位于页面上，在它们的位置只是不可见。我清楚地解释了吗？希望这对你有用。

就填充，边框和边距而言，这都称为CSS Box模型。信息包含为元素，填充，边框，然后是边距。因此，填充是元素内容与其边界之间的距离，而边距是边框与相邻元素之间的距离。再一次，我希望这有助于为你清楚一点。

过渡到CSS有时很棘手，但非常值得。

答案 14 :(得分：0)

你可以先阅读一些有关此事的好书。 Eric Meyer的人员都非常高品质。我学到很多的另一本书是CSS设计书的禅。

剩下的就是努力和实践。确保你理解为什么某些东西按照它的方式工作，不要对“试错法”css开发感到满意。

答案 15 :(得分：0)

根据您的学习风格，我可能会建议您直接找到源代码：CSS的定义。您可以在此处找到各种规范： http://www.w3.org/Style/CSS/。虽然规范并没有真正涵盖特定的浏览器怪癖（如果它确实存在，它们不会是怪癖，是吗？），它对于解释每个部分的工作方式（对我而言）确实很好。

答案 16 :(得分：0)

在我看来，

http://htmldog.com/是以正确方式学习前端Web开发的权威资源之一。

答案 17 :(得分：0)

我会告诉你我的秘密：按照这两个经典教程

Listutorial

Floatutorial

你会知道你需要了解的关于CSS的80％。

答案 18 :(得分：0)

30 Websites to follow if you’re into Web Development