用户界面-以正确的方式重新学习CSS

我是从事Web开发两年以上的程序员。 尽管过去两年来我一直在做前端工程,但我认为我做的方法不正确
例如:

  • 我仍然使用表格而不只是CSS进行布局。 我还没有找到正确呈现对齐和表格数据的方法。
  • 我不知道#visibility: hidden之间的区别(嗯,我现在知道了。但是有很多情况,如填充,边距,溢出等)
  • 我并没有真正遵循继承方式来编写CSS。 几乎每种样式都以#(而不是类)开头。
  • 每当页面加载缓慢时,html元素就会错位并仅在页面完全加载后才出现顺序。
  • 我不知道萤火虫中的这张照片传达了什么(顺便说一下,萤火虫是我的救星。没有萤火虫,生活是不可能的)

alt text

  • 每当布局混乱时,我都会尝试使用position:absolute。 总是以更大的混乱结束。

我知道我在这里做错了很多事情(我需要正确解决),但我设法将事情放到位并以某种方式显示出来,只是看到它在其他浏览器中被弄乱了。

我不想在CSS或傻瓜CSS上做入门。 我不仅仅知道。 我想以正确的方式学习CSS。 关注上面我展示的示例之类的问题并加以纠正。

您能为我提供参考资源还是添加CSS开发人员使用的常用建议和技巧以使其正确?

Quintin Par asked 2020-08-03T05:30:45Z
19个解决方案
23 votes

查阅Jeffrey Zeldman的Web标准设计。

Daniel Pryden answered 2020-08-03T05:30:56Z
12 votes

以下是一些基本规则:

  • 表格适合表格数据。 如果您要提供的数据属于表格,请不要试图用display: nones来构建网格。 没道理
  • 就布局而言,请使用display: none标签,远离表格。 熟悉float属性。 有了CSS3,将会有新的,改进显示属性的标准。 学习他们。
  • display: none完全从视口中删除了该元素。 相反,visibility: hidden保留元素原本会占用的空白。 在这两种情况下,元素都保留在DOM中。
  • 类和ID的一般规则。 页面元素和ID每页应具有一对一的关系。 例如,#Column1,#Column2,#Footer,#Header。 另一方面,页面元素和类应该是多对一的关系,例如:.container或.navLink。 当您知道将要大量使用特定元素时,请使用类。
  • 考虑效率。 样式规则越少,页面加载速度就越快,调试样式问题也就越容易。

我还有其他一百万话要说,但这应该可以帮助您入门。

Bryan A answered 2020-08-03T05:31:44Z
10 votes

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

我不知道您是在构建任何动态语言还是仅在编写原始HTML,但是您还应该考虑在项目中使用SASS,因为我认为这有助于您更加注意继承。 。 否则,复习更多的“基本”教程(例如CSS for Dummies)可能会有所帮助,因为它们详细介绍了许多CSS的基本原理。

最后,当引擎盖下的语义正确(x)html时,CSS效果最佳。 我认为,当下面有很棒的,语义正确的html时,最容易看到和学习“好的” CSS。 这是何时使用什么标记的很好概述。 通常,我发现最好写我的内容时不要考虑以后的外观,然后再使用CSS使其华丽。

与往常一样,您可以在CSS Tricks上获得许多巧妙的技巧,这些技巧和窍门一直帮助我了解有关该语言的正确用法的更多信息(例如,当我了解到2994649498334528528512包含的浮动元素时,真是天才!)。

希望有帮助!

neezer answered 2020-08-03T05:32:23Z
9 votes
  1. 访问CSS Zen Garden,了解仅CSS可以做的事情。

  2. 参观W3学校并按照教程进行操作。 这对您来说似乎很简单,但是您将学习基本知识。

  3. 访问一些网站,例如A list Apart,以了解如何做事和学习技巧。

  4. 查看CSS框架是否适合您的需求(例如960 Grid)。

Anax answered 2020-08-03T05:32:57Z
5 votes

我假设您已经安装了Firebug?

