Stilizarea Listelor cu CSS: Ghid Complet pentru Stiluri Personalizate

Stilizarea listelor cu ajutorul CSS

Listele se comportă asemănător textului, în mare parte, dar există o serie de proprietăți specifice listelor și unele bune practici care trebuie luate în considerare.

Să vedem un exemplu simplu care conține mai multe tipuri de liste:

🔧 Exemplu liste nestilizate

<!DOCTYPE html>
<html lang="ro">
  <head>
    <meta charset="utf-8">
    <title>Tipuri de liste HTML nestilizate</title>
  </head>
  <body>

<h2>Lista cumpărături (lista neordonată)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium itaque earum officiis aliquam, aspernatur ullam. Quisquam, earum, voluptate tempora saepe error distinctio, dicta similique aliquid impedit ducimus pariatur debitis maiores.<p>
<ul>
  <li>Hummus</li>
  <li>Pâine</li>
  <li>Salată verde</li>
  <li>Halloumi</li>
</ul>

<h2>Rețetă (lista ordonată)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla corporis pariatur, dolor vero illum voluptate quisquam incidunt, iusto explicabo vel odio, ullam cupiditate. Enim, nostrum.<p>
<ol>
  <li>Prăjiți pâinea, așteptați să se răcească, apoi tăiați marginea.</li>
  <li>Prăjiți ușor halloumi până capătă o culoare aurie pe ambele părți.</li>
  <li>Spălați și tăiați salata.</li>
  <li>Puneți salata pe pâine, hummus și halloumi prăjit.</li>
</ol>

<h2>Descrierea listei de ingrediente (lista descriptivă)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ratione, corporis voluptatibus quidem earum vero fugiat officiis, veritatis officia eaque iste. Error, corrupti dolor at?<p>
<dl>
  <dt>Hummus</dt>
  <dd>Este o specialitate orientală, făcută din piure de năut, pastă de susan (tahini), ulei de măsline, suc de lămâie, sare, usturoi și uneori chimion.</dd>
  <dt>Pâinea</dt>
  <dd>Produs dospit din făină albă cu drojdie.</dd>
  <dt>Halloumi</dt>
  <dd>Este o brânză semi-tare, cu un punct de topire ceva mai ridicat, făcută de regulă din lapte de capră sau oaie.</dd>
  <dt>Salată verde</dt>
  <dd>Niște frunze mari, verzi și sănătoase pe care le folosim de regulă ca să garnisim kebabul 😄.</dd>
</dl>

  </body>
</html>

Lista „nestilizată” are, de fapt, o stilizare implicită ce provine din foaia de stil a browserului.

🔧 Exemplu liste stilizate

<h2>Lista cumpărături (lista neordonată)</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium itaque earum officiis aliquam, aspernatur ullam. Quisquam, earum, voluptate tempora saepe error distinctio, dicta similique aliquid impedit ducimus pariatur debitis maiores.<p>

<ul>
  <li>Hummus</li>
  <li>Pâine</li>
  <li>Salată verde</li>
  <li>Halloumi</li>
</ul>

<h2>Rețetă (lista ordonată)</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla corporis pariatur, dolor vero illum voluptate quisquam incidunt, iusto explicabo vel odio, ullam cupiditate. Enim, nostrum.<p>

<ol>
  <li>Prăjiți pâinea, așteptați să se răcească, apoi tăiați marginea.</li>
  <li>Prăjiți ușor halloumi până capătă o culoare aurie pe ambele părți.</li>
  <li>Spălați și tăiați salata.</li>
  <li>Puneți salata pe pâine, hummus și halloumi prăjit.</li>
</ol>

<h2>Descrierea listei de ingrediente (lista descriptivă)</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ratione, corporis voluptatibus quidem earum vero fugiat officiis, veritatis officia eaque iste. Error, corrupti dolor at?<p>

<dl>
  <dt>Hummus</dt>
  <dd>Este o specialitate orientală, făcută din piure de năut, pastă de susan (tahini), ulei de măsline, suc de lămâie, sare, usturoi și uneori chimion.</dd>
  <dt>Pâinea</dt>
  <dd>Produs dospit din făină albă cu drojdie.</dd>
  <dt>Halloumi</dt>
  <dd>Este o brânză semi-tare, cu un punct de topire ceva mai ridicat, făcută de regulă din lapte de capră sau oaie.</dd>
  <dt>Salată verde</dt>
  <dd>Niște frunze mari, verzi și sănătoase pe care le folosim de regulă ca să garnisim kebabul 😄.</dd>
</dl>

/* Stiluri generale */
/* Setăm câteva proprietăți CSS pentru a asigura consistență și echilibru în spațierea verticală și orizontală, precum și o stilizare uniformă a textului. */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul, ol, dl, p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Lista neordonată */
/* Folosim background-image pentru a personaliza simbolul listei */

ul li {
  list-style-type: none;
  padding-left: 2rem;
  background-image: url(imagini/star.svg);
  background-position: 0 0;
  background-size: 1.6rem 1.6rem;
  background-repeat: no-repeat;
}

/* Lista ordonată */

ol {
  list-style-type: upper-roman;
  list-style-position: inside;
}

/* Lista descriptivă */

dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;

Atunci când stilizăm listele, este bine să păstrăm același spațiu vertical (ritm vertical), în concordanță cu celelalte elemente din pagină (cum ar fi paragrafele, imaginile), și de asemenea același spațiu orizontal.

Stiluri specifice listelor

După ce am adăugat câteva reguli generale de spațiere și stilizare a textului listelor, ne vom uita la câteva proprietăți specifice listelor:

list-style-type: - setează tipul de simbol pentru listă: pătrate sau cercuri pentru listele neordonate și cifre, litere sau cifre romane pentru cele ordonate.
list-style-position: - stabilește dacă simbolurile apar în interiorul articolelor din listă sau în afara acestora, înainte de începerea fiecărui element.
list-style-image: - permite utilizarea unei imagini personalizate pentru simbol.

În ceea ce privește listele ordonate, avem posibilitatea de a controla modul în care sunt numerotate elementele, în sensul în care putem porni numerotarea cu o anumită cifră, putem seta o numerotare inversă sau putem seta numerotarea în pași.

start - permite începerea numerotării cu altă cifră decât 1,
reversed - începe numerotarea de jos în sus,
value - permite setarea unor valori numerice specifice.

🧠 Quiz - CSS Stilizarea Listelor

Stilizarea link-urilor ➔

Stilizarea listelor cu ajutorul CSS

Stiluri specifice listelor

🧠 Quiz - CSS Stilizarea Listelor

Politica Cookie-uri