Estilize sua página Sobre

Agora que você tem uma página Sobre com conteúdo sobre você, é hora de estilizá-la!

Get ready to…

Estilizar itens em uma única pagina
Utilizar variáveis CSS

Estilize uma página individual

Utilizando as próprias tags <style></style> do Astro, você pode estilizar itens na sua página. Adicionar atributos e diretivas a essas tags te dão ainda mais formas de estilizar.

Copie o seguinte código e o cole em src/pages/about.astro:
src/pages/about.astro
```
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{pageTitle}</title>
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
    </style>
  </head>
```
Verifique todas as três páginas na pré-visualização do seu navegador.
- Qual cor é o título da página em:
  - Sua página Início? preto
  - Sua página Sobre? roxo
  - Sua página Blog? preto
- A página com o maior texto de título é? Sua página Sobre
Se você não consegue determinar cores visualmente, você pode utilizar as ferramentas do desenvolvedor no seu navegador para inspecionar os elementos de título <h1> e verificar a cor aplicada ao texto.
Adicione o nome de classe skill aos elementos <li> gerados em sua página Sobre, para que possa estilizá-los. Seu código deve se parecer com isso:
src/pages/about.astro
```
<p>Minhas habilidades são:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>
```

Adicione o seguinte código a sua tag style existente:

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

Visite sua página Sobre no seu navegador novamente, e verifique, visualmente ou por ferramentas do desenvolvedor, que cada item na sua lista de habilidades agora é verde e está em negrito.

Utilize sua primeira variável CSS

A tag <style> do Astro também pode referenciar quaisquer variáveis do seu script frontmatter utilizando a diretiva define:vars={ {...} }. Você pode definir variáveis dentro da sua cerca de código, e então utilizá-las como variáveis CSS em sua tag style.

Defina a variável skillColor a adicionando ao script frontmatter de src/pages/about.astro assim:

---
const pageTitle = "Sobre Mim";

const identity = {
  firstName: "Sarah",
  country: "Canadá",
  occupation: "Escritora Técnica",
  hobbies: ["fotografia", "observar pássaros", "beisebol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

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

const skillColor = "navy";
---

Atualize sua tag <style> existente abaixo para primeiro definir, e então utilizar essa variável skillColor dentro de duas chaves.

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

Verifique sua página Sobre na pré-visualização do seu navegador. Você deve ver que as habilidades agora estão em azul-marinho, como foi definido pela variável skillColor passada para a diretiva define:vars.

Tente você mesmo - Defina variáveis CSS

Atualize a tag <style> na sua página Sobre para que ela corresponda com o código abaixo.

<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>

Adicione quaisquer definições de variáveis faltando no seu script frontmatter para que sua nova tag <style> aplique esses estilos a sua lista de habilidades com sucesso:
- A cor do texto é azul-marinho
- O texto está em negrito
- Os itens da lista estão completamente em maiúscula

✅ Me mostre o código! ✅

---
const pageTitle = "Sobre Mim";

const identity = {
  firstName: "Sarah",
  country: "Canadá",
  occupation: "Escritora Técnica",
  hobbies: ["fotografia", "observar pássaros", "beisebol"],
};

const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];

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

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

Checklist

Eu posso adicionar estilos CSS para uma página individual utilizando uma tag <style> do Astro.
Eu posso utilizar variáveis para estilizar elementos em uma página.

Recursos

Contribute

Community