mozilla
Wyniki wyszukiwania

    Dane XML

    Ta strona zawiera przykład tego, jak możesz używać CSS z danymi XML.

    Stworzysz przykładowy dokument XML oraz arkusz stylów, którego możesz użyć do wyświetlenia tego dokumentu w przeglądarce.

    Informacja: Dane XML

    XML (Rozszerzalny Język Znaczników) jest językiem ogólnego przeznaczenia dla wszelkiego typu danych strukturalnych.

    Domyślnie, Twoja przeglądarka Mozilla wyświetla XML w formacie bardzo podobnym do ułożenia danych w oryginalnym pliku XML. Dzięki temu możesz obejrzeć znaczniki, które określają strukturę danych.

    Przez podpięcie arkusza stylów CSS do dokumentu XML, może określić inne sposoby wyświetlenia go. Aby to zrobić, Twój arkusz stylów używa reguł, które mapuje znaczniki w dokumencie XML, aby były wyświetlane w typach znanych HTML-owi.

    Przykład
    Dane w dokumencie XML używają tagu <INFO>. Chcesz, aby wszystkie elementy INFO w dokumencie były wyświetlane jak HTML-owe akapity.

    W arkuszu stylów dokumentu, określasz jak wyświetlane będą elementy INFO:

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

    Najczęstszymi wartościami własności display są:

    blockWyświetlane jak HTML-owy DIV (nagłówki, akapity itp.)
    inlineWyświetlany jak HTML-owy SPAN (dla typów tekstowych)

    Dodaj własne reguły stylów, które określą krój, odstępy i inne szczegóły w taki sam sposób, jak dla HTML-a.

    Więcej szczegółów
    Inne wartości własności display pozwalają wyświetlać element jako punkt listy lub jako komponent tabeli.

    Pełną listę typów wyświetlania można znaleźć w specyfikacji CSS na stronie The display property.

    Jeśli korzystasz wyłącznie z CSS, struktura wyświetlania musi być taka sama jak struktura dokumentu. Inne technologie pozwalają modyfikować strukturę wyświetlania—na przykład XBL może dodawać treść, a JavaScript może modyfikować DOM.

    Aby dowiedzieć się więcej o XML-u w Mozilli, zajrzyj na stronę XML w tym wiki.

    Zadanie: Demonstracja XML-a

    Stwórz nowy plik XML, doc9.xml. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:

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

    Stwórz nowy plik CSS, style9.css. Skopiuj i wklej do niego poniższy kod, upewniając się, że zaznaczyłeś(aś) cały:

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

    Otwórz dokument w swojej przeglądarce:

    Oceans

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

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

    . . .


    Uwagi dotyczące tej demonstracji:

    • Indeks górny 2 (w "miliony km²") jest znakiem Unicode, zakodowanym jako \B2 w pliku CSS.
    • Nagłówek "Oceany" ma ujemny górny margines zewnętrzny, przesuwający go w górę, dzięki czemu jest wyświetlany nad ramką.


    Wyzwanie
    Zmień arkusz stylów, aby wyświetlał dokument jako tabelę.

    (Zajrzyj na stronę Tables w specyfikacji CSS, aby znaleźć przykłady.)

    Co dalej?

    Jeżeli masz problemy ze zrozumieniem tej strony, lub jeżeli masz jakieś komentarze na jej temat, pomóż nam dopisując się na stronie Dyskusji.

    To jest ostatnia strona tego kursu. Więcej informacji na temat CSS w Mozilli możesz znaleźć na głównej stronie CSS-a na tym wiki.

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Takenbot, teoli, Verruckt, Ptak82, gandalf, Mgjbot, Witia
    Ostatnia aktualizacja: teoli,