Recapitulare a listelor HTML

Există două tipuri principale de liste în HTML – Ordonat și Neordonat.

În Ordonat liste (<ol></ol>), ordinea elementelor listei este importantă. Elementele pot apărea în ordine după număr, cifră romană, cifră alfa sau alt tip de marker. Markerul implicit pentru listele ordonate este un număr (sau decimal):

Cum sa stilizati listele cu CSS

În Neordonat liste (<ul></ul>), ordinea elementelor listei nu contează. Elementele apar în format glonț. Marcatorul implicit pentru listele neordonate este un punct rotund sau disc.

1611771246 666 Cum sa stilizati listele cu CSS

Fiecare element de listă dintr-o listă ordonată sau neordonată este creat cu <li></li> etichetă.

Stiluri specifice listei

Există trei proprietăți comune specifice listelor de stil: list-style-type, list-style-position, și list-style-image. Există, de asemenea, o proprietate de stenografie care include toate cele trei.

list-style-type

Markerele (sau punctele glonț) care apar în listele ordonate și neordonate pot fi stilizate într-o varietate de moduri. Proprietatea CSS pentru stilizarea tipului de marker este list-style-type. Implicit list-style-type valoarea pentru o listă ordonată este decimal, întrucât valoarea implicită pentru o listă neordonată este disc.

ad-banner

Exemplu de listă ordonată:

/* css */
ol {
  list-style-type: upper-roman;
}
1611771247 927 Cum sa stilizati listele cu CSS

Exemplu de listă neordonată:

/* css */
ul {
  list-style-type: square;
}
1611771248 553 Cum sa stilizati listele cu CSS

Niciun exemplu de marker:

/* css */
ul {
  list-style-type: none;
}
1611771248 776 Cum sa stilizati listele cu CSS

Valori acceptate pentru list-style-type proprietatea include:

Neordonat:

  • disc (Mod implicit)
  • cerc
  • pătrat

Ordonat:

  • zecimal (Mod implicit)
  • zecimal-conducător-zero
  • inferior-roman
  • superior-roman
  • inferioară-greacă
  • inferior-latin
  • latină superioară
  • armean
  • georgian
  • inferior-alfa
  • superior-alfa

Alte:

  • nici unul

Notă: toate valorile proprietăților enumerate mai sus pot fi utilizate pentru stilarea listelor ordonate și neordonate (de exemplu: o listă ordonată cu square marcatori de listă).

list-style-position

list-style-position controlează dacă marcatorul listei apare în interiorul sau în afara fiecărui element de listă (<li></li>). Proprietatea acceptă două valori, outside (implicit) sau inside.

Poziționați marcatorul outside a elementului element de listă și toate liniile de text și linii secundare ale fiecărui element de listă se vor alinia vertical:

/* css */
ul {
  list-style-position: outside; /* default */
}
1611771249 497 Cum sa stilizati listele cu CSS

Poziționați marcatorul inside, iar primul rând de text al fiecărui element din listă va fi indentat pentru a face loc markerului. Orice sub-rânduri ale aceluiași element de listă se vor alinia cu marcatorul, mai degrabă decât cu primul rând de text:

/* css */
ul {
  list-style-position: inside;
}
1611771250 126 Cum sa stilizati listele cu CSS

list-style-image

list-style-image proprietatea acceptă o adresă URL de imagine în locul marcatorului de listă. Valoarea implicită pentru această proprietate este none.

/* css */
ul {
  list-style-image: url(https://url-to-image);
}

list-style Stenografie

list-style este o proprietate de prescurtare pentru cele trei proprietăți de stil enumerate mai sus. Ordinea valorilor list-style acceptă este list-style-type, list-style-position, și list-style-image. Dacă se omite orice valoare, va fi utilizată valoarea implicită pentru acea proprietate.

Exemplu:

/* css */
ul {
  list-style: circle inside none;
}
1611771250 282 Cum sa stilizati listele cu CSS

Mai multe stiluri specifice listei

Etichetele de listă ordonate acceptă, de asemenea, atribute care controlează fluxul, numărul sau valorile specifice ale markerului articolelor sale din listă. Acestea includ start, reversed, și value atribute. Consultați resursele MDN enumerate mai jos pentru detalii suplimentare.

Stil general

Conținutul listei poate fi stilizat la fel ca altul p sau div elemente. color, font-family, margin, padding, sau border sunt doar câteva exemple de proprietăți care pot fi adăugate fie la ul, ol, sau li elemente.

Rețineți că orice stiluri adăugate la ul sau ol elementul va afecta întreaga listă. Stiluri adăugate direct la li elementele vor afecta elementele individuale ale listei. În exemplul de mai jos, proprietățile marginii și culorii fundalului sunt stilate diferit între elementele listei și ale elementelor listei:

/* css */
ul {
  list-style-type: circle;
  border: 2px solid blue;
  background-color: lightblue;
}
li {
  margin: 5px;
  background-color: lightyellow;
}
1611771251 542 Cum sa stilizati listele cu CSS

Spațiere listă

Este posibil să observați spațiu suplimentar în fața articolelor din listă atunci când list-style-type este setat sa none. Setare padding la 0 (sau orice spațiere este preferată) pe elementul listă va suprascrie această umplere implicită.

/* css */
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px 10px;
  background-color: #EEEEEE;
  border: 1px solid #DDDDDD;
}
1611771252 532 Cum sa stilizati listele cu CSS

Surse:

Linkurile de mai jos au fost menționate în compilarea informațiilor găsite în acest articol. Vă rugăm să le vizitați pentru mai multe detalii despre acest subiect.

Mai multe informatii:

MDN – Liste de styling

W3Schools – Liste CSS

Trucuri CSS – stil listă