Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Elementos Pseudo-Decorativos | Decorative Effects
course content

Conteúdo do Curso

CSS Fundamentals

1. Introdução ao CSS

O que é CSS?Conectando HTML e CSSSeletores para Estilizar Elementos HTMLDesafio: Adicione Seus Primeiros EstilosDesafio: Adicione os Estilos utilizando o Nome da ClasseClasses Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do UsuárioCores do TextoTrabalho Eficaz com CSSDesafio: Variáveis em CSS

2. Estilos de Texto

Estilização de TextoFormatação de TextoDesafio: Formatação de TextoAdicionar Fontes Personalizadas à Página WebPropriedades da FonteDesafio: Fontes

3. Modelo de Caixa e Espaçamento de Elementos

Modelo de CaixaDimensionamento de CaixaAdicionar Espaço aos ElementosDesafio: Box-SizingClasses Pseudoestruturais e FuncionaisDesafio: Pseudo-Classes EstruturaisTipos de ElementosTrabalhe com Elementos de Nível de BlocoTrabalhe com Elementos InlineDesafio: Prever o Layout da Página

4. Flexbox

O que é o Flexbox?Direção FlexívelAlinhar Conteúdo HorizontalmenteAlinhar Itens VerticalmentePropriedades de Item FlexívelDesafio: FlexboxDesafio: Trabalhar com Flexbox

5. Efeitos Decorativos

Cor de FundoImagem de FundoTrabalhe com ImagensElementos Pseudo-DecorativosSombrasDesafio: Efeitos DecorativosPróximos Passos

CSS Fundamentals

Elementos Pseudo-DecorativosElementos Pseudo-Decorativos

Os pseudo-elementos ::before e ::after são seletores especiais que nos permitem inserir conteúdo antes ou depois do conteúdo de um elemento. Utilizamo-los para adicionar elementos decorativos, como ícones ou bordas, ao conteúdo de um elemento sem modificar o conteúdo HTML real.

  • ::before adiciona o conteúdo antes do conteúdo do elemento.
  • ::after adiciona o conteúdo depois do conteúdo do elemento.

Vamos considerar o seguinte exemplo, no qual nossa tarefa é adicionar decoração para o efeito de passar o mouse sobre os links:

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 5. Capítulo 4
course content

Conteúdo do Curso

CSS Fundamentals

1. Introdução ao CSS

O que é CSS?Conectando HTML e CSSSeletores para Estilizar Elementos HTMLDesafio: Adicione Seus Primeiros EstilosDesafio: Adicione os Estilos utilizando o Nome da ClasseClasses Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do UsuárioCores do TextoTrabalho Eficaz com CSSDesafio: Variáveis em CSS

2. Estilos de Texto

Estilização de TextoFormatação de TextoDesafio: Formatação de TextoAdicionar Fontes Personalizadas à Página WebPropriedades da FonteDesafio: Fontes

3. Modelo de Caixa e Espaçamento de Elementos

Modelo de CaixaDimensionamento de CaixaAdicionar Espaço aos ElementosDesafio: Box-SizingClasses Pseudoestruturais e FuncionaisDesafio: Pseudo-Classes EstruturaisTipos de ElementosTrabalhe com Elementos de Nível de BlocoTrabalhe com Elementos InlineDesafio: Prever o Layout da Página

4. Flexbox

O que é o Flexbox?Direção FlexívelAlinhar Conteúdo HorizontalmenteAlinhar Itens VerticalmentePropriedades de Item FlexívelDesafio: FlexboxDesafio: Trabalhar com Flexbox

5. Efeitos Decorativos

Cor de FundoImagem de FundoTrabalhe com ImagensElementos Pseudo-DecorativosSombrasDesafio: Efeitos DecorativosPróximos Passos

CSS Fundamentals

Elementos Pseudo-DecorativosElementos Pseudo-Decorativos

Os pseudo-elementos ::before e ::after são seletores especiais que nos permitem inserir conteúdo antes ou depois do conteúdo de um elemento. Utilizamo-los para adicionar elementos decorativos, como ícones ou bordas, ao conteúdo de um elemento sem modificar o conteúdo HTML real.

  • ::before adiciona o conteúdo antes do conteúdo do elemento.
  • ::after adiciona o conteúdo depois do conteúdo do elemento.

Vamos considerar o seguinte exemplo, no qual nossa tarefa é adicionar decoração para o efeito de passar o mouse sobre os links:

html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 5. Capítulo 4
some-alt