Pular para o conteúdo

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

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 about.astro, adicione a seguinte declaração de importação ao seu frontmatter:

    src/pages/about.astro
    ---
    import '../styles/global.css';
    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";
    ---
  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

Seção intitulada 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.

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

Contribua

O que passa em sua cabeça?

Comunidade