HTML 内嵌样式

HTML 定义内容，CSS 控制外观。在 HTML 中写入 CSS 有三种方式。

方式一：style 属性（行内样式）

将 CSS 直接写在元素的 style 属性中。这种方式最直接，但不推荐大量使用——样式和内容混在一起，维护困难。

html

<p style="color: blue; font-size: 18px;">这是一段蓝色大字。</p>
<div style="background: #f0f0f0; padding: 1rem; border: 1px solid #ccc;">
  这是一个带背景和内边距的容器。
</div>

style 属性内可以写多条 CSS 声明，用分号 ; 分隔。每条声明的格式是 属性: 值。

方式二：style 元素（文档级样式）

在 <head> 中放置 <style> 标签，对整个页面的元素生效。通过选择器指定目标元素。

html

<head>
  <style>
    h1 {
      color: #1e293b;
      font-size: 2rem;
    }
    p {
      line-height: 1.75;
      margin-bottom: 1rem;
    }
    .highlight {
      background: #eff6ff;
      padding: 0.5rem 1rem;
      border-left: 4px solid #2563eb;
    }
  </style>
</head>

这里 h1、p、.highlight 是选择器——它们选定要应用样式的元素。花括号 {} 内写具体的样式声明。

方式三：link 外部样式表

将 CSS 写在独立的 .css 文件中，通过 <link> 引入。这是推荐方式——样式和内容彻底分离，多个页面可以共享同一份样式。

html

<head>
  <link rel="stylesheet" href="styles.css">
</head>

css

/* styles.css */
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0;
}

常用 CSS 属性速览

以下是最常用的基础样式属性。完整的 CSS 参考见 CSS 教程。

颜色与背景

html

<p style="color: #2563eb;">蓝色文字</p>
<div style="background-color: #f8fafc;">浅灰背景</div>

color 设置文字颜色，background-color 设置背景色。颜色值可以是命名色（red、blue）、十六进制（#2563eb）、RGB（rgb(37, 99, 235)）。

字体

html

<p style="font-size: 20px; font-family: 'Georgia', serif;">衬线字体大字</p>
<p style="font-weight: bold;">粗体文字</p>

font-size — 字号（px、rem、em）
font-family — 字体族，可指定多个作为回退
font-weight — 字重（normal、bold、700 等）

文本对齐

html

<p style="text-align: center;">居中对齐</p>
<p style="text-align: justify;">两端对齐——文字在左右两端均匀分布。</p>

取值：left（左对齐，默认）、center（居中）、right（右对齐）、justify（两端对齐）。

边框

html

<div style="border: 2px solid #e2e8f0; border-radius: 8px;">
  2 像素宽、浅灰色实线边框，8px 圆角。
</div>

border 的简写格式为 宽度样式颜色。样式值：solid（实线）、dashed（虚线）、dotted（点线）。border-radius 控制圆角。

外边距与内边距

html

<div style="margin: 20px; padding: 16px; background: #f1f5f9;">
  外边距 20px（与其他元素的距离）
  内边距 16px（内容与边框的距离）
</div>

margin — 元素外部的间距，推远与其他元素的距离
padding — 元素内部的间距，内容与边框之间的留白

两者都可以分别设置四个方向：

html

<p style="margin: 10px 20px 10px 20px;">上 右 下 左</p>

宽度与块级居中

html

<div style="max-width: 800px; margin-left: auto; margin-right: auto;">
  内容限定在 800px 宽度内，并在页面中水平居中。
</div>

max-width 限制最大宽度，margin-left: auto 和 margin-right: auto 让块级元素水平居中。

以上只是 CSS 最基础的属性演示。CSS 的完整内容——选择器体系、盒模型、Flexbox / Grid 布局、动画、响应式设计等——请参阅 CSS 教程。这里的 CSS 知识足够让你制作出视觉整洁的 HTML 页面，后续 CSS 教程会在此基础上全面展开。