HTML 样式

HTML 样式 (内联 CSS)

style 属性允许您直接将 CSS 样式应用于单个 HTML 元素。但是，通常首选使用外部样式表来设置网页样式。

为 HTML 元素设置样式

默认情况下，HTML 元素具有浏览器提供的基本样式（例如，黑色文本、白色背景、标题的标准字体大小）。

您可以使用 CSS（层叠样式表）覆盖这些默认设置。应用 CSS 的一种方法是直接在元素上使用 style 属性。

此示例使用 style 属性更改 <body> 元素的背景颜色：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline Style Example</title>
</head>
<body style="background-color: lightgrey;">

  <h1>This is a Heading</h1>
  <p>This is a paragraph on a light grey background.</p>

</body>
</html>

	注意：像 bgcolor、color、face 和 size 等较旧的 HTML 属性（通常与 <font> 或 <body> 一起使用）在 HTML5 中已被弃用。请改用 CSS 属性。

HTML style 属性

style 属性接受一个或多个 CSS 属性-值对。

语法：

style="property1: value1; property2: value2; ..."

property 是一个 CSS 属性名称（例如，color、font-size、background-color）。

value 是该属性对应的 CSS 值（例如，red、16px、#ffffff）。

多个声明之间用分号 (;) 分隔。

	**最佳实践：**虽然内联样式有效，但它们将呈现（表现）与结构混合在一起，使得 HTML 更难阅读和维护。通常最好在 <head> 中的 <style> 块中定义样式，或者理想情况下，在通过 <link> 元素链接的独立 .css 文件中定义样式。内联样式最好仅用于高度特定的覆盖或由 JavaScript 动态应用的样式。

常用于内联样式的 CSS 属性

以下是与 style 属性一起使用的常见 CSS 属性示例：

文本颜色 (color)

<h1 style="color: blue;">This heading is blue</h1>
<p style="color: green;">This paragraph is green.</p>

字体族 (font-family)

<h1 style="font-family: 'Arial', sans-serif;">Arial Heading</h1>
<p style="font-family: 'Courier New', monospace;">Courier New paragraph.</p>

文本大小 (font-size)

<h1 style="font-size: 3em;">Large Heading (3em)</h1>
<p style="font-size: 14px;">Paragraph with 14px font size.</p>
<p style="font-size: 120%;">Paragraph with 120% font size (relative to parent).</p>

文本对齐 (text-align)

<h1 style="text-align: center;">Centered Heading</h1>
<p style="text-align: right;">Right-aligned paragraph.</p>

背景颜色 (background-color)

<div style="background-color: yellow; padding: 10px;">
  This div has a yellow background.
</div>

本章小结

• 使用 style 属性直接将 CSS 样式应用于 HTML 元素（内联样式）。
• 语法是 style="property: value;"。
• 使用 background-color 设置背景颜色。
• 使用 color 设置文本颜色。
• 使用 font-family 设置字体族。
• 使用 font-size 设置文本大小。
• 使用 text-align 设置文本水平对齐方式。
• 优先使用外部 CSS 文件或 <style> 块而非内联样式，以获得更好的可维护性和关注点分离。