-
div+css视频教程之CSS继承特性
一、 CSS继承特性
1. 继承性的运用
CSS的一个主要特征就是继承,它是依靠于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如对<BODY>标签声明的颜色值也会应用到段落的文本中。下面举例说明:CSS代码:
body{ /*标签选择器*/
color:purple; /*文本颜色*/
}
HTML代码:
<p>CSS的<strong>层叠和继承</strong>深入探讨</p>
“CSS的层叠和继承深入探讨”这段话以紫颜色显示,因为<p>和<strong>都是<body>的子标签,它们会继承父标签的样式风格。
2. 继承的局限性
在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。并不是所有的属性都会自动传给子元素,即有的属性不会自动继承父元素的属性值。上面举的文本颜色color属性,子对象会继承父对象的文本颜色属性,但是如果给某个元素设置了边框,它的子元素就不会自动加上一个边框,因为边框属性是非自动继承的。实际上,在CSS的规范中,每种CSS属性都有一个默认的属性值,有些属性的默认值是“继承”(inherit),这些属性就会自动继承父元素的属性值了。而另外的属性的默认属性值不是“继承”(inherit),比如边框宽度的默认属性值为0,因此边框宽度属性就不具有自动的继承性,除非人为指定为继承。多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。
3. 继承中的问题
有时候继承也会带来些错误,比如说下面这条CSS定义:body{
color:blue;
}
根据 CSS继承规则,子元素从父元素继承属性。根据上面这条规则,站点的 body 元素中的文本以蓝色显示。子元素继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul,ol, li等),所有的body 的子元素都应该以蓝色显示文本,子元素的子元素也一样。
但在有些浏览器中这句定义会使除表格之外的文本变成蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成如下样式,就可以使表格内的文本也变成蓝色。
body,table,th,td{
color:blue
}
4. 多重样式混合应用中的冲突
既然有了继承性,那么在CSS的应用上可能会存在多个样式同时应用到一个对象上的情形。例如:CSS代码:
p {
color: green;
}
.red {
color: red;
}
.purple {
color: purple;
}
#p3 {
color: blue;
}
HTML代码:
<p>示例文本p1(绿色)</p>
<p class="red">示例文本p2(红色)</p>
<p id="p3" class="red">示例文本p3(蓝色)</p>
<p style="color:orange;">示例文本p4(橙色)</p>
<p class="red purple">示例文本p5</p>
代码中一共有5组<p>标签定义的文本,并声明了4个选择器,定义为不同的颜色,最终显示效果如图所示,现对每个<p>标签最终显示的效果说明如下:
l

l 第2行文本使用了类别样式,因此这时产生了“冲突”。文本是按照标签选择器中定义的绿色显示,还是按照类别选择器中定义的红色显示呢?最终效果显示是按照类别选择器中定义的红色,这说明类别选择器的优先级高于标签选择器。
l 第3行文本同时使用了类别样式和ID样式,这又产生了“冲突”。文本最终是按照按照ID选择器中定义的蓝色显示,这说明ID选择器的优先级高于类别选择器。
l 第4行文本同时使用了行内样式和ID样式,那么这时又以哪个为准呢?答案是行内样式的优先级高于ID选择器,文本显示为橙色。
l 第5行文本中使用了两个类别样式,它们的优先级相同,这时应以哪个为准呢?答案是在定义CSS样式时,哪个的声明在后面就显示哪个的样式。因为在本例的定义部分,“.purple”的声明在“.red”之后,因此显示为“.purple”中定义的紫色。
综上所述,优先级规则可以表示为:
行内样式 > ID样式 > 类别样式 > 标签样式
在复杂的页面中,某个元素有可能会从很多地方获得样式,例如:
外部样式表针对 h3 选择器定义了三个属性:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
页面内的CSS代码:
h3 {
text-align: right;
font-size: 20pt;
}
页面内的HTML代码:
<h3 style="text-align:center;">示例h3</h3>
假如该页面链接了外部样式表,这样在外部样式表、内部样式和行内样式都定义了文字排列(text-alignment)属性,外部样式表和内部样式还定义了字体尺寸(font-size)属性,那么 h3 得到的样式是什么呢?答案是颜色属性继承于外部样式表显示为红色,文字排列(text-alignment)是按照行内样式的定义,居中显示,而字体尺寸(font-size)是按照内部样式表中的规则显示。
综上所述,优先级规则可以表示为:
行内样式 > 内部样式 > 外部样式
【CSS样式】面板

最新更新
go语言写http踩得坑
【Python】爬虫笔记-从PyMySQL到DBUtils
【Python】爬虫笔记-开源代理池haipproxy使用
Python规范:提高可读性
C语言两结构体之间的成员互换
【爬虫实战项目】Python爬取Top100电影榜单
linux(Ubuntu)安装python
anaconda peompt 、labalimg 数据标注
【Python数据分析案例】python数据分析老番
【爬虫+情感判定+Top10高频词+词云图】“
一次SQL调优 聊一聊 SQLSERVER 数据页
聊一聊 SQLSERVER 的行不能跨页
再聊一下那 SQLSERVER 行不能跨页的事
大数据概述
支线第九篇:
数据库的值获取过来转换成Json数组的方法
支线第八篇:数据类型转换
支线第七篇:又是解决报错
支线第六篇:停下脚步,理清思路
支线第五篇:配置接口
【JS】原始类型是值类型吗?存储在栈上
C# List<T> 转 DataTable
C# List<T> 转 DataTable
C# List<T> 转 DataTable 方法修改版
使用插件式开发称重仪表驱动,RS232串口
实现简单的csv文件上传和bootstrap表格的下
第一百一十七篇: JavaScript 工厂模式和原型
第一百一十六篇: JavaScript理解对象
第一百一十五篇: JS集合引用类型Map
第一百一十四篇: JS数组Array(三)数组常