Template inicial de CSS: configuração básica de fontes e fundo do site
📝 Uso
Este template mostra o código CSS para configurar a fonte e o fundo global em todo o site. O fundo é da cor azul claro (#e0f7fa) e a fonte é Arial com tamanho de 18px.
📘 Explicação
O código abaixo configura a fonte global, a cor do fundo e o tamanho da fonte na tag `body`. Isso garante que o mesmo estilo seja aplicado em todas as páginas do site, mantendo um design consistente.
🔹 Código parcial (Configuração de fonte e fundo)
/* Configuração global de fonte e fundo */
body {
font-family: 'Arial', sans-serif; /* Fonte */
background-color: #e0f7fa; /* Cor de fundo */
color: #333; /* Cor do texto */
font-size: 18px; /* Tamanho da fonte */
line-height: 1.6; /* Altura das linhas */
margin: 0;
padding: 0;
}
💻 Código completo em funcionamento (Configuração de fonte e fundo)
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Configuração de fonte e fundo CSS</title>
<style>
/* Configuração global de fonte e fundo */
body {
font-family: 'Arial', sans-serif; /* Fonte */
background-color: #e0f7fa; /* Cor de fundo */
color: #333; /* Cor do texto */
font-size: 18px; /* Tamanho da fonte */
line-height: 1.6; /* Altura das linhas */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Configuração de fonte e fundo global</h2>
<p>Esta página configura a fonte e o fundo global para todo o site. A fonte é Arial e a cor de fundo é #e0f7fa (azul claro).</p>
</body>
</html>
🔲 Exemplo de Fonte e Fundo
Clique nos botões abaixo para alternar entre diferentes cores de fundo e fontes.
🧩 Aplicações e Utilização
Ao padronizar a fonte e o fundo em todo o site, você pode melhorar a experiência do usuário e manter uma imagem de marca consistente. Especificamente, com a propriedade font-family, você pode especificar várias fontes, como 'Arial', sans-serif, para garantir que uma fonte de fallback seja aplicada caso a fonte principal não esteja disponível.
📌 Dicas para escolher a cor de fundo
Escolher uma cor de fundo clara, como #e0f7fa, ajuda a reduzir o cansaço visual durante longas sessões de leitura. Além disso, certifique-se de manter uma razão de contraste de pelo menos 4.5:1 (padrão WCAG AA) entre a cor de fundo e o texto. Você pode verificar isso facilmente usando ferramentas online.
⚙️ Dicas para design responsivo
Para garantir que o texto seja legível em dispositivos móveis, você pode ajustar o tamanho da fonte usando consultas @media. Por exemplo: @media (max-width: 768px) { body { font-size: 16px; } } faz com que o texto seja mais fácil de ler em telas pequenas.
Para suporte ao modo escuro, você pode usar @media (prefers-color-scheme: dark) para inverter a cor do fundo e do texto. Por exemplo: background-color: #1a1a1a; color: #f0f0f0; pode ser usado para estilos no modo escuro.
Para melhor gerenciamento, especialmente em sites maiores, considere usar variáveis CSS (por exemplo, --main-bg-color) para controlar centralizadamente a cor do fundo e a cor do texto.