行间、内部、外部样式表

最新推荐文章于 2022-10-30 20:24:09 发布

0君权神兽0

最新推荐文章于 2022-10-30 20:24:09 发布

阅读量400

点赞数 2

分类专栏： HTML5/CSS3

本文链接：https://blog.csdn.net/yijun9588/article/details/87620251

版权

HTML5/CSS3 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

行间样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			行间样式：给单独的标签添加样式
		-->
	</head>
	<body>
		<div style="width: 100px;height: 100px;background-color:pink"></div>
	</body>
</html>

内部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			内部样式：针对当前html文件有效
		-->
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color:pink;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

外部样式表

index.css

div{
	width: 100px;
	height: 100px;
	background-color:yellow;
}

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			外部样式表：可应用于多个html文件
			<link href="style.css" rel="stylesheet"/>
		-->
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<div></div>
	</body>
</html>