【JavaWeb】CSS选择器——样式

最新推荐文章于 2023-10-10 22:19:20 发布

嗨森-程序杀手

最新推荐文章于 2023-10-10 22:19:20 发布

阅读量2.1k

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_52729352/article/details/121936691

版权

css选择器

标签名选择器：

标签名选择器,可以决定哪些标签被动的使用这个样式。

标签名选择器的格式:

<head>

<style type="text/css">

标签名{

属性:值;

}

</style>

</head>

案例:

在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。并且修改所有span标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style type="text/css">
	div {
	font-size:30px;
	color:blue;
	border: 1px yellow solid;
}
span {
	font-size:20px;
	color:yellow;
	border: 5px blue dashed;
}

</style>
</head>
<body>
	<!-- 需求1:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
并且修改所有span标签的字体颜色为黄色,字体大小20个像素。边框为5像素蓝色虚线。
 -->
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

id选择器：

id选择器,可以让我们通过id属性选择性的去使用这个样式。

id选择器格式:

<head>

<style type="text/css">

# id属性值{

属性:值;

}

</style>

</head>

案例演示:

分别定义两个div标签,第一个div标签定义id为ido01 ,然后根据id属性定义css样式修改字体颜色为蓝色字迹大小30个像素。边框为1像素黄色实线。

第二个div标签定义id为id002 ,然后根据id属性定义css样式修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#id001 {
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
}

#id002 {
	color:#FF0000;
	font-size: 20px;
	border: 5px blue dotted;
}
</style>
</head>
<body>
	<!-- 第一个div标签定义id为id001 ,然后根据id属性定义css样式修改字体颜色为蓝色字迹大小30个像素。边框为1像素黄色实线。
第二个div标签定义id为id002 ,然后根据id属性定义css样式修改的字体颜色为红色,字体大小20个像素。边框为5像素蓝色点线。 -->
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>

</body>
</html>

class选择器(类选择器)：

class类型选择器,可以通过class属性有效的选择性地去使用这个样式。

class选择器格式:

<head>

<style type="text/css">

. class属性值{

属性：值;

}

</style>

</head>

案例:

修改class属性值为class01的span或div标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。需求2:修改class属性值为class02的div标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class001 {
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
}

.class002 {
	color: #c0c0c0;
	font-size: 26px;
	border: 1px #FF0000 solid;
}
</style>
</head>
<body>
	<!-- 需求1:修改class属性值为class01的span或div标签,字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。
需求2:修改class属性值为class02的div标签,字体颜色为灰色,字体大小26个像素。边框为1像素红色实线。 -->
	<div class="class001">div标签class001</div>
	<div class="class002">div标签class002</div>
	<span class="class001">span标签class001</span>
	<span>span标签</span>
</body>
</html>

组合选择器：

组合选择器可以让多个选择器共用同一个css样式代码。

格式:

<head>

<style type="text/css">

选择器1,选择器2,选择器n{

属性:值;

}

</style>

</head>

注：若选择器前有. #千万不能省略

案例:

修改class="class01"的div标签和id="ide1"所有的span标签,字体颜色为蓝色,字体大小20个像素。边框为1像素黄色实线。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01, #id01 {
	color: blue;
	font-size: 20px;
	border: 1px yellow solid;
}
</style>
</head>
<body>

	<!-- 需求1:修改class="class01"的div标签和id="id01"所有的span标签,字体颜色为蓝色,字体大小20个像素。
边框为1像素黄色实线。
 -->
	<div class="class01">div标签class01</div>
	<br />
	<span id="id01">span标签</span>
	<br />
	<div>div标签</div>
	<br />
	<div>div标签id01</div>
	<br />
</body>
</html>

长风破浪会有时，直挂云帆济沧海！

嗨森-程序杀手

关注

0
点赞
踩
0

收藏

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

css选择器标签名选择器：id选择器：class选择器(类选择器)：组合选择器：标签名选择器：标签名选择器,可以决定哪些标签被动的使用这个样式。标签名选择器的格式:<head><style type="text/css">标签名{属性:值;}</style></head>案例:在所有div标签上修改字体颜色为蓝色,字体大小30个像素。边框为1像素黄色实线。并且修...
复制链接

扫一扫