Smatra se da zebra crtanje ili bojanje ili sjenčanje alternativnih redaka na stolu poboljšava upotrebljivost tablice vodeći oko korisnika duž reda. Ova metoda se godinama koristi u tisku, a mnogi dizajneri pokušavaju oponašati ovu tehniku prilikom izrade stolova za web... CSS je olakšao postizanje zebra stripinga, ali sve do CSS3 i dalje je uključivao malo glomaznog kodiranja.
S pojavom CSS3-ovog selektora nth-child, u mogućnosti smo ciljati više elemenata u dokumentu stvaranjem "brojača" koji preskače određenu djecu u stablu dokumenta. To nam omogućuje, konkretno, stiliziranje samo neparnih ili parnih redaka tablice. Ovaj članak opisuje kako uspješno koristiti nth-child.
Stara loša vremena...
Prije nego počnemo govoriti o tome kako koristiti ovaj novi selektor, pogledajmo stari način rada. Prvo, morali bismo dodati atribut klase svakom drugom redu tablice:
| Losos | Omega-3 masne kiseline pomažu pravilnom razvoju mozga, smanjuju rizik od Alzheimerove bolesti i pomažu u prevenciji srčanih bolesti. |
| Špinat | Odličan izvor folata i luteina. Sprječava urođene mane, bolesti srca, moždani udar i štiti vašu kožu od oštećenja od sunca. |
| Slatki krumpir | Beta karoten štiti vašu kožu od oštećenja od sunca. |
Srećom, naš stol je prilično mali, tako da ovo ne zahtijeva previše posla. Ali možete zamisliti koliko bi ovaj proces bio zamoran da je naš stol dugačak nekoliko desetaka redaka! Zatim bismo dodali CSS pravilo koje cilja te retke:
Tr.odd (boja pozadine: # 99ff99;)
Iako ova metoda radi, pomalo je neučinkovita jer zahtijeva dodatnu oznaku u HTML dokumentu. Ova oznaka, zauzvrat, zapravo ne dodaje ništa semantički vrijedno: neparni redovi ne služe drugačijoj funkciji od parnih redaka; samo želimo da izgledaju drugačije. Stoga strukturu nismo držali odvojeno od prezentacije. Da ne spominjemo da kodiranje velike tablice na ovaj način može biti frustrirajući zadatak.
Predstavljamo n-to dijete
CSS3, međutim, uključuje selektore koji nam omogućuju da držimo ruke podalje od označavanja i koristimo samo CSS za odabir redaka koje želimo stilizirati. Relevantni selektor - nth-child selektor - malo je kompliciran, pa odvojimo trenutak da shvatimo kako funkcionira.
Selektor nth-child cilja elemente u stablu dokumenta koji imaju određeni broj braće i sestara prije to. Gdje je n cijeli broj,: n-to dijete (an + b) odgovara elementu koji ima + b-1 braću i sestre ispred sebe.
Što to znači?
Taj n je u osnovi brojač: počinje s nulom, a zatim se postupno pomiče prema gore sve dok mu ne ponestane podređenih elemenata. Tada varijabla b predstavlja početno mjesto brojača - drugim riječima, položaj prvog elementa od kojeg počinjemo brojati. Konačno, varijabla a predstavlja položaje elemenata koje nakon toga podudaramo.
Da malo raščistimo stvari, razložimo primjer:
: n-to dijete ( 5 n + 2 )
U našem hipotetičkom primjeru iznad, varijabla b postavljena je kao dva, što znači da je prvi ciljani element drugi dijete ispod nadređenog u stablu dokumenta, drugi paragraf unutar tijela ili druga stavka unutar popisa.
Također u gornjem primjeru, varijabla a je postavljena na pet, što znači da će svako peto dijete nakon toga također biti ciljano. Sada kada smo definirali i a i b varijable, možemo odrediti koji će podređeni elementi biti stilizirani. Umetanjem početne vrijednosti od nula i brojeći dok nam ne ponestane podređenih elemenata, možemo odrediti koji će podređeni elementi biti stilizirani.
U ovom primjeru, kao što je prikazano u tablici 1, možete vidjeti da se podudara drugi podređeni element, zatim sedmi, zatim dvanaesti, i tako dalje, sve dok ne ostanemo bez elemenata.
| Dječji element | Formule | ||
|---|---|---|---|
| n | 5n | 5n + 2 | |
| 0 | n/a | n/a | |
| 1 | Y | ||
| 2 | Y | Y | |
| 3 | Y | ||
| 4 | Y | ||
| 5 | Y | Y | |
| 6 | Y | ||
| 7 | Y | Y | |
| 8 | Y | ||
| 9 | Y | ||
| 10 | Y | Y | |
| 11 | Y | ||
| 12 | Y | Y | |
Tablica 1. Demonstriranje koji je podređeni element odabran
Izračunavanje zebrastih pruga
Kako nam ovaj selektor pomaže kod zebrastih pruga? Imajte na umu da ova formula omogućuje neke prilično komplicirane konfiguracije, što je čini vrlo svestranom. Međutim, da bismo ciljali samo neparne ili parne elemente, trebamo zapamtiti samo dvije vrste selektora.
Za ciljanje svih parnih redaka kao što je prikazano u tablici 2, možemo koristiti sljedeći birač:
Tr: n-to dijete (2n)
| Koji podređeni element se odabire? | ||
|---|---|---|
| Dječji element | Formule | |
| n | 2n | |
| 0 | n/a | n/a |
| 1 | Y | |
| 2 | Y | Y |
| 3 | Y | |
| 4 | Y | Y |
| 5 | Y | |
| 6 | Y | Y |
| 7 | Y | |
| 8 | Y | Y |
| 9 | Y | |
| 10 | Y | Y |
| 11 | Y | |
| 12 | Y | Y |
Tablica 2. Dokazivanje da su odabrani samo parni redovi
Da bismo ciljali sve neparne retke, sastavili bismo sljedeći selektor:
Tr: n-to dijete (2n + 1)
Ovaj selektor odgovara prvom retku unutar tablice, a svaki drugi red nakon toga - svim neparnim recima kao što je prikazano u tablici 3.
| Koji podređeni element se odabire? | |||
|---|---|---|---|
| Dječji element | Formule | ||
| n | 2n | 2n + 1 | |
| 0 | n/a | n/a | |
| 1 | Y | Y | |
| 2 | Y | Y | |
| 3 | Y | Y | |
| 4 | Y | Y | |
| 5 | Y | Y | |
| 6 | Y | Y | |
| 7 | Y | Y | |
| 8 | Y | Y | |
| 9 | Y | Y | |
| 10 | Y | Y | |
| 11 | Y | Y | |
| 12 | Y | Y | |
Tablica 3. Dokazivanje da su odabrani samo neparni redovi
Ilustriranje pruga zebre
Slika 1 prikazuje tablicu s popisom raznih "superhrana" i njihovih nutritivnih vrlina kao demonstracija zebrastih pruga.
Slika 1: The HTML tablica
U ovoj demonstraciji želimo obojiti pozadinu neparnih redaka tako da je tablica lakša za čitanje. Deklaracijski blok je napisan ovako:
Tr: n-to dijete (2n + 1) (boja pozadine: # 99ff99;)
Ovo pravilo odgovara svim neparnim recima i primjenjuje boju pozadine samo na taj redak kao što je prikazano na slici 2.
Slika 2: Stilizirani su samo redovi s parnim brojem
Ako su ove formule previše komplicirane da biste ih zapamtili, svojstvo nth-child omogućuje osobama s matematičkim izazovima korištenje prečaca za ključne riječi. Umjesto matematičke formule, možemo koristiti i ključne riječi "neparan" ili "paran" kao vrijednost:
Tr: n-to dijete ( neparan) (boja pozadine: # 99ff99;)
CSS3 nam pruža tehniku bez problema za crtanje tablica, stavki ili obrazaca na popisu i tako dalje.
Nažalost, nth-child selektor uživa ograničenu podršku preglednika. Od ovog pisanja, nth-child selektor radi u Safariju 3 i Operi 9.5. Nažalost, možda ćete se htjeti držati neučinkovitije metode CSS kodiranja dok se podrška za svojstvo ne ubrza u drugim preglednicima. Ili, ako želite podržati druge preglednike poput Internet Explorer s jednostavnom metodom zebra stripinga, možete "zakrpati" podršku za nth-child u tim preglednicima. Korištenjem JavaScript okvira kao što je jQuery, možete isporučiti rješenje s omogućenim JavaScriptom samo u IE dok drugi preglednici koriste CSS pravila za stiliziranje stranice.
Živi primjer tablice superhrane
Ako imate preglednik koji podržava nth-child, ova povezana HTML tablica će izgledati kao zebrasta. CSS je umetnut u glavu na ovoj stranici tako da možete lako vidjeti izvor provjeriŠto se događa.
Događa se da dio sadržaja na našoj stranici treba oblikovati u obliku tablice koja će sadržavati određene informacije... Koji je onda najbolji način za stiliziranje ovog stola? Mislim da ste dosta često nailazili na stolove u obliku "zebre". To su tablice u kojima su redovi jedan za drugim obojeni određenom bojom. Prednost ovakvih tablica je njihova čitljivost. Danas ću vam reći kako je lako stilizirati tablicu na ovaj način koristeći pseudo-klase.
1. Prije svega, trebamo kreirati html datoteku iu njoj samu tablicu koju ćemo stilizirati. Prijeđimo na to.
Napravit ću html5 dokument, odmah spojiti stylesheet na njega, u kojem ćemo kreirati sljedeći korak i kreirajte tablicu u tijelu dokumenta.
Neimenovani dokument
Ovako će sada izgledati naš stol ako otvorimo html datoteku u pregledniku:
2. Sada je vrijeme da stvorite datoteku stilova "style.css" i počnete oblikovati našu tablicu.
Napravite ovu datoteku i spremite je u isti direktorij kao i html datoteka. Ako spremate u drugi direktorij, ne zaboravite ispraviti put do datoteke kada je uključite u html.
Oblikovanje zebra stola
Za stiliziranje koristit ćemo pseudo-klasu ": nth-child".
Najlakši način za stiliziranje parnih i neparnih redaka u tablici je korištenje ključne riječi“Neparni” (neparni elementi iz skupa) i “parni” (parni elementi iz skupa).
To se radi vrlo jednostavno. U datoteci stilova napišite sljedeće:
tr: n-to dijete (neparno) (boja pozadine: #CCC;) tr: n-to dijete (parno) (boja pozadine: #FFC;)
Možete odabrati bilo koju boju pozadine. osim boja pozadine Možete postaviti i druga pravila, kao što su težina fonta, vrsta fonta itd.
Kao rezultat toga, ako osvježite stranicu u svom pregledniku, vidjet ćete sljedeće:
Kao što vidite, sve neparne linije su obojene sive boje a sve parne su u svijetložutoj boji.
3. Ali ovo je samo jedan od većine jednostavne načine koristeći pseudo-klasu ": nth-child".
Zapravo, uz njegovu pomoć možemo odabrati elemente jedne grupe na razne načine.
Što, na primjer, ako želim, između ostalog, obojiti sve redove prve i posljednje ćelije u određenu boju, ali u isto vrijeme moje dvije ćelije u sredini trebaju ostati u obliku "zebre" .
Ovo je također prilično jednostavno za napraviti.
Prije svega, moram odabrati element ćelije, a zatim na njega primijeniti pseudo-klasu s odgovarajućim parametrima u zagradama.
Na ovaj način:
tr td: nth-dijete (3n + 1) (boja pozadine: # 069;)
Objasnimo ovaj kod.
“3n” znači da odabiremo svaki treći red. A "+1" znači da će uzorak početi od prvog retka. Tako će biti odabran prvi red i treći nakon njega.
U našem slučaju imamo samo 4 reda u tablici, dakle in plava boja bit će naslikan samo prvi i zadnji red.
Kada bi u našoj tablici bilo više redaka, tada bi u uzorak bio uključen prvi, a zatim svaki treći red.
Da smo napisali isti kod, ali bez "+1":
tr td: nth-child (3n) (boja pozadine: # 069;)
Tada bi uzorak bio potpuno drugačiji. Jednostavno bismo odabrali svaki treći red i rezultat bi bio ovakav:
Mislim da vam je sada ovaj princip odabira pomoću pseudo-klase ":nth-child" postao razumljiviji.
Možete mijenjati parametre u zagradama i na taj način odabrati elemente po potrebi. Ovdje je potrebno samo malo vježbe.
Međutim, ova metoda je prilično prikladna, jer ne morate dodijeliti klase svakom retku ili stupcu u tablici.
Zato vježbajte i imajte koristi!
To je sve za mene danas.
Veselim se vašim povratnim informacijama! Ne zaboravite podijeliti svoju lekciju sa svojim prijateljima pomoću gumba društvenih medija u nastavku.
Pretplatite se na ažuriranje bloga i budite u toku s najzanimljivijim i najkorisnijim člancima i lekcijama!
S vama je bila Anna Kotelnikova.
Sretno i vidimo se uskoro!
Zebra tablica je tablica u kojoj se boja pozadine retka mijenja nakon svakog retka. To je, na primjer, bijelo-crno-bijelo-crno ... To je ono što ćemo učiniti, koristeći samo CSS.
Da biste stvorili "zebru" u tablici, možete koristiti Js... Ali ova metoda će biti prilično problematična. Možete kreirati "zebru" ručno, odnosno koristiti ručke za dodavanje klasa u oznaku
Ova pseudo-klasa stvorena je za dodavanje svojstava oznaci ispod određeni broj... Možete odrediti da se svojstva dodjeljuju samo neparnim ili parnim oznakama. U osnovi, ova pseudo-klasa se može primijeniti upravo ono što je u tablicama. Pravila pisanja: n-to dijete:
Selektor: nth-dijete (vrijednost) (...)
Vrijednosti mogu biti:
neparan- neparni brojevi (1, 3, 5, 7 ...).
čak- parni brojevi (2, 4, 5, 6 ...).
broj- bilo koji broj od jedan.
Ali ova metoda ima nedostatak: nije podržana u starijim preglednicima.
A da biste stvorili stil zebre u tablici, trebate učiniti sljedeće:
HTML
| N | Zemlja | Stanovništvo (tisuću ljudi) |
|---|---|---|
| 1 | Kina | 1 338 613,0 |
| 2 | Indija | 1 166 079,2 |
| 3 | SAD | 307 212.1 |
| 4 | Indonezija | 240 271.5 |
| 5 | Brazil | 198 739.3 |
Atributcellpacing određuje koliki je razmak između ćelija. 0 - poništava uvlačenje.
CSS
tablica tr: nth-child (neparan) (boja pozadine: #EDEDED; / * Boja pozadine * /)Ovim smo postavili da ako oznaka
Tablica, tr, td, th (boja: # 969799; / * Boja teksta * / font: 13pt Andale Mono, monospace; / * Veličina, vrsta fonta * / obrub: 1px solid # E9E9E9; / * Outline * / border-collapse : kolaps; / * Ukloni dvostruki potez između ćelija * /) td, th (odsječak: 5px; / * padding * /) th (težina fonta: bold; boja pozadine: # auto; / * boja pozadine * /)
Da sam se uvijek pridržavao načela razumne dostatnosti, sada ne biste čitali ove retke. To mislim da, iako je predložena tema dovoljno dobro otkrivena, i postojeća rješenja Prilično sam zadovoljan, ali me nisu mogli dovesti u stanje potpunog mira... općenito, počeo sam iznova izmišljati kotač.
Riječ je o „prugastim“ HTML-tablicama, tj. o tablicama s izmjeničnim redovima različitih stilova. Konkretno, da bi se poboljšala percepcija podataka, ove linije mogu biti višebojne. Ispod je primjer takve tablice:
Zadao sam sebi sljedeći zadatak: bez promjene HTML datoteke:
| Lancelet | 30 vrsta | Kostur hordata |
| Hrskavica riba | 600 vrsta | Hrskavičasti kostur |
| Koštana riba | 20.000 vrsta | Kostur od kosti |
| Vodozemci | 3000 vrsta | Ažur kostur |
| Gmazovi | 6000 vrsta | Čvrsti kostur |
| Ptice | 8.000 vrsta | Čvrsti kostur |
| Sisavci | 4000 vrsta | Čvrsti kostur |
Standardni način
Na webu, za upit "prugasti stolovi" ili "zebra stolovi", lako je pronaći potrebne materijale na tu temu. U pravilu, predložena rješenja su različite varijacije iste ideje: pomoću JavaScripta i DOM-a pronalazimo potrebne tablice u HTML dokumentu (klasa stripy) i dodajemo potrebne klase (na primjer, oddrows i evenrows) u njihove redaka, ovisno o tome je li to paran niz ili ne. Može se implementirati ovako:
< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // redovi su numerirani od 0 rows [i] .className + = ((i% 2) == 0? "oddrows": "evenrows"); ))
Vezanjem poziva ove funkcije na događaj onload stranice, postići ćemo željeni rezultat.
Možda je danas optimalno rješenje međutim, ne ostavlja HTML netaknutim. Zanimalo me rješavanje problema isključivo korištenjem CSS-a, ili, barem, dodijeliti CSS-u zadatak pronalaženja ovih alata.
Savršeno rješenje
Može li se problem riješiti čistim CSS-om? Moguće je ako preglednik podržava CSS3. Nakon pregleda specifikacija, tamo nalazimo novu pseudo-klasu: nth-child (), koja se nesumnjivo pojavila pod utjecajem subjekta, a zahvaljujući kojoj su potrebni stilovi vrlo jednostavno postavljeni:
/ * neparan red tablice s prugastim klasama * /.prugasti tr: n-to dijete (2n + 1) (...) / * parni red tablice razreda prugastih * /.prugasti tr: n-to dijete (2n) (...)jao, moderni preglednici velika većina to još ne podržava. Što je s CSS2? Nažalost, ovdje je vrlo malo prikladnih alata. Problem se može djelomično riješiti pomoću selektora:
prugasti tr (...) / * 1. red * /.prugasti tr + tr (...) / * 2. red * /.prugasti tr + tr + tr (...) / * 3. red * /.prugasti tr + tr + tr + tr (...) / * 4. red * /.prugasti tr + tr + tr + tr + tr (...) / * 5. red * /
međutim, ova metoda je prikladna samo za tablice s relativno malim i poznatim brojem redaka, a nikako nije prikladna. Sto je ostalo? Ostaje koristiti dodatne mogućnosti svakog pojedinačnog preglednika. Pokušao sam pronaći rješenje za Windows verzije Internet Explorera, Mozille i Opera.
Internet Explorer
Nije bilo poteškoća s ovim preglednikom. Koristeći prednost IE-ove sposobnosti da dinamički postavlja vrijednosti za CSS svojstva pomoću izraza (), problem izmjeničnih raznobojnih linija, na primjer, može se jednostavno riješiti na sljedeći način:
Stripy tr (pozadina: izraz (this.rowIndex% 2 == 0? "#Ffe": "#efe");)
Da biste ovom metodom definirali ne jedno svojstvo, već cijeli stil za odgovarajuće retke tablice (dodajte klase oddrows i evenrows), kod će morati biti kompliciran ili ćete morati koristiti tehnologiju DHTML Behaviors:
Stripy tr (ponašanje: url (stripy.htc);) / * neparni niz * // * parna linija * /
U navedenom primjeru plan je realiziran: nizovima se dodaju potrebne klase, ovisno o tome radi li se o parnom nizu ili ne. Ovo ponašanje oznake tr opisano je u datoteci stripy.htc:
stripy.htcKorištene tehnologije prvi put su uvedene u Internet Explorer verziji 5, tako da će tablice s klasom stripy počevši od ove verzije postati "zebre".
Tropski gušter
Proširenje slično DHTML Behaviors implementirano je u preglednike s Gecko motorom. Web programeri mogu definirati nove elemente na stranici i nadjačati izgled, sadržaj i ponašanje standardnih. Za to se koristi XBL (XML Binding Language). Ova tehnologija ima veće mogućnosti u usporedbi s razvojem iz Microsofta i činilo se da neće biti poteškoća s rješenjem zadatka, ali nije.
U CSS-u je XBL vezanje postavljeno slično ponašanju pomoću svojstva -moz-binding:
Stripy tr (-moz-binding: url (stripy.xml);)
Ostao je u XBL datoteci stripy.xml da opiše ponašanje potrebne oznake međutim, unatoč svim mojim naporima, nisam uspio "vezati" ni tr tag ni bilo koju drugu tablicu. Ispostavilo se da je Bugzilla Bug 83830 uzrok ovog problema: Vezanje TD stanica (s XBL) uopće ne funkcionira... Koliko god uvredljivo bilo, činilo se da na XBL ne treba računati. Srećom, rješenje je pronađeno!
Pomoć je stigla od poznatog web gurua Deana Edwardsa, koji je stvorio XBL omot koji omogućuje preglednicima Gecko da koriste Microsoftovu DHTML Behaviors tehnologiju, što znači da možete koristiti istu datoteku stripy.htc kao i za IE za rješavanje problema!
Za to su nam potrebne dvije XBL datoteke: moz-behaviors.xml (izravno omot, možete ga preuzeti s web stranice Deana Edwardsa, teži manje od 7K) i bindings.xml (pomoćna, posredna datoteka "između" CSS-a i moza -behaviors.xml, kod ispod u tekstu). Sada, da bi .htc datoteka radila u Mozilli, trebate sljedeće:
.stripy tr (-moz-binding: url (bindings.xml # stripy.htc);)Općenito, sve radi dobro, ali i dalje nećete moći promijeniti ponašanje tr tag-a zbog gore spomenutog buga, ali pametni Edwards uspio je riješiti i ovaj problem. U našem slučaju, CSS kod treba dopuniti:
/ * potreban dodatak za uspješno povezivanje oznaka tablice * /.stripy (-moz-binding: url (bindings.xml # tablica);) / * Ponašanje HTC-a koristeći XBL vezanje * /.stripy tr (-moz-binding: url (bindings.xml # stripy.htc);) / * neparni niz * /.prugasti .oddrows (pozadina: #ffe; ...) / * parna linija * /.prugasti .evenrows (pozadina: #efe; ...)Sadržaj datoteke bindings.xml trebao bi biti sljedeći:
vezovi.xmlSada sve radi dobro. Tablice s klasom stripy postat će zebre u preglednicima Gecko počevši od verzije 1.0.
Opera
Nažalost, ovaj član obitelji web explorera nema mehanizme proširenja usporedive sa svojim konkurentima. Da, u 9. verziji pojavili su se widgeti, ali uz njihovu pomoć nemoguće je na bilo koji način utjecati na rad preglednika. Što uraditi? Operi nije preostalo ništa drugo nego koristiti zabranjeni trik. Počevši od verzije 7, preglednik (kao i IE, počevši od verzije 5) imao je zanimljivu "značajku" - mogućnost izvršavanja skripti izravno iz CSS-a. Da biste to učinili, koristite bilo koje CSS svojstvo koje vam omogućuje da odredite put do datoteke kao vrijednost. Evo primjera takve tehnike:
Tijelo (pozadinska slika: url ("javascript: alert (" Bok ");");)
Opera pokreće skriptu samo na postojećim HTML elementima i to samo jednom. Zašto to ne iskoristiti i posuditi gore spomenutu skriptu? Učinio sam to, iako moram priznati da su se s ovom tehnikom pojavile određene poteškoće i nisu svi scenariji bili "poslušni":
Funkcija makeStripy (tabClass) (var tabs = document.getElementsByTagName ("table"); for (var e = 0; e< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows"); } } if (window.opera) makeStripy("stripy");
Ova skripta će se uspješno izvršiti u Operi i putem CSS-a:
Stripy tr (pozadinska slika: url ("javascript: funkcija makeStripy (tabClass) (var tabs = document.getElementsByTagName (" tablica "); for (var e = 0; e U gornjem primjeru, tražena funkcija se poziva izravno (zahvaljujući provjeri ako (window.opera) ... to se događa samo u Operi), a ovaj poziv možete povezati s događajem onload stranice, uspio sam postići ovo kako slijedi: Stripy tr (pozadinska slika: url ("javascript: (funkcija () (funkcija makeStripy (tabClass) (var tabs = document.getElementsByTagName) (" tablica "); for (var e = 0; e Obje će raditi na verzijama Opera koje podržavaju svojstvo className objekta HTMLElement za element tr, t.j. počevši od verzije 7.5. Tablice s klasom stripy uspješno su postale "prugaste" u 9. verziji preglednika, ali već u build 8500 Opera gubi svoju "jedinstvenu sposobnost" - ova tehnika više ne radi. Tako se činilo da je pitanje već zatvoreno, za Operu zasad ostaje otvoreno. Dakle, nije bilo moguće ostvariti sve što je planirano, ali, ipak, imamo, iako ne cjelovito, ali potpuno zadovoljavajuće rješenje. HTML ostaje netaknut i datoteka style.css može izgledati ovako:Ishod
Vrhunski povezani članci
