HTML学习第2天-css选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_41553380/article/details/108237133

1.各种选择器用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内嵌样式 -->
		<style type="text/css">
			p{
				color: green;
				
			}
		</style>
		<!-- 外部链接 -->
		<link href="css/mycss.css" 
		      rel="stylesheet" type="text/css"/>
        <!-- 就近原则 ，内嵌样式和外部链接以写在后面的代码为准，
		     后面的样式会覆盖相同元素对应的样式-->
	</head>
	<body>
		<!-- 行内样式 -->
		<!-- 行内>内嵌>外部 -->
		<p style="font-size: 36px;">你好</p>
		<p class="my">java</p>
		
        <a class="my">你好a1</a>
		<a class="my">你好a2</a>
		<!-- 选择器优先级：ID选择器>类选择器>标签选择器 -->
		<br />
		<!-- 元素id名不能重复,id不能被公用 -->
		<span id="span1">你好span1</span>
		<span id="span2">你好span2</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				font-family: "楷体";
				font-size:50px;;
				font-style: italic;
                font-weight: bold;
							
			}
		    .mycss{
			    color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- span可以修改部分内容的样式 -->
		<p>你好你好你好你好<span class="mycss">你好</span>你好你好你好</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
				
			p{
				color: black;
				text-align: left;
				text-indent: 36px;
				line-height: 36px;
				
			}
			div{
				line-height: 20px;
			}
			.div1{
				color: #fff;
				width: 500px;
				height: 300px;
				background-color: #A52A2A;
				text-align: center;
				line-height: 300px;
				text-decoration: underline;
				text-decoration: line-through;
				cursor: pointer;
				
			}
			a{
				color: blueviolet;
				/* text-decoration: none; */
			}
			a:hover{
				color: #FF0000;
				cursor: default;
			}
			a:active{
				color: red;
				font-size: 36px;
			}
			#div2{
				/* 设备的标准长度单位:rem*/
				width: 31.25rem;
				height: 500px;
				background-color: #FFE4C4;
				background-image: url(image/1.jpg);
				background-repeat: no-repeat;
				/* background-position: center center; */
				background-position: 30px 30px;
				
			}
		</style>
		
	</head>
	<body>
		<p>
			你好你好你好你好你好你好
			你好你好你好你好你好你好
			你好你好你好你好你好你好
			你好你好你好你好你好你好
			你好你好你好你好你好你好
			你好你好你好你好你好你好
			你好你好你好你好你好你好
		</p>
		<div class="div1">
			你好你好你好你好你好你好
		</div>
		
		<a href="css1.html">css1.html</a>
		
		<div id="div2">你好</div>
	</body>
</html>