添加站点范围的样式

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

¥Now that you have a styled About page, it’s time to add some global styles for the rest of your site!

Get ready to…

全局应用样式

添加全局样式表

¥Add a global stylesheet

你已经看到 Astro <style> 标签默认具有作用域，这意味着它只影响其自己文件中的元素。

¥You have seen that the Astro <style> tag is scoped by default, meaning that it only affects the elements in its own file.

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

¥There are a few ways to define styles globally in Astro, but in this tutorial, you will create and import a global.css file into each of your pages. This combination of stylesheet and <style> tag gives you the ability to control some styles site-wide, and to apply some specific styles exactly where you want them.

Create a new file at the location src/styles/global.css (You’ll have to create a styles folder first.)

Copy the following code into your new file, 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;
}

In about.astro, add the following import statement to your 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";
---

Check the browser preview of your About page, and you should now see new styles applied!

自己尝试一下 - 导入你的全局样式表

¥Try it yourself - Import your global stylesheet

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

¥Add the necessary line of code to each .astro file in your project to apply your global styles to every page of your site.

✅ Show me the code! ✅

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

¥Add the following import statement to the two other page files: src/pages/index.astro and src/pages/blog.astro

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

通过静态或动态向页面模板添加 HTML 元素，对“关于”页面的内容进行任何所需的更改或添加。在 frontmatter 脚本中编写任何其他 JavaScript，以便为你提供要在 HTML 中使用的值。如果你对此页面感到满意，请将更改提交到 GitHub，然后再继续下一课。

¥Make any changes or additions you want to the content of your About page by adding HTML elements to the page template, either statically or dynamically. Write any additional JavaScript in your frontmatter script to provide you with values to use in your HTML. When you are happy with this page, commit your changes to GitHub before moving on to the next lesson.

分析模式

¥Analyze the Pattern

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

¥Your About page is now styled using both the imported global.css file and a <style> tag.

是否应用了两种样式方法中的样式？

Yes
是否存在任何冲突的样式？如果有，则应用哪些样式？

Yes, <h1> has a size of 2.5rem globally, but 4rem locally in the <style> tag. The local 4rem rule is applied on the About page.
描述 global.css 和 <style> 如何协同工作。

When conflicting styles are defined both globally and in a page’s local <style> tag, the local styles should overwrite any global styles. (But, there can be other factors involved, so always visually inspect your site to make sure your styles are properly applied!)
你如何选择是在 global.css 文件还是 <style> 标记中声明样式？

If you want a style to be applied site-wide, you would choose to use a global.css file. However, if you want styles to apply to only the HTML content in a single .astro file, and not affect other elements on your site, you would choose a <style> tag.

清单

¥Checklist

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

资源

¥Resources