Propiedades de bloque de hojas de estilo en cascada (CSS)

Propiedades bloque de control de la alineación y el espaciamiento de los objetos en una página a través de sus etiquetas y atributos. Bloques incluyen texto, contenido en el interior

etiquetas (con y sin posiciones especificadas), etiquetas utilizando el bloqueo de pantalla estilo, y las imágenes o párrafos establecen con posiciones absolutas o relativas.

word-spacing: Para ajustar el espaciado entre palabras individuales, utilice cualquier número positivo o negativo en px (píxeles), pc (picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (exs), o % (porcentaje), tales como word-spacing: 2px;.

p {word-spacing: 2px; }

letter-spacing: Con este atributo, puede aumentar de manera uniforme o disminuir el espacio entre caracteres especificando un valor positivo o negativo en px (píxeles), pc (picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (exs), o % (porcentaje), tales como letter-spacing: 1em-. Tenga en cuenta que el cambio de la letter-spacing atributo anula cualquier justificación del texto preexistente.

p {letter-spacing: 1.5em-}

vertical-align: Puede alinear verticalmente el texto a lo largo de la línea de base de texto, sub (subíndice), súper (superíndice), cima, texto-top, medio, fondo, y text-bottom, o por cualquier valor, positivo o negativo, en px (píxeles), pc (picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (exs), o % (porcentaje), tales como vertical-align: láminas superior.

p {vertical-align: láminas superior}

text-align: Esta opción sólo se puede aplicar al texto. Las opciones de alineación incluyen izquierda, derecho, centro, o justificar.

p {text-align: centro-}

guion de texto: También para ser utilizado solamente con el texto, esta regla de estilo crea una sangría de primera línea que se puede establecer en cualquier valor positivo o negativo en px (píxeles), pc (picas), pt (puntos), en (pulgadas), mm (milímetros), cm (centímetros), em (EMS), ex (exs), o % (porcentaje), tales como text-indent: 12px;.

Para sangrar objetos sin texto en una página, que ya no se recomienda que utilice el

etiqueta, ya que esta etiqueta se ha desaprobado. En su lugar, agregue un guión utilizando atributos de margen y / o estilo de relleno.

p {text-indent: 10px; }

espacio en blanco: El espacio en blanco en el interior o alrededor de texto en cualquier elemento en bloque se pueden mostrar de tres maneras diferentes: normal, pre, y nowrap. Escoger normal hacer caso omiso de cualquier espacio en blanco, pre para dejar el espacio en blanco con el texto tal como fue codificado, o nowrap para obligar a cualquier texto para envolver sólo si el código tiene salto de línea (
) Etiquetas.

p {white-space: pre}

visualización: Este atributo controla cómo las pantallas de objetos labrados en el navegador. Opciones de valor son bloque, compacto, en línea, elemento de la lista, marcador, ninguno, entrar corriendo, y mesa.

p {display: none; }

Elija entre cualquiera de los siguientes valores:

• ninguno: Utilice esta opción para ocultar un elemento de estilo de visualización en el navegador. Esta opción es muy útil al crear múltiples hojas de estilo para que algunos elementos se pueden ocultar de la vista en un dispositivo pero no en otro, como con un CSS secundaria para el tipo de soporte de impresión.

• en línea: Utilice esta opción para mostrar el objeto de estilo en línea con otros elementos, a menudo en el mismo bloque, como con la fabricación de elementos de lista se muestran en una sola fila.

• bloque: Esto convierte cualquier elemento de estilo en un bloque, después de lo cual otros atributos de bloque de estilo se pueden aplicar. Elementos a nivel de bloque ocupan toda la anchura del espacio disponible, incluyendo espacio de línea por encima y por debajo del elemento, similar a la forma en párrafos tienen espacio por encima y por debajo de ellos.

• elemento de la lista: Esta opción convierte texto con estilo en una lista sin viñetas, similar a

y
las etiquetas.

• entrar corriendo: Esta característica es o no compatible, incompletamente apoyado o totalmente compatible, dependiendo del navegador. Actualmente los navegadores que proporcionan soporte completo incluyen Safari, Chrome, IE 8+ y Opera 5+. Agregue el entrar corriendo atribuir a la fuerza una caja de bloque después de una caja run-in para convertirse en una caja de línea de la caja de bloque.

  Un uso interesante es hacer que la línea de base de una cabecera comparten la misma línea de base como la primera línea de un siguiente bloque de texto de párrafo.

• inline-block: Utilice esta opción para hacer un bloque de comportarse como un bloque en línea con un ancho especificado.

• compacto: Esta opción es un buggy todavía bastante y está solamente al azar soportado actualmente. De hecho, puede estar ya en desuso, pero que no se puede confirmar en este momento. Cuando se especifica, este atributo obliga otros bloques en el código después de que se muestre lo largo de su lado.

• marcador: Esto convierte el contenido en un bloque de visualización en una caja del marcador, con el :antes de o :después pseudo-elemento, dentro de la cual puede estilo aún más el contenido.

• mesa: Utilice este atributo para mostrar elementos dentro de una mesa sin tener que utilizar tablas HTML. En teoría, cualquier elementos anidados se muestran como si fueran table-row y table-cell elementos. Valores adicionales de la tabla de visualización para esta propiedad son inline-table, table-row-group, tabla-header-grupo, tabla-pie de página del grupo, table-row, table-column-group, table-column, table-cell, y tabla-caption.

  Este inmueble ya está disponible en todos los principales navegadores, incluyendo IE 9+ e IE 8, pero sólo en IE 8 cuando no está presente.

• heredar: Cuando se especifica esta opción, el objeto de estilo hereda el valor de la pantalla de su elemento padre.

Los bloques son una de las categorías de propiedad que tienen una gran cantidad de capacidades más allá de los básicos descritos aquí. No todas las propiedades están constantemente compatibles con todos los navegadores, pero dependiendo del público objetivo, algunos de ellos podrían ser perfectamente adecuado para un proyecto web en particular. Para obtener más información sobre las propiedades de pantalla, revise las páginas de información del bloque en el sitio web del W3C.