在网页开发中，CSS负责控制页面的外观表现，而CSS代码写在哪里、怎么引入页面，直接影响着代码的可维护性和页面加载性能。CSS样式表常见的引入方式有三种：行内样式、内嵌样式（也叫内部样式表）和外部样式表。很多初学者容易混淆它们的写法和优先级关系，导致出现样式覆盖混乱、修改困难等问题。下面我们就来逐一分析这三种引入方式的具体用法和优缺点。
一、行内样式：直接写在标签的style属性中
行内样式是指直接在HTML标签的style属性中书写CSS代码，样式规则只对当前这一个元素生效。它的写法如下：
<p style="color: red; font-size: 18px;">这是一段红色文字</p> <div style="width: 200px; height: 100px; background-color: #eee;">一个灰色盒子</div>
行内样式的优点是优先级最高（除了!important声明），写起来直观，所见即所得，调试单个元素时非常方便。但它也有明显的缺点：样式代码和HTML结构混杂在一起，无法复用，同一个样式需要在多个元素上重复书写，后期维护成本极高。比如全站有一百个按钮，如果想统一改颜色，使用行内样式就得逐个修改一百个地方的代码，非常容易遗漏。
因此在实际项目中，行内样式一般只用于临时调试、测试样式效果，或者某些必须通过JavaScript动态设置样式的特殊场景，不应该作为页面样式的主要组织方式。
二、内嵌样式：写在style标签中
内嵌样式是指在HTML文档的<head>部分使用<style>标签包裹CSS代码，样式对当前整个页面生效。写法示例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内嵌样式示例</title>
<style>
body {
font-family: "Microsoft YaHei", sans-serif;
}
.container {
width: 960px;
margin: 0 auto;
}
.title {
color: #333;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">页面标题</h1>
</div>
</body>
</html>内嵌样式解决了行内样式无法集中管理的问题，样式代码集中在<style>标签中，通过选择器可以控制页面上的多个元素，实现了结构与样式的初步分离。对于一个独立的单页面来说，这种方式的加载速度也不错，因为浏览器不需要额外发起HTTP请求去获取样式文件。
不过内嵌样式的缺点也很突出：CSS代码仍然写在HTML文件内部，当网站有多个页面且需要统一样式时，每个页面都要复制一份相同的样式代码，无法实现跨页面复用。一旦修改公共样式，就要改动所有相关页面，工作量巨大且容易出错。因此内嵌样式适合单页面应用、活动页或者样式量较少的页面，而不适合多页面的完整网站。
三、外部样式表：通过link标签引入独立的CSS文件
外部样式表是把CSS代码写在一个独立的.css文件中，然后在HTML页面通过<link>标签引入，这是实际项目中最推荐的方式。具体写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- 引入外部CSS文件 -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box">内容区域</div>
</body>
</html>对应的style.css文件内容：
.box {
width: 300px;
height: 200px;
background-color: #4a90d9;
color: #fff;
padding: 20px;
box-sizing: border-box;
}外部样式表的优势非常明显：第一，实现了HTML结构与CSS样式的完全分离，代码结构清晰，便于团队分工协作；第二，一个CSS文件可以被多个页面同时引用，修改一处即可全站生效，维护效率大大提高；第三，CSS文件会被浏览器缓存，用户第二次访问网站时无需重新下载样式文件，减少了网络流量并加快了页面渲染速度。
除了link标签，还可以通过@import指令在CSS文件中引入其他CSS文件，例如在样式文件顶部写@import url("reset.css");。但要注意，@import是在页面加载完成后才去请求资源，加载时机比link标签晚，可能造成页面闪烁，所以官方更推荐使用link方式引入样式表。
三种方式的优先级与选择建议
当三种引入方式同时作用于同一个元素时，优先级遵循这样的规则：行内样式优先级最高，其次是内嵌样式和外部样式表，这两者谁的优先级高取决于它们在HTML中出现的顺序，写在后面的会覆盖前面相同权重的样式规则。另外，任何声明加上!important后都会获得最高优先级，但滥用!important会让样式难以调试，不建议常用。
从优先级角度做一个简单测试就能理解：
<head>
<style>
p { color: blue; }
</style>
<link rel="stylesheet" href="style.css">
<!-- style.css 中写 p { color: green; } -->
</head>
<body>
<p style="color: red;">最终显示红色，行内样式优先级最高</p>
</body>上面的例子中，由于link标签写在style标签之后，如果不考虑行内样式，最终生效的应该是绿色而不是蓝色。
综合来看，三种方式的选择可以参考以下原则：正式项目一律使用外部样式表作为主要方式，保证代码可维护性和浏览器缓存优势；内嵌样式用于单页面或需要快速交付的临时页面；行内样式只用于调试或JavaScript动态设置样式的场景。掌握这三种引入方式的特点和优先级规则，是写出规范CSS代码的第一步。