CSS有三种常见的样式表写法，分别是内联样式、内部样式表和外部样式表，三种写法适用于不同的开发场景，在优先级和代码组织方式上存在明显差异。
一、内联样式
内联样式是将CSS样式直接写在HTML元素的style属性中，仅对当前单个元素生效，优先级是三种写法中最高的。
这种写法的优点是针对性强，不需要额外定义选择器，缺点是样式无法复用，大量使用会导致HTML代码冗余，不利于后期维护，一般只用于临时调整单个元素的样式。
示例代码如下：
<!-- 内联样式示例 -->
<div style="color: red; font-size: 16px; padding: 10px;">
这是一段使用内联样式的文本
</div>
<p style="background-color: #f0f0f0;">这是内联样式的段落</p>
二、内部样式表
内部样式表是将CSS代码写在HTML文档的<style>标签内，通常放在<head>标签中，作用于当前整个HTML页面。
这种写法的优点是可以统一设置当前页面的所有元素样式，不需要重复书写，适合单个页面的样式开发，缺点是样式无法跨页面复用，多个页面需要相同样式时会产生重复代码。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
/* 内部样式表代码 */
.container {
width: 1200px;
margin: 0 auto;
}
.title {
color: #333;
font-size: 24px;
text-align: center;
}
.content {
line-height: 1.6;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">页面标题</h1>
<p class="content">页面内容区域</p>
</div>
</body>
</html>
三、外部样式表
外部样式表是将CSS代码单独写在一个.css后缀的文件中，然后通过HTML的<link>标签引入到页面中，可以被多个HTML页面复用。
这是实际开发中最推荐的写法，优点是样式和HTML结构分离，代码可维护性强，多个页面可以共用同一个样式文件，减少重复代码，也便于浏览器缓存样式文件提升页面加载速度。
首先创建独立的CSS文件，比如style.css：
/* style.css 外部样式表 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 60px;
background-color: #1890ff;
color: white;
line-height: 60px;
padding-left: 20px;
}
.main {
padding: 20px;
min-height: 500px;
}
.footer {
height: 40px;
background-color: #f5f5f5;
text-align: center;
line-height: 40px;
color: #999;
}
然后在HTML页面中引入该样式文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">网站头部</div>
<div class="main">网站主体内容</div>
<div class="footer">网站底部</div>
</body>
</html>
四、三种样式表的优先级规则
当同一个元素被多种样式表设置相同属性时，会按照优先级高低生效，优先级从高到低依次为：
- 内联样式：优先级最高，会覆盖其他两种写法的相同样式
- 内部样式表：优先级次之，会覆盖外部样式表的相同样式
- 外部样式表：优先级最低，当没有其他样式设置时生效
如果内部样式表和外部样式表的优先级相同，那么后引入的样式会覆盖先引入的样式。如果需要通过外部或内部样式表覆盖内联样式，可以给对应选择器添加!important声明，不过实际开发中不建议过度使用!important，避免样式优先级混乱。
五、三种写法的适用场景
| 样式表类型 | 适用场景 |
|---|---|
| 内联样式 | 临时调整单个元素样式，或者测试样式效果时使用 |
| 内部样式表 | 单个独立页面的样式开发，不需要跨页面复用样式时使用 |
| 外部样式表 | 多页面项目开发，需要复用样式，或者追求代码可维护性时使用 |