Propiedad display y visivility en CSS

Anterior
Avanzar

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 linea 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.

Te recomendamos leer:  La propiedad overflow en CSS

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 linea 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;

Código HTML

<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>

Código CSS

p {display:none;}

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

Te recomendamos leer:  Posicionamiento en CSS

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.
Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos