Cómo ocultar un objeto con CSS

Escrito por zicheng ren | Traducido por enrique pereira vivas
  • Comparte
  • Twittea
  • Comparte
  • E-mail

Las planillas de estilo en cascada (CSS por sus siglas en inglés) han dado a los diseñadores Web nuevas habilidades y un mayor control sobre la apariencia de sus páginas Web. Una de estas nuevas habilidades es ser capaz de ocultar los elementos de modo que, cuando se combinan con un lenguaje de scripting como JavaScript, pueden dar la ilusión de animación. Hay tres maneras de ocultar un objeto con CSS: los estilos en línea, hojas de estilo internas y las hojas de estilo externas. Nuestro ejemplo te guiará a través de los dos primeros y girará en torno a un div (una etiqueta que define una división dentro de un documento HTML o XHTML) con el contenido "Hola mundo".

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Cascading Style Sheets
  • Una computadora

Lista completaMinimizar

Instrucciones

    El uso de un estilo en línea

  1. 1

    Encuentra el código para el elemento que deseas ocultar. En este caso, el código será "Hola mundo".

  2. 2

    Inserta el siguiente código entre el final de la etiqueta de apertura del elemento, pero antes del corchete de cierre.

    style = "visibility: hidden;"

    Por lo tanto, en nuestro ejemplo, nuestro div se convertiría en:

    Hola mundo

    Usando una hoja de estilos interna

  1. 1

    Busca la etiqueta en el código de tu página web. La etiqueta de cabecera debe estar por la parte superior de tu código.

  2. 2

    Mueve la etiqueta una línea hacia abajo. Si la etiqueta se encuentra en una línea con otro código, muévela hacia abajo de manera que esté en su propia línea y luego muévela hacia abajo una vez más.

  3. 3

    Introduce el código siguiente en la línea encima de la etiqueta:

    .invisible { visibility: hidden; }

  4. 4

    Encuentra el código para el elemento que deseas ocultar.

  5. 5

    Inserta el siguiente código entre el final de la etiqueta de apertura del elemento, pero antes del corchete de cierre.

    class = "invisible"

    Por lo tanto, en nuestro ejemplo, nuestro div se convertiría en:

    Hola mundo

Consejos y advertencias

  • Utiliza estilos en línea si sólo deseas ocultar un elemento.
  • Utiliza hojas de estilo internas, si deseas ocultar más de un elemento. En este caso, darías a la clase un atributo = "invisible" a cada elemento que quieras ocultar. Al hacer esto, puedes agregar otras etiquetas CSS a los elementos 'invisibles' de la clase sin cambiarla en cada elemento, sólo en la parte superior de tu documento.
  • También puedes usar hojas de estilo externas, poniendo el código desde el interior de la hoja interna (es decir, las etiquetas) en un documento separado. Entonces, en lugar de poner las etiquetas antes de la tuya, coloca:
  • FILENAME.css es el nombre de tu hoja nueva de archivo. Esto te permite utilizar la misma hoja para un número de páginas, lo cual es genial si deseas utilizar los mismos estilos en todas tus páginas.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles