css笔记

最新推荐文章于 2025-05-30 15:10:57 发布

wzdprofessor

最新推荐文章于 2025-05-30 15:10:57 发布

阅读量233

点赞数

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

本文链接：https://blog.youkuaiyun.com/wangjiadongge/article/details/52712808

版权

html 专栏收录该内容

4 篇文章

订阅专栏

css的调用：

<!--css文件的用法-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div style="height: 45px;background: blue;"></div>

	<div>
	<div style="height: 500px;background-color:green;float: left;width: 30%;">left</div>
	<div style="height: 500px;background-color: pink;float: left;width: 70%">right</div>
	</div>
</body>
</html>
###################整个标签调用(全局)#######################
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
		background-color:red;
		}	
	</style>

</head>

<body>
	<div style="height: 45px;background: blue;"></div>
	<div>
		<div>left</div>
		<div>right</div>
	</div>
</body>
</html>

########################################################
###分组调用，第一个和三个是红色，第二个和第四个为绿色###
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.d1{
	background-color:red;
	}
	.d2{
	background-color:green;
	}	
	</style>

</head>

<body>
	
		<div class="d1">div1</div>
		<div class="d2">div2</div>
		<div class="d1">div3</div>
		<div class="d2">div4</div>

</body>
</html>
#########全局和局部同时存在########
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.d1{
	background-color:red;
	}
	.d2{
	background-color:green;
	}
	div{
		background-color: orange
	}	
	</style>

</head>

<body>
		<div>d0</div>
		<div class="d1">div1</div>
		<div class="d2">div2</div>
		<div class="d1">div3</div>
		<div class="d2">div4</div>

</body>
</html>


##########################################
<!--css可以写在这里下面引用,只能在本页使用-->
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	.h1{
		background-color:red;
	}
	.h2{
		background-color:green;
	}
	.h3{
		background-color: orange;
	}
	h1,h2,h3,h4{
		background-color: brown;
	}	
	</style>

</head>

<body>
		<h1>h1</h1>
		<h2>h2</h2>
		<h3>h3</h3>
		<h4 class="h2">h4</h4>
</body>
</html>


#################引用文件夹内的css#######################
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>css</title>
	<!--css引入外部文件夹，可以任意页面调用-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>

</body>
</html>