本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、分析+代码
CSS样式的三种应用方法：内部引用（嵌入式）、外部引用（链接式）和内联引用（行内式）。每种方法均通过示例代码详细说明，帮助读者理解并掌握HTML与CSS的基本应用。
1、内部引用（嵌入式）
通过style标签在HTML头部定义样式，内部引用方便管理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width",initial-scale="1.0"/>
<title>css三种引用方式-内部引用</title>
<style type="text/css">
p{
color: blue;
/*前面空，当前字号大小的两倍*/
text-indent: 2em;
}
</style>
</head>
<body>
<p>希望疫情早点过去</p>
</body>
</html>
2、外部引用（链接式）
利用link标签链接外部CSS文件，.外部引用保持页面结构清晰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width",initial-scale="1.0"/>
<title>css三种引用方式-外部引用</title>
<link rel="stylesheet" type="text/css" href="../css/cs1-1.css"/>
</head>
<body>
<p>希望疫情早点过去2</p>
<!-- 链接式link 放在head -->
<!-- 冲突的情况才有优先级 行内式最高 就近原则 -->
</body>
</html>
3、内联引用（行内式）
直接在HTML元素中定义CSS样式，内联引用适用于特定样式需求，冲突的情况才有优先级， 行内式最高， 就近原则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width",initial-scale="1.0"/>
<title>css三种引用方式-行内式</title>
</head>
<body>
<!-- 行内式 style属性 -->
<p style="color:red">希望疫情早点过去</p>
<!-- 冲突的情况才有优先级 行内式最高 就近原则 -->
</body>
</html>
总结
以上就是今天要讲的内容，本文简单记录了 HTML中应用CSS样式的三种常见方法，仅作为一份简单的笔记使用，大家根据注释理解
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
