Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Desafio: Classes Pseudo de Ação do Usuário | Introduction to CSS
CSS Fundamentals

Desafio: Classes Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do Usuário

Tarefa

Temos o site da empresa. Na seção do cabeçalho da página da web, há algumas informações de contato. A tarefa é adicionar a mudança de cor ao passar o mouse sobre os links na seção do cabeçalho.

Passos:

  1. Selecione todos os elementos a com o nome da classe header-link.
  2. Defina a pseudo-classe apropriada.
  3. Aplique a propriedade color com o valor blue.
html

index.html

css

index.css

js

index.js

  • Utilize o . e o nome da classe para selecionar um elemento pelo seu nome de classe.
  • Use a pseudo-classe :hover para reagir quando o cursor do mouse passa por cima.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 7
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

Desafio: Classes Pseudo de Ação do UsuárioDesafio: Classes Pseudo de Ação do Usuário

Tarefa

Temos o site da empresa. Na seção do cabeçalho da página da web, há algumas informações de contato. A tarefa é adicionar a mudança de cor ao passar o mouse sobre os links na seção do cabeçalho.

Passos:

  1. Selecione todos os elementos a com o nome da classe header-link.
  2. Defina a pseudo-classe apropriada.
  3. Aplique a propriedade color com o valor blue.
html

index.html

css

index.css

js

index.js

  • Utilize o . e o nome da classe para selecionar um elemento pelo seu nome de classe.
  • Use a pseudo-classe :hover para reagir quando o cursor do mouse passa por cima.
html

index.html

css

index.css

js

index.js

Tudo estava claro?

Seção 1. Capítulo 7
some-alt