html内联样式（表），外部样式表

最新推荐文章于 2025-03-26 11:24:22 发布

原创最新推荐文章于 2025-03-26 11:24:22 发布 · 8.4k 阅读

20 ·

CC 4.0 BY-SA版权

web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了三种CSS样式表的应用方法：内联样式、内部样式表及外部样式表。内联样式直接在HTML标签中定义，适用于单个元素的快速样式调整；内部样式表在HTML文档头部统一定义，便于对多个元素进行样式管理；外部样式表则将样式单独保存于.css文件中，方便多个HTML文件复用，简化维护工作。

内联样式：直接在元素开始标签中定义style

<!DOCTYPE html>
<html>
	<body style="background-color:PowderBlue;">
		<h1>Look! Styles and colors</h1>

		<p style="font-family:verdana;color:red">This text is in Verdana and red</p>
		<p style="font-family:times;color:green">This text is in Times and green</p>
		<p style="font-size:30px">This text is 30 pixels high</p>
	</body>
</html>

在这里插入图片描述

内部样式表:在head标签中统一定义style，这样可以同时定义多个标签里面的相同属性。当和内联样式同时使用时优先使用内联样式，如下的第三个p的颜色显示为黑色。

<!DOCTYPE html>
<html>
	<head>
		<title>This is title</title>
		<style>
			body {
				background-color:PowderBlue;
			}
			p {
				color:red
			}
		</style>
	</head>
	<body>
		<h1>Look! Styles and colors</h1>
		<p style="font-family:verdana">This text is in Verdana and red</p>
		<p style="font-family:times">This text is in Times and green</p>
		<p style="font-size:30px；color:black">This text is 30 pixels high</p>
	</body>
</html>

在这里插入图片描述

外部样式表：将样式表提到css文件中，多个html文件可以同时引用此css样式。

CSS文件内容（文件名style.css）

body {
	background-color:PowderBlue;
}
p {
	color:red
}

html如何引用CSS

<!DOCTYPE html>
<html>
	<head>
		<title>This is title</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>Look! Styles and colors</h1>
		<p style="font-family:verdana">This text is in Verdana and red</p>
		<p style="font-family:times">This text is in Times and green</p>
		<p style="font-size:30px;color:black">This text is 30 pixels high</p>
	</body>
</html>