CSS responsividade multimídia e acessibilidade

Aparência layout testes locais e experiência em diferentes telas

Aprenda a executar o site por um servidor local criar estilos próprios montar layouts responsivos incorporar mídia e revisar acessibilidade.

Como usar este capítulo

Nesta etapa, o site deixará de depender dos estilos padrão do navegador. Você vai criar uma folha CSS própria e testar cada mudança no servidor local. O projeto continua pequeno de propósito: poucas regras bem compreendidas ensinam mais que um arquivo enorme copiado sem leitura.

Faça os exemplos na ordem. CSS usa a cascata, portanto regras posteriores podem alterar as anteriores. Quando um resultado parecer estranho, inspecione o elemento no navegador antes de acrescentar mais código.

Objetivos de aprendizagem

• Executar um site em localhost sem expor o servidor à rede.
• Explicar seletor propriedade valor cascata herança e especificidade.
• Trabalhar com cores unidades tipografia e modelo de caixa.
• Criar temas com propriedades personalizadas.
• Adaptar imagens navegação cartões e vídeos a telas estreitas.
• Usar Flexbox e Grid em situações adequadas.
• Incorporar áudio vídeo e páginas externas com cuidado.
• Diagnosticar CSS e arquivos ausentes nas ferramentas do navegador.
• Aplicar práticas básicas de acessibilidade e desempenho.

Sumário

**1. **Servidor web local

**2. **Primeiras regras CSS

**3. **Cascata herança e especificidade

**4. **Cores e variáveis

**5. **Tipografia

**6. **Modelo de caixa

**7. **Imagens e conteúdo incorporado

**8. **Flexbox

**9. **Grid

**10. **Design responsivo

**11. **Temas e preferências

**12. **Ferramentas do navegador

**13. **Acessibilidade

**14. **Desempenho e organização

**15. **Projeto e avaliação

Unidade 1 Servidor web local

Abrir um arquivo com dois cliques é suficiente para HTML simples, mas não reproduz todas as condições de um site publicado. Caminhos iniciados por /, requisições de arquivos, módulos JavaScript e alguns conteúdos incorporados funcionam melhor quando a página é entregue por HTTP.

Um servidor local atende apenas durante o desenvolvimento. O endereço localhost aponta para o próprio computador.

Com Python

Se Python estiver instalado, abra um terminal dentro da pasta do projeto e execute:

POWERSHELL

python -m http.server 8000 --bind 127.0.0.1

No navegador, abra http://localhost:8000/. Para encerrar, volte ao terminal e pressione Ctrl+C.

O parâmetro --bind 127.0.0.1 restringe o servidor ao próprio computador. Sem ele, algumas instalações escutam em todas as interfaces de rede, o que é desnecessário para este volume.

Com PHP

Se PHP estiver instalado, use o servidor de desenvolvimento embutido.

POWERSHELL

php -S 127.0.0.1:8000 -t .

Esse servidor é adequado para desenvolvimento e demonstrações controladas. Não o coloque na internet e não o use como servidor de produção.

Com o editor

Extensões de prévia podem iniciar um servidor local. Confira quem mantém a extensão, suas permissões e o endereço aberto. Prefira extensões conhecidas e evite instalar várias ferramentas que fazem a mesma coisa.

URL relativa e URL a partir da raiz

Em um servidor, / representa a raiz publicada. O endereço /css/styles.css funciona a partir de qualquer página, desde que o site esteja hospedado na raiz do domínio.

HTML

<link rel="stylesheet" href="/css/styles.css">

Se o projeto será publicado dentro de uma subpasta, como example.com/caderno/, um caminho relativo pode ser mais portátil. Escolha um padrão de acordo com a hospedagem e teste no endereço final.

Unidade 2 Primeiras regras CSS

CSS é uma lista de regras. Cada regra seleciona elementos e declara como devem ser apresentados.

CSS

p {
  color: #172033;
  line-height: 1.6;
}

