Establece colores de borde en CSS

Introducción

En este laboratorio, aprenderá a establecer y manipular los colores de los bordes utilizando CSS, explorando diversas técnicas para dar estilo a los elementos HTML. El laboratorio lo guía a través de la creación de un archivo HTML, la aplicación de estilos de borde en línea, la configuración de colores de borde individuales y la experimentación con diferentes variaciones de color en múltiples elementos. Siguiendo las instrucciones paso a paso, adquirirá habilidades prácticas en el uso de CSS para mejorar la apariencia visual de los componentes de una página web a través del estilo de los bordes.

El laboratorio ofrece un enfoque práctico para comprender las propiedades de los colores de los bordes, comenzando con una estructura HTML básica y agregando progresivamente técnicas de estilo más complejas. Descubrirá cómo aplicar directamente los colores de los bordes a los elementos, personalizar los lados de los bordes individuales y crear diseños visualmente interesantes utilizando diferentes enfoques de color.

Crea un archivo HTML y estructura básica

En este paso, aprenderá a crear un archivo HTML básico que servirá como base para explorar los colores de los bordes CSS. Usaremos el WebIDE para crear y configurar nuestra estructura HTML inicial.

Primero, navegue hasta el directorio ~/project en el WebIDE. Cree un nuevo archivo llamado index.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Aquí está la estructura HTML básica que creará:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
  </head>
  <body>
    <div class="container">
      <h1>CSS Border Colors Exploration</h1>
      <p>This is our first HTML element to style with borders.</p>
    </div>
  </body>
</html>

Analicemos los componentes clave de esta estructura HTML:

<!DOCTYPE html> declara que se trata de un documento HTML5
La etiqueta <html> es el elemento raíz de la página HTML
<head> contiene información meta sobre el documento
<body> contiene el contenido visible de la página
Hemos agregado un <div> contenedor con un encabezado y un párrafo para proporcionar elementos que estilaremos en pasos posteriores

Después de crear el archivo, guárdelo presionando Ctrl+S o usando el icono de guardar en el WebIDE.

Salida de ejemplo al ver el contenido del archivo:

$ cat ~/project/index.html
<!DOCTYPE html>
html lang="en">
...

Esta simple estructura HTML proporciona la base para nuestra exploración de los colores de los bordes CSS en los pasos siguientes.

Agrega un estilo de borde en línea

En este paso, aprenderá a agregar estilos de borde en línea directamente a los elementos HTML utilizando el atributo style. Los estilos en línea son una forma rápida de aplicar propiedades CSS directamente a elementos individuales.

Abra el archivo index.html en el WebIDE que creó en el paso anterior. Modifique el HTML para incluir estilos de borde en línea para diferentes elementos:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
  </head>
  <body>
    <div class="container">
      <h1 style="border: 2px solid black;">CSS Border Colors Exploration</h1>
      <p style="border: 3px dotted blue;">
        This is our first HTML element with an inline border style.
      </p>
      <div style="border: 4px dashed red; padding: 10px;">
        This div has a different border style and width.
      </div>
    </div>
  </body>
</html>

Analicemos los estilos de borde en línea:

border: 2px solid black; crea un borde sólido de 2 píxeles de ancho y color negro
border: 3px dotted blue; crea un borde discontinuo de 3 píxeles de ancho y color azul
border: 4px dashed red; crea un borde discontinuo de 4 píxeles de ancho y color rojo

La propiedad border es un atajo que combina:

Ancho del borde (en píxeles)
Estilo del borde (sólido, discontinuo, rayado, etc.)
Color del borde

Salida de ejemplo al ver el contenido del archivo:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1 style="border: 2px solid black;">...

Guarde el archivo presionando Ctrl+S o usando el icono de guardar en el WebIDE.

Establece colores de borde individuales

En este paso, aprenderá a establecer colores de borde individuales para diferentes lados de un elemento HTML utilizando CSS. Esta técnica permite un estilo de borde más preciso y creativo.

