样式表的规范与选择器

最新推荐文章于 2024-03-18 18:57:20 发布

小贾爱编程

最新推荐文章于 2024-03-18 18:57:20 发布

阅读量151

点赞数

分类专栏： .NET 文章标签：样式表的规范和选择器

本文链接：https://blog.csdn.net/qq_37589387/article/details/88670037

版权

.NET 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

样式表的基本结构：

	<style type="text/css">
			       input{border:1px solid blue;background-color:yellow;}
			       .btn{color:red;font-size:30px;font-family:隶书;}
		</style>

类别选择器：

作用：样式一旦定义可以应用到多个不同的标签，命名方法：“.”+自定义样式名称，使用方法:class="自定义样式名称"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.one{color:red;
			     font-size:18px;}
			
		</style>
	</head>
	<body>
		<p class="one">类别选择器</p>
		<input type="button" value="按钮" class="one" />
	</body>
</html>

ID选择器：

作用：对于页面中独一无二的元素，可以给其id属性赋予独一无二的样式。命名方式：“#”+标签ID

使用方法：只需将标签ID和样式中的ID选择器名称对应即可。使用场合：在使用<div>标签布局时更常用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#linkAuthor{color : red;font-size:18px;font-style:italic;}
		</style>
	</head>
	<body>
		<div id="linkAuthor">
			联系我们:<a href="mailto:js@163.com">个人邮箱</a>
		</div>
	</body>
</html>

伪类选择器：超链接标签<a>支持几个特殊的CSS样式类，用于定义超链接不同状态的样式，这样样式类被称为“伪类”。

伪类属性：a:link超链接的普通样式，即正常浏览状态的样式。a:visited被点击过后呈现的样式

a:hover鼠标指针悬停于超链接元素之上是呈现的样式。a:active单击超链接时呈现的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{color:blue;text-decoration:none;font-size:12px;}
			a:hover{color:red;text-decoration:underline}
		</style>
	</head>
	<body>
		<a href="#">使用的伪类选择器的超链接</a>
	</body>
</html>