CSS pravila za prilagođavanje izgleda liste na html stranici. svojstvo stila liste (vrsta, slika, pozicija)

Materijal iz Web Language Reference

Korišćene vrijednosti

Ovo svojstvo se čita/piše za sve objekte. Zadana vrijednost je disk izvan nema. Atribut Cascading Style Sheets (CSS) je naslijeđen.

Napomene

Nekretnina listStyle je generičko složeno svojstvo. Kada su obje vrijednosti postavljene za tip i za sliku, tada prednost ima vrijednost za sliku (slika će biti prikazana umjesto jednog od standardnih markera liste), osim kada je listStyleImage postavljen na nijedan ili link ( URL) na slici nije ispravno ili zastarjelo.

Nekretnina listStyle također se odnosi na sve elemente koji su postavljeni na lista-stavka za imovinu displej. Da biste postavili prikaz markera liste kao podebljane tačke, morate detaljno opisati svojstvo margine ili postaviti vrijednost unutra za svojstvo listStylePosition na tim elementima.

Vrijednosti u nekretnini listStyle može se opisati bilo kojim redoslijedom. Potrebno ih je razdvojiti razmakom.

Primjeri

Sljedeći primjeri ilustriraju upotrebu svojstva listStyle i atribut stil liste da stilizujete listu.

Primjer koristi klase ul I UL compact, kao i atribut stil liste za definiranje dvije neuređene liste. Za razred UL compact za zamjenu uzorka opisanog u ul, morate postaviti vrijednost nijedan za atribut slike-stil liste.

• ...
• ...

• ...
• ...

Drugi primjer koristi svojstvo listStyle. Ako slika navedena za listu nije dostupna, koristit će se marker. šuplji krug(prazan krug).

Treći primjer pokazuje da svojstvo listStyle primjenjivo za elemente koji imaju svojstvo displej poprima vrednost lista-stavka.

Opis

Univerzalno svojstvo koje vam omogućava da istovremeno postavite stil markera, njegovu poziciju, kao i sliku koja će se koristiti kao marker. Za detaljnije informacije pogledajte informacije o svakoj nekretnini i posebno.

Sintaksa

stil-list: tip-stil liste || lista-stil-pozicija || slika-stil liste | nasljediti

Vrijednosti

Bilo koja kombinacija tri vrijednosti stila markera, odvojene razmakom. Kombinacije vrijednosti moraju biti navedenim redoslijedom, prvo tipom markera, a zatim položajem i slikom. Nijedna od vrijednosti nije obavezna, tako da se one koje se ne koriste mogu izostaviti.

Naslijediti Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elite
• 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.

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Primjena svojstva liste stila

Objektni model

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

Pregledači

Internet Explorer do verzije 7.0 ne podržava naslijeđenu vrijednost.

Vanjska lista stilova omogućava vam da koncentrišete informacije o formatiranju stranice u jednoj datoteci. Da bi se referirali na vanjski css stilski list, u tijelu nakon naslova napišite sljedeći red

Atribut href specificira putanju do vanjske datoteke sa stilskim listovima. Ovaj red mora biti napisan u tekstu svih web stranica na kojima želite da koristite eksterni stilski list.

Stoga se promjene napravljene u datoteci style.css odmah odražavaju na svim stranicama koje se povezuju na ovu datoteku.

Privatna definicija stilova

Ako trebate primijeniti bilo koji stil privatno, u odnosu na zasebnu instancu deskriptora, onda za to trebate koristiti atribut STYLE. Ova tehnika vam omogućava da iskoristite sve prednosti koje pružaju stilovi bez potrebe za kreiranjem stilskih listova. Privatna upotreba stilova se može koristiti čak i ako stranica već sadrži internu ili vezu na vanjski stilski list, jer privatni stil ima najveći prioritet.

primjer:

ID atribut

Ako želite primijeniti stil na jedan element web stranice, tada morate koristiti ID atribut.

Da biste to učinili, potrebno je dodijeliti identifikator željenoj oznaci elementa stranice. Zatim možete definirati svojstva ovog elementa u unutrašnjem ili vanjskom stilu. Navedeni atributi oblikovanja bit će postavljeni samo za element označen navedenim identifikatorom.

Primjer koristi dvije različite vrijednosti svojstva List-stil-tip:

list-style-position

Svojstvo specificira lokaciju markera elementa. Marker je ili unutar elementa ili izvan njega.

vrijednosti:

unutra- marker se nalazi unutar elementa liste.
vani— marker se pomera izvan tekstualnog bloka.
nasljediti- nasljeđivanje od roditeljskog elementa.

Primjer jasno pokazuje razliku između vrijednosti unutra I vani svojstva list-style-position:

Slika u stilu liste

Svojstvo specificira putanju do slike koja će služiti kao marker za stavku u numerisanoj ili označenoj listi. Lokacija slike markera može se kontrolirati korištenjem svojstva list-style-position.

vrijednosti:

URL— putanja do grafičke datoteke.
nijedan- poništava sliku markera, na primjer, za roditeljski element.
nasljediti- nasljeđivanje od roditeljskog elementa.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

U primjeru smo koristili malu sliku kao marker, koja jasno pokazuje mogućnosti svojstva. Slika u stilu liste:

Opis

Postavlja adresu slike koja služi kao marker liste. Ovo svojstvo je naslijeđeno, tako da se vrijednost none koristi za pojedinačne stavke liste za vraćanje tokena.

Sintaksa

lista-stil-slika: nema | url("put do datoteke") | nasljediti

Vrijednosti

none Onemogućuje sliku kao marker za roditeljski element. url Relativna ili apsolutna putanja do grafičke datoteke. Vrijednost se može navesti u jednostrukim, dvostrukim navodnicima ili bez njih. inherit Nasljeđuje vrijednost roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing elite
• 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.

Rezultat ovog primjera prikazan je na sl. jedan.

Rice. 1. Primjena svojstva liste-style-image

Objektni model

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

Pregledači

U različitim pretraživačima, udaljenost između slike i teksta može varirati.

Verzije Internet Explorera do i uključujući verziju 7.0 ne prikazuju znakove za nabrajanje kada se svojstvo float doda na listu. Također, vrijednost nasljeđivanja nije podržana u ovom pretraživaču.