引入外部css

内部样式表(是样式与结构分离的一种表现,并未完全分离)
即在body中设置所有的样式

<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
		p{
     
     
			color:red;
			font-size:40px;
		}
	</style>
	</head>

这里是在head中设置所有的p中的字体


引入外部文件
为什么要引入外部css文件
文本样式追求的是样式与文本分离,在文本标签里直接设置文本样式虽然方便,但这是样式(css)与结构(html)耦合,并不方便后期维护,所以我们提倡样式与结构分离,通过引入外部css文件来为结构设置样式

引入外部文件 (样式与结构完全分离)
引入语法

<head>
		<meta charset="utf-8"/>
		<title></title>
	<link rel="stylesheet" type="text/css" href="一.css"/>
	</head>

引入外部样式表的语法格式中 hrel和type中的输入内容是固定的
href中写的是要引入css文件的相对路径


题外话:路径问题
路径中
. . / 表示源文件所在目录的上一级目录,. . /. . /表示源文件所在目录的上上级目录,以此类推 即两个紧挨着的点再紧挨着/符号
选择下一级目录直接写下级目录名加/就行
比如 . . /1/2/3.html

<!dectype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style type="text/css">
		p{
     
     
			color:red;
			font-size:40px;
		}
	</style> <!-- 内部样式表 在head中设置所有的<p></p>中的字体 -->
	<link rel="stylesheet" type="text/css" href="一.css"/>
	<!-- 引入外部样式表的格式hrel跟type中的是固定的 
		href写的是要引入css文件的相对路径 -->
	</head>
	<body>
		<h1>试试</h1>
		<p></p>
		<p></p>
		<p>撞撞</p>
		<p style="color:red;font-size:40px;">奔向你</p>
		<!-- 也可在这里面直接设置(不推荐) -->
	</body>
	
</html>

猜你喜欢

转载自blog.csdn.net/qq_45821251/article/details/108778620