CSS样式的引用方式

最新推荐文章于 2024-07-09 19:08:21 发布

百香果果ccc

最新推荐文章于 2024-07-09 19:08:21 发布

阅读量784

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/wytccc/article/details/122909448

版权

CSS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了CSS样式的三种应用方式：行内样式、内部样式和外部样式。行内样式直接在HTML标签中定义，内部样式通过<head>中的<style>标签实现，外部样式则通过<link>标签引用单独的CSS文件。内部和外部样式相比行内样式，更有利于代码复用和结构与样式的分离。外部样式文件可以提高网页加载效率，但@import方式在页面加载完成后才执行，可能影响性能。

摘要由CSDN通过智能技术生成

内联（行内、行间）样式
利用标签中的style属性来实现

<div style='width: 100px; height:100px; background-color: red;'>这是一个块</div>

内部样式
利用style标签来实现

<html>
	<head>
		省略了一些初始代码...
		<title>网页标题</title>
		<style>
			div {
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>这是一个块</div>
	</body>
</html>

优点：相比于行内样式，内部样式的代码可以复用，便于结构和样式分开处理。

外部样式

假如在当前html页面的同级创建了一个名为common.css的文件，代码如下：
div {
	width: 100px;
	height: 100px;
	background-color: red;
}

link标签
在HTML中通过link标签引入一个单独的CSS文件（后缀：.css）
```
<html>
	<head>
		省略了一些初始代码...
		<meta charset='UTF-8'></meta>
		<link rel='stylesheet' href='./common.css'>
		<title>网页标题</title>
	</head>
	<body>
		<div>这是一个块</div>	
	</body>
</html>
```
说明：
- <link>标签：用来引入外部资源的标签
- rel属性：声明引入外部资源的类型，stylesheet表示引入的类型是样式表
- href属性：引入资源的地址

@import（不建议使用）

<html>
	<head>
		<style>
			省略了一些代码...
			<title>网页标题</title>
			<style>
				@import url('./common.css');
			</style>
		</style>
	</head>
	<body></body>
</html>

缺点：@import是在页面加载完之后才执行的