HTML如何引入CSS样式？

<style>
  .article-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
  }
  .code-block {
    background: #f8f9fa;
    border-left: 4px solid #4CAF50;
    padding: 15px;
    margin: 20px 0;
    overflow-x: auto;
    border-radius: 0 4px 4px 0;
  }
  h3 {
    color: #2c3e50;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 30px;
  }
  .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
  }
  .comparison-table th {
    background: #4CAF50;
    color: white;
    text-align: left;
    padding: 12px;
  }
  .comparison-table td {
    border: 1px solid #ddd;
    padding: 12px;
  }
  .comparison-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .best-practice {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
  }
  .reference-note {
    font-size: 0.9em;
    color: #666;
    margin-top: 40px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
</style>
<div class="article-container">
  <p>在网页开发中，HTML负责内容结构，而CSS控制视觉呈现，将样式引入HTML是构建现代网页的核心技术，直接影响用户体验和网站性能，以下是三种主流引入方式及其专业实践：</p>
  <h3>一、内联样式（行内样式）</h3>
  <p>直接在HTML元素的<code>style</code>属性中定义CSS规则：</p>
  <div class="code-block">
    <pre>&lt;h1 style="color: #2c3e50; font-size: 2.5rem; margin-bottom: 20px;"&gt;标题文本&lt;/h1&gt;
&lt;p style="line-height: 1.6; text-align: justify;"&gt;段落内容...&lt;/p&gt;</pre>
  </div>
  <p><strong>适用场景</strong>：快速测试、动态样式修改（通过JavaScript）或个别元素特殊样式。</p>
  <h3>二、内部样式表（文档头部嵌入）</h3>
  <p>在<code>&lt;head&gt;</code>标签内使用<code>&lt;style&gt;</code>标签集中定义样式：</p>
  <div class="code-block">
    <pre>&lt;head&gt;
  &lt;style&gt;
    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
  &lt;/style&gt;
&lt;/head&gt;</pre>
  </div>
  <p><strong>适用场景</strong>：单页面项目、小型网站或需要减少HTTP请求的场景。</p>
  <h3>三、外部样式表（最佳实践）</h3>
  <p>通过<code>&lt;link&gt;</code>标签引入独立CSS文件（推荐方式）：</p>
  <div class="code-block">
    <pre>&lt;head&gt;
  &lt;link rel="stylesheet" href="styles/main.css"&gt;
&lt;/head&gt;</pre>
  </div>
  <p>在<code>main.css</code>文件中：</p>
  <div class="code-block">
    <pre>/* 全局样式 */
body {
  font-size: 16px;
  color: #333;
}
/* 组件样式 */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}</pre>
  </div>
  <p><strong>核心优势</strong>：</p>
  <ul>
    <li>样式与内容分离，提高可维护性</li>
    <li>浏览器缓存优化，加速页面加载</li>
    <li>支持模块化开发和团队协作</li>
  </ul>
  <h3>四、其他引入方式（谨慎使用）</h3>
  <p><strong>@import方法</strong>：在CSS文件中导入其他样式表</p>
  <div class="code-block">
    <pre>/* 在main.css中 */
@import url('reset.css');</pre>
  </div>
  <p><strong>注意</strong>：此方法会阻塞渲染，影响性能，建议用<code>&lt;link&gt;</code>替代。</p>
  <h3>五、引入方式对比与选择指南</h3>
  <table class="comparison-table">
    <thead>
      <tr>
        <th>方式</th>
        <th>加载性能</th>
        <th>可维护性</th>
        <th>适用场景</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>内联样式</strong></td>
        <td>★☆☆☆☆ (阻塞渲染)</td>
        <td>★☆☆☆☆</td>
        <td>临时样式、动态样式</td>
      </tr>
      <tr>
        <td><strong>内部样式表</strong></td>
        <td>★★★☆☆</td>
        <td>★★☆☆☆</td>
        <td>单页应用、小型项目</td>
      </tr>
      <tr>
        <td><strong>外部样式表</strong></td>
        <td>★★★★★ (可缓存)</td>
        <td>★★★★★</td>
        <td>中大型项目、生产环境</td>
      </tr>
    </tbody>
  </table>
  <div class="best-practice">
    <h3>专业建议与最佳实践</h3>
    <ol>
      <li><strong>生产环境必用外部样式表</strong>：通过<code>&lt;link&gt;</code>引入，启用CDN和文件压缩</li>
      <li><strong>样式加载优化</strong>：将<code>&lt;link&gt;</code>置于<code>&lt;head&gt;</code>中确保渲染速度</li>
      <li><strong>模块化开发</strong>：按功能拆分CSS文件（如<code>layout.css</code>、<code>components.css</code>）</li>
      <li><strong>避免@import</strong>：在HTML中直接使用多个<code>&lt;link&gt;</code>替代CSS内导入</li>
      <li><strong>优先级管理</strong>：内联样式优先级最高，外部样式表最易维护</li>
    </ol>
  </div>
  <p>正确引入样式表对SEO至关重要：外部CSS可降低HTML文件体积，提高加载速度（百度搜索排序关键指标），同时保持代码规范有利于搜索引擎理解页面结构，提升专业权威性（E-A-T原则）。</p>
  <div class="reference-note">
    <p>参考来源：MDN Web文档 - CSS引入方式、Google Web Fundamentals - 渲染性能优化、W3C CSS规范，内容经前端工程实践验证，符合现代Web标准。</p>
  </div>
</div>