Zawijanie treści wykazów. | |
Zawijanie treści.
Dzięki deklaracjom list-style-position:inside oraz list-style-position:outside można określić w jaki sposób tekst oblewa wypunktowanie. Poniżej zamieszczone są tabele z kodami źródłowymi oraz z efektami działania.
| Nazwa deklaracji | Kod w head | Kod w body | Efekt |
|---|
list-style-position:
inside | ul.inside
{list-style-position:
inside;
list-style-type:
square;} |
<ul class="inside">
<li>Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.</li>
<li>Drugi.</li>
<li>Trzeci.</li>
</ul> | - Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.
- Drugi.
- Trzeci.
|
list-style-position:
outside | ul.outside
{list-style-position:
outside;
list-style-type:
square;} |
<ul class="outside">
<li>Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.</li>
<li>Drugi.</li>
<li>Trzeci.</li>
</ul> | - Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.
- Drugi.
- Trzeci.
|
Dzieki właściwości list-style możliwe jest uproszczenie zapisu do postaci:
Rodzaj wypunktowania - tekst, symbole, obrazki.
Sposób oblewania wypunktowania.
| Nazwa deklaracji | Kod w head | Kod w body | Efekt |
|---|
list-style:
upper-roman inside; | .list-style
{list-style:
upper-roman inside;} |
<ul class="list-style">
<li>Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.</li>
<li>Drugi.</li>
<li>Trzeci.</li>
</ul> | - Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.
- Drugi.
- Trzeci.
|
list-style:
url(../css1.png) outside; | .list-style1
{list-style:url(../css1.png) outside;} |
<ul class="list-style1">
<li>Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.</li>
<li>Drugi.</li>
<li>Trzeci.</li>
</ul> | - Pierwszy tekst musi być długi, aby można było zobaczyć efekt oblewania tekstem.
- Drugi.
- Trzeci.
|
do góry menu powrót naprzód
|