p é o seletor. color e line-height são propriedades. #172033 e 1.6 são valores. Cada declaração termina com ponto e vírgula.

Conectar a folha de estilo

Crie css/styles.css e inclua a referência no <head> de todas as páginas.

HTML

<link rel="stylesheet" href="css/styles.css">

Em páginas dentro de blog, use ../css/styles.css se o projeto trabalha com caminhos relativos.

Seletores essenciais

CSS

/* elemento */
p { }

/* classe */
.cartao { }

/* identificador */
#conteudo { }

/* atributo */
a[aria-current] { }

/* elemento dentro de outro */
nav a { }

/* interação */
a:hover { }
a:focus-visible { }

Classes podem ser reutilizadas. Um id deve ser único na página. Para estilo, prefira classes e seletores sem muita profundidade. Reserve id para destinos de links, relação entre rótulo e campo ou casos realmente únicos.

Primeira base visual

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}

body {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  color: #172033;
  background: #f7f4ed;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

Unidade 3 Cascata herança e especificidade

O nome Cascading Style Sheets indica que várias regras podem disputar o mesmo elemento. O navegador decide qual declaração vence usando origem, importância, especificidade e ordem.

Ordem

Se dois seletores têm a mesma força, a declaração posterior vence.

CSS

p { color: navy; }
p { color: darkgreen; }

O parágrafo ficará verde escuro.

Especificidade

Um seletor de classe costuma ter mais especificidade que um seletor de elemento.

CSS

p { color: navy; }
.aviso { color: darkred; }

HTML

<p class="aviso">Confira o horário de retorno.</p>

O texto ficará vermelho escuro. Evite aumentar especificidade sem necessidade. Seletores como main section article p.aviso dificultam manutenção.

Herança

Algumas propriedades, como color e font-family, passam do elemento pai para os descendentes. Outras, como margin, não.

CSS

body {
  color: #172033;
  font-family: system-ui, sans-serif;
}

Os textos internos herdam essas propriedades, salvo regra mais específica.

O uso de important

!important altera a prioridade e pode tornar o código difícil de corrigir.

CSS

.aviso { color: red !important; }

Não use como primeira solução. Descubra qual regra está vencendo nas ferramentas do navegador e simplifique os seletores.

Unidade 4 Cores e variáveis

CSS aceita cores por palavra-chave, hexadecimal, rgb(), hsl() e outros formatos. Escolha um conjunto curto e teste contraste.

CSS

:root {
  --cor-fundo: #f7f4ed;
  --cor-superficie: #ffffff;
  --cor-texto: #172033;
  --cor-suave: #667085;
  --cor-destaque: #0f766e;
  --cor-borda: #cbd5df;
}

Propriedades personalizadas começam com -- e são usadas por var().

CSS

body {
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

a {
  color: var(--cor-destaque);
}

Contraste

Texto precisa se destacar do fundo. Não confie apenas na percepção pessoal; use uma ferramenta de contraste e teste estados normal, visitado, foco e hover. Texto pequeno exige cuidado maior.

Cor não pode ser a única pista

Um erro de formulário não deve ser indicado apenas por borda vermelha. Inclua uma mensagem textual. O item atual do menu pode combinar cor com peso de fonte ou sublinhado.

CSS

a[aria-current="page"] {
  font-weight: 700;
  text-decoration-thickness: 0.2em;
}

Unidade 5 Tipografia

Família de fontes

Uma pilha de fontes oferece alternativas.

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

code,
pre {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

Fontes do sistema carregam rápido. Uma fonte web precisa ser baixada e pode causar atraso ou mudança de layout. Use poucas famílias e pesos.

Tamanho e altura de linha

rem se baseia no tamanho raiz. Para texto, é uma unidade acessível porque respeita preferências do navegador.

CSS

body {
  font-size: 1rem;
  line-height: 1.65;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
}

clamp() define mínimo, valor flexível e máximo. O título cresce com a tela sem ficar minúsculo ou enorme.

Comprimento de linha

Linhas muito longas cansam. Limite artigos por caracteres.

CSS

main {
  max-width: 72ch;
}

ch aproxima a largura do caractere zero da fonte. Um intervalo entre 55 e 75 caracteres por linha costuma ser confortável para texto contínuo, mas o melhor valor depende da fonte e do público.

Fonte web

Se você usar @font-face, ofereça formatos modernos e defina font-display.

CSS

@font-face {
  font-family: "Fonte do Projeto";
  src: url("../fontes/fonte-projeto.woff2") format("woff2");
  font-display: swap;
}

Confirme a licença da fonte antes de redistribuir o arquivo.

Unidade 6 Modelo de caixa

Todo elemento gera uma caixa com conteúdo, preenchimento, borda e margem.

CSS

.cartao {
  width: 20rem;
  padding: 1.25rem;
  border: 1px solid #cbd5df;
  margin-block: 1rem;
}

Com o padrão histórico content-box, width mede apenas o conteúdo. A regra abaixo faz width incluir preenchimento e borda, o que simplifica cálculos.

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

Margem e preenchimento

Margem separa caixas. Preenchimento cria espaço dentro da borda. Não use espaços no HTML para posicionar conteúdo.

CSS

section {
  margin-block: 2rem;
}

.cartao {
  padding: 1.25rem;
}

Propriedades lógicas como margin-block e padding-inline descrevem eixos de escrita e funcionam melhor em idiomas com outras direções.

Bordas e cantos

CSS

.cartao {
  border: 1px solid var(--cor-borda);
  border-radius: 0.75rem;
  background: var(--cor-superficie);
}

Sombras não devem ser a única forma de identificar limites, pois podem desaparecer em telas ou condições de contraste diferentes.

Unidade 7 Imagens e conteúdo incorporado

Imagens flexíveis

CSS

img {
  max-width: 100%;
  height: auto;
}

Essa regra impede que uma imagem fique mais larga que seu recipiente. Informe width e height no HTML para preservar a proporção durante o carregamento.

Imagens responsivas

srcset oferece arquivos com resoluções diferentes. sizes informa quanto espaço a imagem deve ocupar.

HTML

<img
  src="imagens/caminho-800.webp"
  srcset="
    imagens/caminho-480.webp 480w,
    imagens/caminho-800.webp 800w,
    imagens/caminho-1400.webp 1400w
  "
  sizes="(max-width: 48rem) 100vw, 48rem"
  alt="Caminho de terra entre árvores altas"
  width="1400"
  height="933"
>

O navegador escolhe uma fonte compatível com a largura e a densidade da tela. Não crie variantes artificiais ampliando uma imagem pequena.

Áudio e vídeo próprios

HTML

<video controls preload="metadata" width="1280" height="720">
  <source src="midia/trilha.mp4" type="video/mp4">
  <track
    kind="captions"
    src="midia/trilha-pt-br.vtt"
    srclang="pt-BR"
    label="Português"
    default
  >
  Seu navegador não conseguiu reproduzir o vídeo.
</video>

Use controls para oferecer reprodução, pausa e volume. Legendas em WebVTT beneficiam pessoas surdas, ambientes barulhentos e quem ainda aprende o idioma. Evite reprodução automática com som.

Iframe

<iframe> incorpora outra página. Use apenas provedores confiáveis, inclua title, limite permissões e permita que a moldura se ajuste.

HTML

<div class="video-responsivo">
  <iframe
    src="https://www.youtube-nocookie.com/embed/ID_DO_VIDEO"
    title="Demonstração de uma página responsiva"
    loading="lazy"
    allow="accelerometer; encrypted-media; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

CSS

.video-responsivo {
  aspect-ratio: 16 / 9;
}

.video-responsivo iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

Conteúdo de terceiros pode criar cookies, rastreamento e tráfego adicional. Leia os termos do provedor e, quando possível, carregue apenas após a pessoa escolher reproduzir.

Details e summary

Para conteúdo que abre e fecha, prefira os elementos nativos.

HTML

<details>
  <summary>Quanto tempo leva uma trilha curta</summary>
  <p>O tempo depende de distância, terreno, clima e ritmo do grupo.</p>
</details>

Unidade 8 Flexbox

Flexbox organiza itens em uma dimensão por vez: linha ou coluna. É adequado para menus, grupos de botões, cartões em uma faixa e alinhamento de pequenos componentes.

CSS

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

Eixos

flex-direction: row cria eixo principal horizontal no modo de escrita usual do português. column muda o eixo principal para vertical. justify-content trabalha no eixo principal; align-items trabalha no eixo transversal.

CSS

.acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Crescer e diminuir

CSS

.acoes a {
  flex: 1 1 12rem;
}

Os três valores representam crescimento, redução e tamanho-base. Não aplique flex: 1 automaticamente; textos e controles podem precisar de larguras diferentes.

Ordem visual

A propriedade order muda a posição visual sem alterar o HTML. Isso pode criar uma ordem de teclado diferente da ordem mostrada. Prefira corrigir a sequência no documento.

Unidade 9 Grid

CSS Grid organiza linhas e colunas ao mesmo tempo. Ele é apropriado para galerias, conjuntos de cartões e regiões maiores de layout.

CSS

.grade-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}

repeat() repete uma definição de coluna. auto-fit cria quantas colunas couberem. minmax() limita cada trilha entre um mínimo e um máximo. 1fr distribui o espaço disponível.

Grid simples para conteúdo e lateral

CSS

.layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
  gap: 2rem;
}

Em tela estreita, volte a uma coluna.

CSS

@media (max-width: 48rem) {
  .layout {
    grid-template-columns: 1fr;
  }
}

Use minmax(0, ...) quando um conteúdo longo poderia impedir a coluna de encolher.

Unidade 10 Design responsivo

Um layout responsivo se adapta ao espaço disponível. Ele não é uma versão separada para celular; é o mesmo conteúdo com dimensões e arranjos flexíveis.

Começar pela tela estreita

Escreva primeiro a versão em uma coluna. Acrescente colunas quando houver espaço.

CSS

.grade-artigos {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .grade-artigos {
    grid-template-columns: repeat(2, 1fr);
  }
}

Larguras seguras

Evite dimensões fixas maiores que a tela.

CSS

.cartao {
  width: min(100%, 32rem);
}

No Grid, min(100%, 16rem) impede que o tamanho mínimo ultrapasse um recipiente estreito.

Testar tamanhos reais

Use o modo responsivo das ferramentas do navegador, mas também redimensione a janela e teste um telefone quando possível. Procure:

• Rolagem horizontal indesejada.
• Texto pequeno demais.
• Botões difíceis de tocar.
• Menus que saem da tela.
• Imagens distorcidas.
• Linhas longas ou muito curtas.

Unidade 11 Temas e preferências

Modo escuro

CSS

:root {
  color-scheme: light;
  --cor-fundo: #f7f4ed;
  --cor-superficie: #ffffff;
  --cor-texto: #172033;
  --cor-destaque: #0f766e;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --cor-fundo: #111827;
    --cor-superficie: #1f2937;
    --cor-texto: #f3f4f6;
    --cor-destaque: #67e8f9;
  }
}

