以算法方式征服CSS

时间:2011-04-19 23:49:13

标签: css stylesheet

在深入研究我的问题之前,我首先应该提供一个关于我来自哪个角度的概要:对于我的大部分Web开发工作(直到大约一年前),我几乎完全专注于后端开发。因此,我最近几个月的大部分时间用于加速JavaScript,AJAX工具,JS库,DOM操作,当然还有:层叠样式表。我已经找到了一种方法来适应和利用我的思维模式来完成网络开发的所有这些方面并做一些真正的整洁的事情 但是 CSS仍然是难以捉摸的对我来说。几乎我所遇到的每一个Web资源都解释了如何使用CSS,以非常简单的方式描述了这项技术。到目前为止,我只看到了无穷无尽的示例布局和样式列表,使它们成为现实。当然,更糟糕的是:通常有多种方法可以达到同样的目的,还有无数的碎片“陷阱”来处理浏览器的不一致。

对我来说:CSS 不是一种全功能的编程语言(即图灵完成)。因此,学习CSS就像试图破解复杂的XML文件,而不清楚消费所述文件的软件将如何解释它。 我正在寻找的是完全的算法描述每个主要浏览器(IE,Chrome和FireFox)如何解释CSS。对我而言,这将是远比到目前为止我被迫使用的蛮力方法更为可取。

3 个答案:

答案 0 :(得分:3)

CSS确实是一个不同的野兽。如你所知,it is not Turing complete。此外,理解图灵完整语言对理解CSS无济于事。您编写的CSS规则可能会或可能不会由浏览器应用,具体取决于许多因素:

  • “重量”
  • 位置
  • 重要性
  • 范围
  • 继承

你几乎要进入浏览器的头部来编写CSS :)。但是,这些资源应该对您有所帮助:

直接来源: http://www.w3.org/TR/CSS2/cascade.html

文章: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/


修改

如果您想查看执行这些计算的一些实际代码(例如Firefox),请在下面的链接中查看这些文件。此外,还包括Firefox自动应用于每个页面的默认CSS规则集。

答案 1 :(得分:1)

您可以尝试阅读the spec。我建议至少阅读“Box模型”和“视觉格式化模型”部分。如果你理解那里的核心概念,剩下的就是细节了!

答案 2 :(得分:1)

这是官方的CSS主页:http://www.w3.org/Style/CSS/

以下是完整规范:http://www.w3.org/TR/CSS21/

他们应该提供您正在寻找的背景。但是,像CSS这样的语言通常最好通过示例来学习。浏览器之间存在很多不一致之处,最好的办法就是获得经验。你很快就会了解这些细节,随着时间的推移,这些差异会变得明显。