学习

行内样式

2026-02-23/0/ 编辑

行内样式

什么是行内样式

行内样式是直接在 HTML 标签的 style 属性中书写样式。

语法

<标签名 style="属性名1: 属性值1; 属性名2: 属性值2;">内容</标签名>

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>行内样式</title>
</head>
<body>
  <h1 style="width: auto; font-style: normal">h1</h1>
  <p style="color: red; font-size: 16px;">红色文字</p>
  <div style="background-color: blue; width: 100px; height: 100px;"></div>
</body>
</html>

语法说明

1. 使用 `style` 属性

<h1 style="color: red;">标题</h1>

2. 多个属性用分号分隔

<div style="width: 100px; height: 100px; background-color: blue;"></div>

3. 属性名和值用冒号分隔

<p style="color: red; font-size: 16px;"></p>

优先级

行内样式的优先级最高,可以覆盖内嵌样式和外链样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>优先级示例</title>
  <link rel="stylesheet" href="./css/index.css" />
  <style>
    div {
      color: aqua;
      font-size: medium;
    }
  </style>
</head>
<body>
  <!-- 行内样式优先级最高,显示红色 -->
  <div style="color: rgb(255, 0, 34)">div标签</div>
  <!-- 内嵌样式和外链就近原则,显示 aqua -->
  <div>我是啥颜色</div>
</body>
</html>

三种样式对比

方式	语法	优先级	推荐程度
行内样式	`style="..."`	最高	⭐ (不推荐)
内嵌样式	`<style>...</style>`	中	⭐⭐ (单页面可用)
外链样式	`<link href="...">`	低	⭐⭐⭐ (推荐)

优点

1. 优先级最高

可以覆盖其他样式的设置。

<div style="color: red;">红色文字</div>

2. 适用于动态样式

适合 JavaScript 动态设置样式。

element.style.color = 'red';

3. 快速测试

方便快速测试样式效果。

缺点

1. 样式和内容混合

不符合结构和样式分离的原则。

<!-- 不好的做法 -->
<h1 style="color: red; font-size: 24px; font-weight: bold; margin: 10px;">标题</h1>

2. 代码重复

相同样式需要重复书写。

<div style="color: red;">文字1</div>
<div style="color: red;">文字2</div>
<div style="color: red;">文字3</div>

3. 难以维护

修改样式需要逐个修改。

4. 不能使用伪类和伪元素

<!-- 错误: 行内样式不能使用伪类 -->
<a style=":hover { color: red; }">链接</a>

使用场景

场景1: JavaScript 动态设置样式

// 获取元素
const box = document.querySelector('.box');

// 动态设置样式
box.style.backgroundColor = 'red';
box.style.width = '200px';

场景2: 邮件模板

部分邮件客户端不支持外部 CSS,需要使用行内样式。

<table>
  <tr>
    <td style="padding: 10px; background-color: #f0f0f0;">
      内容
    </td>
  </tr>
</table>

场景3: 临时修改

快速测试样式效果。

<div style="margin-top: 20px;">测试</div>

场景4: 动态内容

根据数据动态生成样式。

const color = data.priority === 'high' ? 'red' : 'green';
const element = `<div style="color: ${color};">${data.text}</div>`;

最佳实践

1. 避免大量使用

<!-- 不推荐 -->
<div style="width: 200px; height: 100px; padding: 10px; margin: 5px; background-color: #f0f0f0; border: 1px solid #ddd;">内容</div>

<!-- 推荐 -->
<div class="card">内容</div>

/* style.css */
.card {
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
}

2. 优先使用类选择器

<!-- 不推荐 -->
<div style="color: red;">红色文字</div>

<!-- 推荐 -->
<div class="text-red">红色文字</div>

3. 动态样式考虑使用类切换

// 不推荐
element.style.display = 'none';

// 推荐
element.classList.add('hidden');

.hidden {
  display: none;
}

注意事项

1. 不能使用 CSS 伪类

<!-- 错误 -->
<a style=":hover { color: red; }">链接</a>

<!-- 正确 -->
<style>
  a:hover {
    color: red;
  }
</style>
<a href="#">链接</a>

2. 不能使用 CSS 伪元素

<!-- 错误 -->
<div style="::before { content: '前置内容'; }">内容</div>

3. 不能使用 CSS 变量

<!-- 错误 -->
<div style="--color: red; color: var(--color);">内容</div>

4. 引号问题

<!-- 错误: 属性值中的引号会冲突 -->
<div style="content: "hello";">内容</div>

<!-- 正确: 使用单引号或转义 -->
<div style="content: 'hello';">内容</div>
<div style="content: &quot;hello&quot;;">内容</div>