应用全局样式

现在你已经给关于页面添加了样式，让我们为网站的其余页面添加一些全局样式吧！

你已经看到 Astro 的 <style> 标签默认是有作用域的，意味着它只能影响到当前文件中的元素。

有几种方法可以在 Astro 中定义全局样式，但在本教程中，你将创建并引入global.css文件到你的所有页面。样式文件和<style>标签的组合使你可以控制全局的样式，并可以将某些特定样式准确地应用到你想要的位置。

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

2. 把下面代码复制到你新创建的文件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;
   }

3. 将下面的import语句添加到about.astro文件的frontmatter中：

   ---
   import '../styles/global.css';
   
   const pageTitle = "关于我";
   
   const identity = {
     firstName: "莎拉",
     country: "加拿大",
     occupation: "技术撰稿人",
     hobbies: ["摄影", "观鸟", "棒球"],
   };
   
   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";
   ---

4. 检查你的浏览器中的关于页面，现在你应该可以看到新样式已经被应用了！

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

使用静态或动态的HTML元素给你的关于页面添加或改变任何你想要的内容。在页面中的frontmatter里写一些JavaScript代码来给你的HTML提供可以使用的值。当你对此页面感到满意时，请在继续下一课之前将你的更改提交到 GitHub。

• Astro 和 JSX 间的差异比较
• Astro <style> 标签
• Astro 里的 CSS 变量