As Pseudo-classes CSS são palavras-chave para os seletores que definem atributos quando o seletor está em um estado especial. Basicamente, as pseudo-classes definem o estilo de um elemento quando o elemento está em um estado específico.

De acordo com as informações apresentadas na tabela a seguir, faça a associação das pseudo-classes contidos na Coluna A com seus respectivos conteúdos abordados e que irá completar a frase corretamente na Coluna B.

I. :hover1. Se você quiser alterar o estilo do elemento quando ele ficar em foco, você pode usar a classe seletor ____ .II. :focos2. Suponha que você queira alterar a cor de um link (seletor ou elemento) para vermelho ao passar o mouse sobre ele, você pode simplesmente usar a pseudo classe _____.III :link3. A pseudo-classe ____ diz ao navegador para definir uma propriedade particular assim que o usuário visita o link.IV :visited4. Você deseja definir uma cor padrão do link em seu site para Cinza, você pode simplesmente usar uma pseudo-classe ____.

Assinale a alternativa que apresenta a associação CORRETA entre as colunas.

Alternativas:

• a)
• I - 4; II - 3; III - 2; IV - 1.
• b)
• I - 4; II - 1; III - 2; IV - 3.
• c)
• I - 3; II - 4; III - 1; IV - 2.
• Alternativa assinalada
• d)
• I - 2; II - 1; III - 4; IV – 3
• e)
• I - 1; II - 3; III - 2; IV - 4.

2)

As pseudo-classes estruturais permitem a seleção de elementos com base na estrutura de todo o documento HTML, que inclui a posição de cada elemento e o número de vezes que ocorre a ocorrência de um elemento no documento.

Um navegador trata um documento HTML como uma árvore de nós, onde os nós são representados por elementos e seus elementos filhos.

As pseudo-classes estruturais permitem que você selecione esses nós e calcule a posição de um nó filho na lista de nós de um nó ou elemento pai.

Acerca dos seus conhecimentos relacionados as pseudo-classes estruturais, e julgue as afirmativas abaixo, e marque a que está CORRETA:

Alternativas:

• a)
• As duas pseudo-classes :first-child e :first-of-type modificam o último elemento com alguma condição, e apesar se serem parecidas, tem uma grande diferença.
• b)
• Essas pseudo-classes :last-child e :last-of-type são quase idênticas as :first-child e :first-of-type. A única diferença é que elas selecionam os primeiros elementos do pai e não os primeiros.
• c)
• Pseudo-classes :only-child e :only-of-type, também são parecidas com as anteriores, mas selecionam somente elementos que são filhos únicos.
• d)
• As pseudo-classes estruturais mantém o estilo de acordo com a quantidade de elementos HTML similares na página ou de acordo com o conteúdo do HTML.
• e)
• Através da pseudo-classe :focus, podemos indicar qual elemento de uma navegação ou de um formulário possuem o foco do mouse/teclado.
• Alternativa assinalada

3)

A validação de formulário é quando você insere dados, o aplicativo da Web faz uma verificação para ver se os dados estão corretos. Se estiver correto, o aplicativo permite que os dados sejam enviados ao servidor e (geralmente) salvos em um banco de dados; se não, você receberá uma mensagem de erro explicando quais correções precisam ser feitas. A validação de formulários pode ser implementada de várias maneiras diferentes.

Considerando as informações apresentadas, analise as afirmativas a seguir:

I. Um dos recursos do HTML5 é a capacidade de validar a maioria dos dados do usuário sem depender de scripts.

II. Quando um elemento será considerado válido: se o usuário tentar enviar os dados, o navegador enviará o formulário, desde que nada mais o impeça de fazê-lo.

III. Quando um elemento será considerado inválido: se o usuário tentar enviar os dados, o navegador bloqueará o formulário e exibirá uma mensagem de erro.

IV. Atributos de validação em elementos de formulário, permitem especificar regras para uma entrada de formulário, como se um valor precisa ser preenchido, o comprimento mínimo e máximo dos dados, se precisa ser um número, um e-mail endereço, ou qualquer outra coisa, e um padrão que deve corresponder.

Considerando o contexto apresentado, é correto o que se afirma em:

Alternativas:

• a)
• I e II, apenas.
• b)
• II e IV, apenas.
• c)
• I, II e III, apenas.
• d)
• I, III e IV, apenas.
• e)
• I, II, III e IV.
• Alternativa assinalada

4)

O Bootstrap 5 chegou oficialmente! Depois de três alfas, três betas e vários meses de trabalho árduo, estamos lançando a primeira versão estável de nossa nova versão principal.

A versão principal atual, lançada em maio de 2021, trouxe consigo toneladas de mudanças e melhorias, incluindo a adição de novos componentes, novas classes, novo estilo para componentes antigos, suporte a navegador atualizado, remoção de alguns componentes antigos, e muito mais.

Baseado nas abordagens do Bootstrap 5, e o que você pode fazer a partir dele, julgue as afirmativas a seguir em (V) Verdadeiras ou (F) Falsas.

( ) É possível criar uma variação diferente da barra de navegação.

( ) É possível criar facilmente guias dinâmicas para gerenciar uma grande quantidade de conteúdo.

( ) Podemos criar rapidamente diferentes tipos de layouts de formulário.

( ) Podemos criar facilmente um controle deslizante de imagem para mostrar seu conteúdo.

Assinale a alternativa que apresenta a sequência CORRETA.

Alternativas:

• a)
• V – V – F – F.
• b)
• F – F – V – V.
• c)
• V – V – V – V.
• d)
• V – F – V – V.
• Alternativa assinalada
• e)
• V – V – V – F.

5)

Uma interface bem projetada oferece aos usuários uma experiência intuitiva e eficiente, o que afeta positivamente a percepção da marca. Existem várias ferramentas ou grades de layout que ajudam a definir o layout do site e o posicionamento dos elementos da IU.

Os layouts também podem desempenhar um papel importante em designs que são exibidos em diferentes tamanhos de tela ou dispositivos. No cenário de front-end da web de hoje, o CSS é a maneira pela qual controlamos a formatação e o HTML a aparência do conteúdo. E atualmente temos dois padrões de layout principais, o CSS Grid e o Bootstrap que ajudam no posicionamento eficaz dos elementos em uma página.

Embora a comparação CSS Grid vs. Bootstrap possa parecer uma comparação de 'maçãs vs. laranjas', mas conforme você for estudando mais; você certamente obterá uma imagem mais clara dessa comparação.

De acordo com seus conhecimentos acerca do CSS Grid e o Bootstrap, julgue as afirmativas abaixo, e marque a que está INCORRETA:

Alternativas:

• a)
• O CSS Grid é mais usado quando somos mais rígidos quanto ao layout e queremos que nosso conteúdo flua na página de acordo com o layout desejado.
• b)
• CSS Grid foi inspirado no 'id' baseado em impressão. E oferece um layout flexível sem limitação de coluna. Isso torna muito fácil ter qualquer número de colunas.
• c)
• O sistema de grade do Bootstrap é baseado no sistema de layout CSS Flexbox. E uma vez que a grade é dividida em 12 colunas, qualquer layout que não some 12 é difícil de materializar
• Alternativa assinalada
• d)
• Se quisermos controlar o layout na direção da linha ou da coluna, devemos ir para a grade baseada em Flexbox do Bootstrap.
• e)
•  
• Você deve optar por CSS Grid se quiser controle de layout tanto na linha quanto na coluna. Porém os arquivos de suporte da folha de estilo devem ser baixados, o que diminui a velocidade de carregamento da página.