From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../css/como_come\303\247ar/dados_xml/index.html" | 239 +++++++++++++++++++++ 1 file changed, 239 insertions(+) create mode 100644 "files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" (limited to 'files/pt-pt/web/css/como_começar/dados_xml') diff --git "a/files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" "b/files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" new file mode 100644 index 0000000000..d0245353fa --- /dev/null +++ "b/files/pt-pt/web/css/como_come\303\247ar/dados_xml/index.html" @@ -0,0 +1,239 @@ +--- +title: Dados XML +slug: Web/CSS/Como_começar/Dados_XML +tags: + - 'CSS:Como_começar' +translation_of: Archive/Beginner_tutorials/XML_data +--- +

{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}

+ +

 

+ +

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:

+ + + + + + + + + + + + +
blockMonstrado como DIV do HTML (para cabeçalhos, parágrafos)
inlineMostrado 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:

+ + + +

 

+ + + + + + + + +
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.

+ +

{{ Previous("Web/CSS/Como_começar/Gráficos_SVG") }}

+ +

Categorias

+ +

Interwiki Language Links

-- cgit v1.2.3-54-g00ecf