--- title: "Obtenga un mayor rendimiento de sus diseños StyleVision gracias a la selección dinámica de archivos CSS" date: "2012-01-10" description: Descubra cómo mejorar los diseños de StyleVision seleccionando dinámicamente archivos CSS en función de las condiciones de entrada, lo que simplifica el formato para diversos escenarios. --- Status: #blog Tags: Categories: [Altova](/blog/es/category/altova.md) # Obtenga un mayor rendimiento de sus diseños StyleVision gracias a la selección dinámica de archivos CSS Una de las grandes ventajas de StyleVision es la flexibilidad que ofrece. Con StyleVision, puede [diseñar hojas de estilo e informes visualmente sofisticados](https://www.altova.com/es/stylevision.html) para su salida en múltiples formatos, incluyendo HTML, PDF y formularios electrónicos. Ahora, StyleVision facilita aún más la adaptación a diferentes necesidades de formato en un único diseño, gracias a la selección dinámica de archivos CSS, una nueva función introducida en [StyleVision 2012](https://www.altova.com/es/whatsnew.html). Aunque todavía se pueden gestionar prácticamente todas las tareas de formato directamente desde el diseño de StyleVision, la selección dinámica de archivos CSS permite crear una única plantilla que se puede utilizar en múltiples situaciones. Para ilustrarlo, hemos creado una factura para la empresa ficticia Nanonull Corporation, cuyo diseño varía en función del número de días transcurridos entre la fecha de emisión de la factura y la fecha de vencimiento. Aunque podríamos haber utilizado XPath para modificar el formato de cada elemento en función del número de días transcurridos, en este caso es más eficiente crear archivos CSS individuales que se apliquen a diferentes escenarios. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) A continuación, se muestra la factura que diseñamos en StyleVision. Notarán que, más allá de los títulos en negrita, casi no tiene formato. Aplicaremos el formato basándonos en el número de días transcurridos entre la fecha de emisión de la factura y la fecha de vencimiento, utilizando archivos CSS. [![](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png)](https://1.bp.blogspot.com/-1zncGKAhYGA/TwtfIXQ63CI/AAAAAAAAAOA/Ej58hobUyKg/s1600/SVInvoiceDesign.png) Ahora podemos crear nuestros archivos CSS en XMLSpy, el software de Altova [Editor de XML](https://www.altova.com/es/xml-editor/) con soporte integrado para la edición de CSS2 y CSS3. Primero, crearemos un archivo CSS para las facturas con fechas de vencimiento posteriores a la fecha de emisión (es decir, las facturas que no están vencidas). Aquí, simplemente hemos creado el selector "body" con un fondo amarillento, el logotipo de Nanonull y una clase para el encabezado. [![](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png)](https://4.bp.blogspot.com/-mbndpc9C_QA/TwtfdWUSlxI/AAAAAAAAAOI/uTo7_WMRFIs/s1600/XMLSpyCssRegular.png) Ahora, crearemos un CSS más elaborado para las facturas vencidas. El selector "body" incluirá una imagen que indique que la factura está vencida, el selector de párrafo tendrá una fuente roja en negrita de 20 puntos, y las clases de encabezado y subencabezado tendrán una fuente roja en negrita en diferentes tamaños. [![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png) Ahora podemos asignar los archivos CSS al diseño de StyleVision y, posteriormente, asignar clases a diferentes elementos del diseño. En StyleVision, simplemente hacemos clic en "añadir nuevo archivo CSS" en la vista general de diseño y navegamos hasta los archivos CSS que creamos en XMLSpy. StyleVision admite múltiples archivos CSS en el mismo diseño. Nuestro diseño ahora tiene esta apariencia: observe que el formato de tanto CSSRegular como CSSOverdue se ha aplicado en la vista de diseño de StyleVision. [![](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png)](https://3.bp.blogspot.com/-Ul1kecAW_u0/TwtgdHO1BVI/AAAAAAAAAOY/5JlWVZTwldo/s1600/SVInvoicewithCSS.png) Sin embargo, nos gustaría asignar el archivo CSS en función de la distancia entre la fecha de emisión de la factura y la fecha de vencimiento. Por lo tanto, haremos clic derecho en la flecha que se encuentra junto al archivo CSS en la vista general de diseño y seleccionaremos la opción "Seleccionar un archivo CSS con XPath" (que se encuentra abajo). [![](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png)](https://1.bp.blogspot.com/-8HF6dn-DWoQ/TwtgpySS8RI/AAAAAAAAAOg/MR85xsCfxks/s1600/SelectOneCSS.png) Esto abrirá el cuadro de diálogo "Seleccionar archivo CSS mediante XPath" (que se muestra a continuación). Podemos utilizar XPath en este cuadro de diálogo para seleccionar el archivo CSS adecuado en función de los datos dinámicos. En este caso, hemos configurado StyleVision para que utilice el archivo CSSOverdue.css si la fecha de vencimiento de la factura es anterior a la fecha de emisión de la factura, y el archivo CSSRegular.css en todos los demás casos. [![](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png)](https://2.bp.blogspot.com/-HJJmqC87QSs/Twtg7ad728I/AAAAAAAAAOo/TmzbdKUP4_Y/s1600/SelectCSSdialog.png) Aquí está la expresión XPath completa que introdujimos en el cuadro de diálogo "Seleccionar archivo CSS mediante XPath" que se muestra arriba. [![](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png)](https://3.bp.blogspot.com/-wdZ5ui3cD-w/TwthFjH8e0I/AAAAAAAAAOw/aI3IE6NvJMQ/s1600/XPathSelectCSS.png) Ahora podemos asignar las clases definidas en los archivos CSS a los elementos de diseño individuales en el diseño de StyleVision. Aquí, hemos asignado el párrafo que contiene el texto "Factura" a la clase "encabezado" en el panel de estilos. Según el contenido de nuestros archivos CSS, este texto aparecerá en rojo, con una fuente de 20 puntos y en negrita, para las facturas vencidas, y en negro, con una fuente de 20 puntos y en negrita, para las facturas cuya fecha de vencimiento es posterior. [![](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png)](https://2.bp.blogspot.com/-RMtcQErqtU4/TwthWWeZRoI/AAAAAAAAAO4/jU-LSJfyNCw/s1600/SVAssignClass.png) De igual manera, asignaremos la fecha de vencimiento de la factura a la clase "encabezado pequeño" Ahora estamos listos para previsualizar la factura. A continuación, se muestra una vista previa en HTML de una factura vencida. Observe que el texto "Factura" y la fecha de vencimiento están en negrita y en color rojo, y que la imagen "Vencida" está estampada en el centro. [![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png) Ahora, observemos la misma factura, pero con una fecha de vencimiento en el futuro. Noten el fondo amarillo, el logotipo de Nanonull, y que las palabras "Factura" y la fecha de vencimiento aparecen en color negro. [![](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png)](https://3.bp.blogspot.com/-g_Lak8SS2do/Twthzrq1LXI/AAAAAAAAAPA/augs6gYDtvY/s1600/SVInvoiceRegular.png) La capacidad de seleccionar un archivo CSS en función de una entrada dinámica abre un abanico de posibilidades y hace que los diseños de StyleVision sean aún más adaptables. Con esta función, puede realizar cambios de formato al instante a través de los archivos CSS asociados a un diseño, lo cual es especialmente útil para diseños con muchos elementos. ¿Ha creado un proyecto excelente utilizando la hoja de estilos StyleVision y el diseñador de informes, o alguna de las otras herramientas de Altova, y quiere mostrarlo? Comparta su experiencia con otros usuarios de Altova comentando en esta publicación del blog. Si cree que su caso podría ser un excelente estudio de caso, visite la página de [estudios de caso de Altova](https://www.altova.com/es/case-studies.html). Si utilizamos su historia, recibirá una tarjeta de regalo de Amazon por valor de 200 dólares. ¡Nos encantaría saber de usted!