CSS liste

1. Cafea
2. Ceai
3. Coca Cola

• Cafea
• Ceai
• Coca Cola

Liste HTML și CSS Proprietăți Listă

În HTML, există două tipuri principale de liste:

• neordonate (<ul>) - elementele din listă sunt marcate cu gloanțe
• liste ordonate (<ol>) - elementele din listă sunt marcate cu cifre sau litere

Cele Lista CSS proprietăți vă permit să:

• Set markere diferite elemente Lista pentru liste ordonate
• Set markere diferite elemente Lista pentru liste neordonate
• Setați o imagine ca marker element listă
• Adăugați culori de fundal pentru liste și elementele listei

Diferite Marcatori Articol din listă

list-style-type de proprietate specifică tipul de marcator element din listă.

Exemplul următor prezintă unele dintre markerii element listă disponibile:

Notă: Unele dintre valorile sunt pentru listele neordonate, iar unele liste ordonate.

O imagine ca elementul de listă Marker

list-style-image proprietate specifică o imagine ca marker element din listă:

Pozitionati Marcatorii lista de elemente

list-style-position proprietate specifică dacă marcatorii lista de elemente ar trebui să apară în interiorul sau în afara fluxului de conținut:

Listă - proprietate de stenografie

list-style de list-style de proprietate este o proprietate prescurtare. Este folosit pentru a seta lista toate proprietățile într-o singură declarație:

Când se utilizează proprietatea stenografie, ordinea valorilor de proprietate sunt:

• list-style-type ( în cazul în care este specificată o listă de tip imagine, valoarea acestei proprietăți va fi afișată în cazul în care imaginea din anumite motive nu pot fi afișate)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow) de (specifies whether the list-item markers should appear inside or outside the content flow) în (specifies whether the list-item markers should appear inside or outside the content flow) în (specifies whether the list-item markers should appear inside or outside the content flow) de (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifică o imagine ca marker element din listă)

În cazul în care una dintre valorile de proprietate de mai sus sunt lipsesc, valoarea implicită pentru proprietatea lipsă va fi inserat, dacă este cazul.

Styling Lista cu culori

Putem, de asemenea, liste de stil cu culori, pentru a le face să arate un pic mai interesant.

Orice adăugat la <ol> sau <ul> tag - ul, afectează întreaga listă, în timp ce proprietățile adăugate la <li> Eticheta va afecta elementele listei individuale:

Mai multe exemple

Full-lățime Lista marginita
Acest exemplu demonstrează modul de a crea o listă mărginită fără gloanțe.

Toate diferitele marcatorii lista de elemente pentru liste
Acest exemplu demonstrează toate diferite marcatorii lista de elemente din CSS.

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 »

Toate proprietățile CSS Listă