Análise de código CSS e HTML
Gabarito: letra A. O código define um artigo com fundo cinza claro (background-color: #f0f0f0), conteúdo centralizado (margin: 20px auto), largura máxima de 300px e uma sombra de texto no título (text-shadow). A alternativa A descreve corretamente esses elementos e, de forma acertada, observa que o código não define parágrafos, data de publicação ou rodapé — elementos que simplesmente não existem no trecho fornecido.
O trecho apresenta um documento HTML com um bloco <style> no <head>, contendo duas regras CSS: uma para a classe .artigo e outra para o seletor .artigo header h1. A primeira regra aplica background-color: #f0f0f0 (fundo cinza claro), padding: 20px, max-width: 300px e margin: 20px auto. A propriedade margin: 20px auto centraliza horizontalmente o elemento, pois as margens laterais automáticas distribuem o espaço restante igualmente. A segunda regra define color: #333 (texto cinza escuro) e text-shadow: 0 5px 10px rgba(26, 6, 59, 0.5) — uma sombra sutil no texto do título. É importante notar que o código contém erros de digitação: Background-color (com B maiúsculo) e rgda (em vez de rgba), além de um espaço em 5 px. Esses erros fazem com que essas propriedades sejam ignoradas pelo navegador, mas não afetam as demais regras válidas.
A estrutura HTML usa tags semânticas: <article>, <header> e <h1>. O <article> representa um conteúdo independente, o <header> agrupa o cabeçalho do artigo e o <h1> é o título principal. Não há <p>, <footer> ou qualquer elemento de data no código. Portanto, qualquer descrição que mencione parágrafos, rodapé ou data de publicação está se referindo a elementos que não existem no trecho.
A questão explora a capacidade de ler e interpretar código CSS/HTML, identificando o que está realmente definido e o que não está. A pegadinha está em alternativas que descrevem efeitos ou elementos que não estão presentes no código, como animações, interatividade, problemas de compatibilidade ou falha no carregamento do CSS. O candidato deve se ater ao que o código efetivamente especifica.
Elemento | O que o código define | O que o código NÃO define |
|---|
Artigo (.artigo) | Fundo cinza claro (#f0f0f0), padding: 20px, largura máxima de 300px, centralizado horizontalmente (margin: 20px auto) | Bordas arredondadas, sombra externa no artigo, animações, interatividade |
Título (h1) | Cor cinza escuro (#333), sombra de texto (text-shadow) | Itálico, data de publicação, efeitos de hover |
Estrutura HTML | Tags semânticas <article>, <header>, <h1> | Parágrafos (<p>), rodapé (<footer>), data de publicação |
CSS aplicado | Regras embutidas no <style> no <head> (válidas) | Arquivo externo vinculado, regras de :hover, transition, animation |
Erros de digitação | Background-color (B maiúsculo), rgda (em vez de rgba), espaço em 5 px — propriedades ignoradas
| — |
Alternativa A — ✅ Correta ⟵ GABARITO
A alternativa A descreve com precisão o que o código define: fundo cinza claro (background-color: #f0f0f0), conteúdo centralizado (margin: 20px auto), sombra sutil no título (text-shadow). Além disso, ela corretamente afirma que o código não define parágrafos, data de publicação ou rodapé — elementos que não aparecem no HTML. A menção a "sombra sutil ao redor do artigo" é uma interpretação da sombra de texto, que é sutil e aplicada ao título, não ao artigo em si, mas a descrição geral é a mais fiel ao código.
Alternativa B — ❌ Incorreta
A alternativa B afirma que o texto está alinhado à esquerda e que não há sombras. No entanto, o código define margin: 20px auto, que centraliza o artigo horizontalmente, e text-shadow no título, que é uma sombra. Além disso, menciona "texto em itálico para a data de publicação", mas não há data de publicação nem itálico no código. O erro está em ignorar a centralização e a sombra, e em inventar elementos inexistentes.
Alternativa C — ❌ Incorreta
A alternativa C fala em interatividade, animações e mudanças ao passar o mouse. O código não contém nenhuma regra de :hover, transition, animation ou qualquer efeito interativo. A alternativa tenta atribuir ao código efeitos que não existem, sendo claramente incorreta.
Alternativa D — ❌ Incorreta
A alternativa D sugere inconsistência entre navegadores e problemas de compatibilidade. O código é simples e usa propriedades CSS amplamente suportadas (background-color, padding, max-width, margin, color, text-shadow). Não há indicação de problemas de renderização. A alternativa inventa uma falha que não existe no trecho.
Alternativa E — ❌ Incorreta
A alternativa E afirma que o CSS não foi vinculado ou carregado, resultando em formatação padrão do navegador. No entanto, o CSS está embutido no <style> dentro do <head>, o que é uma forma válida de aplicação. O navegador aplicará as regras definidas, desde que os seletores correspondam aos elementos. Portanto, a formatação não é padrão; ela reflete as regras CSS fornecidas.
Gabarito: letra A