Teste imagens, bordas, código, links visitados e controles nos dois temas. Se o site oferece um botão manual, ele deve respeitar e salvar a escolha da pessoa; isso exigirá JavaScript, assunto fora do foco principal.

Movimento reduzido

Animações podem causar desconforto. Respeite a preferência de movimento reduzido.

CSS

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Use animação apenas quando ela explica uma mudança ou melhora orientação. Não dependa dela para transmitir uma informação.

Contraste forçado e impressão

Não remova contornos nativos sem substituição visível. Teste impressão com @media print e confirme que texto não some por usar cor clara sobre fundo removido.

Unidade 12 Ferramentas do navegador

Abra as ferramentas com F12 ou pelo menu do navegador. Quatro painéis resolvem grande parte dos problemas iniciais.

Elementos

Selecione uma parte da página e veja o HTML interpretado. Edite uma classe ou texto temporariamente para testar. Mudanças feitas ali somem ao recarregar; copie a solução para o arquivo real.

Estilos

Veja quais regras atingem o elemento. Declarações riscadas perderam na cascata ou são inválidas. O painel costuma mostrar arquivo e linha de origem.

Rede

Recarregue a página com o painel aberto. Um status 404 indica arquivo não encontrado. Confira caminho, nome, maiúsculas e se o recurso foi enviado ao servidor.

