¿Qué es una hoja de estilos en cascada?

En esta sección:

Las hojas de estilos en cascada (CSS) son una extensión del HTML que permite especificar el formato en documentos HTML. Puede utilizar dos tipos de CSS con WebFOCUS:

Puede definir clases en una hoja de estilos en cascada y dar formato a un componente de informe asignándole una de estas clases CSS. Las clases aparecen descritas en ¿Qué son reglas y clases de una hoja de estilos en cascada?.

El término en cascada se refiere a las distintas hojas de estilos que pueden activarse simultáneamente para un documento individual. Por ejemplo, puede tener una hoja de estilos asociada al documento mismo, otra vinculada al primero y una tercera, incluso, asociada al navegador web en que aparece el documento. Cuando hay múltiples hojas de estilos activas, se aplican al documento en una secuencia predeterminada establecida por el navegador: puede decirse que sus instrucciones de formateo bajan en cascada de una hoja de estilos a la siguiente.

Las ventajas de utilizar una hoja de estilos externa en cascada para aplicar un formato a un informe aparecen descritas en ¿Por qué utilizar una hoja de estilos en cascada?

Las hojas de estilos en cascada externas le serán útiles si:

Para más información acerca de las hojas de estilos internas en cascada, consulte Cómo generar una hoja de estilos interna en cascada para informes HTML.

¿Necesita más información acerca de las CSS? Esta documentación de WebFOCUS da por sentado que tiene un conocimiento funcional de las hojas de estilos en cascada. La formación en CSS está fuera del ámbito de esta documentación, aunque existen muchos recursos informativos a su disposición. Un buen lugar para comenzar es el sitio web dedicado a las hojas de estilos en cascada (http://www.w3.org/Style/CSS/).


Principio de página

x
¿Qué son reglas y clases de una hoja de estilos en cascada?

La hoja de estilos en cascada (CSS) define el formato mediante declaraciones llamadas reglas. Por ejemplo, esta es una regla simple que convierte en amarillo el color de fondo del cuerpo de una página HTML:

BODY {background: yellow}

Cada regla cuenta con un selector (BODY en este ejemplo) y una declaración (fondo: amarillo). Una declaración cuenta con una propiedad (fondo) y un valor asignado a la propiedad (amarillo).

Una declaración define formato en tanto que un selector determina a qué se aplicará el formato. Cualquier elemento HTML puede ser un selector. Un selector también puede ser una clase. Puede definir una clase con sólo crear una regla para ella. Al crear reglas para clases de un elemento, puede definir diferentes formatos para el mismo elemento.

Por ejemplo, puede que desee mostrar el texto en un color distinto, dependiendo de si se encuentra en una columna de clasificación, agregado o detalles de un informe. Para ello, puede crear tres clases de elemento BODY, sortColumn, aggregateColumn y detailColumn:

BODY.sortColumn {color: blue}
BODY.aggregateColumn {color: green}
BODY.detailColumn {color: black}

Puede también definir una clase genérica, es decir, una clase que no esté limitada a un solo elemento. Por ejemplo:

.pageFooting {font-weight: bolder}

Puede utilizar una clase genérica para especificar el formato de cualquier componente de informe de WebFOCUS.

El uso de las reglas y clases de hojas de estilos externas en cascada para aplicar un formato a un informe aparece descrito en Cómo dar formato a un informe con una hoja de estilos externa en cascada.


WebFOCUS