Explora las propiedades de visualización en CSS

Introducción

En este laboratorio, los estudiantes explorarán las propiedades de visualización fundamentales de CSS que controlan el diseño y la visibilidad de los elementos web. A través de una serie de ejercicios prácticos, los participantes aprenderán a manipular las propiedades de visualización de bloque, en línea, en línea-bloque y none, adquiriendo habilidades prácticas en la estructuración y gestión de los diseños de páginas web. El laboratorio aborda conceptos clave como la comprensión de cómo diferentes propiedades de visualización afectan la colocación de los elementos, la creación de menús de navegación y el control de la visibilidad de los elementos, brindando una introducción integral a las técnicas de diseño de CSS.

Al trabajar a través de ejemplos prácticos y demostraciones de código, los aprendices desarrollarán una comprensión sólida de cómo las propiedades de visualización impactan en el diseño web, lo que les permitirá crear diseños de páginas web más flexibles y receptivos. El enfoque paso a paso permite a los estudiantes construir progresivamente sus conocimientos, comenzando por las características básicas de los elementos de nivel de bloque hasta las implementaciones más avanzadas de las propiedades de visualización.

Comprender la propiedad de visualización de bloque

En este paso, aprenderás sobre la propiedad de visualización de bloque en CSS, que es un concepto fundamental para controlar el diseño de los elementos web. Por defecto, muchos elementos HTML tienen una propiedad de visualización de nivel de bloque.

Primero, creemos un archivo HTML para demostrar las propiedades de visualización de bloque. Abra el WebIDE y cree un nuevo archivo llamado block-display.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Propiedad de visualización de bloque</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">Este es un elemento div de nivel de bloque</div>
    <div class="block-element">Otro elemento div de nivel de bloque</div>
    <p class="block-element">Este es un párrafo de nivel de bloque</p>
  </body>
</html>

Características clave de los elementos de nivel de bloque:

Siempre comienzan en una nueva línea
Ocupan todo el ancho disponible por defecto
Se les pueden aplicar propiedades de ancho, alto, márgenes y relleno
Los elementos de bloque se apilan verticalmente uno detrás de otro

Veamos el contenido del archivo:

cat ~/project/block-display.html

Salida de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Propiedad de visualización de bloque</title>
    <style>
       .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">Este es un elemento div de nivel de bloque</div>
    <div class="block-element">Otro elemento div de nivel de bloque</div>
    <p class="block-element">Este es un párrafo de nivel de bloque</p>
</body>
</html>

Elementos de nivel de bloque comunes incluyen:

<div>
<p>
<h1> a <h6>
<section>
<article>
<ul> y <ol>

Aplicar la propiedad de visualización en línea

En este paso, aprenderás sobre la propiedad de visualización en línea en CSS, que permite que los elementos fluyan horizontalmente y solo ocupen la cantidad de ancho necesaria.

Vamos a crear un archivo HTML para demostrar las propiedades de visualización en línea. Abra el WebIDE y cree un nuevo archivo llamado inline-display.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Propiedad de visualización en línea</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">Primer elemento en línea</span>
    <span class="inline-element">Segundo elemento en línea</span>
    <a href="#" class="inline-element">Enlace en línea</a>
  </body>
</html>

Características clave de los elementos en línea:

Fluyen horizontalmente en la misma línea
Solo ocupan la cantidad de ancho necesaria
Las propiedades de ancho y alto no funcionan
El relleno y los márgenes verticales tienen un efecto limitado
No se pueden establecer ancho y alto directamente

Veamos el contenido del archivo:

cat ~/project/inline-display.html

Salida de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Propiedad de visualización en línea</title>
    <style>
       .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">Primer elemento en línea</span>
    <span class="inline-element">Segundo elemento en línea</span>
    <a href="#" class="inline-element">Enlace en línea</a>
</body>
</html>

Elementos en línea comunes incluyen:

<span>
<a>
<strong>
<em>
<img>

Implementar la propiedad de visualización en línea-bloque

En este paso, aprenderás sobre la propiedad de visualización en línea-bloque en CSS, que combina las mejores características de los elementos en línea y de nivel de bloque.

Vamos a crear un archivo HTML para demostrar las propiedades de visualización en línea-bloque. Abra el WebIDE y cree un nuevo archivo llamado inline-block-display.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Propiedad de visualización en línea-bloque</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">Primer elemento en línea-bloque</div>
    <div class="inline-block-element">Segundo elemento en línea-bloque</div>
    <div class="inline-block-element">Tercer elemento en línea-bloque</div>
  </body>
</html>

Características clave de los elementos en línea-bloque:

