CSS 3种引入方式

最新推荐文章于 2024-09-24 15:55:35 发布

凤凤564

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量414

点赞数 10

分类专栏： java css 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_64253215/article/details/134783169

版权

java 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

本文介绍了CSS的三种引入方式：内部样式、行内样式和外部样式。内容包括每种方式的定义、使用示例及优先级规则。强调了优先级的‘就近原则’，即样式与待渲染内容的距离决定了其生效顺序。

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

静态页面

html+css

html 网页内容

css 对网页内容美化

css?

依附于html标签，美化网页。

css位置

内部样式引入行内样式引入外部样式引入

内部样式引入：

在<head></head>头部标签中加入

<style>

在其中的<style>标签里加入css样式代码

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部引入 -->
		<style type="text/css">
			h1{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>内部</h1>
	</body>
</html>

行内样式引入：

在每个需要美化的标签里加入 style=" " 在引号里加入css样式代码

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	
	</head>
	<body>
		<!-- 行内引入 -->
		<h2 style="color:hotpink">行内</h2>
	</body>
</html>

外部样式引入：

在外部单独建立一个css文件

文件里直接写css样式代码

例如：

Meihua.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部引入 -->
		<!-- href：css文件路径 -->
		<!-- rel="stylesheet" 指定关联的文档是一个css文件 -->
		<link href="css/new_file1.css" rel="stylesheet"/>
	</head>
	<body>
		<h3>外部</h3>
	</body>
</html>



new_file1.css

h3{
	color: blue;
}

总结

1.优先级

行内》内部、外部

内部和外部优先级采用【就近原则】

注意！就近原则不是代码的先后顺序而是距离body需要渲染的内容标签的距离，看例子！

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部引入 -->
		<style type="text/css">
			h1{
				color: red;
			}
		</style>
		
		<!-- 外部引入 -->
		<!-- href：css文件路径 -->
		<!-- rel="stylesheet" 指定关联的文档是一个css文件 -->
		<link href="css/new_file1.css" rel="stylesheet"/>
	</head>
	<body>
		<h1>内部</h1>
		
		<!-- 行内引入 -->
		<h1 style="color:hotpink">行内</h1>
		
		<h1>外部</h1>
	</body>
</html>


css文件new-file1.css

h1{
	color: blue;
}

可见外部样式距离body内容更近，因此执行外部样式蓝色字体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 外部引入 -->
		<!-- href：css文件路径 -->
		<!-- rel="stylesheet" 指定关联的文档是一个css文件 -->
		<link href="css/new_file1.css" rel="stylesheet"/>
		
		<!-- 内部引入 -->
		<style type="text/css">
			h1{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>内部</h1>
		
		<!-- 行内引入 -->
		<h1 style="color:hotpink">行内</h1>
		
		<h1>外部</h1>
	</body>
</html>


css文件new-file1.css

h1{
	color: blue;
}