添加全站样式

现在你已经有了一个带样式的“关于”页面，是时候为网站的其余部分添加一些全局样式了！

准备好去…

全局应用样式

添加全局样式表

你已经看到 Astro 的 <style> 标签是默认局部化的，这意味着它只影响其所在文件中的元素。

在 Astro 中有几种方法可以**全局**定义样式，但在本教程中，你将创建一个 global.css 文件并将其导入到每个页面中。这种样式表和 <style> 标签的组合使你能够控制一些全站范围的样式，并在需要的地方精确应用一些特定样式。

在 src/styles/global.css 位置创建一个新文件（你需要先创建一个 styles 文件夹）。

将以下代码复制到你的新文件 global.css 中

html {
  background-color: #f1f5f9;
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: 100%;
  max-width: 80ch;
  padding: 1rem;
  line-height: 1.5;
}

* {
  box-sizing: border-box;
}

h1 {
  margin: 1rem 0;
  font-size: 2.5rem;
}

在 about.astro 中，将以下导入语句添加到你的 frontmatter 中

---
import '../styles/global.css';

const pageTitle = "About Me";

const identity = {
  firstName: "Sarah",
  country: "Canada",
  occupation: "Technical Writer",
  hobbies: ["photography", "birdwatching", "baseball"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

const happy = true;
const finished = false;
const goal = 3;

const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

检查你的“关于”页面的浏览器预览，你现在应该能看到新的样式已经应用！

亲自动手 - 导入你的全局样式表

将必要的代码行添加到项目中的每个 .astro 文件中，以将你的全局样式应用到网站的每个页面。

✅ 给我看代码！✅

将以下导入语句添加到另外两个页面文件中：src/pages/index.astro 和 src/pages/blog.astro

---
import '../styles/global.css';
---

通过向页面模板静态或动态地添加 HTML 元素，对你的“关于”页面的内容进行任何你想要的更改或添加。在你的 frontmatter 脚本中编写任何额外的 JavaScript，以提供在 HTML 中使用的值。当你对这个页面感到满意时，请将你的更改提交到 GitHub，然后再继续下一课。

分析模式

你的“关于”页面现在同时使用了导入的 global.css 文件*和*一个 <style> 标签进行样式设置。

两种样式方法的样式是否都已应用？

是的
是否存在任何冲突的样式？如果存在，应用了哪一个？

是的，<h1> 全局的大小为 2.5rem，但在 <style> 标签中局部的大小为 4rem。在“关于”页面上应用了局部的 4rem 规则。
描述 global.css 和 <style> 是如何协同工作的。

当冲突的样式同时在全局和页面的局部 <style> 标签中定义时，局部样式会覆盖任何全局样式。（但是，可能还有其他因素影响，所以请务必目视检查你的网站，以确保样式被正确应用！）
你将如何选择是在 global.css 文件中还是在 <style> 标签中声明样式？

如果你希望一个样式在全站范围内应用，你会选择使用 global.css 文件。然而，如果你希望样式只应用于单个 .astro 文件中的 HTML 内容，而不影响网站上的其他元素，你会选择使用 <style> 标签。

清单

我可以通过导入一个 .css 文件来添加全局 CSS 样式。

添加全站样式

添加全局样式表

亲自动手 - 导入你的全局样式表

分析模式

清单

相关资源