Plantilla inicial de CSS: configuración básica de fuente y fondo para todo el sitio
📝 Uso
Este template muestra el código CSS para configurar la fuente y el fondo global en todo el sitio. El color de fondo es azul claro (#e0f7fa), y la fuente es Arial con un tamaño de fuente de 18px.
📘 Explicación
El código a continuación configura la fuente global, el color de fondo y el tamaño de la fuente en la etiqueta `body`. Esto asegura un diseño coherente aplicado a todas las páginas del sitio web.
🔹 Código parcial (Configuración de fuente y fondo)
/* Configuración global de fuente y fondo */
body {
font-family: 'Arial', sans-serif; /* Fuente */
background-color: #e0f7fa; /* Color de fondo */
color: #333; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
line-height: 1.6; /* Espaciado entre líneas */
margin: 0;
padding: 0;
}
💻 Código completo en funcionamiento (Configuración de fuente y fondo)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demostración de configuración de fuente y fondo CSS</title>
<style>
/* Configuración global de fuente y fondo */
body {
font-family: 'Arial', sans-serif; /* Fuente */
background-color: #e0f7fa; /* Color de fondo */
color: #333; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
line-height: 1.6; /* Espaciado entre líneas */
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h2>Configuración global de fuente y fondo</h2>
<p>Esta página configura la fuente y el fondo global para todo el sitio. La fuente es Arial, y el color de fondo es #e0f7fa (azul claro).</p>
</body>
</html>
🔲 Ejemplo de Fuente y Fondo
Haga clic en los botones a continuación para alternar entre diferentes colores de fondo y fuentes.
🧩 Aplicación y Utilización
Al estandarizar la fuente y el fondo en todo el sitio, puedes mejorar la experiencia del usuario y mantener una imagen de marca coherente. Específicamente, con la propiedad font-family, puedes especificar múltiples fuentes como 'Arial', sans-serif para asegurarte de que se aplique una fuente de respaldo en caso de que la fuente principal no esté disponible.
📌 Consejos para Elegir Colores de Fondo
Elegir un color de fondo claro, como #e0f7fa, ayuda a reducir la fatiga ocular durante largas sesiones de lectura. Además, asegúrate de mantener una relación de contraste de al menos 4.5:1 (estándar WCAG AA) entre los colores de fondo y texto. Puedes verificar fácilmente esto utilizando herramientas en línea.
⚙️ Consejos para Diseño Responsivo
Para asegurar que el texto sea legible en dispositivos móviles, ajusta el tamaño de la fuente usando consultas @media. Por ejemplo: @media (max-width: 768px) { body { font-size: 16px; } } hace que el texto sea más fácil de leer en pantallas pequeñas.
Para soporte de modo oscuro, puedes usar @media (prefers-color-scheme: dark) para invertir los colores de fondo y texto. Por ejemplo: background-color: #1a1a1a; color: #f0f0f0; se puede usar para los estilos de modo oscuro.
Para una mejor gestión, especialmente en sitios más grandes, considera usar variables CSS (por ejemplo, --main-bg-color) para centralizar el control de elementos de diseño como el color de fondo y el color del texto.