CSS 之引用方式

2021/7/10 23:06:57

编程Tag： 标签 css 样式 import style 引用方式 Hello

本文主要是介绍CSS 之引用方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

- 内联式
- 嵌入式
- 外部式

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>

这篇关于CSS 之引用方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

CSS 之 引用方式

文章目录

内联式

嵌入式

外部式

相关编程文章

CSS 之引用方式