Opis
Postavlja adresu slike koja služi kao oznaka popisa. Ovo se svojstvo nasljeđuje, pa se za pojedinačne stavke popisa vrijednost none koristi za vraćanje oznake.
Sintaksa
lista-stil-slika: nema | url("put do datoteke") | naslijediti
Vrijednosti
none Onemogućuje sliku kao oznaku za nadređeni element. url Relativni ili apsolutni put do grafička datoteka. Vrijednost se može navesti u jednostrukim, dvostrukim ili bez navodnika. naslijediti Nasljeđuje vrijednost 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. 1.
Riža. 1. Korištenje svojstva list-style-image
Objektni model
document.getElementById("elementID ").style.listStyleImage
Preglednici
U različitim preglednicima Udaljenost između slike i teksta može varirati.
U Internet Explorer do inačice 7.0 uključivo, markeri se ne prikazuju ako je popis dodan plutajuće svojstvo. Također, ovaj preglednik ne podržava vrijednost nasljeđivanja.
Pozdrav, dragi čitatelji bloga. Danas će biti još jedan članak o svojstvima kaskadnih listova stilova. Usredotočit će se na dizajn pomoću CSS pravila.
Općenito, liste se razlikuju među elementima bloka. To je zbog činjenice da uključuju grafičke oznake i numeriranje koje postavlja sam preglednik.
Svojstvo stila popisa - dizajn popisa na html stranici
U CSS jeziku postoje tri svojstva koja počinju sa list-style, a koja su odgovorna za dizajn popisa s grafičkim oznakama i numeriranih popisa. Osim toga, tu je i unaprijed pripremljeno pravilo u stilu popisa koje vam omogućuje smanjenje količine koda.
Sva ova svojstva mogu se koristiti za oboje html elementi li, a za elemente ul i ol. Jedina je razlika u tome što ako su pravila napisana za određenu vrijednost liste li, tada će se primijeniti samo na nju. A ako su ista css pravila napisana za ul ili ul spremnike, tada će se primijeniti na sve elemente li sadržane u tim spremnicima.
Počnimo s atributom lista-stil-tip, koji postavlja vrsta markera ili numeriranje za stavke popisa:
list-style-type: disk|krug|kvadrat|decimala|decimala-početna-nula|donja-rimska|gornja-rimska|donja-grčka|donja-alfa|donja-latinica|gornja-alfa|gornja-latinica|armenski| gruzijski|nijedan|naslijediti
Kao što vidite, svojstvo list-style-type ima mnogo dostupnih vrijednosti, koje mogu specificirati i vrstu markera i različite vrste numeriranja.
- disk - marker u obliku crnog kruga (zadana vrijednost za popise s grafičkim oznakama).
- krug - marker u obliku nepopunjenog kruga.
- kvadrat - marker u obliku kvadrata. Može biti svijetlo ili tamno, ovisno o pregledniku.
- decimal - numeriranje arapskim brojevima (zadana vrijednost za numerirane liste).
- decimal-leading-zero - numeriranje arapskim brojevima od 01 do 99 s vodećom nulom.
- donji rimski - numeriranje malim rimskim brojevima.
- gornji rimski - numeriranje velikim rimskim brojevima.
- donji-grčki - numeriranje malim grčkim slovima.
- small-alpha i lower-latin - numeriranje malim latiničnim slovima.
- upper-alpha i upper-latin - numeriranje velikim latiničnim slovima.
- armenski - numeriranje tradicionalnim armenskim brojevima.
- gruzijski - numeriranje tradicionalnim gruzijskim brojevima.
- nema - označavanje i numeriranje se uopće neće provoditi.
Ovako će izgledati stavke popisa u pregledniku s različitim vrijednostima tipa stila popisa:
Na koristeći CSS stilova, nije bitno koji se element (OL ili UL) koristi za izradu popisa. OL i UL razlikuju se samo u zadanom ponašanju, a sa svojstvom list-style-type možete jednostavno pretvoriti jednu vrstu liste u drugu.
Stilski atribut lista-stil-slika omogućuje postavljanje kao marker stavke popisa grafička slika . Kada koristite atribut list-style-image, vrijednost atributa list-style-type se zanemaruje:
lista-stil-slika: nijedan|<интернет-адрес файла изображения>|naslijediti
Značenje nikakav uklanja oznaku slike i postavlja je na normalnu, ne grafičku. Ovo je zadano ponašanje.
Kada navedete adresu slikovne datoteke, slika će biti umetnuta umjesto oznake. Kao i kod korištenja, možete koristiti i apsolutne i relativne adrese kao adresu slike. Ako preglednik ne može učitati sliku, koristit će se zadani marker ili numeriranje ili ono što je navedeno u svojstvu u tipu stila liste.
Primjer popisa sa slikom kao oznakom:
- prva stavka popisa;
- druga stavka popisa;
- treća stavka na popisu.
A evo kako to izgleda:
- prva stavka popisa;
- druga stavka popisa;
- treća stavka na popisu.
Jasno je da je pri odabiru slike kao markera bolje odabrati malu sliku.
I posljednje CSS svojstvo iz niza stilova popisa je lista-stil-pozicija koji vam omogućuje da odredite mjesto grafičke oznake ili numeriranja u stavci popisa. Mogu postojati dvije opcije za vrijednost:
list-style-position: unutra|vani
U slučaju vrijednosti iznutra marker ili numeriranje se postavljaju kao unutar popisa iu slučaju vani izvan li elemenata. Zadana vrijednost je izvan i marker je pomaknut van.
Primjer popisa s različitim vrijednostima pozicije stila popisa:
- u prvom paragrafu sve je standardno;
- u drugom paragrafu, list-style-position postavljen je na unutar. U tom slučaju, imajte na umu da je druga linija postavljena u ravnini s markerom;
- u ovom trenutku list-style-position jednak je izvana.
Prefabricirano CSS pravilo stila popisa
Sljedeće CSS svojstvo stila popisa prefab je za stiliziranje popisa. Omogućuje vam da napišete sva tri CSS pravila o kojima smo govorili u jednom. Redoslijed određivanja vrijednosti u njemu može biti bilo koji, a parametri koje ne navedete u stilu popisa preuzet će preglednik prema zadanim postavkama.
Vrijednosti u pravilu kompilacije u stilu popisa trebaju biti odvojene razmacima:
lista-stil: lista-stil-tip lista-stil-slika lista-stil-pozicija;
Pravo CSS pravilo za stiliziranje popisa moglo bi izgledati otprilike ovako:
list-style: krug url (//site/images/marker.png) izvan;
Dakle, svojstvo stila popisa omogućuje značajno smanjenje količine koda, jer je umjesto tri pravila dovoljno postaviti samo jedno.
Kao što je gore spomenuto, vrijednosti se mogu navesti bilo kojim redoslijedom i u bilo kojoj količini. Tako npr. da bi se uklonite oznake s popisa izbornika dovoljno je napisati:
list-style: nijedan;
Isto se može učiniti pomoću svojstva list-style-type:
list-style-type: nijedan;
Ovdje ću završiti priču o dizajniranju html lista pomoću kaskadnih listova stilova. Da saznam o drugima CSS svojstva možete čitati članke iz odjeljka "" i ne zaboravite se pretplatiti na ažuriranja bloga. Vidimo se opet!
| preglednik | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Verzija | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
| Podržano | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da | Da |
kratka informacija
Opis
Atribut koji vam omogućuje da istovremeno odredite stil markera, njegov položaj i sliku koja će se koristiti kao marker. Za više pojedinosti o argumentima pogledajte svojstva list-style-type, list-style-position i list-style-image za svaki parametar zasebno.
Sintaksa
stil-popisa: tip-stila-popisa || lista-stil-pozicija || lista-stil-slika
Argumenti
Bilo koja kombinacija triju vrijednosti koje definiraju stil markera, bilo kojim redoslijedom. Vrijednosti su odvojene razmakom. Nijedan argument nije potreban, tako da se neiskorištene vrijednosti mogu izostaviti.
- 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. 1.
Riža. 1. Korištenje parametra stila liste
prored-visina reda-stil stila margina max-visina max-width min-height min-width outline overflow padding position right text-align text-decoration text-indent text-transform top vertical-align white-space width razmak između riječi z-indeksSvojstvo LIST-STYLE
| Vlasništvo | Vrijednosti | itd* | Hc* |
|---|---|---|---|
| u stilu popisa | [popis-stil-slika; lista-stil-pozicija; list-style-type ], naslijediti | * | + |
| lista-stil-tip | disk , krug, kvadrat, decimala, decimalna-početna-nula, niži rimski, gornji rimski, niži latinski, gornji latinski, armenski, gruzijski, nijedan, naslijediti | * | + |
| lista-stil-pozicija | iznutra, izvana, naslijediti | * | + |
| lista-stil-slika | URL, ništa, naslijediti | * | + |
Vlasništvo Popisni stil— skraćeni oblik pisanja svojstava koja definiraju sve stilove markera za elemente popisa. Ova se svojstva odnose i na numerirane i na popise s grafičkim oznakama - potrebno ih je razmotriti odvojeno. Skraćeni oblik notacije ne smije uključivati nijedno pojedinačno svojstvo, ali se mora poštivati redoslijed kojim su napisani: tip markera - njegov položaj - putanja slike.
Područje primjene*: popis elemenata i bilo kojih drugih za koje je vrijednost svojstva Prikaz je popis-stavka.
List-style-type
Skupovi svojstava tip markera za svaki element liste. Vrste grafičkih oznaka razlikuju se za popise s grafičkim oznakama i numerirane popise.
Vrijednosti:
disk- točkasti marker.
krug- kružni marker.
kvadrat— kvadratni marker.
decimal— Arapski brojevi: 1, 2, 3….
decimalna-početna-nula- Arapski brojevi koji počinju od nule: 01, 02, 03 ... 09.
lowel-romantika- Rimska numeracija malim slovima.
gornji-roman- Rimska numeracija velikim slovima.
lowel-latinski— mala latinična slova: a, b, c….
gornjo-latinski— velika latinična slova: A, B, C….
Armenac- Armensko numeriranje.
gruzijski- Gruzijsko numeriranje.
nikakav- otkaz.
naslijediti
Primjer koristi dvije različite vrijednosti svojstava List-style-type:
List-style-position
Svojstvo određuje lokaciju markera elementa. Oznaka je ili unutar elementa ili izvan njega.
Vrijednosti:
iznutra— marker se nalazi unutar elementa liste.
vani— marker se pomakne izvan bloka teksta.
naslijediti— nasljeđivanje nadređenog elementa.
Primjer jasno pokazuje razliku između vrijednosti iznutra I vani Svojstva List-style-position:
Lista-stil-slika
Svojstvo navodi putanju do slike koja će služiti kao oznaka za element na numeriranom popisu ili popisu s grafičkim oznakama. Položajem slike markera može se upravljati pomoću svojstva List-style-position.
Vrijednosti:
URL— put do grafičke datoteke.
nikakav— poništava sliku markera, na primjer, za nadređeni element.
naslijediti— nasljeđivanje nadređenog 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 nekretnine Lista-stil-slika:
Univerzalno svojstvo koje vam omogućuje da istovremeno postavite stil markera, njegovu poziciju i sliku koja će se koristiti kao oznaka popisa.
kratka informacija
Oznake
| Opis | Primjer | |
|---|---|---|
| <тип> | Označava vrstu vrijednosti. | <размер> |
| A & & B | Vrijednosti se moraju ispisati navedenim redoslijedom. | <размер> && <цвет> |
| A | B | Označava da trebate odabrati samo jednu vrijednost od predloženih (A ili B). | normalno | malim slovima |
| A || B | Svaka se vrijednost može koristiti samostalno ili zajedno s drugima bilo kojim redoslijedom. | širina || računati |
| Vrijednosti grupa. | [ obrezivanje || križ ] | |
| * | Ponovite nula ili više puta. | [,<время>]* |
| + | Ponovite jednom ili više puta. | <число>+ |
| ? | Navedena vrsta, riječ ili grupa nisu obavezni. | umetak? |
| (A, B) | Ponovite najmanje A, ali ne više od B puta. | <радиус>{1,4} |
| # | Ponovite jednom ili više puta odvojene zarezima. | <время># |
Vrijednosti
Bilo koja kombinacija triju vrijednosti koje određuju stil markera, odvojene su razmakom. Kombinacije vrijednosti moraju slijediti zadanim redoslijedom: prvo dolazi tip markera, zatim pozicija i slika. Nijedna od vrijednosti nije obavezna, tako da se one koje se ne koriste mogu izostaviti.
Primjer
- Multivarijantni polinom
- Normalni apsolutno konvergentni nizovi
- Integral funkcije
- Kolinearni ekstrem funkcije
Rezultat ovog primjera prikazan je na sl. 1.
Riža. 1. Primjena svojstva list-style
Objektni model
Objekt.style.listStyle
Specifikacija
Svaka specifikacija prolazi kroz nekoliko faza odobravanja.
- Preporuka - Specifikaciju je odobrio W3C i preporučuje se kao standard.
- Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da on ispunjava svoje ciljeve, ali joj je potrebna pomoć razvojne zajednice za implementaciju standarda.
- Predložena preporuka Predložena preporuka) - u ovoj fazi dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
- Radni nacrt - zrelija verzija nacrta o kojoj se raspravljalo i dopunjena radi pregleda zajednice.
- Urednikov nacrt ( Urednički nacrt) - nacrt verzije standarda nakon izmjena koje su izvršili urednici projekta.
- Nacrt ( Nacrt specifikacije) - prva verzija nacrta standarda.
Preglednici
Preglednici
U tablici preglednika koriste se sljedeće oznake.