Efeitos de Hover e Opacidade

Imagine que você é um desenvolvedor web e quer fazer um elemento da página desaparecer usando JavaScript e CSS! Você usaria a propriedade CSS (a)   para criar esse efeito de "desaparecimento".

• color

• opacity

• background-color

• display

Answer explanation

The 'opacity' property in CSS allows you to control the transparency of an element, creating a fading effect. Setting it to 0 makes the element fully transparent, effectively making it disappear, unlike the other options.

Imagine que você é um desenvolvedor web e precisa descobrir qual seletor CSS é usado para detectar quando o mouse está sobre um elemento em uma página HTML! Qual deles você escolheria? Ajude o desenvolvedor William a resolver esse mistério!

• :active

• :focus

• :hover

• :visited

Answer explanation

:hover é o seletor que detecta quando o mouse está sobre um elemento, tornando-o o espião ideal para o detetive William. Os outros seletores têm funções diferentes: :active para cliques, :focus para campos ativos e :visited para links visitados.

Imagine que você é um desenvolvedor web como o Aiden, e ao passar o mouse sobre um elemento HTML, você aplica um feitiço de opacidade usando CSS! O que acontece com a opacidade do elemento quando o mouse passa por cima dele, usando o seletor `:hover`?

• A opacidade aumenta

• A opacidade diminui

• A opacidade não muda

• O elemento desaparece

Answer explanation

Quando o mouse passa sobre o elemento, a opacidade aumenta, criando um efeito visual que destaca o elemento. Isso é comum em efeitos de hover, onde a interação do usuário provoca uma mudança na aparência.

Abigail e Arjun estão em um debate amigável sobre design de sites usando HTML5 e CSS. Abigail insiste em fazer com que os elementos de sua página se destaquem com uma borda estilosa. Qual propriedade CSS ela deve usar para vencer o debate?

• margin

• padding

• border

• outline

Answer explanation

To make webpage elements stand out with a stylish border, Abigail should use the 'border' CSS property. This property allows her to define the style, width, and color of the border around her elements.

Imagine que você é um desenvolvedor web e precisa ajudar a Grace a deixar sua página HTML mais espaçosa e arejada. Qual propriedade CSS você usaria para adicionar espaço extra abaixo de um elemento usando JavaScript? (a)  

• Usando a propriedade `padding-top`

• Usando a propriedade `margin-bottom`

• Usando a propriedade `border-bottom`

• Usando a propriedade `opacity`

Answer explanation

A propriedade `margin-bottom` é a mais adequada para adicionar espaço extra abaixo do conteúdo, pois cria um espaço externo entre o elemento e o próximo. As outras opções não atendem a essa necessidade de espaçamento.

Imagine que você está desenvolvendo uma página web e pode controlar a opacidade de um elemento usando CSS. O que acontece quando você aumenta a opacidade desse elemento?

• O elemento fica mais transparente

• O elemento fica mais opaco

• O elemento muda de cor

• O elemento desaparece

Answer explanation

Quando você aumenta a opacidade de um elemento, ele se torna menos transparente e, portanto, mais opaco. Isso significa que o elemento se destaca mais na tela, tornando-se mais visível.

Imagine que você é um desenvolvedor web, e sua missão é ajudar o jovem Benjamin a ajustar a transparência de um elemento em uma página HTML usando CSS. Qual das opções abaixo é um exemplo de valor válido para a propriedade `opacity`?

• 1.5

• 0.5

• 2

• -1

Answer explanation

A propriedade `opacity` aceita valores entre 0 e 1, onde 0 é totalmente transparente e 1 é totalmente opaco. Portanto, 0.5 é um valor válido, enquanto 1.5, 2 e -1 estão fora desse intervalo.

Abigail está criando uma página web e quer garantir que seus elementos HTML tenham a quantidade certa de espaço interno. Qual propriedade CSS ela deve usar para ajustar o espaçamento interno de seus elementos?

• margin

• padding

• border

• opacity

Answer explanation

Abigail should use the 'padding' property to adjust the internal spacing of her elements. Padding creates space inside an element, between the content and its border, making the room feel cozier.

Match the CSS property with its effect on the element.

• display: none;

• O elemento é totalmente visível

• visibility: visible;

• O elemento tem uma borda

• border: 1px solid black;

• O elemento é invisível

• opacity: 0.5;

• O elemento é parcialmente visível

Answer explanation

Para tornar um elemento completamente invisível em CSS, Samuel deve usar a propriedade 'display: none;' ou 'visibility: hidden;'. Assim, o elemento não será exibido na página, tornando-o invisível.

Emma e Kai estão criando uma página web e discutindo sobre a propriedade CSS `opacity`. Emma diz que o valor padrão da `opacity` é como um fantasma, enquanto Kai insiste que é tão sólido quanto uma rocha. Você pode ajudá-los? Qual é o valor padrão de `opacity` no CSS?

• 0

• 0.5

• 1

• 2

Answer explanation

The default value of the `opacity` property in CSS is 1, which means fully opaque. Emma's comparison to a ghost (0) is incorrect, while Kai's assertion of solidity (1) is correct.