Introducción
¡Bienvenido al laboratorio de Colores y Fondos en CSS! En el diseño web, los colores y los fondos son fundamentales para crear sitios web visualmente atractivos y fáciles de usar. Ayudan a establecer el tono, mejorar la legibilidad y guiar la atención del usuario.
En este laboratorio, obtendrás experiencia práctica con algunas de las propiedades CSS más comunes utilizadas para controlar la apariencia de los elementos. Aprenderás a establecer colores de fondo, aplicar colores de texto, usar imágenes de fondo y controlar cómo se muestran esas imágenes. Cubriremos las siguientes propiedades: background-color, color, background-image, background-repeat y background-position.
Al final de este laboratorio, tendrás una comprensión sólida de cómo estilizar los colores y fondos de tus páginas web.
Establecer la propiedad background-color usando código hexadecimal
En este paso, aprenderás a cambiar el color de fondo de toda la página. Utilizaremos la propiedad background-color y un código de color hexadecimal (hex). Los códigos hex son una forma común de representar colores en el desarrollo web, comenzando con un # seguido de seis caracteres (0-9, a-f).
Primero, necesitas editar el archivo styles.css. Puedes encontrar este archivo en el explorador de archivos en el lado izquierdo del WebIDE.
- Haz clic en el archivo
styles.csspara abrirlo en el editor. - Agrega la siguiente regla CSS para establecer el color de fondo del elemento
<body>. Esto aplicará el estilo a toda la página.
body {
background-color: #f0f8ff;
}
Esta regla selecciona el elemento body y establece su color de fondo a un tono azul claro conocido como "AliceBlue".
Después de agregar el código, guarda el archivo (puedes usar Ctrl+S o Cmd+S). Para ver tus cambios, haz clic en la pestaña Web 8080 en la parte superior de la interfaz. Deberías ver que el fondo de la página cambia de blanco a azul claro.
Aplicar la propiedad color con valores RGB
Ahora que has establecido el color de fondo, cambiemos el color del texto del encabezado principal. Usaremos la propiedad color, que establece el color del contenido de texto de un elemento. Para esto, utilizaremos el formato de color rgb().
La función rgb() define un color utilizando sus componentes Rojo (Red), Verde (Green) y Azul (Blue), con cada valor oscilando entre 0 y 255.
Continúa editando el archivo styles.css.
- Agrega una nueva regla CSS para seleccionar el elemento
<h1>. - Dentro de esta regla, establece la propiedad
colora un gris oscuro usandorgb(60, 60, 60).
Agrega el siguiente código a tu archivo styles.css:
h1 {
color: rgb(60, 60, 60);
}
Guarda el archivo y cambia a la pestaña Web 8080 para previsualizar tus cambios. El encabezado "Welcome to LabEx" ahora debería ser de color gris oscuro, haciendo que resalte sobre el fondo azul claro.
Usar la propiedad background-image con url
Además de los colores sólidos, CSS te permite usar imágenes como fondos. La propiedad background-image se utiliza para este propósito. Especificas la ruta de la imagen usando la función url().
En este paso, agregarás una imagen de fondo al body de la página. El script de configuración ya ha creado un archivo de imagen llamado labex.svg en tu directorio de proyecto.
- Vuelve a tu archivo
styles.css. - Modifica la regla
bodyexistente para agregar la propiedadbackground-image.
Agrega la siguiente línea dentro de las llaves del selector body:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
}
Después de guardar el archivo, revisa la pestaña Web 8080. Notarás que la imagen (labex.svg) aparece en la página. Por defecto, las imágenes de fondo se repiten tanto horizontal como verticalmente para llenar todo el elemento. En el siguiente paso, aprenderemos a controlar este comportamiento.
Implementar la propiedad background-repeat no-repeat
Como viste en el paso anterior, las imágenes de fondo se repiten por defecto. La propiedad background-repeat te da control sobre este comportamiento. Puede tomar varios valores, incluyendo repeat (el valor por defecto), repeat-x (repetir horizontalmente), repeat-y (repetir verticalmente) y no-repeat.
En este paso, evitarás que la imagen de fondo se repita.
- Continúa editando la regla
bodyen tu archivostyles.css. - Agrega la propiedad
background-repeaty establece su valor ano-repeat.
Tu regla body ahora debería verse así:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
}
Guarda el archivo y actualiza la pestaña Web 8080. Ahora verás una sola instancia de la imagen de fondo, ubicada en la esquina superior izquierda de la página.
Añadir la propiedad background-position center
Actualmente, la única imagen de fondo está posicionada en la esquina superior izquierda de la página. Puedes cambiar su posición usando la propiedad background-position. Esta propiedad acepta valores como left, right, top, bottom y center, así como valores de longitud o porcentaje específicos.
Para este paso final, centrarás la imagen de fondo tanto horizontal como verticalmente.
- En tu archivo
styles.css, agrega la propiedadbackground-positiona la reglabody. - Establece su valor a
center.
La regla body completa será ahora:
body {
background-color: #f0f8ff;
background-image: url("labex.svg");
background-repeat: no-repeat;
background-position: center;
}
Guarda tus cambios y visualiza el resultado en la pestaña Web 8080. La imagen de fondo ahora debería estar perfectamente centrada en la página.
Resumen
¡Felicidades por completar el laboratorio! Has aprendido con éxito a estilizar los colores y fondos de una página web utilizando propiedades CSS fundamentales.
En este laboratorio, practicaste:
- Establecer el color de fondo de una página con
background-colory un código hexadecimal. - Cambiar el color del texto con la propiedad
colory un valorrgb(). - Añadir una
background-imageusando la funciónurl(). - Controlar la repetición de la imagen con
background-repeat: no-repeat;. - Posicionar una imagen de fondo con
background-position: center;.
Estas propiedades son herramientas esenciales para cualquier desarrollador web. Siéntete libre de experimentar más cambiando los valores o probando diferentes imágenes para ver qué puedes crear.
