css学习

最新推荐文章于 2024-08-10 21:02:05 发布

程序虎子

最新推荐文章于 2024-08-10 21:02:05 发布

阅读量67

点赞数

分类专栏： Java基础知识文章标签： css

本文链接：https://blog.csdn.net/sunshinemen123/article/details/118528150

版权

Java基础知识专栏收录该内容

7 篇文章 0 订阅

订阅专栏

day02:css的学习

一、引用的方式

一、直接在标签中写入

<!-- 局限性或太大，只能在当前属性里面使用 -->
		<div style="background-color: aqua; width: 200px; height: 200px;">
			颜色很好看
		</div>

二、在当前页面的style标签中引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				background-color: blanchedalmond;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<!-- 解决了代码冗余但是，只能在本页面使用 -->
		<div>
			页面
		</div>
	</body>
</html>

三、在外部写好后用link引入

div{
	background-color: blueviolet;
	color: aqua;
	width: 200px;
	height: 200px;
}



.tr1,.tr3,.tr5,.tr7,.tr9{
	background-color: #00FFFF;
}

.tr2,.tr4,.tr7{
	color: red;
}

.tr1{
	color: blue;
}

.tr8{
	color: green;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="cssstyle.css" rel="stylesheet"/>
	</head>
	<body>
		<div>
			外部引用样式
		</div>
	</body>
</html>

二、选择器

id选择器

#p1{
				border: 1px solid;
			}

类选择器

.p2{
				border: 1px solid;
			}

属性选择器

input[type="password"]{
				border: red 1px solid;
			}

后代选择器

.div1 a{
				border: red 1px solid;
			}

子类选择器

.div1>a{
				border: #8A2BE2 2px solid;
			}

相连选择器

	.div1 + em{	/* 选着紧跟class=div1的em所有元素 */
				border: red 5px solid;
			}

伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* 焦距 */
		input:focus{
			color: #FFFF00;
		}
		
		/* 未访问的链接 */
		a:link {
		  color: #FF0000;
		}
		
		/* 已访问的链接 */
		a:visited {
		  color: #00FF00;
		}
		
		/* 鼠标悬停链接 */
		a:hover {
		  color: #FF00FF;
		}
		
		/* 已选择的链接 */
		a:active {
		  color: #0000FF;
		}
	</style>
	
	<body>
		<input /><br/>
		<a href="#">链接1</a>
		<a href="#">链接2</a>
		<a href="#">链接3</a>
		<a href="#">链接4</a>
		<a href="#">链接5</a>
	</body>
</html>

伪元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/* 伪元素 */
		a::before{
			content: "<";
		}
		a::after{
			content: ">";
		}
	</style>
		
	<body>
		<a href="#">1</a><br>
		
	</body>
</html>

程序虎子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习

day02:css的学习一、引用的方式一、直接在标签中写入 <div style="background-color: aqua; width: 200px; height: 200px;"> 颜色很好看 </div>二、在当前页面的style标签中引用<!DOCTYPE html><html> <head> <meta charset="ut
复制链接

扫一扫

专栏目录