Pseudo-classes em CSS - @Curso em Vídeo HTML5 e CSS3

Introdução ao Capítulo 15 - Seletor de Classe

Visão Geral da Seção: Nesta seção, o instrutor introduzirá o conceito de seletores de classe e como eles são usados no HTML e CSS.

Seletores Personalizados

• Os seletores personalizados foram abordados nos vídeos anteriores.

• Agora, será explorado o uso dos seletores de classe.

• Um exercício anterior com classes será revisado antes de prosseguir para um novo exercício.

Apoio da Record

• A organização social Record está oferecendo cursos gratuitos de tecnologia para os alunos do curso em vídeo.

• Os alunos podem acessar esses cursos e outras oportunidades através do link fornecido no vídeo.

Exercício Prático

• Será criada uma nova pasta chamada "exercício 020" para o exercício prático.

• Um arquivo HTML será criado com três divs dentro dele.

• As divs serão estilizadas com largura, altura e cor de fundo definidas.

• O display inline-block será utilizado para alinhar as divs lado a lado.

Conclusão

Visão Geral da Seção: Nesta seção, o instrutor conclui o vídeo e menciona que mais detalhes serão abordados no próximo capítulo.

Próximo Capítulo

• No próximo capítulo, serão exploradas as pseudo-classes em mais detalhes.

• Será explicado como configurar tamanho e alinhamento vertical usando pseudo-classes.

Lembre-se de ajustar os timestamps para o formato correto .

Configurações com LED de três

Visão geral da seção: Nesta seção, o palestrante fala sobre como fazer configurações usando um LED de três e a possibilidade de alterar o background color para azul.

Configurações com LED de três

• É possível fazer configurações dentro do LED de três.

• Exemplo: Dividir com a e de um tenha background color Blue.

Pseudo-classes e pseudo-elementos

Visão geral da seção: O palestrante explica sobre as pseudo-classes e pseudo-elementos, que estão relacionados ao estado de um determinado elemento.

Pseudo-classes e pseudo-elementos

• As pseudo-classes estão relacionadas ao estado de um determinado elemento.

• Exemplos: ativo, marcado, vazio, habilitado.

• Uma das pseudo-classes mencionadas é "Rover", que é ativada quando o mouse está passando por cima do elemento.

Utilizando a pseudo-classe Rover

Visão geral da seção: O palestrante mostra como utilizar a pseudo-classe Rover para criar efeitos visuais quando o mouse está passando por cima do elemento.

Utilizando a pseudo-classe Rover

• A classe Rover é aplicada a vários elementos.

• Quando o mouse passa por cima do elemento, é possível mudar sua cor ou realizar outras configurações visuais.

Efeito visual ao passar o mouse

Visão geral da seção: O palestrante destaca que o uso da pseudo-classe Rover não significa que o elemento seja um link clicável, mas sim uma interação visual ao passar o mouse sobre ele.

Efeito visual ao passar o mouse

• Ao passar o mouse sobre um elemento com a classe Rover, é possível criar efeitos visuais.

• Exemplo: mudança de cor do texto ou do background.

Organização de conteúdo e espaçamento entre elementos

Visão geral da seção: O palestrante menciona que no próximo capítulo será abordada a organização de conteúdo em divs e como configurar espaçamentos entre elas.

Organização de conteúdo e espaçamento entre elementos

• No próximo capítulo, será explicado como organizar o conteúdo em divs e configurar espaçamentos.

• Exemplo: ajuste do espaço interno entre elementos.

Incentivo à interação com o canal

Visão geral da seção: O palestrante incentiva os espectadores a interagirem com o canal, deixando likes, comentários e se inscrevendo para receber notificações.

Incentivo à interação com o canal

• É importante deixar likes nos vídeos para ajudar no crescimento do canal.

• Comentários de incentivo ou dúvidas também são bem-vindos.

• Inscrever-se no canal e ativar as notificações ajuda a manter o canal relevante para a comunidade de tecnologia.

Exemplo prático - Utilizando a pseudo-classe Rover

Visão geral da seção: O palestrante demonstra um exemplo prático de como utilizar a pseudo-classe Rover para criar efeitos visuais ao passar o mouse sobre um elemento.

