CSS的使用方式,css使用方式链接式和导入式的区别

最新推荐文章于 2024-04-22 01:47:20 发布

Alan_red

最新推荐文章于 2024-04-22 01:47:20 发布

阅读量1.3k

点赞数 1

分类专栏： CSS 文章标签：链接式和导入式的区别 css样式的使用

本文链接：https://blog.csdn.net/zhanglei0923/article/details/102848614

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS的使用方式

1、内联样式

直接写在标签中（不能复用）

<label style="width: 200;height: 100;background-color: red;">大家好我是内联样式</label>

2、内部样式

写在head标签中，可同时设置可复用，没有共同作用，若有则使用最近的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background-color: red;
				border: 2px solid blue;
				padding: 10px;
				margin-bottom: 10px ;
				float: left;
			}
			#box2{
				width: 200px;
				height: 200px;
				background-color: cadetblue;
				margin-top: 15px;
			/*以哪个大为标准*/
			float: left;
			}
		</style>
	</head>
	<body>
		<div id="box">hhh </div>
		<div id="box2">hhh </div>
	</body>
</html>

3、外部样式：css的规则放在单独的css文件中，需要引用才能够起作用

3.1链接式

引用的是一个外部样式表类型：text/css 引用的css文件放的目录

3.2导入式

@import url("css/huawei_top.css");

</style>

链接式和导入式的区别

1.link所有的浏览器都支持，@import部分版本低的IE不支持

2.@import是等HTML加载完成后加载，link是执行到该语句就加载

3.@import不支持JS动态修改；

Alan_red

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS的使用方式,css使用方式链接式和导入式的区别

CSS的使用方式1、内联样式直接写在标签中（不能复用）<label style="width: 200;height: 100;background-color: red;">大家好我是内联样式</label>2、内部样式写在head标签中，可同时设置可复用，没有共同作用，若有则使用最近的<!DOCTYPE html><html...
复制链接

扫一扫