CSS中“级联”的含义是什么?
CSS中术语“级联”的确切含义是什么? 我得到不同的意见,所以我在这里问。 一个例子会有所帮助。
在这种情况下,“级联”意味着由于不止一个样式表规则可能适用于特定的HTML片段,所以必须有一种已知的方式来确定哪个特定的样式表规则适用于哪一片HTML。
所使用的规则是通过从更一般的规则级联到所需的特定规则来select的。 最具体的规则是select。
当我教CSS的时候,我总是告诉学生,“层叠样式表”是指“ 打样式表”。
一个规则告诉你的H3标签是红色的,另一个规则告诉它是绿色的 – 规则是相互矛盾的,谁将会赢! 样式表deathmatch!
好的,也许这只是一个小小的夸张,但是它更适合于非代码的非编程人员,他们刚刚起步,而不是任何级联或inheritance的概念。
我当然要确保告诉他们样式表互相争斗不是问题,这就是语言devise的方式。
HåkonWium Lie(CSS联合创始人)在其关于CSS的博士论文中将“级联”定义为“结合多个样式表并解决它们之间的冲突的过程”( http://people.opera.com/howcome/2006/ phd /#h-357 )
你必须从外部考虑它。如果你有一个规则,这是在身上的标签,它会“级联”,通过每个孩子的标签。 如果你在身体内的任何标签上放置规则,它将采用该规则,依此类推。 因此,规则将级联到所有内容,除非被embedded式标记的规则中断。
您可以将CSS处理视为包含几个级联的瀑布。 以下是从上到下的级联:(下级可以覆盖上级中的相同属性)。
- 用户代理声明
- 用户正常的声明
- 作者正常的声明
- 作者重要的声明
- 用户重要声明
在规范中看到更多
级联是从多个来源挑选正确的值。 但是这与sorting不同。 只有不按顺序的东西需要我们sorting。 但在CSS中,这些起源具有固定优先权。 因此伪代码可能如下所示:
- 初始化值数组;
- 应用第一个来源的值;
- 应用来自第2个原点的值,如果值存在,则覆盖;
- …
- 应用第N个原点的值,如果值存在,则覆盖;
从伪代码你可以看到它看起来像几个瀑布的瀑布。
一个澄清,可能有所帮助。 如果包含两个样式表,并且每个样式表都有一个相同的特定规则,那么包含最后一个样式表。 IE中最后一个级联的影响力最大。
(这只是在同一张纸上有两个规则的变体 – 如果所有其他的东西都相等,最后一个会赢。
例如,给定
body { background:blue; } body { background:green; }
那么背景将是绿色的。
这是一个用来解决样式表规范冲突的过程。
这主要是根据CSS中提到的优先级来解决冲突的过程。
CSS代表层叠样式表。 通过它们本质上的风格,层叠样式表中的更深层次的样式表会覆盖更高的样式(除非样式更高更具体)。 因此,我们可以在样式表的开始处设置基本样式,适用于我们devise的所有版本,然后在文档中进一步覆盖媒体查询的相关部分。
级联是指逐步倒入或逐步添加。 样式表包含用于样式化html元素的代码。 代码在样式表中写入的方式是级联的。 或者简单地说,对于样式表中的html页面的每个html元素,在图层中背靠背代码制作级联样式表。
级联是一种为每个样式规则分配权重的algorithm。 当适用多个规则时,具有最大权重的规则优先。
CSS doc p{font-size: 12pt;} p{font-size: 14pt;} <p>My Headline<p>
将以14pt字体呈现p,因为它与实际元素(从文件顶部到文件底部的外部样式表加载)“更接近”。 如果您使用链接的样式表,然后在链接到外部CSS文档之后在文档的头部包含一些CSS,则“in head”声明将会赢,因为它更接近定义的元素。 只有权重相同的select器才是如此。 查看http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html以获得对给定select器的权重的很好的描述。;
尽pipe如此,作为级联的一部分,您可以将“inheritance”视为所有实际目的。 事物从包含元素“级联”下来。