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 Badge from '/components/Badge.astro';
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';
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 CSSUtilizando 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
:<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
:::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. ::: -
-
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>
-
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.
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 desrc/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ávelskillColor
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 diretivadefine:vars
.
-
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";
---