Console

O console mostra erros de JavaScript e alguns problemas de carregamento. Leia a primeira mensagem, abra o arquivo e a linha indicados e teste uma correção por vez.

Alterações temporárias

As ferramentas são um laboratório. Ajuste padding, gap, cor e largura até encontrar um valor. Depois altere styles.css, salve e recarregue para confirmar.

Unidade 13 Acessibilidade

Acessibilidade começa com HTML semântico e conteúdo claro. ARIA complementa lacunas, mas não deve substituir elementos nativos que já possuem significado e comportamento.

Idioma e títulos

Use lang="pt-BR", um <title> específico e títulos em ordem. Cada página precisa explicar seu assunto sem depender do menu.

Teclado e foco

Não remova outline sem criar um foco equivalente.

CSS

:focus-visible {
  outline: 3px solid #e6a817;
  outline-offset: 3px;
}

Percorra a página com Tab. A ordem deve acompanhar o conteúdo. Menus, <details>, links, campos e botões nativos já oferecem comportamento de teclado; elementos genéricos com eventos improvisados não.

Link para pular conteúdo

Um link no início ajuda quem usa teclado a ignorar o menu repetido.

HTML

<a class="pular" href="#conteudo">Pular para o conteúdo</a>

<main id="conteudo">
  ...
