CSS seznam
Vlastnosti typu stylu seznamu
Příklad neuspořádaného seznamu:
- Káva
- Čaj
- Coca Cola
- Káva
- Čaj
- Coca Cola
Příklad uspořádaného seznamu:
- Káva
- Čaj
- Coca Cola
- Káva
- Čaj
- Coca Cola
Kód:
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: number;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
<ul class="a">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ul>
<ol class="c">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ol>
Stylování seznamu barvami
- Káva
- Čaj
- Coca Cola
- Káva
- Čaj
- Coca Cola
Kód:
<style>
ol.e {
background: #00b300;
padding: 12px;
padding-left: 25px;
}
ul.f {
background: #0000ff;
padding: 10px;
padding-left: 25px;
}
ol.e li {
background: #b3ffb3;
color: #003300;
padding: 5px;
margin-left: 0px;
}
ul.f li {
background: #cce5ff;
color: #000033;
margin: 2px;
padding: 5px;
}
</style>
<ol class="e">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ol>
<ul class="f">
<li>Káva</li>
<li>Čaj</li>
<li>Coca Cola</li>
</ul>