Color y fondo
Color y fondo
Color y fondo es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 1. 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 1 lecciones en total.
Introducción
Hola:
Podemos cambiar los colores del texto con la propiedad Color.
Podemos asignar valores a esta propiedad en formato RGB, HEX, HSL, RGBA o HSLA.
Ya hemos utilizado la propiedad color en muchos ejemplos. Ahora mostraremos su uso con distintos tipos de valores.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Fondo
Podemos definir estilos para los fondos de los elementos mediante las propiedades Background.
Ahora aprenderemos las propiedades del fondo que se enumeran a continuación.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Es una propiedad que se utiliza para cambiar el color de fondo de un elemento.
Veamos un ejemplo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opacidad
Es una propiedad que se utiliza para cambiar la opacidad del fondo de un elemento.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opacidad - 2
El cambio de la opacidad de CSS se muestra en la imagen anterior.
Imagen de fondo
La propiedad background-image se utiliza para añadir imágenes al fondo de un elemento.
La imagen se encuentra en https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Ahora definamos un elemento div y añadamos una imagen a su fondo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Si se fijó en nuestro ejemplo anterior, no pudimos colocarla correctamente porque el tamaño estándar de la imagen es mayor que el área donde la añadiremos.
Utilizaremos la propiedad background-size para resolverlo.
Aunque la propiedad background-size puede aceptar valores como cover, contain y auto, también podemos asignarle un valor específico para el ancho y el alto.
Actualicemos de nuevo nuestro ejemplo.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Ahora establezcamos su valor como un porcentaje para la propiedad background-position.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Sin embargo, aquí hay un problema. Como el tamaño de la imagen era menor que el tamaño del fondo del elemento, se utilizó más de una vez para rellenar el área.
Para evitarlo, utilice la propiedad background-repeat (con los valores repeat, repeat-x, repeat-y, initial, inherit o no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Otra propiedad del fondo es background-attachment. Con esta propiedad, podemos determinar si la imagen de fondo se desplazará junto con la página.
Esta propiedad acepta los valores fixed o scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Forma abreviada de background
Cuando queremos aplicar las propiedades de fondo que aprendimos en los ejemplos anteriores, es posible que necesitemos definir entre 4 y 5 líneas de expresiones.
Usamos la propiedad abreviada background para definirlas en una sola línea.
Veamos nuestro ejemplo.
En la propiedad background se definen no-repeat, el tamaño, la posición dentro de la página y la URL de la imagen de origen.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Enhorabuena
Enhorabuena 🎉
En esta sección, hemos aprendido sobre el color y el fondo.
En la siguiente sección, aprenderemos los conceptos de Box, Block e Inline
Preguntas frecuentes
¿La lección «Color y fondo» es gratis?
Sí — el texto completo de «Color y fondo» 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 1 lecciones en total.
¿Qué aprenderé en «Color y fondo»?
Color y fondo 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 1 de 1.
¿Cuánto tiempo toma la lección «Color y fondo»?
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.