CSS的引入方式

最新推荐文章于 2022-09-13 19:51:33 发布

阿黄Ahuang

最新推荐文章于 2022-09-13 19:51:33 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/FZUMRWANG/article/details/82761780

版权

CSS行间引入方式

CSS是

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<body>
		<!--
        	css出现的位置：行间、内部、外部
        	行间样式表：给单独的标签添加样式
        	语法：<div style="width:100px"></div>
        -->
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        <div style="width:100px;height:100px;background:red;">div1</div>
        	<!--上面就是行间样式表，比较直观-->
        <div>div2</div>
        
        
	</body>
</html>

CSS内部引入方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style>
			div{
				width:100px;
				height:100px;
				background:pink;
			}
		</style>
	</head>
	<body>
		<!--
			内部样式表：样式表写在了一个html文件里面
			语法：把样式写在一对<style></style>标签对之中，这个标签对是放在html页里的
			缺点：内部样式表的作用范围只存在当前的页面
		-->
		<div>good</div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

CSS外部引入方式

HTML文件：外部引入.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<link rel="stylesheet" href="index.css" />
	</head>
	<body>
		<!--
			外部样式：把样式写在一个单独的文件里，用到的时候用地址将其引进来就可以
			上面的link是为了引入css文件，也就是在行为里面引入样式
		-->
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

CSS文件：index.css

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

阿黄Ahuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