CSS - Klasifikačné vlastnosti

Klasifikačné vlastnosti slúžia na viaceré účely - môžeme nimi zmeniť napr. typ zobrazenia prvkov a zoznamov.

Zobrazenie

Určuje, či bude daný prvok na stránke zobrazený, prípadne ako ho prehliadač vykreslí.

Pokiaľ použijeme hodnotu block, daný prvok sa zobrazí sa ako blokový element aj v prípade, že je riadkový. Hodnota inline má opačný význam - prvok sa stane riadkovým. List-item vykreslí daný tag ako zoznam - s odrážkami. Zaujímavá je hodnota none, ktorá element úplne skryje.

a {
 display: block;
 width: 200px;
 background: #E7E7E7;
}

Zalamovanie

Predvolená hodnota normal bude text zalamovať ako zvyčajne, pre zobrazí prvok, akoby sa nachádzal v tagu PRE a nowrap zalamovanie úplne vypne.

div {white-space: pre}

Typ zoznamu

Číslovanie a odrážky tagov UL a OL sa dá určiť nielen atribútmi v HTML, ale i vlastnosťami v CSS.

Možné hodnoty sú: disc (plný krúžok), circle (prázdny kruh), square (štvorček), decimal (číslice), lower-roman (malé rímske čísla), upper-roman (veľké rímske číslice), lower-alpha (malé písmená), upper-alpha (veľké písmená) a none (bez číslovania).

ul {list-style-type: lower-roman}

Obrázkové odrážky zoznamu

Ako odrážka môže slúžiť dokonca i obrázok. Hodnota none znamená žiaden, určenie URL spôsobí jeho zobrazenie vľavo pri každej položke.

ul#hlavne {list-style-image: url('bod.png')}
ol {list-style-image: none}

Pozícia položiek zoznamu

Jednotlivé položky zoznamu môžu byť zarovnané smerom von (hodnota outside) alebo dovnútra (inside). Tu je príklad:

.prve {list-style-position: outside}
.druhe {list-style-position: inside}

• Toto je
  outside.
• Toto je
  inside.

Súhrn zoznamov

Klasická súhrnná vlastnosť zhrňujúca list-style-type, list-style-image a list-style-position (oddelené medzerou).

ol {list-style: disc inside}
ul {list-style: none}