Listy i CSS

Wprawdzie w HTML mamy dwa znaczniki obejmujące listy - ul dla list nieuporządkowanych oraz ol dla list uporządkowanych, ale specyfikacja CSS nie nakazuje ich rozróżniania. Domyślną wartością właściwości list-style-type jest disc. Jeśli więc przeglądarka nie będzie mieć określonej odpowiedniej reguły dla ol, może się zdarzyć, że użyje dysku dla wyróżnienia elementów listy numerowanej.

E. Meyer podkreśla, że przeglądarka może uniemożliwić nadawanie znaków list numerowanych listom wypunktowanym i odwrotnie nawet wówczas, gdy nie ma zdefiniowanej reguły typu:

ol {list-style-type: decimal;</code>

Szablony udostępniane w Sieci często nie zawierają w arkuszach stylów definicji formatujących listy numerowane. W efekcie przeglądarki wyświetlają je najczęściej zgodnie z ustawieniami list punktowanych (nieuporządkowanych) - trzeba zwrócić uwagę na tę kwestię przy tworzeniu i modyfikacji arkuszy CSS.

Jeśli chcesz korzystać z list numerowanych, zdefiniuj dla elementu ol właściwość list-style-type. A jeszcze lepiej - zastosuj selektory kontekstowe, jak w przykłądzie poniżej.

Przykład. Reguły dla list punktowanych i numerowanych

 
ul {
   margin                  : 0;
   padding                 : 0 0  1em 0; /* ustala odstęp 1em od lewej */ 
   list-style-type         : none;
}
ol {
   margin                  : 0;
   padding                 : 0 0 1em 1em;
   list-style-type         : decimal; /* 1,2,3... znakiem wypunktowania  */ 
}
ul li {
   margin                  : 0 0.1em 0 0.2em;
   padding-left            : 1.25em;
   padding-top             : 0;  
   background-image        : url(../icons/list.png) no-repeat 0 5px; ; 
   background-repeat       : no-repeat;
   background-position     : 0 3px !important;
   background-position     : 0 .33em;  
}
ul ul li{                  /* zmiana obrazka wypunktowania */
   background              : url(../icons/list1.png) no-repeat 0 5px; 
}
ol li {
   padding-top             : 0;    
      }

Definicje

HTML oferuje trzy znaczniki opisujące listy z definicjami Zadeklarowanie w arkuszu stylów odpowiednich reguł dla tych elementów może być wielce przydatne np. na witrynach z materiałami edukacyjnymi:

Reguła dla elementu dl {} sformatuje tytuł listy definicji, reguła dla dt {} - sformatuje definiowane słowo, a reguła dla dd {} - tekst definicji.

Przykład. Reguły dla list z definicjami

 
dl {                         /* formatuje tytuł listy */
   font-size        : 1.2em;
   font-weight      : 500;
}
 
dt {                         /* formatuje definiowany termin */
   font-style        : italic;
   font-weight       : 500;
}
dd {                         /* formatuje definicję */
   pading-left       : 0;
   margin-left       :1em;
}