Lenguaje de hojas de estilo

Un lenguaje de hojas de estilo , o lenguaje de estilo , es un lenguaje informático que expresa la presentación de documentos estructurados . Una característica atractiva de los documentos estructurados es que el contenido se puede reutilizar en muchos contextos y presentarse de diversas maneras. Se pueden adjuntar diferentes hojas de estilo a la estructura lógica para producir diferentes presentaciones.

Un lenguaje de hojas de estilo moderno con un 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, se debe aplicar un conjunto de reglas estilísticas que describan, por ejemplo, los colores, las fuentes y el diseño. Una colección de reglas estilísticas se denomina hoja de estilo. Las hojas de estilo en forma de documentos escritos tienen una larga historia de uso por parte de editores y tipógrafos para garantizar la coherencia de la presentación, la ortografía y la puntuación. En la publicación electrónica, los lenguajes de 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í se muestra una hoja de estilo simple escrita con la sintaxis CSS:

h1 { tamaño de fuente : 1.5 em }    

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

Selectores

Los selectores especifican qué elementos se verán afectados por la regla de estilo. Por tanto, los selectores son el nexo de unión 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, por ejemplo, de 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 cambiar un aspecto de la representación de un elemento. La propiedad "font-size" de CSS se utiliza en el ejemplo anterior. Los lenguajes de hojas de estilo comunes suelen tener alrededor de 50 propiedades para describir la presentación de los documentos.

Valores y unidades

Las propiedades cambian la representación de un elemento al asignársele un valor determinado. El valor puede ser una cadena, una palabra clave, un número o un número con un identificador de unidad. Además, los valores pueden ser listas o expresiones que incluyan varios de los valores mencionados anteriormente. 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 comunes tienen alrededor de diez unidades diferentes.

Mecanismo de propagación de 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 tienen mecanismos para propagar valores automáticamente. El principal beneficio de la propagación de valores es que las hojas de estilo son menos detalladas. En el ejemplo anterior, solo se especifica el tamaño de fuente; los demás valores se encontrarán mediante mecanismos de propagación de valores. La herencia, los valores iniciales y la cascada son ejemplos de mecanismos de propagación de valores.

Modelo de formato

Todos los lenguajes de hojas de estilo admiten algún tipo de modelo de formato. La mayoría de los lenguajes de hojas de estilo tienen un modelo de formato visual que describe, con cierto detalle, cómo se presenta 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 llenar el ancho del elemento principal. Algunos lenguajes de hojas de estilo también tienen un modelo de formato auditivo. ^[1]