【CSS】CSS中继承性与层叠性

最新推荐文章于 2022-12-06 08:56:51 发布

寻寒

最新推荐文章于 2022-12-06 08:56:51 发布

阅读量1.2k

点赞数 2

分类专栏：【CSS】

本文链接：https://blog.csdn.net/lxd8731247769/article/details/50615894

版权

【CSS】专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上篇介绍了CSS里面的选择器，接下来我们了解CSS中两大特性，继承性和层叠性

继承性

1、概念：

所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。

首先我们先来了解DOM（文档对象模型）树，

当使用css对一个设置后，这样的设置会对该元素产生作用，一级他的子元素产生作用，比如body就是html的子元素。一级一级一直下来。html是所有的祖先元素。

当你对任何一个元素设置属性以后，如果对body字体设置成蓝色，后代字体都应该是蓝色，除非某一级进行了重新设置。

2.继承的局限性

多数边框类属性，比如象Padding（补白），Margin（边界），背景和边框的属性都是不能继承的。border属性是用来设置元素的边框的，它没有继承性。

3.CSS继承的优先级问题

在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已。

1）.与文本相关的可继承属性

font-family font-size font-style font-variant font-weight

font letter-spacing line-height text-align text-align

text-indent text-transform word-spacing

2）与列表相关的可继承属性

list-style-image list-style-position list-style-type list-style

3）.与颜色相关的属性

color

4）.特别解释:font-size属性(继承性比较特殊)

浏览棋默认字体大小16px,而body定义了字体大小(16px X 85% = 13.6px). 如果子元素没有指定字体大小13.6px这个值将被子元素继承。

实例：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>继承关系</title>
    <style> 
h1{
   color:blue;         /*颜色*/
   text-decoration:underline;
   }
em{
   color:red;
	}	
li{
    color:green;
	font-weight:bold;
	}	
	</style>
</head>

<body>
     <h1><em>西红柿</em>炒鸡蛋</h1>
	 <p>欢迎品尝西红柿炒鸡蛋</p>
	 <ul>
	 	<li>材料主要有</li>
		 <ul>
		     <li>西红柿</li>
			 <li>鸡蛋</li>
		 </ul>
	 </ul>
</body>
</html></span>

效果展示：

层叠特性

行内样式>ID样式>类别样式>标记样式

实例：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>层叠特性</title>
  <style type="text/css">
p{
	color:green;
 }

.red{
	color:red;
	}
.purple{
	color:purple;
	}
#line3{
	color:blue;
	}
  </style>
</head>

<body>
     <p>这是第一行文本</p>
	 <p class="red">这是第二行文本</p>
	 <p id="line3" class="red">这是第三行文本</p>
	 <p style="color:orange;" id="line3"> 这是第四行文本</p>
	 <p class="purple red">这是第五行文本</p>
	 
</body>
</html></span>

效果展示：

第一行没有使用类别选择器，没有使用id选择器，所以用标记选择器
第二行同时满足p的规则，也满足.red的规则，这是产生了冲突。以类别选择器为准
第三行定义了类别选择器和id选择器，最后使用id选择器的样式。
第四行用到了行内样式，又高于id选择器，就用行内样式的样式
第五行用了两个类别选择器，默认前面的。

小结：通过总结对CSS的内容了解的更多。为以后开发打好基础。

寻寒

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
6
评论
【CSS】CSS中继承性与层叠性

上篇介绍了CSS里面的选择器，接下来我们了解CSS中两大特性，继承性和层叠性继承性概念：所谓继承，就是父元素的规则也会适用于子元素。比如给body设置为color:Red;那么他内部的元素如果没有其他的规则设置，也都会变成红色。首先我们先来了解DOM（文档对象模型）树，当使用css对一个设置后，这样的设置会对该元素产生作用，一级他的子元素产生作用，比如
复制链接

扫一扫