html 三种导入CSS样式的方式

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 三种导入CSS样式的方式相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS样式导入方式</title>
		
		<!----第1种，直接写在head标签中----->
		<style type="text/css">
			p{
				color: red;
				font-size: 15px	
			}
		</style>
		
		<!-----第2种，调用外部CSS文件，href属性值指定要包含的CSS文件的相对或绝对路径，本例中使用相对路径，
		即style.css文件和当前html文档文件在同一个目录中-------->
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
		<p>HTML5 Red</p>
		
		<!----第3种，直接写在标签内部，使用style属性来配置css样式，每条css语句用分号隔开-->
		<span style="color:blue; font-size:20px">HTML5 Blue</span>
		<br>
		<div>
			Hello <b>HTML5 Yellow</b>
		</div>
	</body>
</html>

以上是关于html 三种导入CSS样式的方式的主要内容，如果未能解决你的问题，请参考以下文章