</main>

CSS

.pular {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
}

.pular:focus {
  inset-block-start: 1rem;
}

Imagens e mídia

Imagens informativas precisam de alt. Vídeos precisam de legendas sincronizadas; áudios precisam de transcrição quando carregam informação. Não use texto dentro de imagens como única fonte de conteúdo.

Formulários

Mantenha rótulos visíveis, instruções próximas e mensagens de erro específicas. Use autocomplete adequado. Não marque placeholder como substituto de label: ele desaparece quando a pessoa digita e costuma ter contraste fraco.

Zoom e reflow

Amplie o navegador a 200 por cento. O conteúdo deve continuar legível, sem sobreposição e sem exigir rolagem horizontal para parágrafos comuns.

Unidade 14 Desempenho e organização

Um site rápido exige menos espera e menos dados móveis. Comece pelo básico.

Imagens

• Redimensione para perto do maior tamanho de exibição.
• Use formatos adequados como WebP AVIF JPEG PNG ou SVG conforme o conteúdo.
• Comprima sem destruir detalhes importantes.
• Use loading="lazy" em imagens abaixo da primeira tela.
• Não aplique lazy loading à principal imagem visível se isso atrasar a apresentação. HTML

<img
  src="imagens/mapa-resumido.webp"
  alt="Mapa resumido com início e fim do percurso"
  width="960"
  height="640"
  loading="lazy"
>

CSS

Mantenha uma folha principal pequena. Remova regras abandonadas. Não importe um framework inteiro para usar dois componentes. Quando usar código de terceiros, fixe uma versão e registre a origem.

Fontes

Fontes do sistema não exigem download. Se usar fonte web, reduza famílias e pesos, sirva WOFF2 e verifique a licença.

Estrutura de arquivos

PLAINTEXT

