---
title: "Aproveite ao máximo os seus designs StyleVision com a seleção dinâmica de ficheiros CSS"
date: "2012-01-10"
description: Descubra como aprimorar os designs do StyleVision, selecionando dinamicamente ficheiros CSS com base em condições de entrada, otimizando a formatação para diferentes cenários.
---
Status: #blog

Tags: 

Categories: [Altova](/blog/pt/category/altova.md) 
# Aproveite ao máximo os seus designs StyleVision com a seleção dinâmica de ficheiros CSS

  

Uma das grandes vantagens do StyleVision é a flexibilidade que oferece. Com o StyleVision, é possível [criar folhas de estilo e relatórios visualmente sofisticados](https://www.altova.com/pt/stylevision.html) para diferentes formatos, incluindo HTML, PDF e formulários eletrónicos. Agora, o StyleVision torna ainda mais fácil adaptar-se a diferentes necessidades de formatação num único design, com a seleção dinâmica de ficheiros CSS – uma nova funcionalidade introduzida no [StyleVision 2012](https://www.altova.com/pt/whatsnew.html).

Embora seja possível gerir praticamente todas as tarefas de formatação diretamente no design do StyleVision, a seleção dinâmica de ficheiros CSS permite criar um único modelo para utilização em diversas situações. Para demonstrar, criámos uma fatura para a empresa fictícia Nanonull Corporation, cujo design se adapta consoante o número de dias decorridos entre a data de emissão da fatura e a data de vencimento. Embora pudéssemos ter utilizado XPath para alterar a formatação de cada elemento com base no número de dias decorridos, neste caso, é mais eficiente criar ficheiros CSS individuais que se aplicam a diferentes cenários.  
  

[![](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)](https://2.bp.blogspot.com/-2DH6jtpWGkA/TwtexsvmAJI/AAAAAAAAAN4/gktiYK30CEU/s1600/SVInvoiceOverdue.png)

  
  
Abaixo, encontra-se a fatura que criámos no StyleVision. Note que, para além dos títulos em negrito, ela está quase sem formatação. Aplicaremos a formatação com base no número de dias decorridos entre a data de emissão da fatura e a data de vencimento, através de ficheiros 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)

  
Agora podemos criar os nossos ficheiros CSS no XMLSpy, da Altova [Editor XML](https://www.altova.com/pt/xml-editor/) com suporte integrado para a edição de CSS2 e CSS3. 
  
Primeiro, vamos criar um ficheiro CSS para as faturas com datas de vencimento posteriores à data de emissão da fatura (ou seja, faturas que não estão em atraso). Neste caso, criámos simplesmente o seletor "body" com um fundo amarelado, o logótipo da Nanonull e uma classe para o cabeçalho.  
  

[![](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)

Agora, vamos criar um CSS mais elaborado para as faturas em atraso. O seletor "body" incluirá uma imagem de "atrasado", o seletor de parágrafos terá uma fonte vermelha e negrita de 20 pontos, e as classes de cabeçalho e sub-cabeçalho terão uma fonte vermelha e negrita em diferentes tamanhos.

  

[![](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)](https://1.bp.blogspot.com/-KgWFX2KQklg/TwtfzBAbJiI/AAAAAAAAAOQ/05Dqjw25TVE/s1600/CSSOverdue.png)

Agora podemos atribuir os ficheiros CSS ao design do StyleVision e, posteriormente, atribuir classes a diferentes elementos do design.

No StyleVision, basta clicar em "Adicionar novo ficheiro CSS" na visão geral do design e navegar até aos ficheiros CSS que criámos no XMLSpy. O StyleVision suporta vários ficheiros CSS no mesmo design.

  

O nosso design tem agora esta aparência – notem que a formatação proveniente tanto do CSSRegular como do CSSOverdue foi aplicada na visualização de design do 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)

  

No entanto, gostaríamos de atribuir o ficheiro CSS com base na distância entre a data de emissão da fatura e a data de vencimento. Para isso, clicaremos com o botão direito do rato na seta ao lado do ficheiro CSS na visão geral do design e selecionaremos a opção "Selecionar um ficheiro CSS com XPath" (abaixo).

  

[![](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)

Isto irá abrir a caixa de diálogo "Selecionar ficheiro CSS usando XPath" (mostrada abaixo). Podemos usar o XPath nesta caixa de diálogo para selecionar o ficheiro CSS apropriado, com base em dados variáveis. Neste caso, instruímos o StyleVision a usar o ficheiro CSSOverdue.css se a data de vencimento da fatura for anterior à data de emissão da fatura, e o ficheiro CSSRegular.css em todos os outros 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)

Aqui está o XPath completo que introduzimos na caixa de diálogo "Selecionar ficheiro CSS usando XPath" mencionada acima.

  

[![](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)

  

Agora podemos atribuir as classes definidas nos ficheiros CSS aos elementos de design individuais no design do StyleVision.

  

Nesta secção, atribuímos o parágrafo que contém o texto "Fatura" à classe "cabeçalho" no painel de Estilos. Com base no conteúdo dos nossos ficheiros CSS, este texto aparecerá a vermelho, em negrito e com tamanho 20, para faturas em atraso, e a preto, em negrito e com tamanho 20, para faturas cuja data de vencimento está no futuro.

[![](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)

Da mesma forma, vamos atribuir a data de vencimento da fatura à classe "título pequeno"

  

Agora, estamos prontos para visualizar a fatura.

A seguir, apresentamos uma pré-visualização em HTML de uma fatura em atraso. Note que o texto "Fatura" e a data de vencimento estão em fonte vermelha e negrito, e que a imagem "Em Atraso" está estampada no 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)

  

  
Agora, vamos analisar a mesma fatura, mas com uma data de vencimento futura. Observe o fundo amarelo, o logótipo da Nanonull, e que as palavras "Fatura" e a data de vencimento aparecem em preto.  
  

[![](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)

A capacidade de selecionar um ficheiro CSS com base em informações dinâmicas abre um leque de possibilidades e torna os seus designs StyleVision ainda mais adaptáveis. Com esta funcionalidade, pode fazer alterações de formatação em tempo real através dos ficheiros CSS associados a um design – o que é especialmente útil para designs com muitos elementos.

Criou um projeto excelente utilizando a folha de estilos StyleVision e o editor de relatórios, ou alguma outra ferramenta da Altova, e gostaria de mostrá-lo? Partilhe a sua experiência com outros utilizadores da Altova comentando neste artigo do blog.

Se acha que esta história seria um excelente estudo de caso, visite a página de [estudos de caso da Altova](https://www.altova.com/pt/case-studies.html). Se utilizarmos a sua história, receberá um cartão presente da Amazon no valor de 200 dólares. Teremos todo o prazer em ouvir o que tem para nos contar!