将内联样式优化成 CSS 样式 - 示例教程

将内联样式优化成 CSS 内容

由于您没有提供样式，请允许我提供一个示例。

原始样式：

<div style='background-color: #f2f2f2; padding: 10px; border: 1px solid #ccc;'>
  <h2 style='font-size: 24px; color: #333; margin-bottom: 10px;'>这是一个标题</h2>
  <p style='font-size: 16px; line-height: 1.5; color: #666;'>这是一段文本。</p>
  <button style='background-color: #007bff; color: #fff; padding: 8px 16px; border: none; border-radius: 4px;'>提交</button>
</div>

优化后的 CSS 样式：

.container {
  background-color: #f2f2f2;
  padding: 10px;
  border: 1px solid #ccc;
}
.container h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}
.container p {
  font-size: 16px;
  line-height: 1.5;
  color: #666;
}
.container button {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

HTML 代码更新：

<div class='container'>
  <h2>这是一个标题</h2>
  <p>这是一段文本。</p>
  <button>提交</button>
</div>