Utwórz plik css-text-decor-3.html z podstawową strukturą strony WWW w standardzie HTML5.
<!DOCTYPE html> <html> <head> <title>Listy i wyliczenia</title> <meta charset="utf-8"/> <style> </style> </head> <body> </body> </html>
W elemencie style dodaj kod.
ul {
list-style-type: circle;
}
W elemencie body dodaj kod.
<ul> <li>pozycja listy</li> <li>pozycja listy</li> <li>pozycja listy</li> </ul>
Zapisz zmiany i odśwież podgląd. Przetestuj różne style listy.
W edytorze grafiki utwórz własny graficzny znak wypunktowania o wielkości 10 na 10 pikseli. Zapisz go w formacie GIF pod nazwą punktor.gif.
W elemencie style dodaj kod.
ol {
list-style-image: url(punktor.gif);
}
W elemencie body dodaj kod.
<ol> <li>pozycja listy</li> <li>pozycja listy</li> <li>pozycja listy</li> </ol>
Zapisz zmiany i odśwież podgląd.
W elemencie style dodaj kod.
ol {
list-style-image: url(punktor.gif);
list-style-position: outside;
}
Zapisz zmiany i odśwież podgląd. Dodaj w akapitach lity dłuższy fragment tekstu.
W elemencie style dodaj kod.
ol ul {
list-style: square inside;
}
W elemencie body dodaj kod.
<ol> <li>pozycja listy <ul> <li>pozycja listy</li> <li>pozycja listy</li> </ul> </li> </ol>
Zapisz zmiany i odśwież podgląd.
Umieść plik css-lists-3.html na serwerze po sprawdzeniu kodu lub wykonaj ćwiczenia zaawansowane.
{list-style-type:} – definiuje list-style-type (typ), pozycje znaku i/lub punktor graficzny wyliczenia.
Typ wyliczenia może przyjmować wartość: disc (kropki), none (brak), square (kwadraty), circle (kółka), decimal (liczby naturalne), decimal-leading-zero (liczby z początkowym zerem), lower-greek (małe litery greckie), lower-latin (małe litery łacińskie), upper-latin (duże litery łacińskie), lower-alpha (litery), upper-alpha (wielkie litery), lower-roman (litery rzymskie), upper-roman (wielkie litery rzymskie).
{list-style-image:} – definiuje punktor graficzny wyliczenia. Wartość jest równa url() pliku punktora.{list-style-position:} – definiuje pozycje znaku wyliczenia Wartość może być równa: outside (wypunktowanie na zewnątrz listy) lub inside (wypunktowanie wewnątrz listy).{list-style:} – definiuje list-style-type (typ), pozycje znaku i/lub punktor graficzny wyliczenia.W elemencie style dodaj kod.
body {
counter-reset: chapter;
}
h1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter;
}
h1 {
counter-reset: section;
}
h2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
W elemencie body dodaj kod.
<h1>pozycja listy</h1> <h2>pozycja listy</h2> <h2>pozycja listy</h2>
Umieść plik css-lists-3.html na serwerze po sprawdzeniu kodu.
{content:} – definiuje zawartość.{counter-reset:} – definiuje resetuje licznik numerowania.{counter-increment:} – definiuje przyrost licznika numerowania.