CSS 标签选择器类选择器 id选择器通配符选择器总结

最新推荐文章于 2023-02-28 01:30:00 发布

凉心良意

最新推荐文章于 2023-02-28 01:30:00 发布

阅读量642

点赞数

分类专栏：前端文章标签： html css web

本文链接：https://blog.csdn.net/weixin_44355591/article/details/104424668

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

CSS可以直接写在HTML标签里面,这样的写法叫行内样式法:

⬇️这样就是一个标签上单独➕一个css修饰

<body>
		<h1 style="color: pink; font-size: 28px;"> 冲冲冲</h1>
	</body>

简单的分离:

⬇️实现简单的分离, 对各个标签进行操作, ⚠️一定要写在head标签里面
但是只能适用于本页面

<style type="text/css">
		tr {
			height: 40px;
		}
		h1 {
				color: green;
			}
		p {
				color: pink;
			}

==============================================================
差异化选择器 .class :

效果图:

在这里插入图片描述
知识点 🏷️ .class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 类选择器 class 差异化选择器 -->
		<style type="text/css">
			.red {
				color: red;
			}
		</style>
	</head>
	<body>
		<div>差异化选择</div>
		<div>一个或多个</div>
		<div>上面 . 定义</div>
		<div>类名别写错</div>
		<div>class来做</div>
		<div class="red">这样前面写一个class 就可以增加多中选择了</div>
	</body>
</html>

类选择器案例:

css模仿谷歌效果图:

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.blue {
				color: royalblue;
				font-size: 100px;
			}
			.red {
				color: red;
				font-size: 100px;
			}
			.yellow {
				color: yellow;
				font-size: 100px;
			}
			.green {
				color: green;
				font-size: 6.25rem;
			}
		</style>
	</head>
	<body>
		<span class="blue" >G</span>
		<span class="red">o</span>
		<span class="yellow">o</span>
		<span class="blue">g</span>
		<span class="green">l</span>
		<span class="red">e</span>
	</body>
</html>

一个标签内部只能有 1 个class
如果要统一修改字体大小可以这样:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.font100 {
				font-size: 6.25rem;
			}
			.blue {
				color: royalblue;
			}
			.red {
				color: red;
			}
			.yellow {
				color: yellow;
			}
			.green {
				color: green;
			}
		</style>
	</head>
	<body>
		<span class="blue font100" >G</span>
		<span class="red font100">o</span>
		<span class="yellow font100">o</span>
		<span class="blue font100">g</span>
		<span class="green font100">l</span>
		<span class="red font100">e</span>
	</body>
</html>

=============================================================
id选择器:

效果图:

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- id选择器具有唯一性 -->
		<!-- 不像class选择器 谁都可以调用 然鹅 id 选择器只能被调用一次  -->
		<!-- 这俩最大的区别就是使用次数 -->
		<style type="text/css">
			#blue {
				color: pink;
			}
		</style>
	</head>
	<body>
		<div id="blue">这是一个id选择器</div>
	</body>
</html>

===========================================================================
通配符选择器:

无效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 就是 * 号 -->
		<!-- 修改整个页面 -->
		<!-- 会降低网页的相应速度 不会随便使用 -->
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
	</body>
</html>

总结:

类选择器用的最多尽量少用 * id 选择器不推荐使用 .div .span {} 推荐 .li{}

凉心良意

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 标签选择器类选择器 id选择器通配符选择器总结

CSS可以直接写在HTML标签里面,这样的写法叫行内样式法:⬇️这样就是一个标签上单独➕一个css修饰<body> <h1 style="color: pink; font-size: 28px;"> 冲冲冲</h1> </body>简单的分离:⬇️实现简单的分离, 对各个标签进行操作, ⚠️一定要写在head标签里面但是只能适用于...
复制链接

扫一扫