另外,[http://www.doctype.com]可能会获得更多相关结果。

Dean J answered 2020-08-03T05:33:21Z
3 votes

练习,练习,练习。 您知道自己不知道的东西,这就是我心中成功的关键。 您所做的每个项目,都试图提高自己的技能,最终以正确的方式做事将成为第二天性。

Eric Meyer的《层叠样式表2.0程序员参考》是一本很好的资源,可以准确地了解选择器和规则的工作原理,并且也可以作为参考。

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

  • 主重置样式表将帮助解决浏览器差异。

  • 表格数据应使用表格。
    应该避免使用表格的布局支持CSS的标签。

Matthew Vines answered 2020-08-03T05:34:04Z
2 votes

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

  • 首先,尝试编写有效的(X)HTML。 您可以使用W3C的HTML验证程序轻松测试HTML代码。 主要关注内容,而不是风格。
  • 其次,尝试编写有效的CSS,最好在单独的.css文件中。 避免使用style属性。 (如果要支持Redmond的某些旧浏览器,这部分可能会很困难)。 您可以使用W3C的CSS验证器测试CSS。
Stephan202 answered 2020-08-03T05:34:33Z
1 votes

阅读CSS:Eric Meyer的权威指南。 他解释了创建CSS的原因,工作方式(根据标准),并为您提供了了解更详细知识的背景。 这也是一个很好的参考。

Nathan Long answered 2020-08-03T05:34:53Z
1 votes

在萤火虫中实验

我不知道这张照片在哪 萤火虫正在传达

Firebug本身可以为您提供帮助。 做这个:

  • 创建一个包含一些文本的div。
  • 使用CSS给它padding: 5px; margin: 5px; border: 1px solid black;
  • 如问题所示,在Firebug中对其进行检查。
  • 在显示给您的盒子模型中单击任何一个数字,然后开始按向上和向下箭头(或键入其他数字)。
  • 看看它是如何实时变化的? 这是有关Firebug的最好的事情之一:它使您无需重新加载即可进行调整,然后在看起来正确时修改样式表。
  • 继续这样做,直到您了解填充,边距和边框的工作方式。
Nathan Long answered 2020-08-03T05:35:49Z
1 votes

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

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

CSS很简单,也不是真正的编程语言:不要害怕“ framework”一词;)

gbr answered 2020-08-03T05:36:19Z
0 votes

您可以先阅读一些有关此事的好书。 埃里克·梅耶(Eric Meyer)的手将动手,而且质量很高。 我学到很多其他的书是《 Zen of CSS design》。

剩下的就是努力和实践。 请确保您了解为什么某事会按其方式工作,而不是对“试错” css开发感到满意。

  • [HTTP://呜呜呜.Amazon.com/Zen-CSS-design-visual-enlightenment/大盘/0321303474/热风=虽然_1_1?IE=UTF8&是=books&期待=1255629419&虽然=8-1]
  • [HTTP://呜呜呜.Amazon.com/more-Eric-Meyer-voices-matter/大盘/0735714258/热风=虽然_1_1?IE=UTF8&是=books&期待=1255629449&虽然=8-1]
  • [HTTP://呜呜呜.Amazon.com/Eric-Meyer-CSS-mastering-language/大盘/073571245X/热风=虽然_1_1?IE=UTF8&是=books&期待=1255629462&虽然=8-1]
Peter Eysermans answered 2020-08-03T05:36:57Z
0 votes

好吧,我将尽力解决其中的一些问题。

display:nonevisibility:hidden之间的区别是,当设置了显示器时,未保留该项目的空间。 因此,可以将其想象为当设置了显示时,项目已离开页面。 而如果您使用可见性选项,则元素在页面上,而在它们不可见的位置。 我说清楚了吗? 希望这对您有意义。

至于填充,边框和边距,这都称为CSS Box Model。 信息包含为元素,其填充,边框以及其边距。 因此,填充是元素内容与其边界之间的距离,而空白是边界与相邻元素之间的距离。 再次,我希望这可以帮助您一点点解决。

过渡到CSS有时很棘手,但值得。

Slevin answered 2020-08-03T05:37:31Z
0 votes

好吧,基础知识很简单,如果您还没有一些CSS编码,那么您真的应该非常简单。

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

这是我建议的阅读清单,所有这些都在我的书架上,当然值得阅读! 如果您问我,我想说的是这些,如果您是网页设计师,则应该阅读。

  • 使用Webstandards设计
  • CSS精通
  • 防弹网页设计
ChrisR answered 2020-08-03T05:38:13Z
0 votes

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

ax. answered 2020-08-03T05:38:34Z
0 votes
每当页面加载缓慢时,html元素就会错位并仅在页面完全加载后才出现顺序。
  • 您是否将样式表放在<head>部分的顶部?
  • 您是要声明图像的显式尺寸,还是浏览器必须猜测,然后在图像显示时重新排列内容?
Nathan Long answered 2020-08-03T05:39:03Z
0 votes

根据您的学习风格,我可能建议直接参考源代码:CSS的定义。 您可以在这里找到各种规格中的每一个:[http://www.w3.org/Style/CSS/。]虽然该规格并没有真正涵盖特定的浏览器怪癖(如果有的话,它们就不是怪癖了, (对吗?),(对我来说)对每件作品的工作原理做得非常好。

Michael Gorman answered 2020-08-03T05:39:23Z
0 votes

我会告诉你我的秘密:遵循这两个经典教程

列表

浮动的

您将了解有关CSS的80%的知识。

Soska answered 2020-08-03T05:39:56Z
0 votes

如果您正在从事Web开发,则需要关注30个网站

cetnar answered 2020-08-03T05:40:16Z
0 votes

我认为[http://htmldog.com/]是正确学习前端Web开发的权威资源之一。

Arve Systad answered 2020-08-03T05:40:36Z
translate from https://stackoverflow.com:/questions/1574016/re-learning-css-the-right-way