En un informe con un formato de hoja de estilos externa en cascada (CSS), un componente de informe hereda el formato del elemento TD y de todos los elementos que contiene TD, como BODY. (Tenga en cuenta que la herencia, como todo comportamiento de CSS, se implementa mediante el navegador Web de cada usuario y, por tanto, depende del navegador).

Esto difiere del comportamiento de un informe con formato de hoja de estilos de WebFOCUS, en que el componente de informe hereda el formato de un componente de nivel superior. Cuando da formato a un informe con clases de hoja de estilos externa en cascada, una clase asignada a un componente de informe no hereda el formato de una clase que se haya asignado a un componente nivel superior.

Este informe muestra una lista de proveedores que suministran productos a Gotham Grinds. Sus instrucciones de formateo especifican que:

• Todo el informe tenga color naranja de fondo por defecto. Esto se especifica en una regla para el elemento TD.
• Los datos del informe aparecen con una fuente Arial, cursiva. Los datos del informe heredan el color de fondo naranja de la regla de TD.
• Los datos PRODUCT_ID del informe tienen un color de fondo amarillo, lo que anula la opción predeterminada especificada en la regla de TD.

  Si el formato del informe se especificó en una hoja de estilos WebFOCUS, en vez de en una CSS externa, PRODUCT_ID hereda la fuente Arial, en cursiva, de su componente de informe principal (es decir, de los datos del informe). A diferencia de esto y dado que el formato se especifica en una CSS externa, PRODUCT_ID hereda formato desde la regla para el elemento TD, no desde un componente de informe de nivel superior, por lo que no hereda la fuente Arial en estilo de cursiva.

La solicitud de informe y la hoja de estilos en línea de WebFOCUS aparecen en el siguiente procedimiento, prodvend.fex. La hoja de estilos en cascada externa, llamada report02.css, sigue al procedimiento.

prodvend.fex

   TABLE FILE GGPRODS
   PRINT PRODUCT_DESCRIPTION VENDOR_NAME
   BY PRODUCT_ID
   ON TABLE SET PAGE-NUM OFF

   ON TABLE SET STYLE * 
1. TYPE=REPORT, CSSURL = http://websrv2/css/report02.css, $ 
2. TYPE=DATA, CLASS=Data, $ 
3. TYPE=DATA, COLUMN=PRODUCT_ID, CLASS=Sort, $
    ENDSTYLE

    END

report02.css

4. TD    {background:orange; border:0} 
5. TABLE {border:0} 
6. .Data {font-style:italic; font-family:Arial} 
7. .Sort {background:yellow}

1. Ajuste CSSURL para que enlace con la hoja de estilos en cascada externa report01.css.
2. De formato a los datos del informe a través de la regla CSS de la clase Data.
3. De formato a los datos de PRODUCT_ID del informe a través de la regla CSS de la clase Sort. (En general esto anula la declaración de datos de informe, en la línea 2).
4. Esta regla de CSS para el elemento TD, especifica un fondo naranja. Dado que es una regla de TD, se aplica a todo el informe. Esto puede anularse para un componente concreto del informe mediante la aplicación de una regla de clase genérica en ese componente, al igual que hace con la regla de la clase Sort de este procedimiento (consulte la línea 7).
5. Estas reglas CSS de los elementos TD y TABLE, eliminan la cuadrícula predeterminada del informe.
6. Esta regla CSS de la clase genérica Data, especifica una fuente Arial, en cursiva. La hoja de estilos de WebFOCUS aplica esto a los datos del informe (línea 2).

   Esta regla hereda el color de fondo de la regla del elemento TD (línea 4).

7. Esta regla CSS de la clase genérica Sort, especifica un fondo amarillo. La hoja de estilos de WebFOCUS aplica esta regla a los datos de PRODUCT_ID (línea 3).

   Esta regla anula el color de fondo predeterminado especificado en la línea 4.

Este procedimiento muestra el siguiente informe: