Box Model
O box model define uma série de formatações que vão desde:
- Bordas
- Margens internas e externas
- Comprimento dos componentes
07/04/2025 - por Ely Miranda - ↑
Campos Mais Modernos
07/04/2025 - por Ely Miranda - ↑
Formulário Clássicos de Busca
Busca no google
Busca no Mercado Livre
Busca na Amazon
07/04/2025 - por Ely Miranda - ↑
Tabelas
Uma tabela é uma coleção de dados organizados em linhas e colunas.
Uma tabela pode ter um cabeçalho, um corpo e um rodapé.
Uma tabela pode ter bordas, espaçamento e preenchimento.
Uma tabela pode ter células mescladas.
Uma tabela simples com apenas cabeçalho, linhas e colunas:
| Nome | Idade | Cidade |
|---|---|---|
| João | 25 | Teresina |
| Maria | 35 | Teresina |
| José | 35 | Teresina |
Uma tabela simples como a anterior, porém com mais dados e linhas zebradas
| Nome | Idade | Cidade |
|---|---|---|
| João | 25 | Teresina |
| Maria | 30 | Teresina |
| José | 35 | Teresina |
| José | 35 | Teresina |
Tabela zebrada, com cabeçalho, colunas e linhas expandidas
| Nome | Idade | Cidade |
|---|---|---|
| João | 25 | Teresina |
| Maria | 30 | Teresina |
| José | 35 | Teresina |
| Total de peessoas: 3 | ||
07/04/2025 - por Ely Miranda - ↑
Lista de Links
07/04/2025 - por Ely Miranda - ↑
Listas
Listas não Ordenadas
- Maçã
- Laranja
- Banana
Listas Ordenadas
- Organizar tasks
- Passar no supermercado
- Vir ao IFPI
Listas com imagens
- Maçã
- Laranja
- Banana
- Definição de Lista
- Uma lista é uma coleção de itens.
- Definição de lista não ordenada
- Uma lista não ordenada é uma coleção de itens sem ordem específica.
- Definição de lista ordenada
- Uma lista ordenada é uma coleção de itens com ordem específica.
Listas Aninhadas
- Maçã
- Verde
- Vermelha
- Laranja
- Bahia
- Serra
- Banana
- Prata
- Nanica
07/04/2025 - por Ely Miranda - ↑
Alinhamentos
Justificado - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus amet accusamus placeat perspiciatis, id libero doloremque quos dolor aliquam adipisci consequatur, quasi quae quam quas non minima. Atque, cupiditate sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perferendis odio inventore cupiditate tempore placeat porro esse iste consequatur, quibusdam accusantium hic, architecto et debitis reiciendis non adipisci. Quo, sed! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quam? Commodi illo ea laudantium asperiores, expedita explicabo vel officia incidunt maxime nam, fuga similique! Inventore sunt doloribus reprehenderit iusto quos.
07/04/2025 - por Ely Miranda - à direita
Espaçamentos
Espaçamento entre linhas de 2.0: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus amet accusamus placeat perspiciatis, id libero doloremque quos dolor aliquam adipisci consequatur, quasi quae quam quas non minima. Atque, cupiditate sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perferendis odio inventore cupiditate tempore placeat porro esse iste consequatur, quibusdam accusantium hic, architecto et debitis reiciendis non adipisci. Quo, sed! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quam? Commodi illo ea laudantium asperiores, expedita explicabo vel officia incidunt maxime nam, fuga similique! Inventore sunt doloribus reprehenderit iusto quos.
Espaçamento entre letras de 2.0: adipisci consequatur, quasi quae quam quas non minima. Atque, cupiditate sit? Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat perferendis odio inventore cupiditate tempore placeat porro esse iste consequatur, quibusdam accusantium hic, architecto et debitis reiciendis non adipisci. Quo, sed! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quam? Commodi illo ea laudantium asperiores, expedita explicabo vel officia incidunt maxime nam, fuga similique! Inventore sunt doloribus reprehenderit iusto quos.
07/04/2025 - Ely Miranda - ↑
Fontes
Algumas Fontes:
times - Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor debitis, veritatis ex facere dolorem vitae id magni mollitia dolores, doloribus eligendi nobis reiciendis unde alias voluptas consequuntur consequatur, quo provident!
arial (configurada na definição body no CSS) - Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consectetur praesentium doloribus architecto aperiam harum? Optio iste laudantium tenetur, consectetur blanditiis soluta quia qui mollitia nisi saepe unde iusto numquam consequuntur.
verdana - Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam possimus aspernatur quaerat dignissimos eos debitis sit vitae, exercitationem earum quod et consequuntur nihil quasi molestias perspiciatis fuga. Atque, mollitia placeat!
playwrite - Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti officiis quibusdam delectus maxime, sint consectetur soluta possimus porro incidunt necessitatibus, in recusandae sunt quisquam dignissimos consequatur. Sit mollitia animi enim.
Monoespaçadas - asdfghjklç
Monoespaçadas - ~i909099OO
07/04/2025 - por Ely Miranda - ↑
Cores
Testo vermelho
Texto verde
Texto azul
Texto cinza claro
Texto cinzaescuro
07/04/2025 - por Ely Miranda - ↑
Formatação de textos em CSS
Um exemplo de texto em negrito
Um exemplo de texto em itálico
Um exemplo de texto em >sublinhado
07/04/2025 - por Ely Miranda - ↑
Símbolos
A tag < html > diz que o documento é HTML
Símbolo do Euro: €
Símbolo do Iene: ¥
Copyright: ©
Trade mark: ™
Omega: ω
Emojis: 🙂
07/04/2025 - por Ely Miranda - ↑
Sobre o IFPI
Esta é a logomarca do IFPI
07/04/2025 - por Ely Miranda - ↑
Formatação de textos
Um exemplo de texto em negrito
Um exemplo de texto em itálico
Um exemplo de texto em sublinhado
07/04/2025 - por Ely Miranda - ↑
Minha primeira postagem
Hello Wold! Esta é minha primeira postagem
07/04/2025 - por Ely Miranda - ↑