Propiedad display y visivility en CSS

Nos toca en esta lección aprender a manejar la propiedad display y visivility de CSS, dos propiedades interesantes que nos permitirán controlar, la forma en la que se muestra los elementos. Recordemos que en HTML existen elementos de línea y de bloque, ahora podemos cambiar estéticamente gracias a display, mientras que con visivility podremos controlar la visibilidad de los elementos. ¡Listos!

La propiedad display

La propiedad display nos permite elegir como se muestran los elementos en la página, podemos indicar que se muestren como elementos de línea o como elementos de bloque, además podemos indicar que no se muestre.

Por defecto, cada elemento de una página web se comporta como una caja; además como mencionamos en la introducción, existen elementos HTML de línea y de bloque, los mismos que desarrollamos en el curso de HTML. Para nuestro propósito recordemos rápidamente:

• Elementos de línea.- estos ocupan solo lo necesario, por lo cual pueden continuar en una misma línea sin hacer salto de línea; ejemplo de ellos son: enlaces, imágenes, elementos en span, textos sub y super, etc.
• Elemento de bloque.- estos elementos ocupan el ancho máximo disponible, por lo cual realizan salto de línea al presentarse en la estructura de la página; ejemplo de ellos tenemos a: párrafos, bloques div, tablas, formularios, listas, etc.

Ahora es posible indicar como se comporta un elemento sin importar del tipo que originalmente sea. La propiedad display de CSS solo cambia la apariencia más no el tipo de elemento.

Valores para display CSS

• inline.- establece que el elemento debe comportarse como un elemento de línea.
• block.- indica que el elemento debe comportarse como un elemento de bloque.
• none.- indica que el elemento no debe ser mostrado.
• inherit.- hereda del elemento padre.
• initial.- indica que se cumpla la forma inicial o predeterminada.

Existen más valores para la propiedad display, pero los mencionados son los más usados.

Display CSS ejemplos

Primer ejemplo:

Para el primer ejemplo, haremos que elementos de línea se comporten como elementos de bloque:

Código HTML

<span> Este es un texto span </span>

<a href="URL"> Este es un enlace</a>

<img src="fondo.jpg">

Este es el resultado sin aplicar CSS:

Código CSS

span {display: block;}

a {display: block;}

img {display: block;}

Resultado después de aplicar display:block; con CSS.

Segundo ejemplo:

En este segundo ejemplo haremos que ciertos elementos de bloque se comporten como elementos línea gracias a la propiedad display y valor inline.

Código HTML

<h1> TÍTULO </h1>
<h2> Subtítulo</h2>
<p> Párrafo corto</p>
<ul><li>Primero</li><li>Segundo</li></ul>

Resultado antes de aplicar CSS

Código CSS

h1 {display:inline;}
h2 {display:inline;}
p {display:inline;}
ul {display:inline;}
li {display:inline;}

Resultados después de aplicar display: inline; en CSS

Valor display: none; de CSS

El valor none de la propiedad display hace que elemento seleccionado quede oculto en la página de resultado, de tal manera que el resto de contenido se muestra como si dicho elemento no existiera pues none hace que deje de ocupar espacio dentro de la estructura de página.

Ejemplo de display:none;

<p> Este es un párrafo al cual se le aplicará la propiedad display con valor none para que quede oculto en la página web.</p>

p {display:none;}

Obviamente el resultado será una página en blanco, ya que el único elemento de párrafo quedará oculto.

La propiedad visivility

La propiedad visivility de CSS nos permite establecer si un elemento es visible o invisible, de acuerdo al valor que elijamos establecer:

Valores para visivility

• visible.- indica que el elemento es mostrado.
• hidden.- establece que el elemento se esconde, pero los demás elementos de la página se comportan como si dicho elemento estuviese presente ahí, respetan sus dimensiones. Es como si el elemento solo fuera invisible.
• collapse.- pensada para controlar la visibilidad de elementos de tabla, filas y columnas.

[popup_anything id=»4273″]