El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Colores en CSS

Siguiente ►
►

En esta lección, aprenderemos cómo manejar los colores en CSS. Los colores son una parte fundamental del diseño web y CSS nos proporciona varias formas de definirlos. Vamos a explorar las diferentes maneras de especificar colores y cómo aplicarlos a nuestros elementos HTML.

  1. Métodos para Especificar Colores

CSS permite definir colores de varias maneras:

  1. Nombres de colores: CSS reconoce 140 nombres de colores predefinidos.
  2. Valores Hexadecimales: Utilizan el sistema hexadecimal para definir colores.
  3. Valores RGB: Definen colores en términos de sus componentes rojo, verde y azul.
  4. Valores RGBA: Similar a RGB, pero con un canal alfa para la opacidad.
  5. Valores HSL: Definen colores en términos de matiz, saturación y luminosidad.
  6. Valores HSLA: Similar a HSL, pero con un canal alfa para la opacidad.

1.1 Nombres de Colores

CSS tiene una lista de 140 nombres de colores predefinidos que puedes usar directamente.

body {
  background-color: lightblue;
}

1.2 Valores Hexadecimales

Los valores hexadecimales comienzan con un # seguido de tres o seis caracteres (0-9, A-F).

h1 {
  color: #ff6347; /* Tomato */
}

1.3 Valores RGB

Los valores RGB se especifican con la función rgb() que toma tres valores (rojo, verde, azul) entre 0 y 255.

p {
  color: rgb(255, 99, 71); /* Tomato */
}

1.4 Valores RGBA

Los valores RGBA son similares a RGB, pero incluyen un cuarto valor para la opacidad (entre 0 y 1).

div {
  background-color: rgba(255, 99, 71, 0.5); /* Tomato con 50% de opacidad */
}

1.5 Valores HSL

Los valores HSL se especifican con la función hsl() que toma tres valores: matiz (0-360), saturación (0%-100%) y luminosidad (0%-100%).

h2 {
  color: hsl(9, 100%, 64%); /* Tomato */
}

1.6 Valores HSLA

Los valores HSLA son similares a HSL, pero incluyen un cuarto valor para la opacidad (entre 0 y 1).

span {
  background-color: hsla(9, 100%, 64%, 0.5); /* Tomato con 50% de opacidad */
}

  1. Aplicación de Colores en CSS

2.1 Propiedad color

La propiedad color se utiliza para cambiar el color del texto.

p {
  color: #ff6347; /* Tomato */
}

2.2 Propiedad background-color

La propiedad background-color se utiliza para cambiar el color de fondo de un elemento.

div {
  background-color: lightblue;
}

2.3 Propiedad border-color

La propiedad border-color se utiliza para cambiar el color del borde de un elemento.

div {
  border: 2px solid #ff6347; /* Tomato */
}

  1. Ejercicio Práctico

Vamos a poner en práctica lo que hemos aprendido creando un pequeño ejemplo.

Ejercicio

  1. Crea un archivo HTML con el siguiente contenido:
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Colores en CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Colores en CSS</h1>
  <p>Este es un párrafo con texto de color tomate.</p>
  <div class="box">Este es un div con fondo azul claro y borde tomate.</div>
</body>
</html>
  1. Crea un archivo CSS llamado styles.css con el siguiente contenido:
body {
  background-color: #f0f8ff; /* AliceBlue */
}

h1 {
  color: hsl(9, 100%, 64%); /* Tomato */
}

p {
  color: #ff6347; /* Tomato */
}

.box {
  background-color: lightblue;
  border: 2px solid #ff6347; /* Tomato */
  padding: 20px;
  margin: 20px 0;
}

Solución

Al abrir el archivo HTML en un navegador, deberías ver:

  • Un fondo de página color AliceBlue.
  • Un título (h1) con color Tomato.
  • Un párrafo (p) con color Tomato.
  • Un div con fondo LightBlue y borde Tomato.

  1. Resumen

En esta lección, hemos aprendido las diferentes maneras de especificar colores en CSS y cómo aplicarlos a nuestros elementos HTML. Ahora deberías sentirte cómodo usando nombres de colores, valores hexadecimales, RGB, RGBA, HSL y HSLA en tus proyectos.

En la próxima lección, exploraremos las unidades y medidas en CSS, lo cual es crucial para definir tamaños y espaciamientos en tus diseños. ¡Nos vemos allí!

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados