Proprietatea `display`
O şmecherie la manipularea elementelor HTML este înţelegerea faptului că nu este nimic special în privinţa cu funcţionarea lor. Majoritatea paginilor ar putea fi făcute folosind doar cateva tag-uri pe care să le aranjezi într-un mod aşa cum doreşti. Reprezentarea vizualului implicit al browserelor pentru majoritatea elementelor HTML constă ăn varietatea stilurilor de font, margini, padding şi, în esenţă, tipuri de afişare.
Cele mai fundamentale, tipuri de afişare sunt inline , block-line şi none şi ele pot fi manipulate cu proprietatea display şi valorile inline , block şi none.
block pune o linie de pauză, înainte şi după un element. Elementele header şi paragraph sunt exemple de elemente care sunt afişate tradiţional, bloc de linii.
none, bine, nu afişează elementul, ceea ce poate părea destul de inutil, dar poate fi folosit pentru un effect bun cu considerente de accesibilitate (a se vedea Link-uri accesibile), alternând foi de stil sau efecte de acoperire, avansate.
Originalul foii de stil prestabilite pentru acest site, de exemplu, manipulează câteva elemente tradiţionale de linii şi blocuri de linii, pentru a se potrivi cu design-ul.
h1 {display: inline;font-size: 2em; }#header p {display: inline;font-size: 0.9em; padding-left: 2em; }#navigation, #deasemenea, #comentarii, #standarde {display: none;}
Codul de mai sus este folosit doar în stiluri de print în esenţă pentru acele elemente „turn-off” , cum ar fi navigation, care sunt nesemnificative la o singură pagină.
display: none şi visibility: hidden, variaţia din display: none scoate elementul complet afară din joc, unde în cazul visibility: hidden, se păstrează elementul şi statutul său, în acelaşi loc, fără a se vizualiza conţinutul lui. De exemplu, dacă al doilea alineat din 3 a fost setat pentru display: none, primul alineat va trece direct lângă cel de-al treilea întrucât, dacă ar fi fost setat la visibility: hidden, nu ar mai fi un decalaj în cazul în care ar trebui să fie aliniate toate.
Tabele
Poate cel mai bun mod de a înţelege tabelul referitor la proprietate de afişare a valorilor este să te gândeşti la tabelele HTML. table este afişarea iniţială şi puteţi să înlocuiţi elementele tr şi td cu valorile table-row respectiv table-cell.
Proprietatea display merge mai departe, oferind table-column , table-row-group , table-column-group , table-header-group , table-footer-group şi table-caption ca valori, care sunt toate destul de auto-descriptive. Beneficiul imediat al utilizării acestor valori este că vă puteţi construi un tabel cu coloane, în loc de metoda HTML, rând după rând.
În final, valoarea inline-tabel, practic, setează tabelul fără linii de pauză, înainte şi după acesta.
Utilzarea tabelelor CSS poate dauna foarte grav accesibilităţii tale . HTML ar trebui să fie folosit pentru a transmite sensul, deci, dacă aveţi date tabulare ar trebui să fie aranjate în tabele HTML. Utilizarea exclusiva a tabelelor CSS poate duce la crearea unor date ce sunt imposibil de citit fara CSS. Nu-i bun. Şi nu într-un mod Ştefan Bănică.
Alte tipuri de afişare
list-item este auto-descriptiv şi afişează ca şi în modul în care va aşteptati de obicei un element HTML li. Apoi, pentru a funcţiona corect, elementele afişate în acest fel ar trebui să fie grupate în elemente ul sau ol .
run-in face un element fie în linii,fie în bloc de linii în funcţie de afişarea sa initială. Nu funcţionează pe browserele de bază IE sau Mozilla. De foarte mare ajutor!
compact, de asemenea, face ca elementul în linie sau bloc de linii să fie în funcţie de context. Nu funcţionează chiar atat de bine …
marker este utilizat exclusiv cu pseudo elementele :before şi :after pentru a defini afisarea valorii proprietăţii content. Afişarea automată a proprietăţii content este deja marker, astfel încât acesta este folositor doar dacă nu este luată în considerare proprietatea display pentru pseudo elemente.
