Div și se întinde nu sunt interschimbabile în crearea paginilor web. Fiecare are scopuri diferite și știind când să le utilizați vă va ajuta să dezvoltați site-uri web curate și ușor de gestionat.
Folosind elementul Div
Div definiți diviziuni logice pe pagina dvs. web. A div- scurt pentru diviziune - este practic o casetă în care poți plasa altele Elemente HTML care aparțin împreună. O diviziune poate avea mai multe alte elemente, cum ar fi paragrafe, titluri, liste, linkuri, imagini etc. Poate avea chiar și alte divizii în interiorul său pentru a oferi structură și organizare suplimentară.
Pentru a utiliza div element, plasează o deschidere etichetați înainte de zona paginii pe care doriți ca o diviziune separată și o închidere
conținutul div
Dacă veți stiliza această zonă cu CSS, puteți adăuga un ID selector la eticheta div de deschidere:
Sau puteți adăuga un selector de clasă:
Apoi puteți lucra cu aceste elemente în CSS sau JavaScript.
Cele mai bune practici actuale se orientează spre utilizarea selectoarelor de clasă în locul ID-urilor, în parte din cauza cât de specifici sunt selectorii de ID. Cu toate acestea, oricare dintre ele este acceptabilă și puteți chiar să dați un
div atât un ID cât și un selector de clasă.Divizii sau secțiuni?
div elementul este diferit de HTML5secțiune element deoarece nu conferă conținutului inclus niciun sens semantic. Dacă nu sunteți sigur dacă blocul de conținut ar trebui să fie un div sau a secțiune, gândiți-vă la scopul elementului și la conținut.
- Dacă aveți nevoie de elementul simplu pentru a adăuga stiluri în acea zonă a paginii, ar trebui să utilizați div element.
- Dacă conținutul are un accent distinct și ar putea sta singur, luați în considerare utilizarea secțiune element în schimb.
În cele din urmă, ambele divs și secțiuni comportați-vă în mod similar și puteți da oricare dintre ele atribute și le puteți stiliza cu CSS. Ambele sunt elemente la nivel de bloc.
Utilizarea spanurilor
Span este un element în linie în mod implicit, spre deosebire de div și secțiune elemente. span elementul este de obicei utilizat pentru a înfășura un anumit conținut, cum ar fi textul, pentru a-i oferi un cârlig suplimentar pe care îl puteți utiliza pentru a adăuga stiluri. Fără atribute de stil, totuși, span nu are deloc efect asupra textului.
O altă diferență între span și div elemente este că div elementul include o pauză de paragraf, în timp ce span elementul îi spune browserului doar să aplice regulile de stil CSS asociate la ceea ce este inclus în Etichete:
Text evidențiat și text neevidențiat.
S-ar putea să adăugați.
class = "scoate în evidență"
sau similar cu span element pentru a stiliza textul cu CSS.
Elementul span nu are atribute necesare, dar cele trei cele mai utile sunt aceleași cu cele ale div element:
- stil
- clasă
- ID
Utilizare span atunci când doriți să schimbați stilul conținutului fără a defini acel conținut ca nou element la nivel de bloc în document.
De exemplu, dacă doriți al doilea cuvânt al unui h3 îndreptându-vă spre roșu, ați putea înconjura acel cuvânt cu un span element care ar stiliza cuvântul respectiv ca text roșu. Cuvântul rămâne încă o parte din h3 element, dar se va afișa în roșu.