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.

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

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

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

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:

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.

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