CSS 之样式表的用法（三）

最新推荐文章于 2024-11-01 16:54:21 发布

菇毒

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125001396

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

本文介绍了CSS3中的UI元素状态伪类选择器，如`:enabled`和`:disabled`，并提供了用户登录表单的示例。此外，还展示了如何利用伪类选择器创建多彩标签，通过不同颜色的`<span>`标签实现文字的色彩斑斓效果。

摘要由CSDN通过智能技术生成

样式表的用法（三）

1. UI 元素状态伪类选择器

1. UI 元素状态伪类选择器

UI元素状态伪类也是 css3 新增的选择器，UI 即 User Interface（用户界面）的简称；
UI 设计则是指对软件的人机交互、逻辑操作、界面美观的整体设计；UI 元素的状态一般包括可用、不可用、选中、未选中、获取焦点、失去焦点、锁定、待机等，css3 定义了 3 种常用的状态伪类选择器；
20220427
例子1：使用 UI 元素状态伪类选择器的示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>UI 元素状态伪类选择器</title>
		<style>
			input:enabled{border: 1px dotted #666;background:#55ffff;}
			input:disabled{border:1px dotted #999;background:#F2F2F2;}
		</style>
	</head>
	<body>
		<center>
			<h3 align=center>用户登录</h3>
			<form method="POST" action="">
				用户名：<input type="text" name="name"/><br /><br />
				密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="pass" disabled="disabled"/><br /><br />
				<input type="submit" value="提交"/>
				<input type="reset" value="重置"/>
			</form>
		</center>
	</body>
</html>

20220427
例子2：制作彩色标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 改变标题样式，定义颜色、字体大小、尺寸 */
		h1 {font-family:Arial,sans-serif;font-size:25px;color:#369;padding-bottom: 6px;border-bottom: 4px solid #ccc;}
		h1 {background:url(6.gif) repeat-x bottom; width: 100px;height: 200px;} /*增加背景图，并定义位置*/	
		h1 {width:300px;} /*宽度 300px*/
		.c1{color:#B3EE3A;}
		.c2{color:#00F5FF;}
		.c3{color:#00EE00;}
		.c4{color:#FF0000;}
		.c5{color:#800080;}
		.c6{color:#71C671;}
		.c7{color:#0000FF;}
		</style>
	</head>
	<body>
		<h1 align=center>
			<span class="c1">五</span>
			<span class="c2">彩</span>
			<span class="c3">斑</span>
			<span class="c4">斓</span>
			<span class="c5">的</span>
			<span class="c6">世</span>
			<span class="c7">界</span>
		</h1>		
	</body>
</html>