css - 以正确的方式重新学习 CSS

Question

我是一名从事 Web 开发已有两年多的程序员。尽管过去两年我一直在做前端工程，但我认为我的做法并不正确
例如：

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

替代文字

每当布局混乱时，我很想使用位置：绝对。它总是以更大的混乱而告终。

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

我不想为傻瓜做 CSS 或 CSS 的入门。我知道的远不止这些。我想以正确的方式学习 CSS。专注于像我上面展示的例子这样的问题并纠正它们。

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

score 23 · Accepted Answer

23

查看Jeffrey Zeldman 的使用 Web 标准进行设计。

于 2009-10-15T17:57:08.803 回答

score 12 · Accepted Answer

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

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

我还有大约一百万件事要说，但这应该让你开始。

score 10 · Accepted Answer

对于布局驱动的 CSS，请务必查看关于 CSS 的所有知识都是错误的。这有点前沿，因为 IE 7 不支持display: table（可惜，我知道），但它确实涵盖了传统的布局 CSS 技术，如浮动和绝对定位，并提供了从基于表格的布局到 CSS 布局的良好过渡。我强烈推荐它。

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

最后，当引擎盖下有语义正确的 (x)html 时，CSS 效果最好。在我看来，当你在下面有很好的、语义正确的 html 时，最容易看到和学习“好”的 CSS。以下是何时使用什么标签的一个很好的概述。一般来说，我发现最好的方式是编写我的内容，而不考虑它以后的外观，然后使用 CSS 让它变得华丽。

与往常一样，您可以在CSS Tricks中获得许多巧妙的技巧和窍门，它们总是帮助我更多地了解该语言的正确用法（就像我学习overflow: auto包含浮动元素时一样！天才！）。

希望有帮助！

score 9 · Accepted Answer

访问CSS Zen Garden，看看你只能用 CSS 做什么。
访问W3 学校并按照教程进行操作。这对你来说可能看起来很简单，但你会学到基本的东西。
访问一些网站，例如A list Apart以了解如何做事和学习技巧。
查看 CSS 框架是否适合您的需求（例如960 Grid）。

score 5 · Accepted Answer

我假设您已经安装了Firebug？

还，http://www.doctype.com可能会得到更相关的结果。

score 3 · Accepted Answer

练习，练习，练习。你知道你不知道什么，这就是我心目中成功的关键。你做的每一个项目，都努力提高你的技能，最终以正确的方式做这件事将成为第二天性。

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

对您发布的内容的一些想法。

主重置样式表将有助于解决浏览器差异。
表格数据应该使用表格。
它的布局应该避免使用表格标签来支持 css。

score 2 · Accepted Answer

这里有很多人给出很好的建议。我再补充两个：

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

score 1 · Accepted Answer

阅读Eric Meyer的 CSS：权威指南。他解释了为什么创建 CSS，它是如何工作的（根据标准），并将为您提供理解细节的背景。它也提供了很好的参考。

score 1 · Accepted Answer

在 Firebug 中进行实验

我不知道萤火虫中的这张图片在传达什么

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

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

你可以从阅读一些关于这个问题的好书开始。Eric Meyer 的作品亲力亲为，质量非常高。我学到很多的另一本书是 CSS 设计之禅。

剩下的就是努力和练习。确保你理解为什么某些东西会以它的方式工作，不要满足于“反复试验”的 css 开发。

score 0 · Accepted Answer

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

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

至于内边距、边框和边距，这都被称为 CSS 盒子模型。信息包含为元素、它的填充、边框，然后是它的边距。所以 padding 是元素的内容和它的边界之间的距离，而 margin 是边界和相邻元素之间的距离。再次，我希望这有助于为您澄清这一点。

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

score 0 · Accepted Answer

好吧，基础很简单，如果你还没有一些 css 编码，你应该真的很容易掌握。

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

这是我推荐的阅读清单，它们都在我的书架上，当然值得一读！如果你问我，我会说如果你是一名网页设计师，这些是你应该阅读的书。

score 0 · Accepted Answer

对我来说， Michael Bowers 的Pro CSS 和 HTML 设计模式改变了这一切。不再无休止的反复试验，而是问题-模式-解决方案。必不可少。

score 0 · Accepted Answer

每当页面加载缓慢时，html 元素就会不合适，并且只有在完全加载时才会恢复正常。

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

0

在我看来， http://htmldog.com/是正确学习前端 Web 开发的权威资源之一。

于 2009-10-17T16:20:14.257 回答

score 0 · Accepted Answer

告诉你我的秘密：跟着这两个经典教程

清单

浮动教程

你会知道你需要知道的关于 CSS 的 80%。

score 0 · Accepted Answer

0

如果您从事 Web 开发，请关注 30 个网站

于 2009-11-11T11:16:04.410 回答

css - 以正确的方式重新学习 CSS

19 回答 19

在 Firebug 中进行实验

Related

Reference