Estrutura HTML
Hello World
Elementos Comuns
Texto e Títulos
Heading 1
...Heading 6
Paragraph text
Bold ItalicLinks e Imagens
Listas
- Item
- First
Formulários
Tipos de Input
Select e Textarea
HTML Semântico
| <header> | Conteúdo introdutório ou container de navegação |
| <nav> | Links de navegação |
| <main> | Conteúdo principal da página (um por página) |
| <section> | Agrupamento temático de conteúdo |
| <article> | Conteúdo autossuficiente |
| <aside> | Barra lateral ou conteúdo tangencial |
| <footer> | Rodapé de seção ou página |
| <figure> | Imagem/diagrama com legenda |
| <figcaption> | Legenda para |
Seletores CSS
Seletores Básicos
| element | p { } — todos os elementos |
| .class | .card { } — seletor de classe |
| #id | #main { } — seletor de id |
| * | Seletor universal (todos os elementos) |
Combinadores
| A B | Descendente (B dentro de A) |
| A > B | Apenas filho direto |
| A + B | Irmão adjacente (B logo após A) |
| A ~ B | Irmão geral (B após A) |
Pseudo-classes
| :hover | Mouse sobre o elemento |
| :focus | Elemento em foco |
| :first-child | Primeiro filho do pai |
| :nth-child(n) | Enésimo filho (2n = par, odd = ímpar) |
Box Model
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
Shorthand
| margin: 10px | Todos os lados |
| margin: 10px 20px | Topo/base | esquerda/direita |
| margin: 10px 20px 15px | Topo | esquerda/direita | base |
| margin: 10px 20px 15px 5px | Topo | direita | base | esquerda |
Flexbox
Container
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
Propriedades do Item
| flex: 1 | Crescer para preencher espaço disponível |
| flex-grow: 2 | Proporção de crescimento relativa aos irmãos |
| flex-shrink: 0 | Não encolher abaixo da base |
| flex-basis: 200px | Tamanho inicial antes de crescer/encolher |
| align-self: flex-end | Substituir alinhamento do container |
| order: -1 | Ordem visual (padrão 0) |
Grid
Container
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
Posicionamento de Item
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
Posicionamento
| static | Fluxo padrão (sem propriedades de deslocamento) |
| relative | Deslocamento da posição normal |
| absolute | Deslocamento do ancestral posicionado mais próximo |
| fixed | Deslocamento do viewport (permanece ao rolar) |
| sticky | Relativo até o limiar de rolagem, depois fixo |
Exemplo
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
Media Queries
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
Breakpoints Comuns
| 480px | Celulares pequenos |
| 768px | Tablets |
| 1024px | Desktops pequenos / tablets em paisagem |
| 1280px | Desktops |