Los últimos tutoriales de desarrollo web
×

CSS Tutorial

CSS CASA CSS Introducción CSS Sintaxis CSS Cómo CSS Colores CSS Antecedentes CSS Fronteras CSS márgenes CSS Relleno CSS Anchura altura CSS Texto CSS Fuentes CSS Campo de golf CSS lista CSS mesa CSS Modelo de cuadro esquema CSS CSS visualización CSS Anchura máxima Posición CSS CSS Flotador CSS Inline-block CSS Alinear CSS combinadores CSS Pseudo-clase CSS Pseudo-elemento CSS Barra de navegación CSS Menús desplegables CSS La información sobre herramientas CSS galería de imágenes CSS Opacidad imagen CSS Sprites de imagen CSS Attr selectores Formas CSS CSS contadores

CSS3

CSS3 Introducción CSS3 Esquinas redondeadas CSS3 Imágenes de frontera CSS3 Antecedentes CSS3 Colores CSS3 gradientes CSS3 Oscuridad CSS3 Texto CSS3 Fuentes CSS3 Transformaciones 2D CSS3 Transformaciones 3D CSS3 transiciones CSS3 animaciones CSS3 imágenes CSS3 Botones CSS3 Paginación CSS3 varias columnas CSS3 Interfaz de usuario CSS3 caja de medición CSS3 Flexbox CSS3 consultas de medios CSS3 Ejemplos MQ

CSS Diseño web adaptable

Diseño web adaptable Introducción Diseño web adaptable ventana Diseño web adaptable Vista en cuadrícula Diseño web adaptable consultas de medios Diseño web adaptable imágenes Diseño web adaptable vídeos Diseño web adaptable marcos

CSS Examples

CSS Ejemplos CSS Examen CSS Certificado

CSS References

CSS Referencia CSS selectores CSS funciones CSS referencia Aural CSS Web Safe Fuentes CSS animatable CSS Unidades CSS PX-EM Convertidor CSS Colores CSS Los valores de color CSS Los nombres de color CSS3 Soporte para el navegador

 

CSS Disposición - La pantalla de la propiedad


La display la propiedad es la propiedad CSS más importante para el control de la disposición.


La propiedad de presentación

La display propiedad especifica si / cómo se muestra un elemento.

Cada elemento HTML tiene un valor de visualización por defecto dependiendo de qué tipo de elemento que es. El valor de visualización por defecto para la mayoría de los elementos es block o inline .

Haga clic para mostrar el panel

Este panel contiene un <div> elemento, que está oculto por defecto ( display: none ).

Es un estilo con CSS, y utilizamos JavaScript para mostrarla (cambiarlo a ( display: block ).


Los elementos a nivel de bloque

Un elemento en bloque siempre se inicia en una nueva línea y ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).

La <div> elemento es un elemento a nivel de bloque.

Ejemplos de elementos a nivel de bloque:

  • <div>
  • <h1> - <h6>
  • <p>
  • <form>
  • <header>
  • <footer>
  • <section>

Elementos en línea

Un elemento en línea no se inicia en una nueva línea y sólo ocupa tanto de ancho como sea necesario.

Se trata de una línea <span> elemento dentro de un párrafo.

Ejemplos de elementos en línea:

  • <span>
  • <a>
  • <img>

Display: none;

display: none; se usa comúnmente con JavaScript para ocultar y mostrar elementos sin borrar y volver a crearlos. Echar un vistazo a nuestro último ejemplo de esta página si quieres saber cómo esto puede lograrse.

La <script> elemento de uso de display: none; como su defecto.


Sustituir el valor predeterminado Valor de presentación

Como se ha mencionado, cada elemento tiene un valor de visualización predeterminada. Sin embargo, puede anular este.

Cambio de un elemento en línea a un elemento de bloque, o viceversa, puede ser útil para hacer la página se vea de una manera específica, y todavía siguen los estándares web.

Un ejemplo común es hacer en línea <li> elementos de menús horizontales:

Ejemplo

li {
    display: inline;
}
Inténtalo tú mismo "
NotaNota: Al establecer la propiedad de un elemento de visualización sólo cambia el modo de visualización del elemento, NO qué tipo de elemento que es.Por lo tanto, un elemento en línea con display: block; no se le permite tener otros elementos de bloque en su interior.

El siguiente ejemplo muestra <span> elementos como elementos de bloque:

Ejemplo

span {
    display: block;
}
Inténtalo tú mismo "

Ocultar un elemento - display:none o visibility:hidden ?

Cómo ocultar un elemento se puede hacer mediante el establecimiento de la display propiedad a none . El elemento se ocultará, y la página se mostrará como si el elemento no está allí:

Ejemplo

h1.hidden {
    display: none;
}
Inténtalo tú mismo "

visibility:hidden; también oculta un elemento.

Sin embargo, el elemento aún llevará hasta el mismo espacio que antes. El elemento se ocultará, pero aún afecta al diseño de:

Ejemplo

h1.hidden {
    visibility: hidden;
}
Inténtalo tú mismo "

Ejemplos

Más ejemplos

display: none; frente a visibility: hidden;
Este ejemplo demuestra display: none; frente a visibility: hidden;

El uso de CSS junto con JavaScript para mostrar el contenido
Este ejemplo muestra cómo utilizar CSS y JavaScript para mostrar un elemento de clic.


Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»


CSS visualización / propiedades de visibilidad

Propiedad Descripción
display Especifica cómo se debe mostrar un elemento
visibility Especifica si un elemento debe ser visible