以正确的方式重新学习CSS

我是一个做web开发超过两年的程序员。 尽pipe过去两年我一直在做前端工程,但我认为我没有做到这一点
例如:

  • 我仍然使用表格进行布局,而不是仅使用CSS。 我还没有find一种方法来正确呈现数据alignment和表格。
  • 我不知道display: none之间的区别display: nonevisibility: hidden (嗯,我现在知道,但有很多情况下,如填充,边距,溢出等)
  • 我没有真正遵循inheritance的方式来编写CSS。 几乎每种风格都以#而不是类开头。
  • 每当一个页面加载缓慢的时候,html元素不合要求,只有在完全加载的时候,才会进入顺序。
  • 我不知道萤火虫这幅画是怎样传达的(顺便说一下,萤火虫是我的救世主,没有萤火虫,生活本来是不可能的)

替代文字

  • 每当布局乱七八糟的时候,我都想用position:absolute。 它总是在一个更大的混乱。

我知道我在这里做了很多错误的事情(而且我需要把它弄对),但是我设法把事情弄明白,然后以某种方式显示出来,只是看到它在不同的浏览器中搞砸了。

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

你可以指点我的资源,或者添加CSS开发人员使用的常见build议和提示,以使其正确无误。

查看Jeffrey Zeldman的“ 使用Web标准进行devise” 。

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

  • 表格适用于表格数据。 如果您提交的数据属于表格,请勿尝试使用<div> s制作网格。 没有意义。
  • 就布局而言,使用<div>标签,远离表格。 很好地了解浮动属性。 随着CSS3,将有新的,提高显示属性的标准。 学习它们。
  • display: none从视口中完全删除元素。 相反, visibility: hidden保留了元素会占用的空白。 在这两种情况下,元素都保留在DOM中。
  • 类和ID的一般规则。 页面元素和ID应该每个页面具有一对一的关系。 例如,#Column1,#Column2,#Footer,#Header。 另一方面,页面元素和类应该是多对一的关系,如:.container或.navLink。 当你知道你要使用一个特定的元素时,使用类。
  • 从效率angular度考虑。 您拥有的样式规则越less,页面加载的速度就越快,debugging的样式问题就越简单。

我还有大约一百万个其他的东西要说,但这应该让你开始。

对于布局驱动的CSS,一定要看看你知道关于CSS的一切是错误的 。 这是一个前沿,因为IE 7不支持display: table (可惜,我知道),但它确实覆盖了浮动和绝对定位等传统布局CSS技术,并且提供了从基于表格的布局到CSS布局的良好转换。 我强烈推荐它。

我不知道你是用什么dynamic语言编写的,或者只是编写原始的HTML代码,但是你也应该在你的项目中使用SASS ,因为我认为这有助于你强调inheritance。 否则,复习更多的“基本”教程(比如傻瓜式的CSS)可能实际上会有帮助,因为它们详细讨论了很多CSS的基本原理。

最后,当你在语义上正确(x)的HTML底下,CSS效果最好。 在我看来,当你在下面有很好的,语义上正确的html时,最容易看到和学习​​“好”的CSS。 这里有一个很好的概述什么时候使用什么标签 。 一般来说,我觉得最好是写下我的内容, 而不考虑以后的样子,然后再用CSS来使它变得华丽。

与往常一样,您可以在CSS技巧中find许多精巧的技巧和技巧 ,这些技巧一直帮助我学习更多关于正确使用语言的知识(比如当我了解到overflow: auto包含浮动元素!天才!)。

希望有所帮助!

  1. 访问CSS禅园看看你只能用CSS做什么。

  2. 访问W3学校,并按照教程。 对你来说可能看起来很简单,但你会学到基本的东西。

  3. 访问一些网站,如A列表 ,看看如何做事情,学习技巧。

  4. 看看一个CSS框架是否适合你的需求(如960网格 )。

我假设你已经安装了Firebug ?

另外, http://www.doctype.com可能会得到更多的相关结果&#x3002;

练习,练习,练习。 你知道你不知道的,这是我脑海中成功的关键。 你所做的每一个项目都试图提高你的技能,最终以正确的方式成为第二天性。

Eric Meyer的层叠样式表2.0程序员参考是了解select器和规则如何工作的极好资源,也是一个很好的参考。

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

  • 主复位样式表将有助于浏览器的差异。

  • 表格数据应该使用表格。
    这是布局,应该避免表格标签,以支持CSS。

这里有很多人给出了很好的build议。 我只是再添加两个:

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

阅读CSS: Eric Meyer 的权威指南 。 他解释了为什么创build了CSS,它是如何工作的(按照标准),并且会给你提供了解这些细节的背景。 这也是一个很好的参考。

在Firebug中进行实验

我不知道萤火虫这张照片在传达什么

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

  • 创build一个包含文本的div。
  • 使用CSS来给它padding: 5px; margin: 5px; border: 1px solid black; padding: 5px; margin: 5px; border: 1px solid black;
  • 在Firebug中检查它,就像你在问题中显示的一样。
  • 点击所显示的盒子模型中的任何一个数字,然后开始按向上和向下箭头(或input不同的数字)。
  • 看看它是如何变化的实时? 这是关于Firebug的最好的事情之一:它可以让你调整而不重新加载,然后修改你的样式表,当它看起来是正确的。
  • 继续这样做,直到你理解填充,边距和边框如何工作。

我想你应该为你的布局需要使用一个所谓的“ CSS框架 ”(例如960.gs )。

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

CSS很容易,不是真正的编程语言:不要害怕“框架”这个词;)

你可以先读一些关于此事的好书。 埃里克·梅耶(Eric Meyer)的双手十足,质量非常高。 我从中学到的另一本书是CSSdevise书的Zen。

其余的是努力和实践。 一定要明白为什么事情是按照它的方式进行的,不要满足于“试错”的CSS发展。

那么我会尽我所能解决一些这些问题。

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

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

过渡到CSS有时是棘手的,但非常值得。

那么基础是非常简单的,如果你已经没有一些CSS编码,你应该得到一个相当简单的窍门。

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

这是我的build议阅读清单,所有这些都在我的书架上,当然值得一读! 如果你问我,我会说这些是你应该阅读的书,如果你是一个webdesigner。

  • 使用webstandards进行devise
  • CSS精通
  • 防弹网页devise

对我来说,迈克尔·鲍尔斯的Pro CSS和HTMLdevise模式改变了这一切。 没有更多的尝试和错误,但问题模式解决scheme。 必不可less。

每当一个页面加载缓慢的时候,html元素不合时宜,只有在完全加载的时候,才会进入顺序。

  • 你把你的样式表放在顶部,在<head>部分?
  • 你是否声明了图像的显式大小,或者浏览器必须猜测,然后在图像显示时重新排列?

根据你的学习风格,我可能会build议直接find源代码:CSS的定义。 您可以在这里find各种规格: http : //www.w3.org/Style/CSS/ 。 虽然规范并没有真正涵盖特定的浏览器怪癖(如果是的话,他们不会是怪癖,他们会吗?),但是对于解释每个部分是如何工作的,它确实做得很好(对我来说)。

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

Listutorial

Floatutorial

你会知道你需要了解CSS的80%。

如果您进入Web开发,请遵循30个网站