Stilizarea listelor CSS
În HTML există două tipuri principale de liste:
<ul>— liste neordonate, în care elementele sunt marcate cu buline.<ol>— liste ordonate, în care elementele sunt marcate cu numere sau litere.
CSS are aceste proprietăți pentru stilizarea listelor:
list-style-type— setează tipul marcatorului.list-style-image— folosește o imagine ca marcator.list-style-position— setează poziția marcatorilor.list-style— o prescurtare pentru proprietățile de mai sus.
Stilizarea marcatorilor elementelor din listă cu CSS
Proprietatea list-style-type setează tipul marcatorului pentru o listă.
Notă: Unele valori sunt pentru liste neordonate, iar altele pentru liste ordonate.
Exemplu
Sunt prezentate mai multe tipuri de marcatori: circle, disc, square, upper-roman, lower-roman, lower-alpha și decimal.
<style>, creează clasele de liste neordonate a, b, c cu circle, disc, square; și clasele de liste ordonate d, e, f, g cu upper-roman, lower-roman, lower-alpha, decimal. Adaugă o listă din fiecare clasă cu câteva elemente.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}
ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}
</style>
</head>
<body>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ul class="c"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<ol class="d"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="e"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="f"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
<ol class="g"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ol>
</body>
</html>
Înlocuirea marcatorului elementului din listă cu o imagine, în CSS
Proprietatea list-style-image înlocuiește marcatorul cu o imagine.
Notă: Setează și un list-style-type ca soluție de rezervă, în cazul în care imaginea nu este disponibilă.
Exemplu
Marcatorii sunt înlocuiți cu o imagine, cu square ca soluție de rezervă.
<style>, setează pentru <ul> list-style-image la url('sqpurple.gif') și de asemenea list-style-type square ca soluție de rezervă. Adaugă o listă cu câteva elemente.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-image: url('sqpurple.gif');
list-style-type: square;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Poziționarea marcatorilor elementelor din listă cu CSS
Proprietatea list-style-position setează unde stau marcatorii.
outside (implicit) plasează marcatorii în afara elementului listei, astfel încât textul fiecărui element se aliniază pe verticală. inside plasează marcatorii în interiorul elementului listei, astfel încât devin parte din text și îl împing.
Exemplu
O listă folosește marcatori outside, iar cealaltă folosește marcatori inside.
<style>, creează o clasă <ul> cu list-style-position outside (implicit) și una cu inside. Dă fiecărei liste un chenar, pentru ca diferența dintre pozițiile marcatorilor să fie clară. Adaugă o listă din fiecare clasă.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul.a {
list-style-position: outside;
border: 1px solid black;
}
ul.b {
list-style-position: inside;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>outside (default)</h2>
<ul class="a"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
<h2>inside</h2>
<ul class="b"><li>Coffee</li><li>Tea</li><li>Coca-cola</li></ul>
</body>
</html>
Eliminarea marcatorilor elementelor din listă cu CSS
Setează list-style-type: none pentru a elimina marcatorii.
Notă: O listă are margine și padding implicite. Pentru a le elimina, adaugă margin: 0 și padding: 0 la <ul> sau <ol>.
Exemplu
Marcatorii și spațierea implicită sunt eliminate din listă.
<style>, setează pentru <ul> list-style-type none, margin 0 și padding 0. Adaugă o listă cu câteva elemente.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Proprietatea prescurtată list-style din CSS
Proprietatea list-style este o prescurtare pentru setarea tuturor proprietăților listei într-o singură declarație.
Ordinea valorilor este: list-style-type, list-style-position, list-style-image. Dacă lipsește o valoare, se folosește valoarea ei implicită.
Exemplu
O prescurtare setează tipul marcatorului, poziția și imaginea împreună.
<style>, setează pentru <ul> list-style la "square inside url('sqpurple.gif')" (tip, poziție, imagine, în această ordine). Adaugă o listă cu câteva elemente.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca-cola</li>
</ul>
</body>
</html>
Stilizarea listelor cu culori, în CSS
Poți stiliza listele și cu culori, margini și padding, pentru a le face mai interesante.
Tot ce este adăugat la <ol> sau <ul> afectează întreaga listă, în timp ce proprietățile de pe <li> afectează elementele individuale.
Exemplu
Listele și elementele lor primesc culori de fundal, padding și margini diferite.
<style>, dă <ol> un fundal somon și padding, iar <ol> <li> un fundal roz-pal, text roșu-închis, padding și margine stângă. Dă <ul> un fundal albastru-pudră și padding, iar <ul> <li> un fundal roz-pal, text albastru-închis și margine. Adaugă o listă ordonată și una neordonată.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ol {
background: salmon;
padding: 20px;
}
ol li {
background: mistyrose;
color: darkred;
padding: 10px;
margin-left: 20px;
}
ul {
background: powderblue;
padding: 20px;
}
ul li {
background: mistyrose;
color: darkblue;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Toate proprietățile CSS pentru liste
Un rezumat al proprietăților pentru liste:
list-style— setează toate proprietățile listei într-o singură declarație.list-style-image— folosește o imagine ca marcator.list-style-position— setează poziția marcatorilor.list-style-type— setează tipul marcatorului.