CSS样式选择器

最新推荐文章于 2022-11-05 22:01:04 发布

野菌桃

最新推荐文章于 2022-11-05 22:01:04 发布

阅读量237

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/YJT180/article/details/101627430

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

上一篇博客table表中我已经稍微提到了css并且使用过，而在这篇博客中我将详述一下css样式选择器的使用

概念：CSS 指层叠样式表(Cascading Style Sheets)，用于设定网页中元素的显示方式。

分类：

1.外部样式表

将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。目的是为了让多个多个HTML文件需要的样式出现重复时，简化代码。

2.内部样式表

将CSS样式直接写在HTML文档中的head内的style标签内。目的是在同一个HTML文档中出现多个重复样式时简化代码。

3.内联样式

将CSS样式写在HTML文档某个标签的style标签属性的属性值中。当某个标签需的样式需要特别标注时，使用该格式。

本文中暂且只叙述内部样式表的使用

内部样式表
标签选择器

最基础的一种选择器，用标签来选择关键字，赋予关键字该标签所设定的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*标签选择器：标签名*/
			span{
			        color:red;/*将span标签中的字体颜色均设置为红色*/
			}
		</style>
	</head>
	<body>
		<span>haut</span>
		<span>zzt</span>
		<i class="blue_txt">百度一下</i>
		<b class="blue_txt">腾讯</b>
	</body>
</html>

效果为

可以看到，只有span标签所标识的字符变为了红色

id选择器

以id为标识，将设定的属性赋予id对应的字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				color:red;
			}
			/*id选择器：#id标签属性值 id值不允许重复*/
			#black_txt{
				color: black;
			}
		</style>
	</head>
	<body>
		<span id="black_txt" class="blue_txt">haut</span><!--设定id为之前选择器所对应的值-->
		<span>zzt</span>
		<i class="blue_txt">百度一下</i>
		<b class="blue_txt">腾讯</b>
	</body>
</html>

效果为

可以看到，haut虽然同时也有span标签，但最终还是被id选择器设定了其颜色为黑色，这说明id选择器的优先级高于标签选择器

class选择器

以class为标识，将设定的属性赋予class对应的字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				color:red;
			}
			#black_txt{
				color: black;
			}
			/*class选择器：.class class属性可以重复*/
			.blue_txt{
				color: blue;
			}
		</style>
	</head>
	<body>
		<span id="black_txt" class="blue_txt">haut</span>
		<span class="blue_txt">百度一下</span>
		<b class="blue_txt">腾讯</b>
	</body>
</html>

效果为

可以看到“腾讯”由于class选择器颜色变为蓝色，而”haut“同时有span标签 id选择器和class选择器作用，最终仍为id选择器分配的黑色，这说明id选择器优先级最高，而“百度一下”在span标签和class选择器共同作用下是蓝色，说明class选择器优先级大于id选择器

分组选择器

分组选择器可以一次用多个关键字筛选标签并赋予相应属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				color:red;
			}
			#black_txt{
				color: black;
			}
			.blue_txt{
				color: blue;
			}
			/*分组选择器*/
			.green_txt,p{
				color: green;

			}
		</style>
	</head>
	<body>
		<span id="black_txt" class="blue_txt">haut</span>
		<span class="blue_txt">百度一下</span>
		<b class="blue_txt">腾讯</b>
		<p>网易</p>
	</body>
</html>

效果为

通配符选择器

可以为整个页面的所有标签设定样式

格式为： *{文本}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			span{
				color:red;
			}
			#black_txt{
				color: black;
			}
			.blue_txt{
				color: blue;
			}
			.green_txt,p{
				color: green;

			}
			*{/*通配符选择器：匹配当前页面所有标签*/
				margin: 0px;/*用于取消整个页面中字体与边框的间距*/
				padding: 0px;
			}
		</style>
	</head>
	<body>
		<span id="black_txt" class="blue_txt">haut</span>
		<span class="blue_txt">百度一下</span>
		<b class="blue_txt">腾讯</b>
		<p>网易</p>
	</body>
</html>

效果为

可以看到标签靠近了边框

野菌桃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS样式选择器

上一篇博客table表中我已经稍微提到了css并且使用过，而在这篇博客中我将详述一下css样式选择器的使用概念：CSS 指层叠样式表(Cascading Style Sheets)，用于设定网页中元素的显示方式。分类：1.外部样式表将CSS样式写在css样式文件中，使用link标签将该css文件引入到HTML文档中。目的是为了让多个多个HTML文件需要的样式出现重复时，简化代码。...
复制链接

扫一扫