.jpg)
Seja muito bem-vindo à Academy Code Christ!
🌍 Academy Code Christ está disponível em vários idiomas.
Fique à vontade para usar o tradutor na Barra lateral (Sidebar) e aprender no seu idioma.
📚 Continue sua jornada de aprendizado
%20-%20Copia.png)
A Academy Code Christ oferece trilhas de aprendizado em diferentes tecnologias. Explore os cursos, acompanhe as aulas e avance em sua jornada de conhecimento.
📋 Menus correspondentes:
.png)
💻 Pratique o que você aprende
%20-%20Copia.png)
.png)
.png)
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
Para facilitar seu aprendizado, utilize o Code Editor da Mr Digitals, um editor online que permite escrever códigos em HTML, CSS e JavaScript e visualizar os resultados diretamente no navegador.
🎨 Trabalhando com Cores no CSS
As cores são definidas usando diferentes formatos de valor.
Você pode escolher o método que facilita
sua leitura e controle de tonalidade.
🚀 Formas de definir cores:
|
Método |
Exemplo |
Descrição |
|
Nome da cor |
color: red; |
Lista de cores pré-definidas (ex. red, blue, black). |
|
RGB |
color: rgb(255, 0, 0); |
Define a cor usando os valores de Vermelho, Verde e Azul. |
|
RGBA |
color: rgba(255, 0, 0, 0.5); |
Igual ao RGB, mas com transparência (0 a 1). |
|
HEX |
color: #ff0000; |
Representa cores em formato hexadecimal (muito usado). |
|
HSL |
color: hsl(120, 100%, 50%); |
Define cores por matiz, saturação e luminosidade. |
💡 Exemplo prático:
h1 {
color: #0077cc;
}
p {
color: rgba(0, 0, 0, 0.8);
}
body {
background-color: hsl(200, 30%, 95%);
}
🌈 Degradês (Gradients)
Você pode criar transições suaves de cor usando linear-gradient() ou radial-gradient().
💡 Exemplo:
header {
background: linear-gradient(to right, #0066ff, #33ccff);
color: white;
padding: 20px;
text-align: center;
}
🔹 to right → o gradiente vai da esquerda para a
direita.
🔹 Pode usar até 3, 4 ou mais
cores!
✍️ Trabalhando com Fontes no CSS
A leitura é a base da comunicação visual. O CSS oferece total controle sobre fontes, tamanhos, estilos e espaçamento do texto.
📜 Propriedades básicas:
|
Propriedade |
Função |
|
font-family |
Define o tipo de fonte. |
|
font-size |
Controla o tamanho do texto. |
|
font-weight |
Define espessura (normal, bold, 400‑900). |
|
font-style |
Define estilo (normal, italic, oblique). |
|
line-height |
Define o espaçamento entre linhas. |
|
text-align |
Alinhamento do texto (left, center, right, justify). |
💡 Exemplo:
body {
font-family: 'Arial', sans-serif;
font-size: 16px;
color: #333;
line-height: 1.6;
}
h1 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
🔹 Tipos comuns de fontes seguras: Arial, Verdana, Georgia, Tahoma.
🔹 É possível combinar várias: font-family: 'Roboto',
Helvetica, sans-serif;
🧱 Tamanhos de Fonte e Unidades de Medida
|
Unidade |
Significado |
Exemplo |
|
px |
Pixels fixos |
font-size: 16px; |
|
% |
Relativo ao tamanho do elemento pai |
font-size: 120%; |
|
em |
Relativo à fonte do elemento pai |
font-size: 1.5em; |
|
rem |
Relativo à fonte do elemento raiz (html) |
font-size: 2rem; |
|
vh / vw |
Relativos à altura/largura da tela |
font-size: 5vw; |
💬 Boas práticas:
Prefira em ou rem para
responsividade e escalabilidade.
🔠Importando Fontes do Google Fonts
Você pode usar milhares de fontes gratuitas do Google Fonts.
💡 Passo 1: vá até fonts.google.com
Escolha uma fonte e copie o
link de importação.
💡 Passo 2: adicione no <head>:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
💡 Passo 3: aplique no CSS:
body {
font-family: 'Poppins', sans-serif;
}
✅ Simples, bonito e profissional!
🌍 Espaçamento — Margens, Preenchimentos e Box Model
O Box Model é a base visual do CSS:
cada elemento é uma “caixa” que possui margem,
borda, padding e conteúdo interno.
┌────────────────────────────┐
│ margin │ ← espaço externo
│ ┌────────────────────────┐ │
│ │ border │ │
│ │ ┌────────────────────┐ │ │
│ │ │ padding │ │ │ ← espaço interno
│ │ │ ┌────────────────┐ │ │ │
│ │ │ │ conteúdo │ │ │ │
│ │ │ └────────────────┘ │ │ │
│ │ └────────────────────┘ │ │
│ └────────────────────────┘ │
└────────────────────────────┘
🚀 Margem (margin)
Define o espaço fora da borda de um elemento.
section {
margin-top: 20px;
margin-bottom: 30px;
}
🧩 Padding
Define o espaço dentro do elemento, entre o conteúdo e a borda.
article {
padding: 15px;
}
🔲 Shorthand (atalhos)
● margin: 10px 20px 15px 5px; → (top, right, bottom, left)
● padding: 20px 10px; → (vertical, horizontal)
🔘 Bordas, Sombras e Arredondamentos
💡 Bordas:
div {
border: 2px solid #0077cc;
border-radius: 10px;
}
💡 Sombras:
div {
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
💬 Use com moderação — sombras sutis criam profundidade e destacam seções.
🧩 Espaçamento e Hierarquia Visual
Espaçamento adequado cria clareza e respiração
visual.
Evite páginas “apertadas”.
💡 Dica prática:
● Use espaçamentos proporcionais: por exemplo, 1.5rem entre parágrafos.
● Mantenha margens consistentes entre seções.
● Crie “blocos de leitura” com respiro visual.
🧠 Exemplo Completo – Página com Formatação Visual Avançada
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilo Visual - Aula 13</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%);
color: #333;
margin: 0;
line-height: 1.6;
}
header {
background-color: #0077cc;
color: white;
text-align: center;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
main {
max-width: 900px;
margin: 40px auto;
background: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
h1, h2 {
color: #0077cc;
margin-bottom: 15px;
}
p {
margin-bottom: 20px;
}
footer {
text-align: center;
background: #222;
color: #ddd;
padding: 15px;
margin-top: 40px;
}
@media (max-width: 600px) {
main {
margin: 20px;
padding: 20px;
}
}
</style>
</head>
<body>
<header>
<h1>Formatação Visual Avançada</h1>
</header>
<main>
<h2>Fontes e Cores</h2>
<p>Utilize cores harmoniosas e fontes legíveis. Um bom contraste garante maior conforto na leitura.</p>
<h2>Espaçamento e Hierarquia</h2>
<p>O espaçamento entre blocos cria ritmo visual. Elementos bem espaçados organizam e guiam o olhar do leitor.</p>
</main>
<footer>
<p>© 2024 - Curso HTML e CSS do Zero ao Avançado</p>
</footer>
</body>
</html>
✅ Layout moderno, legível e adaptável — usando apenas CSS básico.
✅ Gradiente, sombras, fontes e
espaçamento transformaram o design em algo profissional.
💻 Exercício Prático
Crie um arquivo estilo_visual.html contendo:
1. Um layout básico com cabeçalho, conteúdo e rodapé;
2. Uma paleta de cores harmônica (use #HEX ou HSL);
3. Importação de uma fonte do Google Fonts;
4. Aplicação de margens, paddings e sombras;
5. Ajuste de responsividade (mínimo @media para 768px).
✅ Desafio
Extra:
Use gradient no fundo e crie botões com efeito hover (:hover com mudança de
cor ou sombra).
💬 Conclusão da Aula
Hoje você aprendeu:
● Como aplicar cores, fontes, espaçamentos e sombras com CSS;
● A importância da hierarquia visual e harmonia cromática;
● Como importar e usar fontes profissionais;
● A construir páginas com legibilidade, elegância e consistência visual.
📚 Continue aprendendo CSS:
🎨 Etapa 3 👉 Box Model, Display e Posicionamento
🎨 Etapa 5 👉 Bordas, Sombreamentos e Efeitos Visuais
🎨 Etapa 6 👉 Pseudo-Classes e Pseudo-Elementos
🎨 Etapa 7 👉 Flexbox: Layouts Flexíveis e Responsivos
🎨 Etapa 8 👉 CSS Grid: Layouts de Grade Avançados
🎨 Etapa 9 👉 Responsividade eMedia Queries
🎨 Etapa 10 👉 Transições eAnimações no CSS
🎨 Etapa 11 👉 Efeitos Visuais: Gradientes, Sombras e Estilo Translúcido
🎨 Etapa 12 👉 Variáveis eFunções (CSS Custom Properties)
🎨 Etapa 13 👉 Layout Responsivo: Grid, Flexbox e Media Queries
🎨 Etapa 14 👉 Boas Práticas e Estrutura Profissional de Projeto CSS
🎨 Etapa 15 👉 Performance, Otimização e Boas Práticas Avançadas de CSS
.png)
.png)
Postar um comentário