css02_css继承性和层叠性_css继承了行内样式-CSDN博客

本文链接：https://blog.csdn.net/qq_36366618/article/details/120138462

本文介绍了CSS在页面中的三种包含方式——行内样式、内嵌式和链接式，并详细讲解了继承性和层叠性（权重比较和优先级），包括ID、类和标签选择器的权重。通过实例演示了CSS样式如何生效及如何通过!important调整权重。

摘要由CSDN通过智能技术生成

文章目录

css特性

css特性

1、在页面中包含CSS

在对CSS有了一定的了解后,下面介绍在页面中包含CSS样式的几种方式,其中包括行内样式、内嵌式和外链接式

1、行内样式

行内样式是比较直接的一种样式,直接定义在HTML标记之内,通过style属性来实现。这种方式比较容易令初学者接受,但是灵活性不强。

<body>
	<table width="200" border="1" align="center">
		<tr>
			<td>
				<p style="color: #f00;font-size: 36px;">行内样式一</p>
			</td>
			<td>
				<p style="color: #f0f;font-size: 16px;">行内样式二</p>
			</td>
		</tr>
	</table>
</body>

2、内嵌式

内嵌式样式表就是在页面中使用< style< style>标记将CSS样式包含在页面中。例2.16就是使用这种内嵌样式表的模式。内嵌式样式表的形式没有行内标记表现的直接,但是能够使页面更加规整。与行内样式相比,内嵌式样式表更加便于维护。但是每个网站都不可能由一个页面构成,而每个页面中相同的HTML标记又都要求有相同的样式,此时使用内嵌式样式表就显得比较笨重,而使用链接式样式表即可轻松解决这一问题。

3、链接式

链接外部CSS样式表是最常用的一种引用样式表的方式,将CSS样式定义在一个单独的文件中,然后在HTML页面中通过< link>标记引用,是一种最为有效的使用CSS样式的方式
< link>标记的语法结构如下

<link rel="stylesheet" type="text/css" href="path">

属性说明：

rel:定义外部文档和调用文档间的关系。
href:CSS文档的绝对或相对路径。
type:指的是外部文件的MIME类型。

举例
css1.css文件

h1,h2,h3{
	color: #ccc,
	font-family:"Trebuchet MS",Arial,Helvetica,scans-serif;
}
p{
	color: #F0c;
	font-weight: 200;
	font-size: 24px;
}

html引入css文件

<!DOCTYPE html>
<html>
<head>
	<title>链接式引入css</title>
	<!--这里可以直接引入css1.css文件是因为他们在同级目录下-->
	<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
		<h2>页面文字一</h2>
		<p>页面文字二</p>
</body>
</html>

效果图

2、继承性

属性的继承性：有些属性，当给某个标签设置的时候，该标签所有的后代标签也具有该属性，则这些属性就有继承性。
常用具有继承性的属性有：
text-开头的、font-开头的、color、line-开头的。
总结：关于文字样式的都能被继承，所有关于盒子的、定位的、布局的属性都不能被继承。

3、层叠性(覆盖性)

当同一个标签被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器的效果。权重低的选择器效果会被权重高的选择器效果覆盖（层叠）。
层叠性：是css处理冲突的能力，层叠性是一种能力，而不是一种性质。
最终显示效果通过权重计算获得。所有的权重计算没有兼容问题

1、权重比较

id选择器权重>类选择器权重>标签选择器权重
选择器权重计算只看这3种选择器(id,类，标签)。高级选择器(例如：后代选择器)不计算数量
选择器直接存在进位关系：
255个标签选择器等于一个类选择器，255个类选择器等于一标签选择器
如果权重一样，那么以后出现的为准
如果没有直接选中某个元素(通过继承性选中权重是0，即继承的不算权重)，那么权重是0
都是继承过来的，谁离标签的近听谁的
行内式优先级最高

总结：