caderno-trilhas/
├── index.html
├── sobre.html
├── curriculo.html
├── contato.html
├── divertido.html
├── blog/
│   ├── index.html
│   └── primeira-caminhada.html
├── css/
│   └── styles.css
├── imagens/
└── midia/

Nomes claros e pastas curtas reduzem erros. Evite arquivos como style-final-novo-2.css; use controle de versão para guardar histórico quando o projeto crescer.

Unidade 15 Projeto e avaliação

Prática guiada

Crie ou substitua css/styles.css com uma base própria. O site precisa ter:

• Paleta definida por propriedades personalizadas.
• Texto com altura de linha confortável e largura limitada.
• Imagens fluidas.
• Navegação Flexbox com quebra de linha.
• Uma grade responsiva para artigos ou cartões.
• Foco visível.
• Tema escuro baseado na preferência do sistema.
• Regra de impressão para o currículo.
• Um vídeo responsivo ou um bloco <details>.

Folha de referência

CSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --fundo: #f7f4ed;
  --superficie: #ffffff;
  --texto: #172033;
  --suave: #667085;
  --destaque: #0f766e;
  --borda: #cbd5df;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
}

body {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem;
  color: var(--texto);
  background: var(--fundo);
}

header,
main,
footer {
  max-width: 72ch;
  margin-inline: auto;
}

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

a {
  color: var(--destaque);
}

a[aria-current="page"] {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid #e6a817;
  outline-offset: 3px;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.grade-artigos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.cartao {
  padding: 1rem;
  border: 1px solid var(--borda);
  border-radius: 0.75rem;
  background: var(--superficie);
}

.video-responsivo {
  aspect-ratio: 16 / 9;
}

.video-responsivo iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fundo: #111827;
    --superficie: #1f2937;
    --texto: #f3f4f6;
    --suave: #cbd5e1;
    --destaque: #67e8f9;
    --borda: #475569;
  }
}

@media print {
  nav,
  footer {
    display: none;
  }

  body {
    max-width: none;
    color: #000;
    background: #fff;
  }
}

Testes obrigatórios

**1. **Inicie o servidor em 127.0.0.1.

**2. **Abra todas as páginas pelo endereço localhost.

**3. **Teste larguras de 320 768 e 1280 pixels.

**4. **Navegue apenas com teclado.

**5. **Ative os temas claro e escuro do sistema.

**6. **Use zoom de 200 por cento.

**7. **Abra a visualização de impressão do currículo.

**8. **Verifique Rede e Console nas ferramentas do navegador.

Questões de revisão

**1. **Qual é a diferença entre seletor propriedade e valor?

**2. **O que faz uma declaração perder na cascata?

**3. **Por que box-sizing: border-box simplifica tamanhos?

**4. **Quando escolher Flexbox e quando escolher Grid?

**5. **Para que serve uma media query?

**6. **Por que max-width: 100% é útil em imagens?

**7. **Qual é o risco de remover outline?

**8. **Por que o servidor embutido deve ficar em 127.0.0.1?

**9. **O que procurar quando a aba Rede mostra 404?

Respostas comentadas

**1. **O seletor escolhe elementos, a propriedade identifica o aspecto e o valor define a configuração.

**2. **Origem, importância, especificidade ou uma regra posterior de mesma força podem alterar o resultado.

**3. **A largura passa a incluir preenchimento e borda, reduzindo cálculos inesperados.

**4. **Flexbox trabalha bem em uma dimensão; Grid controla linhas e colunas.

**5. **Aplica regras quando uma condição do dispositivo ou da janela é atendida.

**6. **Impede que a imagem ultrapasse o recipiente e cause rolagem horizontal.

**7. **A pessoa que navega por teclado perde a indicação de onde está.

**8. **Esse endereço limita o acesso ao computador local e evita exposição desnecessária na rede.

**9. **Um caminho nome extensão diferença de maiúsculas ou arquivo não enviado.

Referências técnicas