Pular para o conteúdo
Astro Astro

Estilize sua página Sobre

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

Se prepare para...

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

  1. Copie o seguinte código e o cole em src/pages/sobre.astro:

    src/pages/sobre.astro
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{tituloPagina}</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?
      • Sua página Sobre?
      • Sua página Blog?

    • A página com o maior texto de título é?

  2. Adicione o nome de classe habilidade aos elementos <li> gerados em sua página Sobre, para que possa estilizá-los. Seu código deve se parecer com isso:

    src/pages/sobre.astro
    <p>Minhas habilidades são:</p>
    <ul>
      {habilidades.map((habilidade) => <li class="habilidade">{habilidade}</li>)}
    </ul>

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

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

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

  1. Defina a variável corHabilidade a adicionando ao script frontmatter de src/pages/sobre.astro assim:

    src/pages/sobre.astro
    ---
    const tituloPagina = "Sobre Mim";
    

    const identidade = {
      nome: "Sarah",
      pais: "Canadá",
      ocupacao: "Escritora Técnica",
      hobbies: ["fotografia", "observar pássaros", "beisebol"],
    };
    

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

    const feliz = true;
    const terminado = false;
    const meta = 3;
    

    const corHabilidade = "navy";
    ---

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

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

  3. 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 corHabilidade passada para a diretiva define:vars.

Tente você mesmo - Defina variáveis CSS

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

    src/pages/sobre.astro
    <style define:vars={{corHabilidade, espessuraFonte, capitalizacaoTexto}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .habilidade {
        color: var(--corHabilidade);
        font-weight: var(--espessuraFonte);
        text-transform: var(--capitalizacaoTexto);
      }
    </style>

  2. 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! ✅
src/pages/sobre.astro
---
const tituloPagina = "Sobre Mim";


const identidade = {
  nome: "Sarah",
  pais: "Canadá",
  ocupacao: "Escritora Técnica",
  hobbies: ["fotografia", "observar pássaros", "beisebol"],
};


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


const feliz = true;
const terminado = false;
const meta = 3;


const corHabilidade = "navy";
const espessuraFonte = "bold";
const capitalizacaoTexto = "uppercase";
---

Checklist

Recursos