Dodatno uredite HTML liste

Liste možemo dodatno urediti koristeći CSS. Možemo mijenjati sliku, boju, izgled, itd. Ovaj CSS kod podržavaju svi preglednici tako da ne bismo trebali imati problema sa implementacijom. Atributi koje možemo koristiti su sljedeći:
list-style-image
list-style-position
list-style-type
marker-offset

Svi atributi mijenjaju izgled markera u listama. Marker je znak koji se pojavljuje prije svakog zapisa u listi. Možemo postaviti vlastito dizajnirani marker, možemo mijenjati nekoliko markera koji su već predefinirani te možemo mijenjati tip markera.


Prvi atribut, list-style-image, prima vrijednost u obliku putanje do slike koju treba staviti kao marker.



<ul style="list-style-image: url('slike/marker.gif');">

<li> HTML </li>
<li> CSS </li>
<li> PHP </li>

</ul>
HTML
CSS
PHP



Različite markere koji su definirani i koji se koriste u uređenim listama koristimo na sljedeći način:



<ol style="list-style-type: decimal;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-roman;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: lower-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS

<ol style="list-style-type: upper-alpha;">
<li> HTML </li>
<li> CSS </li>
</ol>
HTML
CSS



Za neuređene liste imamo četiri predefinirana izgleda lista. Evo kako oni izgledaju:



<ul style="list-style-type: disc">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: circle">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: square">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-type: none">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS



I za kraj da vidimo kako se koristi atribut marker-offset.



<ul style="list-style-position: inside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS

<ul style="list-style-position: outside">
<li> HTML </li>
<li> CSS </li>
</ul>
HTML
CSS