Pular para o conteúdo principal

Questão de Programação — CSS (Cascading Style Sheets) — FCC 2019

ProgramaçãoCSS (Cascading Style Sheets)
Código
fc056293
Banca
FCC
Órgão
SANASA Campinas
Ano
2019
Cargo
Analista de Tecnologia da Informação - Análise e Desenvolvimento
Um Desenvolvedor de software precisa inserir uma instrução no cabeçalho de uma página HTML que fará referência a um arquivo chamado a001.css a ser aplicado apenas quando a página for aberta em dispositivos com tela de até 600 pixels. A instrução correta que deverá ser inserida é
  1. A<@import URL(a001.css) only screen and (max-width: 600px)>
  2. B<link rel="media" device="only screen with (max-width: 600px)" href="a001.css">
  3. C<link rel="stylesheet" media="screen and (max-width: 600px)" href="a001.css">
  4. D<inport file="a001.css" media="screen and (max-width: 600px)">
  5. E<style>@media only screen and (min-width: 600px) URL(a001.css) <style>
Revelar gabarito e comentário

GabaritoC — <link rel="stylesheet" media="screen and (max-width: 600px)" href="a001.css">

Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.

CSS: Media Queries e o elemento <link>

Gabarito: letra C. A instrução correta utiliza a tag <link> com rel="stylesheet" e o atributo media com a media query screen and (max-width: 600px), que restringe a aplicação do arquivo a001.css a dispositivos com tela de até 600 pixels de largura. Essa é a sintaxe padrão da especificação HTML/CSS.

A questão testa o conhecimento da sintaxe correta para carregar folhas de estilo condicionais. A banca explora alternativas com erros comuns de atributos e valores.

Alternativa A — ❌ Incorreta

A sintaxe @import é uma regra CSS, não um elemento HTML. Além disso, a forma correta seria @import url("a001.css") only screen and (max-width: 600px); e deve ser inserida dentro de um bloco <style> ou em um arquivo CSS, não diretamente no cabeçalho HTML como uma tag.

Alternativa B — ❌ Incorreta

O atributo rel deve ser "stylesheet", não "media". O atributo device não existe; o correto é media. A sintaxe da media query está errada: only screen with (max-width: 600px) não é válido; o correto é only screen and (max-width: 600px).

Alternativa C — ✅ Correta ⟵ GABARITO

A tag <link rel="stylesheet" media="screen and (max-width: 600px)" href="a001.css"> segue exatamente a especificação HTML. O atributo rel indica que é uma folha de estilo; media define a condição de aplicação (tela com largura máxima de 600px); href aponta para o arquivo CSS.

Alternativa D — ❌ Incorreta

A tag <inport> não existe em HTML. Não é um elemento válido para carregar CSS.

Alternativa E — ❌ Incorreta

A sintaxe dentro da tag <style> está incorreta. Para importar um arquivo CSS externo, deve-se usar @import, e não @media. Além disso, a tag de fechamento está escrita como <style> em vez de </style>, e a condição min-width: 600px é o oposto do solicitado (deveria ser max-width).

NÃO CAIA NESSA!

A banca explora a troca entre max-width e min-width. Lembre-se: "até 600 pixels" significa max-width: 600px. Outra armadilha comum é usar @import com sintaxe errada ou atributos incorretos no <link>.

Gabarito: letra C.

Link permanente: /questoes/fc056293