Pular para o conteúdo
Astro Astro

Adicione estilização para todo o site

Agora que você tem uma página Sobre estilizada, é hora de adicionar alguns estilos globais para o resto do seu site!

Se prepare para...

  • Aplicar estilos globalmente

Adicione uma folha de estilos global

Você pode ver que a tag <style> do Astro é escopada por padrão, o que significa que ela apenas afeta os elementos em seu próprio arquivo.

Há algumas formas de definir estilos globalmente no Astro, mas neste tutorial, você irá criar e importar um arquivo global.css em cada uma de suas páginas. Essa combinação de folha de estilo e tag <style> te dá a habilidade de controlar alguns estilos para todo o site, e aplicar alguns estilos específicos exatamente onde você os quer.

  1. Crie um novo arquivo em src/styles/global.css (Você terá que criar uma pasta styles primeiro.)

  2. Copie o seguinte código em seu novo arquivo, global.css

    src/styles/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;
    }

  3. Em sobre.astro, adicione a seguinte declaração de importação ao seu frontmatter:

    src/pages/sobre.astro
    ---
    import '../styles/global.css';
    

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

  4. Verifique a pré-visualização do navegador de sua página Sobre, e você deve ver os novos estilos aplicados!

Tente você mesmo - Importe sua folha de estilos global

Adicione a linha de código necessária para cada arquivo .astro em seu projeto para aplicar seus estilos globais em cada página do seu site.

✅ Me mostre o código! ✅

Adicione a seguinte declaração de importação para os outros dois arquiivos de página: src/pages/index.astro and src/pages/blog.astro

src/pages/index.astro
---
import '../styles/global.css';
---

Faça quaisquer alterações ou adições que você quiser para o conteúdo da sua página Sobre adicionando elementos HTML para o template da página, seja estaticamente ou dinamicamente. Escreva qualquer JavaScript adicional no seu script frontmatter para te fornecer valores para utilizar no seu HTML. Quando você estiver feliz com essa página, faça commit das suas mudanças para o GitHub antes de seguir para a próxima lição.

Analise o Padrão

Sua página Sobre agora está estilizada utilizando ambos o arquivo global.css e a tag <style>.

  • Os estilos de ambos os métodos de estilização estão sendo aplicados?

  • Há quaisquer estilos conflitantes, e se sim, quais são aplicados?

  • Descreva como global.css e <style> trabalham juntos.

  • Como você escolheria entre declarar um estilo no arquivo global.css ou em uma tag <style>?

Checklist

Recursos