前端（day02）css

最新推荐文章于 2024-05-18 03:07:39 发布

五八个

最新推荐文章于 2024-05-18 03:07:39 发布

阅读量309

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_44840708/article/details/122346938

版权

标签选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				color: darkgreen;
			}
			span{
				font-size: 300px;
			}
		</style>
	</head>
	<body>
		<!--标签选择器-->
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<span>我是span1</span>
		<span>我是span1</span>
		
	</body>
</html>

类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>类选择器</title>
		<style type="text/css"> 
			.a{
				font-size: 2.5rem;
			}
			.b{
				background-color: cadetblue;
			}
		</style>
	</head>
	<body>
		<div class="b">我是div1</div>
		<div class="a">我是div2</div>
		<div class="b">我是div3</div>
		
		<a href="#">我是a1</a>
		<a href="#" class="a">我是a2</a>
	</body>
</html>

id选择器：id不能重复

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>id选择器</title>
		<style type="text/css">
			#a{
				background-color: #5F9EA0;
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名" id="a">
		<input type="text" name="密码" >
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

分组选择器：多种选择器之间用逗号隔开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分组选择器</title>
		<style type="text/css">
			div,#input1{
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div>我是div1</div>
		<div>我是div2</div>
		<div>我是div3</div>
		
		<input type="text" name="账号" id="input1">
		<input type="text" name="密码" id="">
		
		<span>我是span1</span>
		<span>我是span2</span>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性选择器</title>
		<style type="text/css">
			input[type="text"]{
				background-color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<input type="text" placeholder="用户名">
		<input type="password" placeholder="密码">
		<input type="number" placeholder="年龄">
		<input type="text" placeholder="地址">
	</body>
</html>