[Tutorial CSS]Display

#1
Nume Tutorial:Display
Descriere:CSS - Elemente vizibile si elemente ascunse in css. Proprietatea display in css
Download:
Autor:
Sursa (Link-ul oficial):
tutorialeweb.net
Propria parere:Nu l-am incercat.
Tutorialul:
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>, etc
- <div> <p>, <li>

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 etc inline 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 {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;}
[/b]
Imagine

Înapoi la “Tutoriale CSS”

Cine este conectat

Utilizatori răsfoind acest forum: Niciun utilizator înregistrat și 2 vizitatori