在 HTML 中使用 CSS¶

CSS 负责页面的视觉表现。HTML 应保持语义清晰，再通过样式表设置颜色、字体、间距和布局，这样内容在样式加载失败时仍然可理解。

学习目标¶

多数站点优先使用外部样式表，便于缓存和复用：

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

.notice {
  padding: 1rem;
  border-inline-start: 0.25rem solid #1769aa;
  background: #eef7ff;
}

<p class="notice">维护期间请保存正在编辑的内容。</p>

类名宜描述内容角色或组件，如 notice、site-nav，而不是 blue-text、left-20px。

小型独立示例可以在 head 使用 style：

<style>
  body {
    max-width: 70ch;
    margin-inline: auto;
    padding: 1rem;
  }
</style>

style 属性只作用于单个元素，复用和覆盖都较困难，也会让严格内容安全策略更复杂。生产页面通常避免大量行内样式，但邮件模板等受限环境可能有具体需求。

优先使用 Flexbox、Grid、逻辑属性和媒体查询，不使用表格排版。以相对单位和内容驱动布局，同时检查窄屏、放大文本、高对比度及 prefers-reduced-motion 等用户偏好。

不要移除键盘焦点轮廓，除非提供同等清楚的替代样式。颜色对比应足够，状态不能只靠颜色表达。

不要把不可信字符串直接插入 style 属性或样式表。CSS 能加载外部资源、覆盖界面并形成欺骗性布局；应限制可配置的属性和值，并通过内容安全策略控制允许的样式来源。