mozilla
Os seus resultados da pesquisa

    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: Verruckt, Leandro Mercês Xavier, fscholz, teoli
    Última atualização por: fscholz,