CSS 伪类、透明度

最新推荐文章于 2023-01-01 11:11:01 发布

小智RE0-走在路上

最新推荐文章于 2023-01-01 11:11:01 发布

阅读量311

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/MrTumnus/article/details/114856242

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了CSS中伪类的应用，包括链接状态 (:link、:visited、:hover、:active) 和焦点状态 (:focus)，以及如何使用 opacity 属性调整元素的透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪类

:link表示普通的链接（没访问过的链接）。

:visited表示访问过的链接。

浏览器是通过历史记录来判断一个链接是否访问过。

使用visited伪类只能设置字体的颜色

:hover伪类表示鼠标移入的状态。

:active表示的是被点击的状态。

注意：:visited放在:hover之前；
:active 必须被置于 :hover 之后，才是有效的。

:focus向拥有键盘输入焦点的标签添加样式；针对可输入内容的标签。
例如：
首先在链接中的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类练习</title>
	    <style type="text/css">
	    	a:link{
	    	color: deeppink;
			text-decoration: none;}/* 访问之前的状态 ；无下划线，字体是粉色*/
			a:visited{color: black; }  /* 访问之后的状态，字体是黑色 */
			a:hover{color: blue;}  /* 鼠标移动到上面的状态 ，字体为蓝色 */
			a:active{color: green; } /* 鼠标点击的状态，字体绿色*/
	    </style>
	</head>
	<body>
		<a href="https://www.bilibili.com/">bilibili</a>
		<a href="https://www.zhihu.com/">知乎</a>
		<a href="https://baidu.com/">百度</a>
	</body>
</html>

运行：

在这里插入图片描述

点击访问"百度"之后再次运行；

在这里插入图片描述
鼠标移动到"bilibili"上，截图；

在这里插入图片描述
鼠标点击按住"知乎"链接：

在这里插入图片描述

伪类在段落和按钮以及文本框上的使用：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
			p:hover{
				color: pink;
				background-color: #7CFC00;
				/* 鼠标移动到上面的状态 ，绿色 */
			}
			p:active{
				background-color: aqua;
				/* 鼠标点击的状态，字体蓝色*/
			}
			.btn:hover{
				background-color: #00FFFF;
				/* 鼠标移动到上面的状态 ，蓝色 */
			}
			.btn:active{
				background-color: #FF0000;
				/* 鼠标点击的状态，红色*/
			}
			input:focus{
				background-color: #7CFC00;
				/* focus向拥有键盘输入焦点的标签添加样式； */
			}
        </style>		
	</head>
	<body>
		<p>
			CSS是Cascading Style Sheets（级联样式表）。
			级联: 关联 两个事物之间的关系 指的是网页内容  和 修饰网页内容的css语法
			理念是将网页和样式分离  这样重复的样式只需要定义一次即可.
		</p>
		<form>
			<input type="button" value="普通按钮" class="btn"/>
			<!--按钮-->
			<input type="text" value="" placeholder="请输入:"/>
			<!--文本框-->
		</form>
	</body>
</html>

运行：
移动或点击：显示变化：
在这里插入图片描述

在这里插入图片描述
点击输入文本框：

在这里插入图片描述

透明度

opacity 属性设置标签的
规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				opacity: 0.4;
				/* 设置图片透明度0.4 */
			}
			img:hover{
			opacity: 0.7;
			/* 鼠标移动到图片上时,透明度为0.7 */
			}
			img:active{
			opacity:1 ;
			/* 鼠标点击图片时,透明度为1 */
			}
		</style>
	</head>
	<body>
		<img src="img/BG.png"/>
		<!-- 图像标签，放入图片 -->
	</body>
</html>