Analise o script abaixo. <!DOCTYPE html> <html> <head> <style> div { max-width: 200px; border: 10px solid black; padding: 30px; margin: 12px; background-color: lightgray; } .div { background-color: lightgreen; border: 6px solid red; } </style> </head> <body> <div> Essa é uma questão sobre CSS. <div class="div">Essa é uma questão sobre CSS.</div> </div> </body> </html> Sobre a página apresentada, analise as afirmativas a seguir. I. O texto “Essa é uma questão sobre CSS.” é exibido apenas uma vez. II. São exibidas duas caixas, ambas com margens pretas. III. Somente uma caixa é exibida, com margem vermelha. Sobre essas afirmativas, é correto afirmar que
- A)nenhuma está correta;
Correta, porque as três afirmativas estão erradas ao confundir quantidade de elementos, borda e margem.
- B)somente I está correta;
Errada, porque o texto aparece duas vezes no HTML e não apenas uma.
- C)somente II está correta;
Errada, porque não existem margens pretas; o que é preto no CSS é a borda do elemento externo.
- D)somente III está correta;
Errada, porque há duas caixas e a cor vermelha está na borda do elemento interno, não na margem.
- E)todas estão corretas.
Errada, porque nenhuma das três afirmativas se confirma na leitura do HTML e do CSS.
Gabarito: A
Aqui a chave é ler o CSS com calma e separar o que é regra do elemento pai e o que é regra do elemento com classe .div. O seletor div afeta todos os elementos , então o div externo e o interno recebem max-width, borda preta de 10px, padding, margin e fundo cinza. Já a classe .div sobrescreve algumas dessas características no div interno: fundo verde e borda vermelha de 6px. Perceba também que o texto aparece duas vezes no código HTML: uma dentro do externo e outra dentro do . Então a afirmativa I está errada, porque o texto não aparece apenas uma vez. A afirmativa II também está errada, porque não há margem preta em CSS: margin é um espaço externo invisível, e a cor da borda é preta só no elemento externo, não na margem. A afirmativa III igualmente erra ao falar em uma única caixa e margem vermelha: existem duas caixas, e a borda do elemento interno é vermelha, não a margem. Esse tipo de questão cobra muito o box model do CSS: content, padding, border e margin. Em prova, a banca gosta de misturar esses nomes para ver se você confunde borda com margem. Margem não tem cor; quem aparece colorida é a borda ou o fundo. Resultado: nenhuma das afirmativas está correta, então o gabarito é A.