Skip to content

设置“关于”页面的样式

现在你已经有了一个包含有关你的内容的“关于”页面，是时候对其进行样式设置了！

¥Now that you have an About page with content about you, it’s time to style it!

Get ready to…

  • 在单个页面上设置项目的样式

  • 使用 CSS 变量

设置单个页面的样式

Section titled 设置单个页面的样式

¥Style an individual page

使用 Astro 自己的 <style></style> 标签，你可以设置页面上项目的样式。向这些标签添加属性和指令为你提供了更多样式设置方式。

¥Using Astro’s own <style></style> tags, you can style items on your page. Adding attributes and directives to these tags gives you even more ways to style.

  1. Copy the following code and paste it into src/pages/about.astro:

    src/pages/about.astro
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>

    Check all three pages in your browser preview.

    • Which color is the page title of:

      • Your Home page?
      • Your About page?
      • Your Blog page?

    • The page with the biggest title text is?

  2. Add the class name skill to the generated <li> elements on your About page, so you can style them. Your code should now look like this:

    src/pages/about.astro
    <p>My skills are:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

  3. Add the following code to your existing style tag:

    src/pages/about.astro
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>

  4. Visit your About page in your browser again, and verify, through visual inspection or dev tools, that each item in your list of skills is now green and bold.

使用你的第一个 CSS 变量

Section titled 使用你的第一个 CSS 变量

¥Use your first CSS variable

Astro <style> 标签还可以使用 define:vars={ {...} } 指令引用 frontmatter 脚本中的任何变量。你可以在代码围栏内定义变量，然后将它们用作样式标签中的 CSS 变量。

¥The Astro <style> tag can also reference any variables from your frontmatter script using the define:vars={ {...} } directive. You can define variables within your code fence, then use them as CSS variables in your style tag.

  1. Define a skillColor variable by adding it to the frontmatter script of src/pages/about.astro like this:

    src/pages/about.astro
    ---
    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";
    ---

  2. Update your existing <style> tag below to first define, then use this skillColor variable inside double curly braces.

    src/pages/about.astro
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

  3. Check your About page in your browser preview. You should see that the skills are now navy blue, as set by the skillColor variable passed to the define:vars directive.

自己尝试一下 - 定义 CSS 变量

Section titled 自己尝试一下 - 定义 CSS 变量

¥Try it yourself - Define CSS variables

  1. Update the <style> tag on your About page so that it matches the one below.

    src/pages/about.astro
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>

  2. Add any missing variable definitions in your frontmatter script so that your new <style> tag successfully applies these styles to your list of skills:

    • The text color is navy blue
    • The text is bold
    • The list items are in all-caps (all uppercase letters)
✅ Show me the code! ✅
src/pages/about.astro
---
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";
---

清单

Section titled 清单

¥Checklist

资源

Section titled 资源

¥Resources

Astro 中文网 - 粤ICP备13048890号