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

CSS应用技巧详解

最新推荐文章于 2024-07-09 15:15:25 发布

原创最新推荐文章于 2024-07-09 15:15:25 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#链接式和导入式的区别 #css样式的使用

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文深入讲解CSS的三种使用方式：内联样式、内部样式及外部样式。探讨了它们的优缺点，包括复用性、加载时机及兼容性，并对比了link与@import的区别。

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动态修改；