Tutorial CSS - Display

CSS - Elemente vizibile si elemente ascunse in css. Proprietatea display in css

Vom folosi proprietatea display in css pentru a ascunde un element in html si proprietatea visibility pentrs a nu afisa acelasi element html.

Intrebarea logica ar fi: Si care este diferenta?

cssp.ascuns { visibility:hidden; }

visibility:hidden;ascunde paragraful pastrand insa spatiul rezervat in cursul paginii. Celelalte elemente se vor comporta ca si cand paragraful ar fi afisat pe pagina chiar daca acesta nu este vizibil.

cssp.ascuns { display:none; }

display:none; ascunde paragraful fara sa pastreze spatiul rezervat acestuia in pagina. Celelalte elemente vor ocupa spatiul rezervat acestuia.

Afisarea elementelor in block sau inline

Exista elemente html care sunt delimitate de celelalte elemente sau de elemente de acelasi tip printr-un salt in linie (enter, line break, br). Spunem ca aceste elementesuntafisate in block.

• <h1>, <h2>, <h3>
• <div> <p>, <li>, etc

Deasemenea exista elemente care sunt afisate in pe acelasi rand fara sa influienteze cursul pagini.

• <span>, <a>

Spunem ca aceste elementesuntafisata inline.

Cu ajutorul CSS afisarea elementelor poate fi schimbata si anume putem afisa elemente precum div paragraf etcinline si elemente precum linkuri span etc in block.

cssdiv { display:inline; }

Exemplul de mai sus va afisa toate div-urile pe aceasi linie.Se foloseste in general cu clase sau id in css pentru a personaliza doar div-urile care se vor personalizate. Ex: bara de meniuri orizontala

cssdiv.bara_orizontala {display:inline; }

Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.

cssa { display:block; }

Se foloseste in general cu clase sau id in css pentru a personaliza doar link-urile care se vor personalizate. Ex: sidebar.

cssa.sidebar_links { display:block; }