Exemplo prático - Utilizando a pseudo-classe Rover

• Criação de um arquivo HTML chamado "Rover.html".

• Utilização da classe Rover em uma div para alterar a cor do texto ao passar o mouse sobre ela.

• Demonstração de como esconder um parágrafo dentro da div utilizando o símbolo "~".

Escondendo elementos com o símbolo "~"

Visão geral da seção: O palestrante mostra como utilizar o símbolo "~" para esconder elementos dentro de uma div.

Escondendo elementos com o símbolo "~"

• Utilização do símbolo "~" para esconder um parágrafo dentro de uma div.

• O parágrafo não será exibido, mas ainda ocupará espaço na página.

Estilizando elementos com classes

Visão geral da seção: O palestrante demonstra como estilizar elementos utilizando classes e aplicando diferentes estilos aos mesmos.

Estilizando elementos com classes

• Criação de estilos CSS para aplicar às classes dos elementos.

• Exemplo: mudança da cor do texto ao passar o mouse sobre a div.

Animações e interações visuais

Visão geral da seção: O palestrante destaca que é possível criar animações e interações visuais utilizando as técnicas apresentadas anteriormente.

Animações e interações visuais

• Ao combinar as técnicas apresentadas, é possível criar animações e interações visuais interessantes.

• Exemplo: mudança de cor do texto ao passar o mouse sobre a div.

Encerramento e incentivo à interação

Visão geral da seção: O palestrante encerra o vídeo incentivando novamente a interação com o canal e apresenta um exemplo prático que pode ser encontrado no material em PDF.

Encerramento e incentivo à interação

• Incentivo final para deixar likes, comentários e se inscrever no canal.

• Apresentação de um exemplo prático disponível no material em PDF.

Ocultando e exibindo elementos com CSS

Visão geral da seção: Nesta seção, o palestrante explica como ocultar e exibir elementos HTML usando CSS. Ele demonstra como fazer um parágrafo oculto dentro de uma div e mostrar esse parágrafo quando o mouse passa sobre a div.

Ocultando e exibindo elementos

• Para ocultar um elemento, pode-se usar a propriedade display com o valor none.

• Para exibir um elemento oculto quando o mouse passa sobre outro elemento, pode-se usar pseudo-classes.

• Exemplo: Quando o mouse passa sobre uma div com a classe "Disney", um parágrafo dentro dessa div é mostrado.

• Pode-se alterar as propriedades do elemento que é exibido ao passar o mouse sobre outro elemento.

• Exemplo: Alterar a cor do texto para branco e o fundo para vermelho.

Aplicação de pseudo-classe :hover

Visão geral da seção: Nesta seção, o palestrante mostra como aplicar a pseudo-classe :hover para criar interações ao passar o mouse sobre elementos HTML.

Aplicação da pseudo-classe :hover

• Ao utilizar a pseudo-classe :hover, é possível definir estilos específicos para quando o mouse está sobre um determinado elemento.

• Pode-se alterar as propriedades do elemento que está sendo visualizado ao passar o mouse sobre ele.

• Exemplo: Mudança de cor do texto ou fundo do elemento.

Interação com conteúdo HTML usando CSS

Visão geral da seção: Nesta seção, o palestrante menciona que é possível interagir com o conteúdo HTML utilizando CSS e introduz o conceito de seletores de elementos.

Interação com conteúdo HTML

• É possível incluir estilos específicos para elementos HTML utilizando seletores de elementos.

• O uso de classes e pseudo-classes permite criar interações mais avançadas com os elementos.

• Será abordado em detalhes no próximo vídeo.

Conclusão e próximos passos

Visão geral da seção: Nesta seção final, o palestrante conclui a aula e incentiva a prática dos exemplos apresentados. Ele também menciona que no próximo vídeo será abordado como interagir com classes e pseudo-classes.

Próximos passos

• Praticar os exemplos apresentados em casa.

• Anotar as informações importantes em um caderno.

• Aguardar pelo próximo vídeo, onde serão exploradas as interações com classes e pseudo-classes.