Skip to content

Latest commit

 

History

History
209 lines (158 loc) · 6.19 KB

4.mdx

File metadata and controls

209 lines (158 loc) · 6.19 KB
type title description i18nReady
tutorial
Estilize sua página Sobre
Tutorial: Construa seu primeiro blog Astro — Adicione uma tag style do Astro para estilos escopados na página
true

import Checklist from '/components/Checklist.astro'; import Spoiler from '/components/Spoiler.astro'; import Box from '/components/tutorial/Box.astro'; import PreCheck from '/components/tutorial/PreCheck.astro'; import { Steps } from '@astrojs/starlight/components';

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

- 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/about.astro`: 
```astro title="src/pages/about.astro" ins={6-11}
<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?  <Spoiler>preto</Spoiler>
    - Sua página Sobre? <Spoiler>roxo</Spoiler>
    - Sua página Blog? <Spoiler>preto</Spoiler>

- A página com o maior texto de título é? <Spoiler>Sua página Sobre</Spoiler>

:::tip
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.
:::

  1. 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:

    <p>Minhas habilidades são:</p>
<ul>
  {skills.map((skill) => <li class="skill">{skill}</li>)}
</ul>

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

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

  3. 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 `skillColor` a adicionando ao script frontmatter de `src/pages/about.astro` assim: 
```astro title="src/pages/about.astro" ins={17}
---
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";
---
```

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

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

1. Atualize a tag `<style>` na sua página Sobre para que ela corresponda com o código abaixo. 
```astro title="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>
```
  1. 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