Fluyen horizontalmente como los elementos en línea
Pueden tener ancho, alto, relleno y márgenes como los elementos de bloque
Permite un control preciso sobre el tamaño y el espaciado de los elementos
Útil para crear diseños horizontales como menús de navegación o galerías de imágenes

Veamos el contenido del archivo:

cat ~/project/inline-block-display.html

Salida de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Propiedad de visualización en línea-bloque</title>
    <style>
      .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">Primer elemento en línea-bloque</div>
    <div class="inline-block-element">Segundo elemento en línea-bloque</div>
    <div class="inline-block-element">Tercer elemento en línea-bloque</div>
</body>
</html>

Casos de uso comunes para en línea-bloque:

Crear menús de navegación horizontales
Diseñar galerías de imágenes
Alinear elementos lado a lado con un control preciso

Utilizar la propiedad de visualización none para ocultar elementos

En este paso, aprenderás sobre la propiedad display: none en CSS, que elimina completamente un elemento del diseño de la página, haciéndolo invisible y sin ocupar espacio.

Vamos a crear un archivo HTML para demostrar la propiedad de visualización none. Abra el WebIDE y cree un nuevo archivo llamado none-display.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Propiedad de visualización none</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">Este elemento siempre es visible</div>
    <div id="hiddenDiv" class="hidden-element">Este elemento está oculto</div>
    <button class="toggle-button" onclick="toggleElement()">
      Alternar Elemento Oculto
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Características clave de display: none:

Elimina completamente el elemento del diseño de la página
El elemento no ocupa espacio
Diferente de visibility: hidden (que conserva el espacio pero hace que el elemento sea invisible)
Útil para ocultar contenido dinámico y diseño reactivo

Veamos el contenido del archivo:

cat ~/project/none-display.html

Salida de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Propiedad de visualización none</title>
    <style>
       .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

       .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

       .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">Este elemento siempre es visible</div>
    <div id="hiddenDiv" class="hidden-element">Este elemento está oculto</div>
    <button class="toggle-button" onclick="toggleElement()">Alternar Elemento Oculto</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Casos de uso comunes para display: none:

Ocultar elementos condicionalmente
Crear menús reactivos
Administrar la visibilidad de contenido dinámico
Implementar interfaces de desplegable y alternancia

Crear un menú de navegación con propiedades de visualización

En este paso, crearás un menú de navegación horizontal utilizando las propiedades de visualización aprendidas en pasos anteriores. Este ejemplo práctico demostrará cómo utilizar la visualización en línea-bloque para crear un diseño de navegación reactivo y limpio.

Vamos a crear un archivo HTML con un menú de navegación. Abra el WebIDE y cree un nuevo archivo llamado navigation-menu.html en el directorio ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Menú de navegación</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Servicios</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </nav>
  </body>
</html>

Técnicas clave utilizadas en este menú de navegación:

display: inline-block para los elementos del menú
Eliminar el estilo predeterminado de la lista
Agregar efectos al pasar el cursor
Crear un diseño horizontal

Veamos el contenido del archivo:

cat ~/project/navigation-menu.html

Salida de ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Menú de navegación</title>
    <style>
       .nav-menu {
            background-color: #333;
            padding: 10px;
        }

       .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

       .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

       .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

       .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </nav>
</body>
</html>

Mejores prácticas para los menús de navegación:

Utilizar etiquetas HTML5 semánticas como <nav>
Mantener la estructura del menú simple
Asegurarse de una buena legibilidad y accesibilidad
Agregar estados al pasar el cursor y al activarse para una mejor interacción del usuario

Resumen

En este laboratorio, los participantes exploraron las propiedades de visualización de CSS, centrándose en comprender cómo diferentes valores de visualización afectan el diseño de la página web y el comportamiento de los elementos. El laboratorio comenzó examinando la propiedad de visualización de bloque, demostrando cómo los elementos de nivel de bloque ocupan todo el ancho, comienzan en nuevas líneas y pueden ser estilizados con márgenes, relleno y bordes. Los participantes aprendieron sobre los elementos de nivel de bloque comunes como <div>, <p> y las etiquetas de encabezado, y cómo se apilan naturalmente verticalmente en un documento.

Los pasos siguientes guiaron a los aprendices a través de la aplicación de las propiedades de visualización en línea, en línea-bloque y none, brindando conocimientos prácticos sobre el control de la representación y la visibilidad de los elementos. Al crear ejemplos prácticos y experimentar con estilos CSS, los participantes adquirieron experiencia práctica en la manipulación de las características de visualización de los elementos, comprendiendo finalmente cómo crear diseños de página web más flexibles y reactivos utilizando las propiedades de visualización de CSS.