UA5 — CSS3: Avançado e Responsividade — Responsive Web Development

UA5 — CSS3: Avançado e Responsividade

CSS3 adicionou Flexbox, Grid, variáveis, animações e media queries — as ferramentas centrais do design responsivo moderno.

Flexbox

Ideal para layouts em uma dimensão (linha ou coluna):

.container {
  display: flex;
  justify-content: space-between; /* eixo principal */
  align-items: center;          /* eixo cruzado */
  flex-wrap: wrap;              /* quebra linha se necessário */
  gap: 1rem;
}

CSS Grid

Ideal para layouts em duas dimensões (linhas e colunas):

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 colunas iguais */
  grid-template-rows: auto;
  gap: 1.5rem;
}

/* Item ocupando 2 colunas */
.destaque {
  grid-column: 1 / 3;
}

Media Queries — Responsividade

/* Mobile first: estilos base são para mobile */
.card { width: 100%; }

/* Tablet */
@media (min-width: 768px) {
  .card { width: 48%; }
}

/* Desktop */
@media (min-width: 1024px) {
  .card { width: 30%; }
}

Variáveis CSS (Custom Properties)

:root {
  --cor-primaria: #3b82f6;
  --espaco-base: 1rem;
  --fonte-titulo: 'Inter', sans-serif;
}

h1 {
  color: var(--cor-primaria);
  font-family: var(--fonte-titulo);
  margin-bottom: var(--espaco-base);
}

Transições e Animações

/* Transição suave */
button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s;
}
button:hover {
  background: #1d4ed8;
  transform: scale(1.05);
}

/* Animação com keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card { animation: fadeIn 0.4s ease; }

Propriedades de texto em CSS3

Propriedade	O que faz	Exemplo de valor
`font-family`	Família tipográfica	`’Inter’, Arial, sans-serif` (fallback em cadeia)
`font-size`	Tamanho da fonte	`16px` \| `1rem` \| `medium`
`font-weight`	Espessura (negrito)	`normal` \| `bold` \| `100–900`
`color`	Cor do texto	`#333` \| `rgb(0,0,0)` \| `black`
`text-align`	Alinhamento	`left` \| `right` \| `center` \| `justify`
`text-decoration`	Decoração	`none` \| `underline` \| `line-through`
`text-indent`	Recuo da 1ª linha	`2em`
`line-height`	Altura da linha	`1.5` (sem unidade = multiplicador)
`letter-spacing`	Espaço entre caracteres	`0.05em`

Formatando Textos e Tipografia — font-family, color, text-align, line-height — Tipografia CSS: font-family, color, font-size, text-align, line-height

Propriedades de caixa (Box)

Todo elemento HTML é uma caixa. As propriedades abaixo controlam suas dimensões e aparência:

Propriedade	O que faz
`width` / `height`	Largura e altura do conteúdo
`padding`	Espaço interno entre conteúdo e borda
`border`	Borda — espessura, tipo e cor: `2px solid #ccc`
`margin`	Espaço externo entre o elemento e os vizinhos
`box-sizing: border-box`	Padding e border incluídos na `width` — evita cálculos manuais
`box-shadow`	Sombra: `0 4px 12px rgba(0,0,0,.15)`
`background`	Cor, imagem ou gradiente: `linear-gradient(135deg, #667eea, #764ba2)`
`transform`	Rotação, escala, translação: `rotate(45deg)` \| `scale(1.1)` \| `translateX(20px)`
`position`	`static` \| `relative` \| `absolute` \| `fixed` \| `sticky`

Media Queries — lógica de responsividade — Magia responsiva: @media adapta o layout ao tamanho da tela

Media Query — operadores e características

Operador	Uso	Exemplo
`and`	Todas as condições devem ser verdadeiras	`@media (min-width: 800px) and (orientation: landscape)`
`or` / `,`	Pelo menos uma condição verdadeira	`@media screen, (min-width: 900px)`
`not`	Nega a condição	`@media not (monochrome)`
`only`	Aplica só em navegadores com suporte a media query	`@media only screen and (color)`

Breakpoints comuns — referência

Tamanho	Faixa típica	Estratégia
Mobile	até 767px	Estilos base (mobile-first)
Tablet	768px – 1023px	`@media (min-width: 768px)`
Desktop	1024px – 1279px	`@media (min-width: 1024px)`
Wide	1280px+	`@media (min-width: 1280px)`

Síntese: A Anatomia de uma Página Moderna — Síntese: CSS + HTML + responsividade — a anatomia de uma página moderna

Práticas Modernas — CSS3 e Responsividade

Container Queries (@container): enquanto media queries respondem ao tamanho da viewport, container queries respondem ao tamanho do elemento pai — revolução para componentes reutilizáveis em diferentes contextos de layout. @layer (Cascade Layers): permite organizar regras CSS em camadas com precedência controlada, acabando com guerras de especificidade em projetos grandes. prefers-color-scheme: media query que detecta se o usuário usa tema escuro no sistema — @media (prefers-color-scheme: dark) { ... } prefers-reduced-motion: detecta usuários que solicitaram menos animações — essencial para acessibilidade.

Dicas para a prova — UA5

Seletor de classe = ponto (.nome) — pode ser usado em múltiplos elementos. Seletor de Id = sustenido (#nome) — único por página.
Um elemento pode ter várias classes: class="destaque texto-grande". Quando propriedades conflitam, prevalece a classe declarada primeiro no CSS.
box-sizing: border-box garante que padding e border sejam incluídos na width — evita que a caixa “estoure” o layout.
Mobile-first: estilos base são para mobile; use min-width para ampliar. Desktop-first é o contrário: max-width para reduzir.
Media query pode ser declarada na tag <link> ou dentro do arquivo CSS com @media.
font-family usa lista de fallback — navegador usa a primeira fonte disponível no sistema do usuário.

Referências bibliográficas desta UA

Saraiva, M. O. Desenvolvimento de Sistemas com PHP. Porto Alegre: SAGAH, 2018.
Silva, M. S. CSS3. São Paulo: Novatec, 2012.

UA4 — CSS: Fundamentos UA6 — Definição do Sistema