CSS 之引用方式

最新推荐文章于 2024-10-06 22:51:55 发布

__Wwinky

最新推荐文章于 2024-10-06 22:51:55 发布

阅读量251

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Wwinky/article/details/118639400

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

CSS 的引用方式有三种：

内联式
嵌入式
外部式

嵌入式

在页面头部通过style标签定义，对当前页面中所有符合样式选择器的标签都起作用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			/* 嵌入式 */
			p{
				color:blue;
			}
		</style>
	</head>
	<body>
		<p>welcome to CSS!</p>
		<p>hello</p>
		<hr>
		<h2>world</h2>
		<hr>
		<div>嘿嘿</div>
		<div>哈哈</div>
	</body>
</html>

效果如下：
在这里插入图片描述

内联式

使用HTML标签的style属性定义，只对设置style属性的标签起作用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<p>welcome to CSS!</p>
		<p>欢迎来到CSS课堂!</p>
		<hr>
		/* 嵌入式 */
		<h2 style="color:red;">WEB前段工程师</h2>
		<h2>JAVA开发工程师</h2>
		<hr>
		<div>嘿嘿</div>
		<div>哈哈</div>
	</body>
</html>

效果如下：
在这里插入图片描述

外部式

使用单独的 CSS 文件定义，然后在页面中使用 link标签或 @import指令引入

使用 link标签链接外部样式文件

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

其中，type属性可以省略

@import 指令导入外部样式文件

<style>
	@import "CSS样式文件路径";
	@import url(CSS样式文件路径);
</style>

假设存在一个hello.css文件，将其引用到html文件中：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<!-- link链接外部样式文件 -->
		<!-- <link rel="stylesheet" type="text/css" href="style/hello.css"> -->
		<!-- 3.import导入外部样式文件 -->
		<style>
			/* @import "style/hello.css" */
			@import url(style/hello.css);
		</style>
	</head>
	<body>
		<p>welcome to CSS!</p>
		<p>欢迎来到CSS课堂!</p>
		<hr>
		<h2 style="color:red;">WEB前段工程师</h2>
		<h2>JAVA开发工程师</h2>
		<hr>
		<div>嘿嘿</div>
		<div>哈哈</div>
	</body>
</html>