Se crede că dungile zebră - sau colorarea sau umbrirea rândurilor alternative pe o masă - îmbunătățesc utilizarea unei mese prin ghidarea ochiului utilizatorului de-a lungul unui rând. Această metodă a fost folosită în tipărire de ani de zile, iar mulți designeri încearcă să imite această tehnică atunci când fac tabele pentru internetul. CSS a făcut mai ușoară realizarea striping zebra, dar, până la CSS3, este încă implicată un pic de codare greoaie.
Odată cu apariția selectorului de al n-lea copil al CSS3, putem ținti mai multe elemente dintr-un document prin crearea unui „contor” care sări peste copiii specificati în arborele documentului. Acest lucru ne permite, în mod specific, să stilăm doar rândurile impare sau pare ale unui tabel. Acest articol detaliază cum să utilizați nth-child cu succes.
Vremurile rele...Înainte de a începe să discutăm cum să folosiți acest nou selector, să trecem în revistă vechiul mod de a face lucrurile. În primul rând, ar trebui să adăugăm un atribut de clasă la fiecare alt rând de tabel:
| Somon | Omega-3 ajută creierul să se dezvolte corect, reduc riscul de Alzheimer și ajută la prevenirea bolilor de inimă. |
| Spanac | Sursă excelentă de acid folic și luteină. Previne malformațiile congenitale, bolile de inimă, accidentul vascular cerebral și vă protejează pielea de daunele solare. |
| Cartofi dulci | Beta-carotenul vă protejează pielea de daunele solare. |
Din fericire, masa noastră este destul de mică, așa că nu necesită prea multă muncă. Dar vă puteți imagina cât de obositor ar fi acest proces dacă masa noastră ar avea zeci de rânduri! Am adăuga apoi o regulă CSS care vizează acele rânduri:
Tr.odd (culoare de fundal: #99ff99; )
În timp ce această metodă funcționează, este puțin ineficientă, deoarece necesită un marcaj suplimentar în documentul HTML. Acest marcaj, la rândul său, nu adaugă cu adevărat nimic valoros din punct de vedere semantic: rândurile impare nu au o funcție diferită de rândurile pare; vrem doar să arate diferit. Prin urmare, nu am păstrat structura separată de prezentare. Ca să nu mai vorbim de faptul că codificarea unui tabel mare în acest fel poate fi o sarcină frustrantă.
Prezentarea următorului copilCSS3, cu toate acestea, include selectoare care ne permit să ne ținem mâinile departe de marcaj și să folosim doar CSS pentru a alege rândurile pe care vrem să le stilăm. Selectorul relevant - al-lea-selector de copil - este puțin complicat, așa că să luăm un moment pentru a înțelege cum funcționează.
Selectorul al-al-lea copil vizează elemente dintr-un arbore de documente care au un anumit număr de frați inainte de aceasta. Unde n este un număr întreg, :nth-child(an+b) se potrivește cu elementul care are an+b-1 frați înaintea acestuia.
Ce înseamnă acest lucru?
Acel n este practic un numărător: începe cu zero, apoi se mișcă în sus până când rămâne fără elemente copii. Apoi variabila b reprezintă locul de pornire al contorului - cu alte cuvinte, poziția primului element de la care începem numărarea. În cele din urmă, variabila reprezintă pozițiile elementelor pe care le potrivim după aceea.
Pentru a clarifica puțin lucrurile, să descompunem un exemplu:
:nth-child(5 n+2 )
În exemplul nostru ipotetic de mai sus, variabila b este setată ca două, ceea ce înseamnă că primul element vizat este al doilea copil sub părinte în arborele documentului, al doilea paragraf din corp sau al doilea element dintr-o listă.
De asemenea, în exemplul de mai sus, variabila a este setată la cinci, ceea ce înseamnă că fiecare al cincilea copil după aceea trebuie să fie vizat. Acum că am definit ambele variabile a și b, putem determina ce elemente copil vor fi stilate. Prin introducerea valorii de pornire a zeroși numărând până când rămânem fără elemente copil, putem determina ce elemente copil sunt stilizate.
În acest exemplu, așa cum se arată în Tabelul 1, puteți vedea că al doilea element copil este potrivit, apoi al șaptelea, apoi al doisprezecelea și așa mai departe, până când epuizăm elementele.
| N / A | N / A | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y | |
| Y | ||
| Y | ||
| Y | Y | |
| Y | ||
| Y | Y |
Tabelul 1. Demonstrarea elementului copil este selectat
Calcularea dungilor de zebrăCum ne ajută acest selector cu dungi zebra? Rețineți că această formulă permite câteva configurații destul de complicate - făcând-o foarte versatilă. Cu toate acestea, pentru a viza doar elemente impare sau pare, trebuie să ne amintim doar două tipuri de selectori.
Pentru a viza toate rândurile pare, așa cum se arată în Tabelul 2, putem folosi următorul selector:
Tr:nth-child(2n)
| N / A | N / A |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
| Y | |
| Y | Y |
Tabelul 2. Demonstrând că sunt selectate doar rândurile cu numere pare
Pentru a viza toate rândurile impare, am compune următorul selector:
Tr:nth-child(2n+1)
Acest selector se potrivește cu primul rând dintr-un tabel și cu fiecare al doilea rând după aceea - toate rândurile impare, așa cum se arată în Tabelul 3.
| N / A | N / A | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y | |
| Y | Y |
Tabelul 3. Se demonstrează că sunt selectate numai rânduri impare
Ilustrarea dungilor de zebrăFigura 1 prezintă un tabel care listează diverse „super-alimente” și virtuțile lor nutriționale ca o demonstrație a dungilor zebre.
Figura 1: The tabel HTML
În această demonstrație, dorim să colorăm fundalul rândurilor impare, astfel încât tabelul să fie mai ușor de citit. Blocul de declarație este scris astfel:
Tr:nth-child(2n+1) (culoare de fundal: #99ff99; )
Această regulă se potrivește cu toate rândurile impare și aplică culoarea de fundal numai acelui rând, așa cum se arată în Figura 2.
Figura 2: Numai rândurile cu numere pare sunt stilizate
Dacă aceste formule sunt prea complicate pentru a fi reținute, proprietatea al-n-lea copil le permite celor cu probleme matematice să utilizeze comenzi rapide pentru cuvinte cheie. În loc de o formulă matematică, putem folosi și cuvintele cheie „impare” sau „pare” ca valoare:
Tr:nth-child (impar) (culoare de fundal: #99ff99; )
CSS3 ne pune la dispoziție o tehnică fără probleme pentru a ne întinde tabelele, a enumera elementele sau formularele și așa mai departe.
Din păcate, selectorul al-al-lea copil beneficiază de suport limitat pentru browser. În momentul scrierii acestui articol, selectorul de al-lea copil funcționează în Safari 3 și Opera 9.5. Din păcate, poate doriți să rămâneți la metoda de codare CSS mai ineficientă până când suportul pentru proprietate este actualizat în alte browsere. Sau, dacă doriți să acceptați alte browsere, cum ar fi Internet Explorer cu o metodă ușoară de striping zebra, puteți „repare” asistența pentru copii în acele browsere. Folosind un cadru JavaScript precum jQuery , puteți furniza o soluție activată pentru JavaScript doar prin intermediul IE, în timp ce celelalte browsere folosesc regulile CSS pentru a stila pagina.
Exemplu viu de masă cu superalimenteDacă aveți un browser care acceptă nth-child , acest tabel HTML legat va părea a fi cu dungi zebră . CSS-ul este inserat în capul acestei pagini, astfel încât să puteți vizualiza sursa cu ușurință verifică Ce se întâmplă.
Se întâmplă ca o parte a conținutului de pe site-ul nostru web să fie formatată sub forma unui tabel care va conține anumite informatii. Atunci care este cel mai bun mod de a stila această masă? Cred că ați întâlnit destul de des mese în formă de zebră. Acestea sunt acele tabele în care rândurile fiecare alte sunt colorate într-o anumită culoare. Avantajul unor astfel de tabele este lizibilitatea lor. Astăzi vă voi spune cât de simplu puteți stila un tabel în acest fel folosind pseudo-clase.
1. În primul rând, trebuie să creăm un fișier html și în el chiar tabelul pe care îl vom stila. Să o facem.
Voi crea un document html5 și voi conecta imediat la el foaia de stil în care o vom crea urmatorul pasși creați un tabel în corpul documentului.
Document fara titlu
Așa va arăta masa noastră acum dacă deschidem fișier html in browser:
2. Acum este timpul să creăm un fișier de foaie de stil „style.css” și să începem să ne stilăm tabelul.
Creați acest fișier și salvați-l în același director ca și fișierul html. Dacă salvați într-un alt director, nu uitați să corectați calea către fișier atunci când îl conectați în html.
Aranjarea unei mese cu zebrăPentru stilizare vom folosi pseudoclasa „:nth-child”.
Cel mai simplu mod de a stila rândurile pare și impare dintr-un tabel este utilizarea Cuvinte cheie„odd” (elementele impare din mulțime) și „even” (elementele pare din mulțime).
Acest lucru se face foarte simplu. În fișierul foaie de stil, scrieți următoarele:
tr:nth-child(impar) (culoarea fundal:#CCC;) tr:nth-child(par) (culoarea fundal:#FFC;)
Puteți alege orice culoare de fundal. Cu exceptia culoare de fundal Puteți seta alte reguli, cum ar fi grosimea fontului, tipul fontului etc.
Ca urmare, dacă reîmprospătați pagina în browser, veți vedea următoarele:
După cum puteți vedea, toate rândurile impare sunt colorate culoare gri, iar toate parele sunt galbene deschis.
3. Dar acesta este doar unul dintre cele mai multe moduri simple folosind pseudoclasa „:nth-child”.
De fapt, cu ajutorul lui, putem selecta elemente dintr-un grup într-o mare varietate de moduri.
Ce se întâmplă dacă, de exemplu, vreau, printre altele, să pictez toate rândurile primei și ultimei celule într-o anumită culoare, dar, în același timp, cele două celule ale mele din mijloc ar trebui să rămână sub forma unei „zebre” .
Acest lucru este, de asemenea, destul de simplu de făcut.
În primul rând, trebuie să selectez un element de celulă, apoi să îi aplic o pseudo-clasă cu parametrii corespunzători între paranteze.
Ca aceasta:
tr td:nth-child(3n+1)(culoare-fond:#069;)
Să explicăm acest cod.
„3n” înseamnă că selectăm fiecare al treilea rând. Și „+1” înseamnă că selecția va începe din primul rând. În acest fel, primul rând și al treilea după acesta vor fi selectați.
În cazul nostru, avem doar 4 rânduri în tabel, deci în Culoarea albastră va fi colorat doar primul și ultimele rânduri.
Dacă tabelul nostru ar avea mai multe rânduri, atunci primul rând și apoi fiecare al treilea rând ar fi inclus în eșantion.
Dacă am scris același cod, dar fără „+1”:
tr td:nth-child(3n)(culoare-fond:#069;)
Atunci eșantionul ar fi complet diferit. Am selecta pur și simplu fiecare al treilea rând și rezultatul ar fi astfel:
Cred că acum acest principiu de eșantionare folosind pseudoclasa „:nth-child” a devenit mai clar pentru tine.
Puteți modifica parametrii dintre paranteze și astfel selectați elementele așa cum aveți nevoie. Este nevoie doar de puțină practică.
Cu toate acestea, această metodă este destul de convenabilă, deoarece nu trebuie să atribuiți clase fiecărui rând sau coloană din tabel.
Așa că exersează-te și bucură-te de el pentru sănătatea ta!
Asta e tot pentru mine azi.
Aștept cu nerăbdare feedback-ul tău! Nu uitați să împărtășiți lecția cu prietenii dvs. folosind butoanele rețelelor de socializare pe care le veți găsi mai jos.
Abonează-te la actualizările blogului și fii la curent cu cele mai interesante și utile articole și lecții!
Anna Kotelnikova a fost cu tine.
Mult succes si ne revedem!
Un tabel cu zebră este un tabel în care culoarea de fundal a rândului se schimbă după fiecare rând. Adică, de exemplu, alb-negru-alb-negru... Asta vom face folosind doar CSS.
Pentru a crea o „zebră” într-un tabel, puteți utiliza JS. Dar această metodă va fi destul de supărătoare. Puteți crea o „zebră” manual, adică adăugați manual clase la etichetă
Această pseudo-clasă a fost creată pentru a adăuga proprietăți etichetei care merge sub număr specific. Puteți specifica că proprietățile sunt atribuite numai etichetelor pare sau impare. Practic, această pseudo-clasă poate fi folosită exact ceea ce este în tabele. Reguli de scriere: al-lea copil:
Selector: al-lea copil (valoare) (...)
Valorile pot fi:
impar – numere impare (1, 3, 5, 7...).
pare – numere pare (2, 4, 5, 6...).
număr – orice număr din unu.
Dar această metodă are un dezavantaj: nu este acceptată în browserele mai vechi.
Și, pentru a crea un stil „zebră” în tabel, trebuie să faceți următoarele:
HTML| 1 | China | 1 338 613,0 |
| 2 | India | 1 166 079,2 |
| 3 | STATELE UNITE ALE AMERICII | 307 212.1 |
| 4 | Indonezia | 240 271.5 |
| 5 | Brazilia | 198 739.3 |
Cu aceasta am întrebat ce dacă eticheta
Tabel, tr, td, th ( culoare:#969799; /* Culoare text */ font:13pt Andale Mono, monospace; /* Dimensiune, tip font */ chenar:1px solid #E9E9E9; /* Stroke */ border-collapse :collapse; /* Eliminați cursa dublă dintre celule */ ) td, th ( padding:5px; /* Inner padding */ )th ( font-weight:bold; background-color:#E5E5E5; /* Culoare de fundal */ )
Dacă aș fi respectat întotdeauna principiul suficienței rezonabile, nu ați citi aceste rânduri acum. Ce vreau să spun este că, deși subiectul propus este tratat destul de bine, și solutii existente Sunt pe deplin mulțumit, totuși nu m-au putut aduce într-o stare de deplină liniște sufletească... în general, am început să reinventez roata.
Vom vorbi despre tabele HTML „în dungi”, adică. despre tabele cu rânduri alternative de stiluri diferite. În special, pentru a îmbunătăți percepția datelor, aceste linii pot fi multicolore. Mai jos este un exemplu de astfel de tabel:
Mi-am propus următoarea sarcină: fără a modifica fișierul HTML:
| Lancelete | 30 de tipuri | Scheletul Chordata |
| Pește cartilaginos | 600 de specii | Schelet cartilaginos |
| Peste osos | 20.000 de specii | Schelet osos |
| Amfibieni | 3.000 de specii | Schelet ajurat |
| Reptile | 6.000 de specii | Schelet solid |
| Păsări | 8.000 de specii | Schelet solid |
| Mamifere | 4.000 de specii | Schelet solid |
Pe Internet, căutând „mese cu dungi” sau „mese cu zebră”, este ușor să găsești materialele necesare pe această temă. De regulă, soluțiile propuse sunt variante diferite ale aceleiași idei: folosind JavaScript și DOM, găsim tabelele necesare (clasa stripy) în documentul HTML și adăugăm clasele necesare (de exemplu, oddrows și evenrows) la acestea. rânduri, în funcție de faptul că este un rând par sau nu. Ar putea fi implementat astfel:
< tabs.length; e++) if (tabs[e].className == tabClass) { var rows = tabs[e].getElementsByTagName("tr"); for (var i = 0; i < rows.length; i++) // liniile sunt numerotate începând de la 0 rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows "); ) )
Legând apelul la această funcție de evenimentul onload al paginii, vom obține rezultatul dorit.
Poate că astăzi este soluție optimă, cu toate acestea, nu lasă codul HTML neatins. Am fost interesat să rezolv problema exclusiv folosind CSS, sau cel puțin să încredințez CSS sarcina de a găsi aceste mijloace.
Soluția perfectăEste posibil să rezolvi problema cu CSS „pur”? Da, dacă browserul dvs. acceptă CSS3. După ce am studiat specificațiile, găsim acolo o nouă pseudo-clasă :nth-child() , influențată fără îndoială de subiect și datorită căreia stilurile necesare sunt stabilite foarte simplu:
/* rând impar al tabelului de clasă cu dungi */.stripy tr:nth-child(2n+1)( ... ) /* rând uniform de tabel de clasă cu dungi */.stripy tr:nth-child(2n)( ... )Vai, browsere moderne marea majoritate nu susțin încă acest lucru. Dar CSS2? Din păcate, există foarte puține instrumente potrivite aici. Problema poate fi rezolvată parțial folosind un selector:
Stripy tr ( ... ) /* prima linie */.stripy tr + tr ( ... ) /* a doua linie */.stripy tr + tr + tr ( ... ) /* a treia linie */.stripy tr + tr + tr + tr ( ... ) /* a patra linie */.stripy tr + tr + tr + tr + tr ( ... ) /* a cincea linie */
totuși, această metodă este potrivită numai pentru tabele cu un număr relativ mic și precunoscut de rânduri și, în plus, nu poate fi numită convenabilă. Ce ramane? Tot ce rămâne este să folosiți capacitățile suplimentare ale fiecărui browser individual. Am încercat să găsesc o soluție pentru versiunile Windows ale Internet Explorer, Mozilla și Opera.
Internet ExplorerNu au existat dificultăți cu acest browser. Profitând de capacitatea IE de a seta dinamic valorile proprietăților CSS folosind expression() , problema alternanței șirurilor colorate, de exemplu, poate fi rezolvată cu ușurință în următorul mod:
Stripy tr( fundal: expresie(this.rowIndex % 2 == 0 ? "#ffe": "#efe"); )
Pentru a utiliza această metodă pentru a defini nu doar o proprietate, ci un întreg stil pentru rândurile de tabel corespunzătoare (adăugați clase oddrows și evenrows), codul va trebui să fie complicat sau să folosească tehnologia DHTML Behaviors:
Stripy tr( comportament: url(stripy.htc); ) /* șir impar *//* linie pară */
În exemplul dat, planul este implementat: clasele necesare sunt adăugate la linii, în funcție de faptul că este o linie pară sau nu. Acest comportament al etichetei tr este descris în fișierul stripy.htc:
stripy.htc //Tehnologiile utilizate au fost introduse pentru prima dată în Internet Explorer versiunea 5 în consecință, tabelele cu clasa stripy vor deveni „zebrate” începând cu această versiune.
GeckoO extensie similară Comportamentelor DHTML este implementată și în browserele cu motorul Gecko. Dezvoltatorii web au voie să definească elemente noi pe pagină și să înlocuiască aspectul, conținutul și comportamentul celor standard. Pentru aceasta, este folosit XBL (XML Binding Language). Această tehnologie are capacități mai mari în comparație cu dezvoltarea de la Microsoft și părea că nu vor fi dificultăți în rezolvarea problemei, dar nu a fost cazul.
În CSS, legarea XBL este setată în mod similar comportamentului folosind proprietatea -moz-binding:
Stripy tr( -moz-binding: url(stripy.xml); )
Tot ce a rămas a fost să descriem comportamentul în fișierul XBL stripy.xml etichetele necesare cu toate acestea, în ciuda eforturilor mele, nu am reușit să „leagă” nici eticheta tr, nici celelalte etichete de tabel. Cauza acestei probleme s-a dovedit a fi Bugzilla Bug 83830: Legarea celulelor TD (cu XBL) nu funcționează deloc. Indiferent cât de ofensator a fost, părea că nu ar trebui să te bazezi pe XBL. Din fericire, s-a găsit o soluție!
Ajutorul a venit de la celebrul guru web Dean Edwards, care a creat un wrapper XBL care permite browserelor Gecko să utilizeze tehnologia Microsoft DHTML Behaviors, ceea ce înseamnă că același fișier stripy.htc poate fi folosit pentru a rezolva problema ca pentru IE!
Pentru a face acest lucru, avem nevoie de două fișiere XBL: moz-behaviors.xml (învelișul în sine, îl puteți obține pe site-ul lui Dean Edwards, cântărește mai puțin de 7K) și bindings.xml (un fișier auxiliar, intermediar „între” CSS și moz -behaviors.xml, codul de mai jos în text). Acum, pentru ca fișierul .htc să funcționeze în Mozilla, aveți nevoie de următoarele:
.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); )În cazul general, totul funcționează bine, dar tot nu veți putea schimba comportamentul etichetei tr din cauza bug-ului menționat mai sus, dar inteligentul Edwards a reușit să rezolve această problemă. Pentru cazul nostru, codul CSS ar trebui completat:
/* adăugare necesară pentru legarea cu succes a etichetelor de tabel */.stripy( -moz-binding: url(bindings.xml#table); ) /* Comportamentul HTC folosind legarea XBL */.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); ) /* șir impar */.stripy .oddrows( fundal:#ffe; ... ) /* linie pară */.stripy .evenrows( background:#efe; ... )Conținutul fișierului bindings.xml ar trebui să fie după cum urmează:
legături.xmlAcum totul merge grozav. Tabelele cu clasa stripy vor deveni „zebre” în browserele bazate pe motorul Gecko, începând cu versiunea 1.0.
OperăDin păcate, acest membru al familiei de exploratori web nu are mecanisme de extensie comparabile cu concurenții săi. Da, widget-urile au apărut în versiunea 9, dar cu ajutorul lor este imposibil să influențezi în vreun fel funcționarea browserului. Ce să fac? Opera nu a rămas fără de ales decât să folosească tehnica interzisă. Începând cu versiunea 7, browserul (precum și IE, începând cu versiunea 5) avea o „funcție” interesantă - capacitatea de a executa scripturi direct din CSS. Pentru a face acest lucru, utilizați orice proprietate CSS care vă permite să specificați o cale de fișier ca valoare. Iată un exemplu de astfel de tehnică:
Body( imagine de fundal: url("javascript: alert("Bună");"); )
Opera rulează scriptul numai pe elemente HTML existente și o singură dată. De ce să nu profitați de acest lucru și să împrumutați scenariul menționat mai sus? Exact asta am făcut, deși trebuie să recunosc că au existat anumite dificultăți cu această tehnică și nu toate scenariile au fost „ascultătoare”:
Funcția 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");
Acest script va rula cu succes în Opera și prin CSS:
Stripy tr( imagine de fundal: url("javascript:function makeStripy(tabClass)(var tabs=document.getElementsByTagName("table");for (var e=0;e
