mozilla
Wyniki wyszukiwania

    Listy

    Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list.

    Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej.

    Informacja: Listy

    Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (Treść), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy.

    CSS posiada specjalne własności stworzone dla list. Staraj się z nich korzystać, jeśli masz możliwość.

    Aby określić styl dla listy, użyj własności list-style do określenia typu znacznika.

    Selektor w regule CSS może określać elementy listy (np. LI) lub element rodzica list (np. UL), z którego elementy listy będą dziedziczyły te style.

    Listy nieuporządkowane (unordered lists)

    W liście nieuporządkowanej każdy element jest oznaczony w ten sam sposób.

    W CSS występują trzy typy oznaczeń. Wyświetlane są w następujący sposób:

    • disc
    • circle
    • square

    Alternatywnie możesz określić URL do obrazka.

    Przykład
    Te reguły określają różne oznaczenia dla różnych klas elementów listy:

    li.open {list-style: circle;} li.closed {list-style: disc;}

    Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte:

    <UL>

     <LI class="open">Lorem ipsum</LI>
     <LI class="closed">Dolor sit</LI>
     <LI class="closed">Amet consectetuer</LI>
     <LI class="open">Magna aliquam</LI>
     <LI class="closed">Autem veleum</LI>
    

    </UL>

    Wynik może wyglądać na przykład tak:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum

    Listy uporządkowane (ordered lists)

    W przypadku list uporządkowanych każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji.

    Użyj własności list-style, aby określić typ oznaczenia:

    • decimal
    • lower-roman
    • upper-roman
    • lower-latin
    • upper-latin
    Przykład
    Ta reguła określa, że w bloku OL z klasą info elementy są oznaczane dużymi literami.

    ol.info {list-style: upper-latin;}

    Elementy LI dziedziczą ten styl:

    • Lorem ipsum
    • Dolor sit
    • Amet consectetuer
    • Magna aliquam
    • Autem veleum
    Więcej szczegółów
    Własność list-style jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji Listy w dokumentacji CSS.

    Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (UL) i uporządkowanych (OL), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić UL jako posortowaną, a OL jako nieposortowaną, jeśli wolisz.

    Różne przeglądarki w różny sposób obsługują te style dla list. Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich.

    Liczniki

    Notatka:  Niektóre przeglądarki nie obsługują liczników.

    Możesz używać liczników do różnych elementów, nie tylko list. Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy.

    Aby określić numerację, musisz zadeklarować counter z określoną nazwą.

    W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości counter-reset i nazwą Twojego licznika. Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy.

    W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość counter-increment. Jako wartość podaj nazwę licznika.

    Aby wyświetlić wartość licznika, dodaj :before lub :after do selektora i użyj własności content (tak jak na poprzedniej stronie Treść).

    Jako wartość własności content wstaw counter() z nazwą swojego licznika. Opcjonalnie określ typ. Typy są takie same jak w sekcji 'listy uporządkowane.

    Zwykle element, który wyświetla licznik, inkrementuje go.

    Przykład
    Ta reguła inicjalizuje licznik w każdym elemencie H3 z klasą numbered:

    h3.numbered {counter-reset: mynum;}

    Ta reguła wyświetla i inkrementuje licznik dla każdego elementu P z klasą numbered:

    p.numbered:before {

     content: counter(mynum) ": ";
     counter-increment: mynum;
     font-weight: bold;}
    

    Wynik wygląda tak:

    Heading

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum

    Więcej szczegółów
    Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę.

    Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie.

    Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji Automatyczne liczniki i numerowanie.

    Zadanie: Style list

    Stwórz nowy dokument HTML, doc2.html. Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Sample document 2</TITLE> <LINK rel="stylesheet" type="text/css" href="style2.css"> </HEAD> <BODY>   <H3 id="oceans">The oceans</H3> <UL> <LI>Arctic</LI> <LI>Atlantic</LI> <LI>Pacific</LI> <LI>Indian</LI> <LI>Southern</LI> </UL>   <H3 class="numbered">Numbered paragraphs</H3> <P class="numbered">Lorem ipsum</P> <P class="numbered">Dolor sit</P> <P class="numbered">Amet consectetuer</P> <P class="numbered">Magna aliquam</P> <P class="numbered">Autem veleum</P>   </BODY> </HTML>

    Stwórz nowy arkusz stylów, style2.css. Skopiuj i wklej poniższą treść:

    /* numbered paragraphs */ h3.numbered {counter-reset: mynum;}   p.numbered:before {

     content: counter(mynum) ": ";
     counter-increment: mynum;
     font-weight: bold;}
    

    Jeżeli układ i komentarze Ci nie odpowiadają, zmień je.

    Otwórz ten dokument w swojej przeglądarce. Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków):

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    Numbered paragraphs

    1: Lorem ipsum

    2: Dolor sit

    3: Amet consectetuer

    4: Magna aliquam

    5: Autem veleum


    Wyzwania
    Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v:

    The oceans

    • Arctic
    • Atlantic
    • Pacific
    • Indian
    • Southern

    Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu:

    (A) The oceans

    . . .

    (B) Numbered paragraphs

    . . .


    Co dalej?

    Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji.

    Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie.

    Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: Bloki

    Autorzy i etykiety dokumentu

    Etykiety: 
    Contributors to this page: Anonymous, Takenbot, Sheppy, Delor, Verruckt, Ptak82, gandalf, teoli, Witia
    Ostatnia aktualizacja: teoli,