Astro 全局样式

什么时候需要全局样式

局部样式适合组件内部，但有些东西天然属于全站，比如：

字体、配色变量
重置浏览器默认样式
标题、正文的基础排版
第三方 UI 库的基础样式

这些用全局样式统一管理更合适。

组织全局样式

在布局里引入全局 CSS

最常见的做法是建一个 global.css，然后在布局组件（Astro 布局）中引入，由于布局被所有页面复用，全局样式自然覆盖全站。

/* src/styles/global.css */
:root {
  --brand: #7c3aed;
  --text: #1f2937;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--text);
  font-family: system-ui, sans-serif;
}

布局中引入：

---
// src/layouts/BaseLayout.astro
import '../styles/global.css';
const { title } = Astro.props; // 接收调用方传入的页面标题
---
<html lang="zh-CN">
  <head><title>{title}</title></head>
  <body><slot /></body>
</html>

用 :root 定义设计变量

把颜色、间距、字号定义成 CSS 变量，组件里随时取用，改主题只改一处。

:root {
  --space: 1rem;
  --radius: 8px;
}

组件局部样式也能使用：

<style>
  .box {
    padding: var(--space);
    border-radius: var(--radius);
  }
</style>

重置样式

不同浏览器对默认样式处理不同，建议加一段轻量重置。

* { margin: 0; padding: 0; box-sizing: border-box; } /* 清除默认外边距，统一盒模型 */
img { max-width: 100%; display: block; } /* 图片不溢出，按块级显示 */
a { color: inherit; text-decoration: none; } /* 链接颜色继承文字，去掉下划线 */

全局 vs 局部怎么选

一个简单判断标准：这段样式只服务一个组件吗？是就用局部；会影响多个页面甚至整个站点就用全局。

初期可以在布局里放全局基础排版，业务细节交给组件局部样式。

Astro 局部样式

Astro 布局