内部样式表(是样式与结构分离的一种表现,并未完全分离)
即在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>