Dados XML

 

Esta página contém um exemplo de como você pode usar o CSS com dados XML.

Você cria um documento XML de amostra e uma folha de estilo que você pode usar para exibí-lo em seu navegador.

Informação: Dados XML

XML (eXtensible Markup Language) é uma linguagem de propósito geral para qualquer tipo de dados estruturados.

Por padrão, seu navegador Mozilla mostra o XML em um formato muito similar aos dados originais no arquivo XML. Você vê as tags reais que definem a estrutura dos dados.

Ligando a folha de estilo CSS com o documento XML, você pode definir outras maneiras para mostrá-lo. Para fazer isto, sua folha de estilo usa regras que mapeiam os tags no documento XML para mostrar tipos usados pelo HTML.

Exemplo
Dados em um documento XML usando tags <INFO>. Você quer que os elementos INFO do documento sejam mostrados como parágrafos no HTML.

Na folha de estilo do documento, você especifica como os elementos INFO serão exibidos:

INFO {
  display: block;
  margin: 1em 0;
  }

Os valores mais comuns para a propriedade display são:

block Monstrado como DIV do HTML (para cabeçalhos, parágrafos)
inline Mostrado como SPAN do HTML (para ênfases no texto)

Adicione seu próprio estilo de regras para especificar a fonte, espaçamento e outros detalhes da mesma maneira que no HTML.

Mais detalhes
Outros valores de display mostram o elemento como o item de uma lista, ou como o componente de uma tabela.

Para a lista completa de tipos de exibição, veja The display property em CSS Specification.

Usando CSS sozinho, a estrutura de exibição precisa ser a mesma da estrutura do documento. Outras tecnologias pode modificar a estrutura da exibição — por exemplo, o XBL pode adicionar conteúdo, e o JavaScript pode modificar o DOM.

Para mais informações sobre o XML no Mozilla, veja a página XML neste wiki.

Ação: Uma demonstração XML

Crie um novo arquivo XML, doc9.xml. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="style9.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>

Crie um novo arquivo CSS, style9.css. Copie e cole o conteúdo daqui, tendo certeza de ter rolado a tela e pego tudo isto:

/*** XML demonstration ***/

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }

Abra o documento em seu navegador:

Oceans

Arctic
Area: 13,000 million km²
Mean depth: 1,200 m

Atlantic
Area: 87,000 million km²
Mean depth: 3,900 m

. . .


Notas sobre esta demonstração:

  • O 2 sobre-escrito (em "million km²") um caractér Unicode, é codificado com \B2 no arquivo CSS.
  • O cabeçalho, "Oceans", tem uma margem negativa no topo, movendo-o para cima quando exibido no topo da borda.

 

Desafio
Mude a folha de estilo de modo que ela mostre o documento como uma tabela.

(Veja o capítulo Tables em CSS Specification para exemplos que você pode adaptar.)

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Esta é a última página do tutorial. Para mais informações sobre CSS no Mozilla, veja a página principal CSS neste wiki.

Categorias

Interwiki Language Links

Etiquetas do documento e colaboradores

Etiquetas: 
Contributors to this page: fscholz, teoli, Verruckt, Leandro Mercês Xavier
Última atualização por: fscholz,