Lenguaje de hojas de estilo

Un lenguaje de estilo , o simplemente lenguaje de estilo , es un lenguaje informático que define la presentación de documentos estructurados . Una característica atractiva de los documentos estructurados es que su contenido puede reutilizarse en diversos contextos y presentarse de distintas maneras. Se pueden aplicar diferentes hojas de estilo a la estructura lógica para generar presentaciones diferentes.

Un lenguaje de hojas de estilo moderno y de uso generalizado es Cascading Style Sheets (CSS), que se utiliza para dar estilo a documentos escritos en HTML , XHTML , SVG , XUL y otros lenguajes de marcado .

Para que el contenido de los documentos estructurados se presente correctamente, es necesario aplicar un conjunto de reglas de estilo que describan, por ejemplo, los colores, las fuentes y el diseño. Este conjunto de reglas se denomina hoja de estilo. Las hojas de estilo, en forma de documentos escritos, tienen una larga trayectoria de uso por parte de editores y tipógrafos para garantizar la coherencia en la presentación, la ortografía y la puntuación. En la publicación electrónica, los lenguajes de las hojas de estilo se utilizan principalmente en el contexto de la presentación visual, más que en el de la ortografía y la puntuación.

Todos los lenguajes de hojas de estilo ofrecen funcionalidad en estas áreas:

Sintaxis

Un lenguaje de hojas de estilo necesita una sintaxis para poder expresarse de forma legible por máquina. Por ejemplo, aquí hay una hoja de estilo simple escrita en la sintaxis CSS:

h1 { font-size : 1.5 em }

Esto indica que los encabezados del nivel 1 deben mostrarse con un tamaño de fuente 1,5 veces mayor que el del texto circundante.

Selectores

Los selectores especifican qué elementos se verán afectados por la regla de estilo. Por lo tanto, los selectores son el nexo entre la estructura del documento y las reglas de estilo de las hojas de estilo. En el ejemplo anterior, el selector "h1" selecciona todos los elementos h1. Los selectores más complejos pueden seleccionar elementos en función de, por ejemplo, su contexto, atributos y contenido.

Propiedades

Todos los lenguajes de hojas de estilo tienen algún concepto de propiedades a las que se les pueden asignar valores para modificar algún aspecto de la representación de un elemento. En el ejemplo anterior se utiliza la propiedad "font-size" de CSS. Los lenguajes de hojas de estilo más comunes suelen tener alrededor de 50 propiedades para describir la presentación de los documentos.

Valores y unidades

Las propiedades modifican la representación de un elemento al asignarle un valor determinado. Este valor puede ser una cadena de texto, una palabra clave, un número o un número con un identificador de unidad. También pueden ser listas o expresiones que incluyan varios de los valores mencionados. Un valor típico en una hoja de estilo visual es una longitud; por ejemplo, "1.5em", que consta de un número (1.5) y una unidad (em). El valor "em" en CSS se refiere al tamaño de fuente del texto circundante. Los lenguajes de hojas de estilo más comunes tienen alrededor de diez unidades diferentes.

Mecanismo de propagación del valor

Para evitar tener que especificar explícitamente todos los valores de todas las propiedades de todos los elementos, los lenguajes de hojas de estilo cuentan con mecanismos para propagar los valores automáticamente. La principal ventaja de la propagación de valores es la reducción de la verbosidad en las hojas de estilo. En el ejemplo anterior, solo se especifica el tamaño de la fuente; los demás valores se obtendrán mediante mecanismos de propagación. La herencia, los valores iniciales y la propagación en cascada son ejemplos de estos mecanismos.

Modelo de formato

Todos los lenguajes de hojas de estilo admiten algún tipo de modelo de formato. La mayoría de estos lenguajes cuentan con un modelo de formato visual que describe, con cierto detalle, cómo se distribuye el texto y otros contenidos en la presentación final. Por ejemplo, el modelo de formato CSS especifica que los elementos de nivel de bloque (de los cuales "h1" es un ejemplo) se extienden para ocupar todo el ancho del elemento padre. Algunos lenguajes de hojas de estilo también cuentan con un modelo de formato auditivo. ^{[ 1 ]}