一、位置_行内样式
相关代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置_行内样式</title>
</head>
<body>
<!-- 行内样式：写在标签Style属性中，又称内联样式-->
<h1 style="color:#0c997f;font-size:60px;">欢迎来到尚硅谷学习</h1>
<h2 style="color:#0c997f;font-size:60px;">欢迎学习前端</h2>
</body>
</html>二、位置_内部样式
相关代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 内部样式：写在html页面的内部，将所有的CSS代码提取出来，单独放在<style>标签中-->
<title>位置_内部样式</title>
<style>
h1{
color:#0c997f;
font-size:60px;
}
h2{
color: #0c1399;
font-size:100px;
}
p{
color: #15a034;
font-size: 100px;
}
img{
width: 1240px;
}
</style>
</head>
<body>
<h1>欢迎来到尚硅谷学习</h1>
<h2>欢迎学习前端</h2>
<p>信阳农林学院欢迎你</p>
<p>信阳师范大学欢迎你</p>
<p>信阳学院欢迎你</p>
<p>信阳职业技术学院欢迎你</p>
<!-- <img src="../pictures/喜羊羊.jpg" alt="喜羊羊" width="960">-->
<img src="../pictures/喜羊羊.jpg" alt="喜羊羊">
</body>
</html>三、位置_外部样式
相关代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 外部样式：写在单独的.css文件中，随后在HTML文件中引入使用-->
<title>位置_内部样式</title>
<!-- <link>标签要写在<head>标签中-->
<!-- 外部样式优势：样式可以复用、结构清晰、可以触发浏览器的缓存机制，提高访问速度，实现结构与样式的完全分离-->
<link rel="stylesheet" href="position3.css">
</head>
<body>
<h1>欢迎来到尚硅谷学习</h1>
<h2>欢迎学习前端</h2>
<p>信阳农林学院欢迎你</p>
<p>信阳师范大学欢迎你</p>
<p>信阳学院欢迎你</p>
<p>信阳职业技术学院欢迎你</p>
<!-- <img src="../pictures/喜羊羊.jpg" alt="喜羊羊" width="960">-->
<img src="../pictures/喜羊羊.jpg" alt="喜羊羊">
</body>
</html>