其他分享
首页 > 其他分享> > css02_css继承性和层叠性

css02_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">

属性说明:

举例
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>

效果图
image

2、继承性

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

3、层叠性(覆盖性)

1、权重比较

总结:

比较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>

image
举例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>

注意3点:

  1. important修饰的是一个属性而不是一个选择器
  2. important无法提升继承的权重,该是0还是0。只能提高选中的权重,没选中的无法提高
  3. important做站的时候不允许使用(属于知识点,但是没有实际意义)

标签:css02,权重,color,样式,举例,选中,继承性,选择器,css
来源: https://blog.csdn.net/qq_36366618/article/details/120138462