css文件链接html的三种方式

时间:2021-05-02 20:26:49
<!--css文本的链接方式有三种:分别是内联定义、链入内部css、和链入外部css-->


<!--1.代码为:-->
<!--<html>
	<head>
		<title>内联定义</title>
	</head>
	<body>
		<p style="border:2px solid #000000">内联定义</p>
		<p style="color:red">内联定义</p>
		<p style="font-size:12px">内联定义</p>
	</body>
</html>-->




<!--2.代码为:-->


<!--<html>
	<head>
		<title>链入内部css</title>
		<style type="text/css">
			#myid
			{
				width:200px;
				height:300px;
				color:red;
			}
			.myclass
			{
				width:200px;
				height:300px;
				color:red;
			}
		</style>
	</head>
	<body>
		<p id="myid">链入内部css</p>
		<p class="myclass">链入内部css</p>
		
	</body>
</html>-->




<!--3.代码为:-->

<html>
	<head>
		<title>链入外部css</title>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>
	<body>
		<p id="p1">链入外部css</p>
		<p id="p2">链入外部css</p>
		<p class="p3">链入外部css</p>
	</body>
</html>

代码3的style.css是和你的html文件在同一个文件夹。

其代码为:

#p1
{
	border:2px;
	color:red;
}

#p2
{
	border:2px;
	color:blue;
}

.p3
{
	border:2px;
	color:red;
}

在css中

id前面是要加一个#

class前面要加一个.