Web开发基础学习笔记整理（8）

最新推荐文章于 2022-07-18 22:46:29 发布

Mo*◑

最新推荐文章于 2022-07-18 22:46:29 发布

阅读量184

点赞数 1

分类专栏： # Web开发基础文章标签： html css

本文链接：https://blog.csdn.net/qq_44458489/article/details/105095674

版权

Web开发基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

CSS中的选择器

1）标记选择器：根据标记名进行查找
2）类class选择器：根据class的值进行查找，特点是：以.开始
3）id选择器：根据id的值进行查找，特点是：以#开始

CSS选择器的优先级：id选择器 > class选择器 > 标记选择器
使用!important设置最高优先级，一般是在属性值的后面加上。

CSS中的盒子模型

盒子模型包含元素的内容、内边距、边框、外边距。
内容比喻为人，边框比喻为衣服，内边距比喻为人(皮肤)和衣服的距离，外边距比喻为穿着衣服的人和另外一个穿着衣服的人的距离。

盒子模型区域分析图：

在这里插入图片描述

内边距：内容和边框的距离，也可以理解为人和衣服之间的距离
padding-top:距离顶部的内边距
padding-right:距离右边的内边距
padding-bottom:距离底部的内边距
padding-left:距离左边的内边距
外边距：边框距离外边的距离，可以理解为人和人穿衣服之间的距离
margin-top: 顶部外边距
margin-right: 右外边距
margin-bottom: 底部外边距
margin-left: 左外边距

CSS中消失的效果

1）彻底消失
display:none/block;
2）占位隐藏
visibility:hidden/visible;
3）完全透明
opacity:数字; 数字0~1区间取值

CSS中对超链接的4种伪样式

1）未访问 a:link{ }
2）已访问 a:visited{ }
3）鼠标悬停 a:hover{ }
4）正被点击 a:active{ }

代码部分：

part1:

<html>
	<head>
		<title>CSS的选择器</title>
		<!-- 内部样式 查找标记 -->
		<style>
			/* 1.标记选择器:根据标记的名字进行查找的 */
			a{
				color:red !important;  /* 修改字体的颜色 */
				font-size:30px;  /* 修改字体的大小 */
				text-decoration:none;  /* none取消下划线 underline加下划线 */
			}
			div{
				text-decoration:underline;
				font-size:30px;
			}
			
			/* 2.类class选择器：根据class的值进行查找 */
			.s{
				color:yellow;
			}
			.s1{
				color:blue;
			}
			
			/* 3.id选择器：根据id的值进行查找，特点：以#开始 */
			#d1{
				color:green;
			}
			
			/* 选择器的优先级：id选择器 > class选择器 > 标记选择器 */
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">点我去百度</a>
		<br/>
		<a href="http://www.taobao.com" class="s1" id="d1">点我去淘宝</a>
		<div>我是div</div>
		<span class="s">我是span</span>
	</body>
</html>

效果图：

在这里插入图片描述

part2:

<html>
	<head>
		<title>盒子模型</title>
		<!-- 内部样式 -->
		<style>
			/* class选择器 */
			.c1{
				color:red;
				border:1px solid green;
				width:300px;
				height:300px;
				/* 设置内边距 */
				padding-top:20px;
				padding-bottom:30px;
				padding-left:20px;
				padding-right:30px;
				/* 设置外边距 */
				margin-top:50px;
				margin-left:50px;
				margin-bottom:50px;
			}
			/* id选择器 */
			#c2{
				width:300px;
				height:300px;
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div class="c1">我是一个div标记</div>
		<div id="c2">我是一个div标记</div>
	</body>
</html>

效果图：

在这里插入图片描述

part3：

<html>
	<head>
		<title>CSS中的消失效果</title>
		<!-- 内部样式 -->
		<style>
			.c1{
				width:100px;
				height:100px;
				background-color:red;
				/* margin-bottom:20px; */
				/* display:none; */ /* 彻底消失（位置都不留） */
				/* visibility:hidden; */ /* 占位隐藏（位置保留） */
				opacity:0.2;
			}
			.c2{
				width:100px;
				height:100px;
				background-color:green;
				margin-top:20px;
			}
		</style>
	</head>
	<body>
		<div class="c1"></div>
		<div class="c2"></div>
	</body>
</html>

效果图：

在这里插入图片描述

part4：

<html>
	<head>
		<title>超链接的伪样式</title>
		<style>
			/* 未访问 */
			a:link{
				color:red;
				text-decoration:none;
			}
			/* 鼠标悬停 */
			a:hover{
				color:blue;
				text-decoration:underline;
			}
			/* 正在点击 */
			a:active{
				color:yellow;
			}
			/* 已访问 */
			a:visited{
				color:green;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">我是一个超链接</a>
	</body>
</html>

效果图：

未访问：

在这里插入图片描述

鼠标悬停：

在这里插入图片描述

正在点击：

在这里插入图片描述

已访问：

在这里插入图片描述
若想了解更多可点击本处

Mo*◑

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web开发基础学习笔记整理（8）

CSS中的选择器1）标记选择器：根据标记名进行查找2）类class选择器；根据class的值进行查找，特点是：以.开始3）id选择器：根据id的值进行查找，特点是：以#开始CSS选择器的优先级：id选择器 > class选择器 > 标记选择器使用!important设置最高优先级，一般是在属性值的后面加上。CSS中的盒子模型盒子模型包含元素的内容、内边距、边框...
复制链接

扫一扫

专栏目录