在html页面开发中，样式代码用于控制页面的视觉效果，比如文字颜色、元素布局、背景样式等，不同的样式引入方式适用场景不同，存放位置也有对应的规范要求。
一、html样式代码的三种使用方式
1. 内联样式
内联样式是直接将样式代码写在html元素的style属性中，只对当前元素生效，优先级最高。这种方式适合单个元素的临时样式调整，不适合批量使用。
示例代码如下：
<!-- 内联样式示例 -->
<div style="color: #ff0000; font-size: 16px; margin-top: 10px;">
这是一段红色文字
</div>
2. 内部样式表
内部样式表是将样式代码写在html文档的<head>标签内的<style>标签中，对整个当前页面的元素生效，适合单个页面的独立样式定义。
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>内部样式表示例</title>
<style>
/* 定义类样式 */
.text-red {
color: #ff0000;
}
/* 定义元素样式 */
p {
line-height: 1.5;
}
</style>
</head>
<body>
<p class="text-red">这段文字是红色的</p>
</body>
</html>
3. 外部样式表
外部样式表是将样式代码单独写在.css后缀的文件中，然后通过html的<link>标签引入，可以被多个页面共享，是最推荐的使用方式。
首先创建style.css文件，内容如下：
/* 外部样式表内容 */
.common-text {
color: #333333;
font-family: "微软雅黑";
}
.container {
width: 1200px;
margin: 0 auto;
}
然后在html中引入该样式文件：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>外部样式表示例</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<p class="common-text">这是通用样式的文字</p>
</div>
</body>
</html>
二、样式代码规范合理的存放位置
1. 优先选择外部样式表
如果是多页面项目或者样式代码较多的情况，一定要将样式代码放在外部.css文件中。这样多个页面可以共享同一个样式文件，减少代码冗余，同时浏览器会缓存css文件，提升后续页面的加载速度，也方便后续统一修改样式。
2. 单个页面独有样式用内部样式表
如果某个样式只属于当前页面，不会被其他页面使用，可以将样式代码放在当前页面的<head>标签内的<style>标签中，避免创建多余的css文件，减少请求次数。
3. 避免滥用内联样式
内联样式的优先级最高，会覆盖内部和外部样式表的同名样式，而且无法复用，大量使用会导致代码维护难度大幅提升。只有在需要临时覆盖某个元素的样式，或者动态生成样式时，才建议使用内联样式。
三、三种样式方式的对比
我们可以通过下表更直观地了解三种样式方式的区别：
| 样式方式 | 存放位置 | 作用范围 | 适用场景 |
|---|---|---|---|
| 内联样式 | 元素的style属性中 | 当前单个元素 | 单个元素临时样式调整、动态样式 |
| 内部样式表 | 页面head内的style标签中 | 当前整个页面 | 单个页面独有样式 |
| 外部样式表 | 独立的.css文件 | 所有引入该文件的页面 | 多页面共享样式、样式较多的项目 |
四、样式使用的注意事项
- 样式代码的语法要规范，属性名和属性值之间用冒号分隔，多个属性之间用分号分隔，最后一个属性后的分号可以省略但不建议省略。
- 引入外部样式表时，
link标签要放在<head>标签内，避免页面加载时出现样式闪烁的问题。 - 不要使用过于复杂的选择器，尽量保持样式选择器的简洁性，提升样式匹配的效率。
- 如果需要在JavaScript中动态修改样式，优先操作元素的
class属性，而不是直接修改style属性，这样更符合样式和逻辑分离的原则。