Cu proprietățile CSS prezentate în acest tutorial se pot formata liste. Specificațiile se referă la elementele HTML ul și ol. Deci, puteți ajusta liste ordonate și neordonate după bunul plac.
Informații generale despre listă
La list-style este vorba despre un rezumat al celor trei proprietăți următoare:
• list-style-type
• list-style-position
• list-style-image
Prin intermediul lui list-style se poate influența modul de afișare grafică a bullelor din fața enumerărilor și a indentării lor. Specificațiile menționate sunt notate fiecare prin virgulă, fără a depinde de ordine. De asemenea, nu este necesar să se atribuie unui număr valoare fiecărei proprietăți.
Un exemplu:
<!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>În browser, arată în felul următor:
Bulete grafice
Puteți specifica o imagine personalizată ca fiind bulă. Pentru aceasta se folosește proprietatea list-style-image. Următoarele valori sunt posibile:
• url – numele fișierului și eventual calea imaginii
• none – nu se afișează nicio imagine.
Un exemplu:
ul {
list-style-image: url(bullet.gif);
}
Aveți grijă ca calea către imaginea specificată la URL să fie corectă.
Dacă este specificată o cale greșită, browserele ar trebui să revină la o bulină de marcator prestabilită.
Poziționarea bullelor listei
Prin intermediul proprietății list-style-position este definit modul în care numerările sau bullele ar trebui să se comporte în ceea ce privește indentarea.
• inside – primul rând este indentat atât de mult încât bullele și elementul listei să se alinieze la stânga.
• outside – bullele sunt situate la stânga elementului listei.
În exemplul următor se folosesc cele două valori 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>O listă cu poziționare interioară:</p>
<ul class="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<p>O listă cu poziționare exterioară:</p>
<ul class="b">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>Astfel, se poate observa direct care sunt impacturile diferite ale acestor două valori.
Stabilirea aspectului bullelor listei
Puteți determina explicit aspectul bullelor respective sau al numerotării listelor. Pentru aceasta se folosește proprietatea list-style-type. La această proprietate sunt permise următoarele valori:
• decimal – pentru liste ol: numerotare 1, 2, 3 etc.
• lower-roman – pentru liste ol: numerotare i., ii., iii. etc.
• upper-roman – pentru liste ol: numerotare I., II., III., IV. etc.
• lower-alpha sau lower-latin – pentru liste ol-: numerotare I., II., III., IV. etc.
• upper-alpha sau upper-latin – pentru liste ol: numerotare A., B., C., D. etc.
• disc – pentru liste ul: cerc umplut ca marcator
• circle – pentru liste ul: cerc gol ca marcator
• square – pentru liste ul: dreptunghi ca marcator
• none – niciun marcator sau numerotare
• lower-greek – pentru liste ol: numerotare cu litere grecești
• hebrew – pentru liste ol: numerotare cu litere ebraice
• decimal-leading-zero – pentru liste ol: numerotare cu zero în față 0: 01., 02., 03., 04. etc.
• cjk-ideographic – pentru liste ol: numerotare cu caractere ideografice
• hiragana – pentru liste ol: numerotare japoneză (cu litere mici)
• katakana – pentru liste ol: numerotare japoneză (cu litere mari)
• hiragana-iroha – pentru liste ol: numerotare japoneză (cu litere mici)
• katakana-iroha – pentru liste ol: numerotare japoneză (cu litere mari)
În exemplul următor sunt utilizate unele dintre variantele enumerate.
<!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>În browser rezultă următoarea imagine:
Contoare
Prin liste ol se pot numerota conținuturile. În aplicațiile mai complexe, acest mod de numerotare nu este într-adevăr practic. CSS oferă o alternativă prin contoare.
Mai jos vă voi arăta cum puteți folosi contoarele.
Mai întâi, setez un nou contor pentru elementul body.
body {
counter-reset: kapitel;
}Datorită acestei definiții, contorul kapitel există în document. Acest contor poate fi acum folosit.
h1 {
counter-increment: kapitel;
}
Prin sintaxa prezentată, contorul este incrementat automat cu valoarea 1 de fiecare dată când apare un nou element h1. Problema este că, momentan, numerotarea nu se afișează. Aceasta se poate rezolva ușor prin utilizarea pseudoelementelor.
h1::before {
content: counter(kapitel) ". ";
}
O aplicație completă ar putea arăta astfel:
<!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>Capitolul</h1>
<h1>Capitolul</h1>
</body>
</html>Și aici este rezultatul în browser:
Exemplele au arătat cât de puternici sunt contoarele.
content: counter(kapitel) ". "
Numărătorile încorporate sunt, de asemenea, posibile. Pentru aceasta, se definește contorul la locul unde trebuie să înceapă din nou.
h1 {
counter-increment: kapitel;
counter-reset: unterkapitel;
}Astfel, în acest exemplu, contorul este resetat întotdeauna atunci când apare un nou element h1. Exemplul următor arată o utilizare tipică pentru contoarele încorporate.
<!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>Capitolul</h1>
<h2>Subcapitol</h2>
<h2>Subcapitol</h2>
<h2>Subcapitol</h2>
<h1>Capitolul</h1>
<h2>Subcapitol</h2>
<h2>Subcapitol</h2>
<h2>Subcapitol</h2>
</body>
</html>În browser, totul arată astfel:
Exemplele au demonstrat cât de puternice pot fi contoarele încorporate.
