首页 理论教育 CSS样式继承-HTML5+CSS+JavaScript

CSS样式继承-HTML5+CSS+JavaScript

时间:2023-10-27 理论教育 版权反馈
【摘要】:CSS继承指的是子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。这种层层嵌套的关系也正是CSS名称的含义。图2-13 样式继承效果在使用不同的选择符定义相同的元素时,要考虑不同选择符之间的优先级。

CSS样式继承-HTML5+CSS+JavaScript

CSS继承指的是子标记会继承父标记的所有样式风格,并可以在父标记样式风格的基础上加以修改,产生新的样式,而子标记的样式风格完全不会影响父标记。层叠性就是继承性,样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上,所有在元素中嵌套的元素都会继承外层元素指定的属性值,有时会把很多层嵌套的样式叠加在一起,除非用户另外更改。

所有的CSS语句都是基于各个标记之间的父子关系的,处于最上端的<html>;标记称为“根(root)”,它是所有标记的源头,往下层层包含。在每一个分支中,称上层标记为其下层标记的“父”标记,相应地,下层标记称为上层标记的“子”标记。例如,在下面程序中,<h1>;标记是<body>;标记的子标记,同时它也是<em>;的父标记。这种层层嵌套的关系也正是CSS名称的含义。

例如:

978-7-111-53511-9-Chapter02-29.jpg

效果如图2-13所示。

978-7-111-53511-9-Chapter02-30.jpg

图2-13 样式继承效果(www.xing528.com)

在使用不同的选择符定义相同的元素时,要考虑不同选择符之间的优先级。对于ID选择符、类选择符和HTML标记选择符,由于ID选择符是最后加到元素上的,所以优先级最高,其次是类选择符。如果想超越这三者之间的关系,可以用!important提升样式表的优先级。

例如:

p{color:#FF0000!important}

.blue{color:#0000FF}

#id1{color:#FFFF00}

以上代码同时对页面中的一个段落加上3种样式,它最后会依照被!important声明的HTML标记选择符样式变为红色文字。如果去掉!important,则依照优先级最高的ID选择符变为黄色文字。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