Za pomocą właściwości CSS przedstawionych w tym samouczku można tworzyć listy. Dane odnoszą się do elementów HTML ul i ol. Możecie dostosować uporządkowane i nieuporządkowane listy według własnych życzeń.
Ogólne informacje na temat listy
Dla list-style jest to skrócona wersja trzech następujących właściwości:
• list-style-type
• list-style-position
• list-style-image
Za pomocą list-style można kontrolować sposób wyświetlania graficznego punktorów przed elementami listy i ich wcięcie. Wymienione dane są oddzielane przecinkiem. Kolejność nie ma znaczenia. Dodatkowo nie wszystkim właściwościom musi być przypisana wartość.
Przykład:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul {
list-style:square;
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>W przeglądarce będzie to wyglądać następująco:
Graficzne punktory
Możecie określić własny obrazek jako punktor. Do tego celu używana jest właściwość list-style-image. Dostępne są następujące wartości:
• url – nazwa pliku i ewentualna ścieżka do obrazka
• none – brak wyświetlanego obrazka.
Przykład:
ul {
list-style-image: url(bullet.gif);
}
Upewnijcie się, że ścieżka do obrazka podana przy URL jest poprawna.
W przypadku podania błędnej ścieżki, przeglądarki powinny użyć standardowego punktoru.
Pozycja punktorów
Za pomocą list-style-position określa się, jak numeracje lub punktory mają zachować się względem wcięcia.
• inside – pierwszy wiersz jest wciągnięty tak daleko, że punktory i element listy kończą się w lewym marginesie.
• outside – punktor znajduje się po lewej stronie elementu listy.
W poniższym przykładzie użyto obu wartości inside i outside.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-position:inside;
}
ul.b {
list-style-position:outside;
}
</style>
</head>
<body>
<p>Lista wewnątrz:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>Lista na zewnątrz:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Dzięki temu można od razu zobaczyć, jakie różnice wprowadzają te dwie wartości.
Określanie wyglądu punktorów
Można ustawić wygląd punktorów dla list punktowanych lub numerowanych. Do tego celu służy właściwość list-style-type. Dozwolone wartości w tej właściwości to:
• decimal – dla list ol: Numeracja 1, 2, 3 itp.
• lower-roman – dla list ol: Numeracja i., ii., iii. itp.
• upper-roman – dla list ol: Numeracja I., II., III., IV. itp.
• lower-alpha lub lower-latin – dla list ol-: Numeracja I., II., III., IV. itp.
• upper-alpha lub upper-latin – dla list ol: Numeracja A., B., C., D. itp.
• disc – dla list ul: wypełniony okrąg jako punktor
• circle – dla list ul: pusty okrąg jako punktor
• square – dla list ul: prostokąt jako punktor
• none – ani punktorów ani numeracji
• lower-greek – dla list ol: numeracja greckimi literami
• hebrew – dla list ol: numeracja hebrajskimi literami
• decimal-leading-zero – dla list ol: numeracja z wiodącym zerem 0: 01., 02., 03., 04. itp.
• cjk-ideographic – dla list ol: numeracja z ideogramami
• hiragana – dla list ol: japońska numeracja (małymi literami)
• katakana – dla list ol: japońska numeracja (wielkimi literami)
• hiragana-iroha – dla list ol: japońska numeracja (małymi literami)
• katakana-iroha – dla list ol: japońska numeracja (wielkimi literami)
W poniższym przykładzie użyte są niektóre z wymienionych wariantów.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
ul.a {
list-style-type:circle;
}
ul.b {
list-style-type:square;
}
ol.c {
list-style-type:upper-roman;
}
ol.d {
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol class="c">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<ol class="d">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>W przeglądarce ukazuje się następujący obraz:
Licznik
Za pomocą list ol można numerować treści. Jednak w przypadku bardziej złożonych aplikacji ten sposób numerowania może być mało praktyczny. CSS oferuje alternatywę w postaci liczników.
Poniżej pokażę Wam, jak korzystać z liczników.
Najpierw tworzę nowy licznik dla elementu body.
body {
counter-reset: kapitel;
}Dzięki tej definicji licznik kapitel jest dostępny w dokumencie. Teraz można go wykorzystać.
h1 {
counter-increment: kapitel;
}
W wyświetlanym składniowo przykładzie licznik zostaje zwiększony automatycznie o wartość 1, gdy pojawi się nowy element h1. Problemem jest jednak to, że na razie nie widać tej numeracji. Można to łatwo zmienić, wykorzystując pseudoelementy.
h1::before {
content: counter(kapitel) ". ";
}
Pełne zastosowanie można zobaczyć poniżej:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset: kapitel;
}
h1 {
counter-increment: kapitel;
}
h1::before {
content: counter(kapitel) ". ";
}
</style>
</head>
<body>
<h1>Kapittel</h1>
<h1>Kapittel</h1>
</body>
</html>A tutaj wynik w przeglądarce:
W przykładzie pokazano, jak efektywne mogą być liczniki.
content: counter(kapitel) ". "
Poziome zagnieżdżone numerowanie jest również możliwe. W tym celu definiujesz licznik tam, gdzie ma on zacząć się od początku ponownie.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}W tym przykładzie licznik jest resetowany za każdym razem, gdy pojawia się nowy element h1. Poniższy przykład pokazuje typowe zastosowanie zagnieżdżonych liczników.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
body {
counter-reset:kapitel;
}
h1 {
counter-reset:unterkapitel;
}
h1:before {
counter-increment:kapitel;
content: counter(kapitel) ". ";
}
h2:before {
counter-increment:unterkapitel;
content:counter(kapitel) "." counter(unterkapitel) " ";
}
</style>
</head>
<body>
<h1>Kapittel</h1>
<h2>Podrozdział</h2>
<h2>Podrozdział</h2>
<h2>Podrozdział</h2>
<h1>Kapittel</h1>
<h2>Podrozdział</h2>
<h2>Podrozdział</h2>
<h2>Podrozdział</h2>
</body>
</html>W przeglądarce prezentuje się to w ten sposób:
Przykłady pokazały, jak potężne mogą być liczniki.
