以正确的方式重新学习 CSS [关闭]

Posted 2023-02-22

技术标签:

【中文标题】以正确的方式重新学习 CSS [关闭]【英文标题】：Re-learning CSS the right way [closed] 【发布时间】：2010-12-07 03:18:09 【问题描述】：

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

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

每当布局混乱时，我都会尝试使用 position:absolute。最终总是会陷入更大的混乱。

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

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

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

【问题讨论】：

你的第一点有点矛盾。标记 DATA 正是 HTML table 标记的用途。如果要显示数据，请使用表格。如果您正在尝试对页面元素进行布局或为表格添加额外的装饰，那么请开始关注 CSS。 @tschaible 我不知道表达我意图的正确术语。你是对的，我正在尝试做布局.. 【参考方案1】：

查看 Jeffrey Zeldman 的 Designing With Web Standards。

【讨论】：

这背后有一个有趣的故事。在观察到这个答案后，我通过他的网站联系了 Zeldman，要求他回答这个问题。他回信说这正是他开始时面临的问题。他回答说：“我希望我能在你的网页上用一两条评论来回答你的问题，但我不能。我确实在使用 WEB 标准进行设计中回答了这些问题（以及更多），尤其是在这个新的第三版中“这本书很棒，必须拥有！！！这本书是十年前写的，还是最值得入手的地方吗？ @TreeUK：第三版是在 2009 年发布的，这不是那很久以前。这是一个很好的问题，现在可能有更好的学习 CSS 的书，但我不知道。【参考方案2】：

我假设你已经安装了Firebug？

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

【讨论】：

嗯，不，doctype 非常不可用，而且答案通常也没有太大帮助。我希望 SO 构建一个 HTML/CSS 交换、cmets、徽章，整个系统很棒而且几乎完美无缺。【参考方案3】：

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

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

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

Master Reset 样式表将帮助解决浏览器差异。

并且表格数据应该使用表格。应该避免使用表格的布局支持 css 的标签。

【讨论】：

E.Meyer 是大师 :)【参考方案4】：

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

剩下的就是努力和练习。确保您了解某些东西为什么会这样工作，不要满足于“反复试验”的 css 开发。

http://www.amazon.com/Zen-CSS-Design-Visual-Enlightenment/dp/0321303474/ref=sr_1_1?ie=UTF8&s=books&qid=1255629419&sr=8-1 http://www.amazon.com/More-Eric-Meyer-Voices-Matter/dp/0735714258/ref=sr_1_1?ie=UTF8&s=books&qid=1255629449&sr=8-1 http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X/ref=sr_1_1?ie=UTF8&s=books&qid=1255629462&sr=8-1

【讨论】：

【参考方案5】：

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

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

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

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

【讨论】：

【参考方案6】：

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

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

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

Designing with webstandards CSS Mastery Bulletproof webdesign

【讨论】：

"基础非常简单，如果您已经 [完成] 了一些 css 编码，那么您应该真正掌握相当简单的方法。" 除非他做了一些，但他还没有得到它，这就是他问这个问题的原因。【参考方案7】：

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

【讨论】：

【参考方案8】：

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

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

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

【讨论】：

【参考方案9】：

对于布局驱动的 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 包含浮动元素时！天才！！）。

希望有帮助！

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

Firebug 实验

我不知道这张图是什么萤火虫在传达

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

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

【讨论】：

【参考方案12】：

访问CSS Zen Garden，看看你只能用 CSS 做什么。

访问 W3 schools 并按照教程进行操作。这对您来说可能看起来很简单，但您会学到基本的东西。

访问一些网站，例如A list Apart，了解如何做事并学习技巧。

查看 CSS 框架是否适合您的需求（例如 960 Grid）。

【讨论】：

+1 用于 CSS Zen Garden 和 A List Apart -- 两者都是极好的资源。【参考方案13】：

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

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

【讨论】：

【参考方案14】：

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

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

【讨论】：

【参考方案15】：

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

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

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

【讨论】：

【参考方案16】：

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

【讨论】：

【参考方案17】：

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

【讨论】：