【Web前端笔记-基础】第十一课·初识 CSS，CSS属性

本文链接：https://blog.csdn.net/qq_42250032/article/details/102627268

一：z-index属性

z-index属性是权重的意思，它负责管理谁压盖着谁的任务。
权重值越大，它的等级越大，那么它就越不容易被压盖着。
只有定位元素才有z-index属性，它的默认值为0。
如果多个元素的z-index相同，那么代码在下面的元素会压盖这代码在上面的元素。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>z-index属性</title>
		<style type="text/css">
			.posi1{
				width: 100px;
				height: 100px;
				background-color: #000000;
				position: fixed;
				z-index: 2;
			}
			.posi2{
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				position: fixed;
				/* z-index: 3; */
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div class="posi1"></div>
		
		<div class="posi2"></div>
	</body>
</html>

效果：

二：结构为类

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构为类小练习</title>
		<style type="text/css">
			/* 选择第一个元素
			p:first-child{
				color: #00FFFF;
			}
			/* 选择最后一个元素 
			p:last-child{
				color: #4169E1;
			}
			/* 选择第三个元素 
			p:nth-child(3){
				color: #FA8072;
			} */
			/* p:nth-child(2n){
				color: #FFAAAA;
			}
			p:nth-child(2n+1){
				color: #4169E1;
			} */
			p:only-child{
				color: #4169E1;
			}
		</style>
	</head>
	<body>
		<div>
			<p>结构为类小练习</p>
			<p>结构为类小练习</p>
			<p>结构为类小练习</p>
			<p>结构为类小练习</p>
			<p>结构为类小练习</p>
		</div>
		<div>
			<p>结构为类小练习</p>
		</div>
		
	</body>
</html>

效果：

三：伪元素

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪元素小练习</title>
		<style type="text/css">
			p:first-letter{
				font-size: 30px;
				
			}
			p:first-line{
				color: #4169E1;
				
			}
			p::before{
				content: "加";
			}
			p::after{
				content: "加";
			}
		</style>
	</head>
	<body>
		<p>  旁有一面被掷地的铜镜，魏无羡顺手摸来一看，一张白得出奇的面孔出现在镜中，两坨大红不均匀也不对称地坨在面颊一左一右，只要伸一				条鲜红的长舌，活活就是个吊死鬼。他扔开镜子，一抹脸，抹下一手白|粉。
			万幸，这具身体并非天生样貌清奇，只是品味清奇。一个大男人，居然涂了满脸的胭脂粉黛，还涂得如此之丑，噫，如何能忍！
		</p>
	</body>
</html>

效果：

四：阴影

文字阴影

text-shadow:给文字添加阴影效果，有四个值：h-shadow（水平阴影），v-shadow（垂直），blur（模糊距离），color（阴影颜色）。其中，水平阴影和垂直阴影必须设置，另外两个选设。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阴影文字练习</title>
		<style type="text/css">
			h4{
				text-shadow: 3px 2px 3px #FF0000;
			}
		</style>
	</head>
	<body>
		<h4>阴影文字练习</h4>
	</body>
</html>

效果：

盒子阴影

盒子阴影是给边框添加阴影效果，有6个需要设置的值：水平方向的阴影，垂直方向的阴影，模糊距离，阴影尺寸，阴影颜色，阴影位置。另外，也可以给图片设置阴影，并且能设置多组，用逗号隔开即可。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子阴影练习</title>
		<style type="text/css">
			.box{
				height: 100px;
				width: 100px;
				border:1px solid #000000;
				box-shadow: 3px 3px 3px 3px #0000FF inset ; 
			}
		</style>
	</head>
	<body>
		<div class="box">
			
		</div>
	</body>
</html>

效果：

五：透明度：

只要有颜色，就能设置透明度，方法：rgba（255，255，255，0.3）;

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明度练习</title>
		<style type="text/css">
			p{
				color: rgba(255,0,0,0.3);
			}
			div{
				width: 100px;
				height: 100px;
				background-color: rgba(65, 105, 225,0.5);
				border: 1px solid rgba(39, 40, 34,0.3);
			}
		</style>
	</head>
	<body>
		<p>透明度练习</p>
		<div id="bor">
			
		</div>
		
	</body>
</html>

效果：