HTML 5入门 (6)——style元素和HTML样式基础

最新推荐文章于 2025-07-20 09:08:47 发布

原创最新推荐文章于 2025-07-20 09:08:47 发布 · 871 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS样式的三种引入方式：外部样式表、内部样式表和内联样式表，并通过实例展示了如何在HTML中应用这些样式。了解这些基础知识对于前端开发者来说至关重要。

style元素和HTML样式基础

引入样式的三种方式
（1）外部样式表，通过 link 元素引入外部样式表；

<link rel="stylesheet" type="text/css" href="">
<!--type表示的是类型的是css类型，该元素放置在head标签内-->

（2）内部样式表；

<style="text/css"></style>

（3）内联样式表；

<p style="color:red"></p>

样例如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Style</title>
	<style type="text/css">
		p{color: pink}
		h5{color: blue}
	</style>
</head>
<body>
	<p>样式基础</p>
	<p>样式基础</p>
	<h5>样式基础</h5>
	<h5>样式基础</h5>
</body>
</html>