HTML5 选择器、子代选择器、空白的块元素标签、鼠标移入、边框、背景图片的使用与总结

本文链接：https://blog.youkuaiyun.com/LH990226/article/details/109117220

本文总结了HTML5中关于选择器的使用、子代选择器的概念、如何处理空白的块元素标签、实现鼠标移入效果的方法、设置边框的技巧以及背景图片的应用。通过对这些知识点的探讨，旨在提升HTML5页面的样式设计能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			/*选择器{
			 	样式属性:属性值;
			   }
			   
			   选择器:
			   1.通用选择器
			 	* 可以选择到所有元素
			 	项目中比较普遍的样式都可以在此内部写出
			 	不常用的样式尽量不要在此使用
			   	 
			   2.元素选择器 
			   	直接以标签的名字作为选择器使用
			   	
			   3.类选择器	class
			   	a.在标签 内使用class属性，给标签命名一个名字className
			   	b.使用 .className的方式，作为选择器，选中该标签
			   	
			   	注意：class 是可以重复命名的
			   		元素名.className 限定所有使用此className的标签，只有此类标签可以使用
			   		一个标签可以使用多个class 使用空格隔开即可
			   	
			   	优先级：类选择器>元素选择器>通用选择器
			   	
			   4.id选择器
			   	主要在js中使用id
			   	a.在标签内使用id属性，命名idName
			   	b.在样式中使用#idName的方式，作为选择器
			   	id不能重复命名，主要在js中使用，但是如果只是在css中，是可以重复显示效果
			   	
			   	优先级：id>class>元素>*
			 **/
			
			*{
				color: goldenrod;
				/*字体大小*/
				font-size: 20px;
			}
			
			span{
				color: red;
			}
			
			/*没空格*/
			span.font{
				color: aqua;
			}
			
			.size{
				font-size: 50px;
			}
			
			.font{
				color: yellow;
			}
			
			#fontId{
				color: #0000FF;
			}	
		</style>
	</head>
	<body>
		<span style="color: green;">空白文字标签</span> <br />
		<span class="font">空白文字标签</span> <br />
		<span class="size">空白文字标签</span> <br />
		<span class="font size">空白文字标签</span> <br />
		
		<h1 class="font">我是h1标签</h1>
		
		<!--id选择器-->
		<h1 class="font" id="fontId">我是h1标签</h1>
		<h1 id="fontId">我是h1标签</h1>
	</body>
</html>

二、子代选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		
			/*h1下的span标签，子代选择器
			 h标题不能嵌套
			 越详细，优先级越高
			 
			  */
			h1 span{
				color: red;
			}
			h1 p span{
				color: blue;
			}
			
		</style>
	</head>
	<body>
		<h1>
			<p>
				<span>哈哈哈哈</span>
				<span>嘿嘿嘿嘿</span>
				<span>呀呀呀呀</span>
			</p>
			<span>哈哈哈哈</span>
			<span>嘿嘿嘿嘿</span>
			<span>呀呀呀呀</span>
				
		</h1>
		
		<h2>
			
			<span>哈哈哈哈</span>
			<span>嘿嘿嘿嘿</span>
			<span>呀呀呀呀</span>
			
		</h2>
	</body>
</html>

三、空白的块元素标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				/*元素宽度*/
				width: 300px;
				/*元素高度*/
				height: 200px;
				/*背景色*/
				background-color: greenyellow;
				
				/*字体属性*/
				font-size: 50px;
				color: tomato;
				/*控制字体粗细*/
				font-weight: 300;
				/*字体格式*/
				font-family: "仿宋";
				/*行内元素水平居中*/
				text-align: center;
				/*行内元素垂直居中 行高 = 父元素高度 垂直居中效果*/
				line-height: 200px;				
			}
			
			a{
				width: 300px;
				height: 300px;
				background-color: blue;
				/*行内元素无法被设置宽度和高度*/
				/*可以将行内元素——>块元素*/
				display: block;
			}
		</style>
	</head>
	<body>
		
		<!--span 空白的行内元素标签
			div 空白的块元素标签
			
		-->
		<div>
			<span>神仙打架</span>
			<a href="#">点击修改天气</a>
		</div>
		
	</body>
</html>

四、鼠标移入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 300px;
				height: 300px;
				background-color: black;
			}
			
			/*鼠标移入效果*/
			div:hover{
				background-color: blue;
			}			
		</style>
		
	</head>
	<body>
		
		<div></div>
		
	</body>
</html>

五、边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			.box01{
				width: 300px;
				height: 300px;
				
				/*background-color: blue;*/
				
				/*边框
				 	border:
				 			属性值1：    边框的样式
				 						solid  实线
				 						double  双实线
				 						dashed  虚线
				 						dotted  点状线
				 						groove  3D虚拟线
				 			属性值2：	 边框的颜色
				 			属性值3：    边框的大小
				 	border-top/right/bottom/left  控制每一边的边框
				 	
				      边框倒角
				      	border-radius:30px; 表示以(30px,30px)为圆心做切割
				    	border-radius: 50%; 表示切割一个圆
				 * */
				border: solid black 1px;
				
				border-radius: 50%;
			}
			
			
			.box02{
				width: 100px;
				height: 50px;
				
				border: 1px solid black;
				
				border-radius: 50px;
			}
		</style>
		
	</head>
	<body>
		
		<div class="box01"></div>
		
		<div class="box02"></div>
		
	</body>
</html>

六、背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				width: 500px;
				height: 1000px;
				
				border: 2px solid black;
				/*背景*/
				/*背景图片*/
				background-image: url(img/share_icon.png);
				/*平铺*/
				background-repeat: no-repeat;
				/*背景图片大小
				 	100%    背景图片宽度与div一致        500px
				 	200%    背景图片宽度是div 的 2 倍      1000px
				 * */
				background-size: 100%;
				
				/*调整背景图片的位置
				 		x左边      y坐标
				 	背景图片左上角的坐标
				 * */
				background-position: 50px 50px;
			}
			
		</style>
		
	</head>
	<body>
		
		<div></div>
		
	</body>
</html>