<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Título</title>
</head>
<body>
Conteúdo aqui
</body>
</html>| Tag | Descrição |
|---|---|
| <html> | Raiz do documento |
| <head> | Metadados e links |
| <body> | Conteúdo visível |
| <header> | Cabeçalho |
| <nav> | Navegação |
| <main> | Principal conteúdo |
| <section> | Seções de conteúdo |
| <article> | Artigo independente |
| <aside> | Conteúdo lateral |
| <footer> | Rodapé |
| <div> | Contêiner genérico |
| <span> | Texto inline |
| Tag | Descrição |
|---|---|
| <h1> a <h6> | Títulos |
| <p> | Parágrafo |
| <a href=""> | Link |
| <img src=""> | Imagem |
| <ul>, <ol>, <li> | Listas |
| <strong>, <em> | Negrito e itálico semântico |
| <br> | Quebra de linha |
| <hr> | Linha horizontal |
| Tag | Descrição |
|---|---|
| <form> | Formulário |
| <input> | Campo de entrada |
| <label> | Rótulo para input |
| <textarea> | Área de texto |
| <button> | Botão |
| <select>, <option> | Menu suspenso |
Formas de uso:
<p style="color:red;"><style> ... </style><link rel="stylesheet" href="style.css">Seletores:
* { }
body { }
h1 { }
.class { }
#id { }Propriedades CSS comuns:
| Propriedade | Exemplo |
|---|---|
| color | color: red; |
| background-color | background-color: blue; |
| font-size | font-size: 16px; |
| font-family | font-family: Arial; |
| text-align | text-align: center; |
| margin | margin: 20px; |
| padding | padding: 10px; |
| border | border: 1px solid black; |
| display | display: flex; |
| Propriedade | Descrição | Exemplo |
|---|---|---|
| box-shadow | Sombra ao redor do elemento | box-shadow: 2px 2px 5px rgba(0,0,0,0.2); |
| background-image | Imagem de fundo | background-image: url('img.jpg'); |
| margin | Espaço externo | margin: 20px 10px; |
| padding | Espaço interno | padding: 10px 20px; |
| border-radius | Arredonda bordas | border-radius: 8px; |
| text-shadow | Sombra no texto | text-shadow: 1px 1px 3px gray; |
| position | Posicionamento (static, relative, absolute, fixed) | position: absolute; |
| z-index | Camada de sobreposição | z-index: 10; |
| transition | Animação suave de propriedades | transition: all 0.3s ease; |
button:hover { background-color: green; }
@media (max-width: 768px) {
body { font-size: 14px; }
}
display: flex;
justify-content: center; /* Alinha no eixo principal */
align-items: center; /* Alinha no eixo cruzado */Outros valores úteis:
flex-direction: row | column;gap: 10px; (espaço entre itens)flex-wrap: wrap; (quebra em várias linhas)display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;1fr significa "1 fração" do espaço disponívelgrid-template-rows define linhasgrid-column e grid-row posicionam os elementos| Unidade | Uso |
|---|---|
| px | Pixels – tamanho fixo |
| % | Porcentagem – relativo ao elemento pai |
| em | Relativo ao tamanho da fonte atual |
| rem | Relativo ao tamanho da fonte da raiz (html) |
| vh / vw | Altura e largura da tela (viewport) |
@keyframes desvanecer {
from { opacity: 0; }
to { opacity: 1; }
}
.elemento {
animation: desvanecer 1s ease-in-out;
}:root {
--cor-primaria: #3498db;
--tamanho-fonte: 16px;
}
body {
color: var(--cor-primaria);
font-size: var(--tamanho-fonte);
}Útil para manter estilos consistentes e fáceis de alterar.
*O seletor * aplica estilos a todos os elementos da página. Muito usado para resetar margens e paddings padrão dos navegadores.
/* Reset básico recomendado */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}Dica: coloque esse reset no início do seu CSS para ter mais controle sobre o layout.
::before e ::afterOs pseudo-elementos permitem estilizar partes específicas de um elemento, como adicionar conteúdo antes ou depois dele.
h1::before {
content: "👉 ";
color: red;
}
p::after {
content: " ✔️";
color: green;
}
p::first-letter {
font-size: 2rem;
color: darkblue;
}
p::first-line {
font-weight: bold;
}::before – Adiciona conteúdo antes do elemento::after – Adiciona conteúdo depois do elemento::first-letter – Estiliza apenas a primeira letra::first-line – Estiliza apenas a primeira linhaImportante: para ::before e ::after, é obrigatório usar content: "";.
Você pode aplicar uma imagem como fundo de um elemento usando a propriedade background-image.
body {
background-image: url("caminho/da-imagem.jpg");
background-size: cover; /* cobre toda a área */
background-position: center; /* centraliza a imagem */
background-repeat: no-repeat; /* evita repetição */
}background-size: cover – A imagem cobre todo o elementobackground-position: center – Centraliza a imagembackground-repeat: no-repeat – Evita que a imagem se repitaO efeito parallax dá a sensação de profundidade, fazendo com que o fundo pareça se mover mais lentamente que o conteúdo ao rolar a página.
.parallax {
background-image: url("caminho/da-imagem.jpg");
height: 400px;
background-attachment: fixed; /* fixa o fundo */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Use a classe parallax em uma <div> para criar o efeito:
<div class="parallax"></div>Nota: o efeito background-attachment: fixed pode não funcionar em dispositivos móveis, então teste em diferentes navegadores.