Colores y fondos
Añada colores y fondos para dar vida a su página
Colores y fondos es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 4 lecciones en total.
Colores y fondos
¡Le damos la bienvenida a la próxima lección! Hoy aprenderemos a añadir colores y fondos a su página web para hacerla más vibrante y atractiva.
¿Por qué utilizar colores y fondos?
Los colores y los fondos pueden:
- Hacer que su página web sea más atractiva.
- Resaltar contenido importante.
- Definir el ambiente o el tema de su página.
¡Aprendamos a utilizarlos de forma eficaz!
Cambiar el color del texto
Puede cambiar el color del texto mediante la propiedad color. Puede utilizar:
- Nombres de colores: Ejemplos:
red,blue. - Códigos hexadecimales: Ejemplos:
#ff0000,#0000ff. - Valores RGB: Ejemplo:
rgb(255, 0, 0).
Ejemplo:
<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>
Añadir un color de fondo
La propiedad background-color se utiliza para cambiar el color de fondo de un elemento.
Ejemplo:
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
This is a box with a gray background.
</div>
Fondo de toda la página
Puede cambiar el color de fondo de toda la página aplicando la propiedad background-color a la etiqueta <body>.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a light blue background.</p>
</body>
</html>
Añadir imágenes de fondo
Puede establecer una imagen como fondo mediante la propiedad background-image.
Ejemplo:
En este ejemplo:
background-size: cover;hace que la imagen cubra toda la página.background-repeat: no-repeat;impide que la imagen se repita.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This page has a background image.</p>
</body>
</html>
Combinar colores de texto y de fondo
Puede combinar colores de texto y de fondo para crear diseños atractivos. ¡Asegúrese de que el texto sea legible!
Ejemplo:
<p style="color: white; background-color: black; padding: 10px;">
This is white text on a black background.
</p>
Pruébelo usted mismo
Vamos a crear una página web con colores y fondos. Este es un ejemplo:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
}
h1 {
color: darkblue;
}
p {
background-color: lightyellow;
padding: 10px;
border: 1px solid darkgray;
}
</style>
</head>
<body>
<h1>My Colorful Page</h1>
<p>This paragraph has a light yellow background with a border.</p>
</body>
</html>
¡Excelente trabajo!
¡Enhorabuena! Ha aprendido a utilizar colores y fondos para hacer que sus páginas web sean más vibrantes y atractivas. En la próxima lección, profundizaremos en el formato del texto para añadir negrita, cursiva y otros efectos. ¡Prepárese para mejorar sus habilidades de diseño!
Preguntas frecuentes
¿La lección «Colores y fondos» es gratis?
Sí — el texto completo de «Colores y fondos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 4 lecciones en total.
¿Qué aprenderé en «Colores y fondos»?
Añada colores y fondos para dar vida a su página Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Colores y fondos»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estilos en línea
- Conceptos básicos de CSS
- Colores y fondos
- Formato del texto