Abra el archivo index.html en el WebIDE y actualízalo con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>CSS Border Colors Example</title>
    <style>
      .individual-borders {
        border-top-color: rojo;
        border-right-color: verde;
        border-bottom-color: azul;
        border-left-color: púrpura;
        border-style: sólido;
        border-width: 4px;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Individual Border Colors</h1>
      <div class="individual-borders">
        This div has different colors for each border side.
      </div>
      <p>Notice how each border side has a unique color!</p>
    </div>
  </body>
</html>

Propiedades CSS clave para los colores de borde individuales:

border-top-color: Establece el color del borde superior
border-right-color: Establece el color del borde derecho
border-bottom-color: Establece el color del borde inferior
border-left-color: Establece el color del borde izquierdo

También hemos agregado:

border-style: solid; para asegurar que los bordes sean visibles
border-width: 4px; para que los bordes sean más prominentes

Salida de ejemplo al ver el contenido del archivo:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="individual-borders">...

Guarde el archivo presionando Ctrl+S o usando el icono de guardar en el WebIDE.

Experimenta con variaciones de colores de borde

En este paso, explorará diferentes maneras de especificar los colores de borde utilizando varios formatos y técnicas de colores CSS. Abra el archivo index.html en el WebIDE y actualízalo con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border Color Variations</title>
    <style>
      .color-demo {
        width: 200px;
        height: 100px;
        margin: 10px;
        padding: 10px;
      }

      .named-color {
        border: 5px solid tomate;
      }

      .hex-color {
        border: 5px solid #4caf50;
      }

      .rgb-color {
        border: 5px solid rgb(33, 150, 243);
      }

      .rgba-color {
        border: 5px solid rgba(255, 152, 0, 0.7);
      }

      .hsl-color {
        border: 5px solid hsl(120, 100%, 25%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Border Color Variations</h1>

      <div class="color-demo named-color">Color nombrado (Tomate)</div>

      <div class="color-demo hex-color">Color hexadecimal (#4CAF50)</div>

      <div class="color-demo rgb-color">Color RGB (Azul)</div>

      <div class="color-demo rgba-color">Color RGBA (Naranja transparente)</div>

      <div class="color-demo hsl-color">Color HSL (Verde oscuro)</div>
    </div>
  </body>
</html>

Métodos de especificación de colores:

Colores nombrados: Utilice nombres de color predefinidos como tomate
Colores hexadecimales: Utilice códigos hexadecimales de 6 dígitos (por ejemplo, #4CAF50)
Colores RGB: Utilice el formato rgb(rojo, verde, azul)
Colores RGBA: Agregue transparencia alfa con rgba()
Colores HSL: Utilice el formato hsl(tono, saturación, luminosidad)

Salida de ejemplo al ver el contenido del archivo:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<div class="color-demo named-color">...

Guarde el archivo presionando Ctrl+S o usando el icono de guardar en el WebIDE.

Aplica colores de borde a diferentes elementos

En este paso, aprenderá a aplicar colores de borde a diferentes elementos HTML, demostrando cómo CSS puede dar un estilo único a varios elementos. Abra el archivo index.html en el WebIDE y actualízalo con el siguiente código:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Border Colors on Different Elements</title>
    <style>
      /* Estilos del encabezado */
      h1 {
        border: 3px solid #2196f3;
        padding: 10px;
        text-align: center;
      }

      /* Estilos del párrafo */
      p {
        border: 2px discontinuo verde;
        padding: 15px;
        margin: 10px 0;
      }

      /* Estilos del botón */
      .custom-button {
        border: 4px discontinuo púrpura;
        background-color: #f0f0f0;
        padding: 10px 20px;
        display: inline-block;
        margin: 10px;
      }

      /* Estilos de la imagen */
      .bordered-image {
        border: 5px solid naranja;
        max-width: 300px;
      }

      /* Estilos de la lista */
      ul {
        border: 3px solid rojo;
        padding: 20px;
      }

      li {
        border-bottom: 1px solid #ccc;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>Estilando diferentes elementos</h1>

      <p>Este párrafo tiene un borde discontinuo verde.</p>

      <button class="custom-button">Botón con borde</button>

      <img
        class="bordered-image"
        src="https://via.placeholder.com/300"
        alt="Imagen de marcador de posición"
      />

      <ul>
        <li>Elemento de lista con borde inferior</li>
        <li>Otro elemento de lista</li>
        <li>Último elemento de lista</li>
      </ul>
    </div>
  </body>
</html>

Puntos claves:

Diferentes elementos pueden tener estilos de borde únicos
Utilice selectores CSS para dirigirse a tipos de elementos específicos
Combine propiedades de borde como color, estilo y ancho
Imagen de marcador de posición utilizada para la demostración

Salida de ejemplo al ver el contenido del archivo:

$ cat ~/project/index.html
<!DOCTYPE html>
<html lang="en">
...
<h1>Estilando diferentes elementos</h1>
...

Guarde el archivo presionando Ctrl+S o usando el icono de guardar en el WebIDE.

Resumen

En este laboratorio, los participantes aprenden los fundamentos de la configuración de colores de borde en CSS mediante un enfoque paso a paso. Comenzando con la creación de una estructura básica de archivo HTML, los aprendices establecen una base para explorar las técnicas de estilo de borde de CSS. Los pasos iniciales se centran en entender cómo aplicar estilos de borde en línea directamente a los elementos HTML utilizando el atributo style, demostrando un método rápido para agregar bordes visuales a los componentes de una página web.

El laboratorio continúa enseñando cómo establecer colores de borde individuales, experimentar con diferentes variaciones de color y aplicar colores de borde a varios elementos HTML. Al trabajar a través de ejemplos prácticos, los participantes adquieren experiencia práctica en la manipulación de estilos de borde, comprendiendo cómo CSS se puede utilizar para mejorar la presentación visual de las páginas web a través del control preciso de los colores de borde.