CSS教程

CSS 之 引用方式

本文主要是介绍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 之 引用方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航