Tutorial CSS - Display

Tutoriale CSS si HTML, tutoriale editare si instalare site-uri in CSS si HTML!
Avatar utilizator
DarkArms
Membru
Mesaje: 3107
Localitate: Reșița, România
Nick server: cleks
Contact:

Tutorial CSS - Display

Mesaj de DarkArms » Mie Dec 07, 2016 1:51 pm

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?

Cod: Selectaţi tot

p.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.

Cod: Selectaţi tot

p.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 elemente sunt afisate 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 elemente sunt afisata 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.

Cod: Selectaţi tot

div { 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

Cod: Selectaţi tot

div.bara_orizontala&nbsp;{display:inline; }
Mai jos am exemplificat un link afisat in block, introducand un salt in linie inainte si dupa el.

Cod: Selectaţi tot

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

Cod: Selectaţi tot

a.sidebar_links { display:block; }

Înapoi la “Tutoriale CSS si HTML”

Cine este conectat

Utilizatori ce ce navighează pe acest forum: Niciun utilizator înregistrat și 2 vizitatori