2021-08-01

最新推荐文章于 2021-11-10 17:26:45 发布

李王一

最新推荐文章于 2021-11-10 17:26:45 发布

阅读量53

点赞数

本文链接：https://blog.csdn.net/weixin_51081867/article/details/119299444

版权

css基础选择器

1.标签选择器
2.类选择器（一个标签可以调用多个相同类名，类名可以自己定义）
3.id选择器（使用过程与类选择器相似但不同的是id属性只能在HTML文档中出现一次）
4.通配符选择器：选取页面中所有元素标签

1.标签选择器

	用HTML标签名作为选择器
	如：p{}、div{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			h4 {
				color: #0000FF;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<h4>hello world</h4>
	</body>
</html>

2.类选择器（一个标签可以调用多个相同类名，类名可以自己定义）

	.类名{
	属性1：属性；
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xiaokai {
				background-color: blue;
				color: black;
			}
			.yi {
				background-color: red;
				color: white;
			}
			.wang {
				background-color: orange;
				color: white;
			}
		</style>
	</head>
	<body>
			<ul>
				<li class="xiaokai">王俊凯</li>
				<li class="yi">易烊千玺</li>
				<li class="wang">王源</li>
			</ul>
	</body>
</html>

类命名规则：
头部：header             内容：content/container       尾：footer
导航：nav                侧栏：sidebar                 栏目：column
登陆条：loginbar         标志：logo                    广告：banner
页面主体：main           子导航：subnav

多类名使用方式：
多类名间需用空格分开、相同的样式可放入同一个类中好修改：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.xiaokai {
				width: 50px;
				height: 50px;
			}
			.backcol {
				color: blue;
				background-color: #FFA500;
			}
		</style>
	</head>
	<body>
		<div class="xiaokai backcol">
			王俊凯
		</div>
	</body>
</html>

3.id选择器（使用过程与类选择器相似但不同的是id属性只能在HTML文档中出现一次）

	以#定义；
	#id名{
	属性1：属性；
	}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#kai {
				width: 50px;
				height: 50px;
				color: blue;
				background-color: #FFA500;
		</style>
	</head>
	<body>
		<div id="kai">
			小凯
		</div>
	</body>
</html>

4.通配符选择器：选取页面中所有元素标签

		* {
		属性1：属性；
		}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				color: red;
			}
		</style>
	</head>
	<body>
		<h4>1</h4>
		<span id="2">
			2
		</span>
		<div id="3">
			3
		</div>
	</body>
</html>