1.先看有没有选中(继承不算选中)，如果选中了那么比较(id数，类数，标签数)权重，如果权重都一样，谁后写听谁的(比如：同一个标签，携带了多个类名，类选择器设置了不同的属性，有冲突)。
2.如果都没选中，那么权重是0，就按照就近原则(谁描述的离内容所在的标签最近就听谁的)，如果一样近就又按照权重去比较，如果权重再是一样的话就看谁后写就听谁的
3.逗号(并集)分开看(要拆开分成多个选择器计算，不能合着计算)

比较3要素：权重，谁离的近，谁后写

举例：

<!DOCTYPE html>
<html>
<head>
	<title>举例</title>
	<style type="text/css">
		/*被选中
		选择器数量：2,0,0
		*/
		#father #son{
			color: blue;
		}
		/*被选中
		选择器数量：1,1,1
		*/
		#father p.c2{
			color: red;
		}
		/*被选中
		选择器数量：0,2,2
		*/
		div.c1 p.c2{
			color:black;
		}
	</style>
</head>
<body>
	<div id="father" class="c1">
	<!-- 答案：蓝色 -->
		<p id="son" class="c2">请问这个字体是什么颜色？</p>
	</div>
</body>
</html>

举例2：

<!DOCTYPE html>
<html>
<head>
	<title>举例2</title>
	<style type="text/css">
	/*没被选中(继承的不算选中)
		*/
	#father{
		color: red;
	}
	/*被选中
	选择器数量：0,0,1
		*/
	p{
		color: blue;
	}
	</style>
</head>
<body>
<!-- 答案：蓝色 -->
	<div id="father"> <p>请问这个字体是什么颜色？</p></div>
</body>
</html>

举例3：

<!DOCTYPE html>
<html>
<head>
	<title>举例3</title>
	<style type="text/css">
	/*被选中
	选择器数量：0,0,2
		*/
		div p{
			color: red;
		}
		/*没选中
		*/
		#father{
			color: red;
		}
		/*被选中
		选择器数量：0,1,1
		*/
		p.c2{
			color: blue;
		}
	</style>
</head>
<body>
	<div id="#father" class="c1">
	<!-- 答案：蓝色 -->
		<p class="c2">请问这个字体是什么颜色？</p>
	</div>
</body>
</html>

举例4：

<!DOCTYPE html>
<html>
<head>
	<title>举例4</title>
	<style type="text/css">
	/*被选中
		选择器数量：0,0,2
		*/
		div div{
			color: blue;
		}
		/*被选中
		选择器数量：0,0,1
		*/
		div{
			color: red;
		}
	</style>
</head>
<body>
	<div>
		<div>
		<!-- 答案：蓝色 -->
			<div>请问这个字体是什么颜色？</div>
		</div>
	</div>
</body>
</html>

举例5：

<!DOCTYPE html>
<html>
<head>
	<title>举例5</title>
	<style type="text/css">
	/*被选中
		选择器数量：1,0,1
		*/
		#box1 div{
			color: red;
		}
		/*被选中
		选择器数量：1,0,0
		*/
		#box3 {
			color: blue;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
		<!-- 答案：红色 -->
			<div id="box3" class="c3">请问这个字体是什么颜色？</div>
		</div>
	</div>
</body>
</html>

举例6：

<!DOCTYPE html>
<html>
<head>
	<title>举例6</title>
	<style type="text/css">
	/*没选中(交集选择器没选中)
		*/
		div#box1{
			color: red;
		}
		/*被选中
		选择器数量：1,0,0
		*/
		#box3 {
			color: blue;
		}
	</style>
</head>
<body>
	<div id="box1" class="c1">
		<div id="box2" class="c2">
		<!-- 答案：蓝色 -->
			<div id="box3" class="c3">请问这个字体是什么颜色？</div>
		</div>
	</div>
</body>
</html>

2、增加权重

!important是英语里面重要的意思,作用是给属性提高权重,提高到无穷大，语法如下

k : v!important

使用

<!DOCTYPE html>
<html>
<head>
	<title>增加权重</title>
	<style type="text/css">
	#paral{
			color: red;
		}
		.spec{
			color: blue;
		}
		/*本来字体是红色，加了 important后给属性提高权重，字体变成绿色*/
		p{
			color: green!important;
		}</style>
</head>
<body>
	<p id="paral" class="spec">颜色</p>
</body>
</html>