PHP小码农

Appearance

style 内联样式 ​

style 全局属性允许直接在 HTML 元素上写入 CSS 样式规则。内联样式的优先级最高（除了 !important），会覆盖外部样式表和内部样式表中的同名规则。

前置知识

阅读本节前，建议先了解：id 与 class

基础概念 ​

什么是内联样式 ​

style 属性直接在元素上设置 CSS 属性，无需外部样式表或 <style> 标签。

html
<p style="color: red; font-size: 18px;">这是一段红色文字</p>

<div style="display: flex; gap: 1rem;">
  <span>项目 1</span>
  <span>项目 2</span>
</div>

内联样式的优先级 ​

CSS 的层叠规则（Cascade）中，内联样式的优先级非常高：

!important > 内联 style > ID 选择器 > Class 选择器 > 标签选择器
html
<style>
  .text { color: blue; }         /* 类选择器：权重 0-1-0 */
  #text { color: green; }        /* ID 选择器：权重 1-0-0 */
  p { color: black; }            /* 标签选择器：权重 0-0-1 */
</style>

<p class="text" id="text" style="color: red;">
  这段文字是红色（内联样式优先级最高）
</p>

语法与使用 ​

html
<!-- 单个属性 -->
<div style="margin: 0 auto;">

<!-- 多个属性（分号分隔） -->
<div style="padding: 1rem; background: #fff; border-radius: 8px;">

<!-- 属性值含引号 -->
<div style="font-family: 'Times New Roman', serif;">

详细说明 ​

style 属性的格式 ​

html
<!-- 格式：属性名: 属性值; 属性名: 属性值; -->
<div style="color: #333; font-size: 16px; line-height: 1.6;">

<!-- 注意：属性名使用 CSS 属性名，不是 HTML 属性名 -->
<div style="background-color: #fff;">  <!-- 正确 -->
<div style="bgcolor: #fff;">            <!-- 错误 -->

何时使用内联样式 ​

html
<!-- 1. 动态生成的样式（JavaScript 动态设置） -->
<div id="element" style="width: 0%;">
<script>
  // JS 动态设置样式
  element.style.width = '100%';
  element.style.transition = 'width 0.5s ease';
</script>

<!-- 2. 电子邮件模板（邮件客户端不支持外部 CSS） -->
<td style="padding: 10px; background: #f0f0f0;">
  <p style="font-size: 14px; color: #333;">内容</p>
</td>

<!-- 3. 一次性覆盖（临时调试或修复） -->
<div style="border: 1px solid red !important;">
  临时调试边框
</div>

何时不使用内联样式 ​

html
<!-- 1. 大量样式（应该用外部 CSS） -->
<!-- 不推荐 -->
<div style="
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
">

<!-- 2. 重复使用的样式（应该用 class） -->
<!-- 不推荐 -->
<div style="padding: 1rem; margin-bottom: 1rem;">内容1</div>
<div style="padding: 1rem; margin-bottom: 1rem;">内容2</div>
<div style="padding: 1rem; margin-bottom: 1rem;">内容3</div>

<!-- 推荐：使用 class -->
<style>
  .box { padding: 1rem; margin-bottom: 1rem; }
</style>
<div class="box">内容1</div>
<div class="box">内容2</div>
<div class="box">内容3</div>

实战示例 ​

内联样式 vs 外部样式对比 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>style 属性示例</title>
  <!-- 外部样式 -->
  <style>
    body { font-family: -apple-system, sans-serif; margin: 0; padding: 2rem; }

    /* class 样式（推荐方式） */
    .card {
      background: #fff; padding: 1.5rem;
      border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      margin-bottom: 1rem;
    }
    .card h3 { margin: 0 0 0.5rem; color: #1e293b; }
    .card p { margin: 0; color: #64748b; font-size: 0.9rem; }
  </style>
</head>
<body>
  <h1>样式优先级演示</h1>

  <!-- 推荐：使用 class -->
  <div class="card">
    <h3>推荐方式</h3>
    <p>使用 class 在外部样式表中定义样式，便于维护和复用。</p>
  </div>

  <!-- 不推荐：使用内联样式 -->
  <div style="background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 1rem;">
    <h3 style="margin: 0 0 0.5rem; color: #1e293b;">不推荐方式</h3>
    <p style="margin: 0; color: #64748b; font-size: 0.9rem;">使用内联样式，难以维护和复用。</p>
  </div>

  <!-- JavaScript 动态样式（合理使用） -->
  <button id="resize-btn" style="padding: 0.5rem 1rem; background: #3b82f6; color: #fff; border: none; border-radius: 6px; cursor: pointer;">
    调整大小
  </button>
  <div id="dynamic-box" class="card" style="width: 200px; height: 200px; transition: all 0.3s; background: #f0f9ff;">
    <p>动态调整大小的区域</p>
  </div>

  <script>
    const btn = document.getElementById('resize-btn');
    const box = document.getElementById('dynamic-box');
    let expanded = false;

    btn.addEventListener('click', () => {
      expanded = !expanded;
      box.style.width = expanded ? '400px' : '200px';
      box.style.height = expanded ? '300px' : '200px';
    });
  </script>
</body>
</html>

注意事项 ​

常见问题 ​

  1. 内联样式无法覆盖 !important：外部样式表的 !important 优先级高于内联样式
  2. 内联样式不支持伪类/伪元素：无法用 style 属性设置 :hover 等样式
  3. 内联样式不支持 @media 查询：无法用 style 属性实现响应式
  4. 维护困难：分散在各处的内联样式难以统一管理

最佳实践 ​

  1. 避免在生产环境中大量使用：内联样式应尽量少用
  2. 用 class 替代重复样式：任何出现两次以上的样式用 class
  3. JS 动态样式使用 style 属性：这是合理的使用场景
  4. 邮件模板可以例外：邮件客户端兼容性需要内联样式
  5. 临时调试可以接受：但不应提交到代码库

下一节

继续学习：title 提示文本

参考链接 ​