Własności opisane w tym rozdziale służą do klasyfikowania elementów do odpowiednich kategorii, w odróżnieniu od dotychczas omawianych, które wpływały w pewien sposób na ich prezentację. Własności typu list-style służą do kontrolowania sposobu formatowania elementów list (tzn. elementów posiadających wartość list-item dla własności display). Własności list-style mogą być stosowane do wszystkich elementów z zachowaniem normalnego dziedziczenia. Aczkolwiek efekt ich działania na element jest widoczny dopiero po ustawieniu własności display na list-item. W języku HTML element LI zazwyczaj odpowiada tym wymaganiom.

5.6.1 display

Wartości: block | inline | list-item | none
Wartość domyślna: block
Zastosowanie: wszystkie elementy
Dziedziczenie: nie
Wartości procentowe: nie dotyczy

Własność ta służy do określania, czy i w jaki sposób element powinien zostać pokazany (w druku, na ekranie monitora itd.).

Zastosowanie wartości block powoduje, powstanie elementu blokowego. Element ten podlega pozycjonowaniu względem sąsiadujących bloków zgodnie z modelem formatowania CSS. Typowe elementy blokowe to np. H1 i P. Własnością o podobnym działaniu jest list-item. Od własności block różni się tym, że dodaje jeszcze punktor listy. W języku HTML typowym elementem listy jest element LI.

Wartość inline dla własności display z kolei, powoduje powstanie elementu śródliniowego. Element taki jest wielkością dopasowywany automatycznie do rozmiaru jego zawartości. Jeżeli zawiera on tekst o długości kilku linijek, to powstanie kilka bloków-linii. Własności marginesów, dopełnienia i obramowania także mają zastosowanie do tego typu elementów, z tym że łamania linii nie są uwzględniane.

Wartość none powoduje wyłączenie własności display dla danego elementu włącznie z elementami potomnymi i otaczającą go ramką.

P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }

Ostatnia reguła w powyższym przykładzie wyłącza wszystkie obrazy graficzne.

Mimo że wartością domyślną własności display jest block, to aplikacje klienckie posiadają własny zestaw wartości domyślnych dla każdego elementu HTML, zgodnych z zaleceniami zawartymi w specyfikacji tego języka [2].

CSS1 core: Aplikacje klienckie mogą ignorować własność display i używać własnego zestawu wartości (patrz rozdział 7).

5.6.2 white-space

Wartości: normal | pre | nowrap
Wartość domyślna: normal
Zastosowanie: elementy blokowe
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do określania sposobu zachowania spacji wewnątrz elementu. Wartość normal oznacza, że wielokrotne spacje redukowane są do pojedynczych; wartość pre powoduje, że spacje zachowują się tak samo jak w elemncie HTML PRE; nowrap powoduje, że łamanie linii następuje wyłącznie po zastosowaniu elementu BR.

PRE { white-space: pre }
P   { white-space: normal }

Mimo że wartością domyślną własności white-space jest normal, to aplikacje klienckie posiadają własny zestaw wartości domyślnych dla każdego elementu HTML, zgodnych z zaleceniami zawartymi w specyfikacji tego języka [2].

CSS1 core: Aplikacje klienckie mogą ignorować własność white-space w arkuszach zarówno czytelnika jak i autora i używać własnego zestawu wartości (patrz rozdział 7).

5.6.3 list-style-type

Wartości: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Wartość domyślna: disc
Zastosowanie: elementy z własnością display ustawioną na list-item
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do określania sposobu prezentacji symboli elementów listy, gdy wartość własności list-style-image jest ustawiona na none lub obraz wskazany przez niego jest niedostępny.

OL { list-style-type: decimal }       /* 1 2 3 4 5 etc. */
OL { list-style-type: lower-alpha }   /* a b c d e etc. */
OL { list-style-type: lower-roman }   /* i ii iii iv v etc. */

5.6.4 list-style-image

Wartości: <url> | none
Wartość domyślna: none
Zastosowanie: elementy z własnością display ustawioną na list-item
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność ta służy do określania obrazu graficznego użytego jako symbol elementu listy. Jeżeli obraz ten jest dostępny, to nadpisze on symbol określony przez własność list-style-type.

UL { list-style-image: url(http://png.com/ellipse.png) }

5.6.5 list-style-position

Wartości: inside | outside
Wartość domyślna: outside
Zastosowanie: elementy z własnością display ustawioną na list-item
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność list-style-position służy do określania sposobu rysowania symbolu elementu listy w zależności od treści elementu. Przykład formatowania znajduje się w rozdziale 4.1.3.

5.6.6 list-style

Wartości: [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [<url> | none]
Wartość domyślna: brak dla deklaracji zbiorczych
Zastosowanie: elementy z własnością display ustawioną na list-item
Dziedziczenie: tak
Wartości procentowe: nie dotyczy

Własność list-style jest własnością zbiorczą służącą do ustawiania wartości trzech własności: list-style-type, list-style-image oraz list-style-position.

UL { list-style: upper-roman inside }
UL UL { list-style: circle outside }
LI.square { list-style: square }

Zastosowanie atrybutu list-style-type bezpośrednio do elementów LI może wywołać nieoczekiwany rezultat:

  <STYLE TYPE="text/css">
    OL.alpha LI  { list-style: lower-alpha }
    UL LI        { list-style: disc }
  </STYLE>
  <BODY>
    <OL CLASS=alpha>
      <LI>level 1
      <UL>
         <LI>level 2
      </UL>
    </OL>
  </BODY>

Jako że pierwsza reguła jest bardziej precyzyjna od drugiej w powyższym przykładzie, to narzuci ona swój styl dla wszystkich elementów LI, tzn. tylko wartość lower-alpha będzie miała zastosowanie. W związku z tym rekomendowane jest użycie atrybutu list-style tylko dla elementów określających typ listy:

OL.alpha  { list-style: lower-alpha }
UL        { list-style: disc }

Dzięki dziedziczeniu powyższy przykład spowoduje, że każdy element listy będzie poprzedzony odpowiednim punktorem.

Adresy URL można stosować łącznie z innymi wartościami:

UL { list-style: url(http://png.com/ellipse.png) disc }

Wartość disc zostanie użyta, gdy obraz wskazany przez adres url będzie niedostępny.

Niniejszy dokument jest tłumaczeniem rekomendacji W3C Cascading Style Sheets, level 1. Tłumaczenie to nie ma statusu dokumentu normatywnego i może zawierać błędy wynikające z tłumaczenia. Tylko dokument znajdujący się na stronie W3C pod adresem http://www.w3.org/TR/REC-CSS1 ma charakter normatywny.

Copyright © 2004 W3C^® (MIT, ERCIM, Keio), Wszystkie prawa zastrzeżone. W3C stosuje następujące zasady dotyczące odpowiedzialności cywilnej, znaku towarowego, używania dokumentu i licencji oprogramowania.