Skip to content

Latest commit

 

History

History
150 lines (108 loc) · 4.64 KB

5.mdx

File metadata and controls

150 lines (108 loc) · 4.64 KB
type title description
tutorial
应用全局样式
教程：搭建你的 Astro 博客 - 创建一个全局样式表，用于整个网站的样式

import Checklist from '/components/Checklist.astro'; import Spoiler from '/components/Spoiler.astro'; import Box from '/components/tutorial/Box.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

- 应用全局样式

添加全局样式

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

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

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

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

  2. 将下面的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";
---

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

动手试一试 - 引入全局 CSS 文件

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

✅ 给我看下代码！✅

将以下引入代码添加到另外两个页面文件中：src/pages/index.astro和src/pages/blog.astro。

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

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

### 代码分析

你的关于页面现在引入了 global.css文件，同时使用了<style> 标签。

  • 两种设置样式的方法是否都在页面中被应用了？

    是的

  • 是否有任何样式冲突，如果有哪一个会被应用？

    有冲突，虽然全局的`

    `字体大小现在是`2.5rem`，但在页面`<style>`标签中声明的`4rem`被优先应用到了当前页面上。

  • 描述global.css和<style>如何协同工作。

    当在全局和页面的本地`<style>`标签中定义的样式冲突时，本地样式会覆盖全局样式。（但是，可能还涉及其他影响因素，因此经常性检查你的网站以确保应用了正确的样式！）

  • 你会如何选择在页面中引入global.css文件还是使用<style>标签？

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

任务清单

- [ ] 我可以通过引入`.css`文件来应用全局样式。

相关资源