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

Iz Reference za web jezik

Korištene vrijednosti

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

Opaske

Vlasništvo listStyle je generičko kompozitno svojstvo. Kada su obje vrijednosti postavljene za vrstu kao i za sliku, tada vrijednost za sliku ima prednost (prikazat će se slika, a ne jedan od standardnih oznaka popisa), osim ako listStyleImage nije postavljen na nijedan ili link ( Url) na slici nije ispravno instaliran ili je zastario.

Vlasništvo listStyle također se odnosi na sve elemente koji su postavljeni na popis-stavka za imovinu prikaz... Da biste postavili prikaz oznake popisa u obliku podebljanih točaka, svakako morate detaljno opisati svojstvo margine ili postaviti vrijednost iznutra za svojstvo listStylePosition na ovim stavkama.

Vrijednosti u imovini listStyle može se opisati bilo kojim redoslijedom. Odvojite ih razmakom.

Primjeri

Sljedeći primjeri ilustriraju korištenje svojstva listStyle i atribut u stilu liste za stiliziranje popisa.

Primjer koristi klase ul i UL.compact a također i atribut u stilu liste za navođenje dva neuređena popisa. Za razred UL.compact zamijeniti crtež opisan u ul, trebate postaviti vrijednost nijedan za atribut popis-stil-slika.

• ...
• ...

• ...
• ...

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

Treći primjer pokazuje da svojstvo listStyle primjenjivo za elemente koji imaju svojstvo prikaz poprima značenje popis-stavka.

Opis

Univerzalno svojstvo koje vam omogućuje da istovremeno postavite stil markera, njegov položaj i sliku koja će se koristiti kao marker. Za detaljnije informacije pogledajte informacije o svakoj nekretnini i zasebno.

Sintaksa

stil-list: tip-stil liste || pozicija-stil liste || slika u stilu liste | naslijediti

Vrijednosti

Bilo koja kombinacija od tri vrijednosti koje definiraju stil markera, one su odvojene razmakom. Kombinacije vrijednosti moraju slijediti navedenim redoslijedom: prvo dolazi tip markera, zatim pozicija i slika. Nijedna vrijednost nije obavezna, tako da se neiskorištene vrijednosti mogu izostaviti.

Naslijediti Nasljeđuje vrijednost od roditelja.

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.

Rezultat ovog primjera prikazan je na sl. jedan.

Riža. 1. Primjena svojstva liste stila

Model objekta

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

Preglednici

Internet Explorer do i uključujući verziju 7.0 ne podržava naslijeđenu vrijednost.

Vanjski stilski list omogućuje vam koncentriranje informacija o oblikovanju web-mjesta u jednu datoteku. Da biste se referirali na vanjski css stilski list, morate u tijelu nakon naslova napiši sljedeći redak

Atribut href specificira put do vanjske datoteke stilskog lista. Ovaj redak treba biti napisan u tekstu svih web stranica na kojima se treba koristiti vanjski stilski list.

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

Privatna definicija stilova

Ako trebate primijeniti stil na privatan način, u odnosu na zasebnu instancu deskriptora, tada za to trebate koristiti atribut STYLE. Ova tehnika vam omogućuje da u potpunosti iskoristite ponuđene stilove izbjegavajući obvezu izrade stilskih tablica. Privatna upotreba stilova može se koristiti čak i ako stranica već sadrži internu ili vezu na vanjski stilski list. privatni stil ima najveći prioritet.

Primjer:

ID atributa

Ako želite primijeniti stil na zasebni element web stranice, trebate koristiti ID atribut.

Da biste to učinili, potrebnoj oznaci elementa stranice morate dodijeliti identifikator. Zatim možete definirati svojstva ovog elementa u internom ili vanjskom stilu. Navedene oznake oblikovanja bit će instalirane samo za element označen navedenim identifikatorom.

Primjer koristi dvije različite vrijednosti svojstava Tip u stilu popisa:

Pozicija u stilu liste

Svojstvo određuje mjesto oznake elementa. Oznaka se nalazi unutar elementa ili izvan njega.

vrijednosti:

iznutra- oznaka se nalazi unutar stavke popisa.
vani- marker se pomiče iz tekstualnog bloka.
naslijediti- nasljeđivanje od roditeljskog elementa.

Primjer jasno pokazuje razliku između vrijednosti iznutra i vani Svojstva Pozicija u stilu liste:

Slika u stilu liste

Svojstvo postavlja put do slike koja će služiti kao oznaka za stavku na popisu s brojevima ili s grafičkim oznakama. Položaj oznake markera može se kontrolirati pomoću svojstva Pozicija u stilu liste.

vrijednosti:

Url- put do grafičke datoteke.
nijedan- poništava sliku markera, na primjer, za roditeljski element.
naslijediti- nasljeđivanje od roditeljskog elementa.

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

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

Opis

Postavlja adresu slike koja služi kao oznaka za popis. Ovo svojstvo je naslijeđeno, tako da se nijedno ne koristi za vraćanje markera za pojedinačne stavke popisa.

Sintaksa

slika u stilu liste: nema | url ("put do datoteke") | naslijediti

Vrijednosti

none Poništava sliku kao oznaku za roditeljski element. url Relativni ili apsolutni put do slikovne datoteke. Vrijednost se može navesti u jednostrukim, dvostrukim navodnicima ili bez njih. inherit Nasljeđuje vrijednost od roditelja.

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.

Rezultat ovog primjera prikazan je na sl. jedan.

Riža. 1. Primjena svojstva liste-style-image

Model objekta

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

Preglednici

Udaljenost između slike i teksta može varirati u različitim preglednicima.

Internet Explorer do i uključujući 7.0 ne prikazuje oznake kada se svojstvo float doda na popis. Također, ovaj preglednik ne podržava vrijednost nasljeđivanja.