CSS引入方式(内部引入、行内引入、外部引入)

最新推荐文章于 2024-03-16 20:35:21 发布

艾诺_Aynor

最新推荐文章于 2024-03-16 20:35:21 发布

阅读量1.1k

点赞数

分类专栏： Web 学习笔记文章标签： CSS CSS引入方式内部引入行内引入外部引入

本文链接：https://blog.youkuaiyun.com/qq_40922845/article/details/104556839

版权

学习笔记同时被 2 个专栏收录

70 篇文章

订阅专栏

Web

50 篇文章

订阅专栏

内部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部引入</title>
		<style type="text/css">
			div{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
	</body>
</html>

行内引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内引入</title>
		<style type="text/css">
			div{
				font-size: 30px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div style="font-size: 20px;color: pink;">
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
	</body>
</html>

外部引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部引入</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
	</head>
	<body>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
		<div>
			逗比是给小伙伴看的，成熟是给陌生人看的，成熟是给喜欢的人看的
		</div>
	</body>
</html>

外部引入需要写一个style的外部文件