Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil) . Junte-se a nós e ajude a fazer o trabalho!

This page contains an example of how you can use CSS with XML data.

You create a sample XML document, and a stylesheet that you can use to display it in your browser.

This is the 3rd section of Part II of the CSS tutorial.
Previous section: SVG
Next section:  XBL binding

Information: XML data

XML (eXtensible Markup Language) is a general-purpose language for any kind of structured data.

By default, your Mozilla browser displays XML in a format very similar to the original data in the XML file. You see the actual tags that define the data's structure.

By linking a CSS stylesheet with the XML document, you can define other ways to display it. To do this, your stylesheet uses rules that map tags in the XML document to the display types used by HTML.

Example
Data in an XML document uses <INFO> tags. You want the document's INFO elements to be displayed like HTML paragraphs.

In the document's stylesheet, you specify how INFO elements are to be displayed:

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

The most common values for the display property are:

block Displayed like HTML's DIV (for headings, paragraphs)
inline Displayed like HTML's SPAN (for emphasis within text)

Add your own style rules that specify the font, spacing and other details in the same way as for HTML.

More details
Other values of display display the element like a list item, or like a component of a table.

For the full list of display types, see The display property in the CSS Specification.

Using CSS alone, the structure of the display must be the same as the structure of the document. Other technologies can modify the structure of the display—for example, XBL can add content, and JavaScript can modify the DOM.

For more information about XML in Mozilla, see the XML page in this wiki.

Action: An XML demonstration

Make a new XML file, doc9.xml. Copy and paste the content from here, making sure that you scroll to get all of it:

<?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>

Make a new CSS file, style9.css. Copy and paste the content from here, making sure that you scroll to get all of it:

/*** 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";
  }

Open the document in your browser:

Oceans

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

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

. . .


Notes about this demonstration:

  • The superscript 2 (in "million km²") a Unicode character, coded as \B2 in the CSS file.
  • The heading, "Oceans", has a negative top margin, moving it up so it is displayed on top of the border.

 

Challenge
Change the stylesheet so that it displays the document as a table.

(See the Tables chapter in the CSS Specification for examples that you can adapt.)

What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

This is the last page of the tutorial. For more information about CSS in Mozilla, see the main CSS page in this wiki.

Etiquetas do documento e colaboradores

 Última atualização por: xfq,