Reguli CSS pentru personalizarea aspectului listei pe pagina html. Proprietatea stilului listei (tip, imagine, poziție)

Din Referința limbajului web

Valori folosite

Această proprietate este citită/scrisă pentru toate obiectele. Valoarea implicită este disc afara nici unul... Atributul Cascading Style Sheets (CSS) este moștenit.

Observatii

Proprietate listStyle este o proprietate compozită generică. Când ambele valori sunt setate pentru tip, precum și pentru imagine, atunci valoarea pentru imagine are prioritate (imaginea va fi afișată, nu unul dintre marcatorii standard din listă), cu excepția cazului în care listStyleImage este setat la nici unul sau link ( Url) de pe imagine nu este instalat corect sau este depășit.

Proprietate listStyle se aplică, de asemenea, tuturor elementelor care sunt setate la articol-listă pentru proprietate afişa... Pentru a seta afișarea unui marcator de listă sub formă de puncte aldine, trebuie neapărat să descrieți în detaliu proprietatea marjei sau să setați o valoare interior pentru proprietatea listStylePosition pe aceste articole.

Valori în proprietate listStyle poate fi descris în orice ordine. Separați-le cu un spațiu.

Exemple de

Următoarele exemple ilustrează utilizarea proprietății listStyle si atribut stil de listă pentru a stila lista.

Exemplul folosește clasele ulși UL.compactși, de asemenea, atributul stil de listă pentru a specifica două liste neordonate. Pentru clasă UL.compact pentru a înlocui desenul descris în ul, trebuie să setați valoarea nici unul pentru atributul list-style-image.

• ...
• ...

• ...
• ...

Al doilea exemplu folosește proprietatea listStyle... Dacă imaginea specificată pentru listă nu este disponibilă, va fi folosit marcatorul cerc gol(cerc gol).

Al treilea exemplu arată că proprietatea listStyle aplicabil pentru elementele care au proprietatea afişa capătă sensul articol-listă.

Descriere

O proprietate universală care vă permite să setați simultan stilul markerului, poziția acestuia și imaginea care va fi folosită ca marker. Pentru informații detaliate, consultați informațiile despre fiecare proprietate și separat.

Sintaxă

list-style: list-style-type || list-style-position || list-stil-imagine | moşteni

Valorile

Orice combinație a celor trei valori care definesc stilul markerilor, acestea sunt separate printr-un spațiu. Combinațiile de valori trebuie să urmeze în ordinea specificată: mai întâi vine tipul markerului, apoi poziția și imaginea. Niciuna dintre valori nu este obligatorie, astfel încât valorile neutilizate pot fi omise.

Moștenire Moștenește valoarea de la părinte.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Aplicarea proprietății list-style

Model de obiect

document.getElementById ("elementID") .style.listStyle

Browsere

Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.

Foaie de stil externă vă permite să concentrați informații despre formatarea site-ului într-un singur fișier. Pentru a face referire la o foaie de stil CSS externă, trebuie să încorporezi după titlu scrie următorul rând

Atributul href specifică calea către fișierul extern foaie de stil. Această linie ar trebui să fie scrisă în textul tuturor paginilor Web unde ar trebui utilizată o foaie de stil externă.

Astfel, modificările aduse fișierului style.css se reflectă imediat pe toate paginile care leagă la acest fișier.

Definiție privată a stilurilor

Dacă trebuie să aplicați un stil într-un mod privat, în raport cu o instanță separată a descriptorului, atunci pentru aceasta trebuie să utilizați atributul STYLE. Această tehnică vă permite să profitați din plin de stilurile oferite evitând obligația de a crea foi de stil. Utilizarea privată a stilurilor poate fi folosită chiar dacă pagina conține deja o foaie de stil internă sau un link către o foaie de stil externă. stilul privat are cea mai mare prioritate.

Exemplu:

atribut ID

Dacă doriți să aplicați un stil unui element separat al paginii Web, trebuie să utilizați atributul ID.

Pentru a face acest lucru, trebuie să atribuiți un identificator etichetei elementului de pagină necesară. Puteți defini apoi proprietățile acestui element într-o foaie de stil internă sau externă. Marcajele de formatare specificate vor fi instalate numai pentru elementul marcat cu identificatorul specificat.

Exemplul folosește două valori de proprietate diferite Listă-stil-tip:

Listă-stil-poziție

Proprietatea determină locația markerului elementului. Fie marcatorul se află în interiorul elementului, fie în afara acestuia.

Valori:

interior- marcatorul se află în interiorul articolului din listă.
in afara- marcatorul este mutat în afara blocului de text.
moşteni- moștenirea de la elementul părinte.

Exemplul arată clar diferența dintre valori interiorși in afara proprietăți Listă-stil-poziție:

Listă-stil-imagine

Proprietatea setează calea către o imagine care va servi drept marcator pentru un articol dintr-o listă numerotată sau marcată. Poziția imaginii marker poate fi controlată folosind proprietatea Listă-stil-poziție.

Valori:

Url- calea către fișierul grafic.
nici unul- anulează imaginea marcatorului, de exemplu, pentru elementul părinte.
moşteni- moștenirea de la elementul părinte.

Ul (listă-stil-imagine: url (papka / find.png); list-style-position: interior;)

În exemplu, am folosit o imagine mică ca marker, care demonstrează clar capacitățile proprietății Listă-stil-imagine:

Descriere

Setează adresa imaginii care servește ca punct marcator pentru listă. Această proprietate este moștenită, așa că niciuna nu este utilizată pentru a restabili marcatorul pentru elementele individuale din listă.

Sintaxă

list-style-image: niciuna | url ("calea către fișier") | moşteni

Valorile

none Anulează imaginea ca marker pentru elementul părinte. url Cale relativă sau absolută către fișierul imagine. Valoarea poate fi specificată între ghilimele simple, duble sau fără ele. inherit Moștenește valoarea de la părinte.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elit
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Rezultatul acestui exemplu este prezentat în Fig. unu.

Orez. 1. Aplicarea proprietății list-style-image

Model de obiect

document.getElementById ("elementID") .style.listStyleImage

Browsere

Distanța dintre imagine și text poate varia în diferite browsere.

Internet Explorer până la 7.0 inclusiv nu afișează marcatori atunci când proprietatea float este adăugată la listă. De asemenea, acest browser nu acceptă valoarea de moștenire.