Cauta rapid aici ↑

CSS -- BLOC DE INFORMATII MODELUL DIV

Toate tag-urile HTML pot avea un comportament de bloc de informatii. In CSS putem vorbi de web design sau asezarea elementelor in pagina web cu scopul de a face paginile site-ului cat mai atractive si cu acces usor la orice informatie din intreg site-ul. Exista si o regula nescrisa in care este specificata conditia ca orice informatie din site sa se afle la maxim trei click-uri distanta.

Un astfel de bloc de informatii va avea mai multe margini cu rolul de a se departaja de alt bloc de informatii facand ca pagina noastra sa nu fie aglomerata, ci aerisita pentru a fi cat mai placuta ochiului vizitatorului. Marginile pe care le poate avea un bloc sau div cu informatii de orice fel sunt:

  • margine exterioara
  • margine interioara
  • linie de jur imprejurul blocului de informatie

MARGINE EXTERIOARA -- PROPRIETATEA MARGIN

Pentru a defini o margine exterioara a intregului element pe toate laturile va trebui sa folosim proprietatea margin si ca valoare putem folosi un numar de pixeli sau procente si se pot folosi si valori negative . Aceasta proprietate are unele neajunsuri si tocmai prin prisma faptului ca ea seteaza o margine exterioara pe toate laturile. Sunt situatii in care vrem ca marginea exterioara sa fie doar pe una din laturi iar limbajul CSS ne ajuta cu alte patru proprietati pentru fiecare latura in parte.

  • margin-left → seteaza o margine exterioara pe latura din stanga elementului
  • margin-right → seteaza o margine exterioara pe latura din dreapta elementului
  • margin-top → seteaza o margine exterioara pe latura de sus a elementului
  • margin-bottom → seteaza o margine exterioara pe latura de jos a elementului

Avem posibilitatea sa ii setam mai multe valori proprietatii margin . Daca vom da doua valori exprimate in pixeli, separate de un spatiu, atunci browserul va lua acele doua valori si pe prima valoare o va da margini de sus si de jos iar pe a doua valoare o va da margini din stanga si dreapta elementului.

Putem merge mai departe si sa ii dam toate cele patru valori de margine pentru un element. Trebuie sa tinem cont ca in acest caz browserul va interpreta in acest mod valorile. Prima valoare o va da margini de sus a elementului, a doua valoare o va da margini din dreapta elementului, a treia valoare o va da margini de jos a elementului si ultima valoare o va da margini din stanga elementului.

PROPRIETATEA MARGIN -- VALOAREA AUTO

Cu ajutorul valori auto putem centra un element in pagina web. In cazul in care avem un div ce contine toata informatia utila pentru acea pagina, exceptand zona de HEADER si FOOTER , atunci aceasta valoare auto ne va fi extrem de utila.

MARGINE INTERIOARA -- PROPRIETATEA PADDING

Ca si la marginea exterioara si aici se aplica aceleasi reguli insa cu proprietatea padding si care va avea valori exprimate in pixeli sau procente si in acest caz nu putem avea valori negative. Proprietatea padding seteaza o margine interioara pe toate laturile si la fel ca si la marginea exterioara putem seta o margine interioara pe una dintre laturi.

  • padding-left → seteaza o margine interioara pe latura din stanga elementului
  • padding-right → seteaza o margine interioara pe latura din dreapta elementului
  • padding-top → seteaza o margine interioara pe latura de sus a elementului
  • padding-bottom → seteaza o margine interioara pe latura de jos a elementului

Si in acest caz avem posibilitatea sa ii setam mai multe valori proprietatii padding . Daca vom da doua valori exprimate in pixeli, separate de un spatiu, atunci browserul va lua acele doua valori si pe prima valoare o va da margini interioare de sus si de jos iar pe a doua valoare o va da margini interioare din stanga si dreapta elementului.

Vom merge mai departe si ii dam toate cele patru valori de margine interioara pentru un element. Trebuie sa tinem cont ca in acest caz browserul va interpreta in acest mod valorile. Prima valoare o va da margini interioare de sus a elementului, a doua valoare o va da margini interioare din dreapta elementului, a treia valoare o va da margini interioare de jos a elementului si ultima valoare o va da margini interioare din stanga elementului.

TAG-UL BODY -- PROPRIETATEA MARGIN + PADDING

Toate browserele isi i-au o margine de cativa pixeli in zona de sus, stanga si jos a paginii web, aceasta este o setare default si care nu ne incurca prea mult daca intreg design-ul paginii noastre este centrat. In cazul in care un element sau mai multe va ocupa intreg spatiul pe orizontala (ca de exemplu header si footer) atunci va trebui sa folosim proprietatile margin si padding pentru tag-ul BODY si care vor avea valorile 0px [zero pixeli] pentru fiecare.

LINIE DE JUR IMPREJURUL BLOCULUI DE INFORMATIE -- PROPRIETATEA BORDER

Nici in acest caz nu se schimba regulile desi nu mai este cazul de vre-o margine, fie ea exterioara sau interioara. Proprietatea border seteaza o linie de jur imprejurul elementului si va avea trei tipuri de valori separate de un spatiu si nu conteaza ordinea in care sunt afisate in cod.

  • grosimea liniei → valorile vor fi exprimate doar in pixeli
  • tipul liniei → valorile pot fi: solid, dotted, dashed, thin, medium, thick, double, groove, hidden, inset, outset si ridge
  • culoarea liniei → valorile pot fi: o valoare de culoare in forma hexazecimala, o culoare exprimata in cuvant si structurile rgb(), rgba(), hsl() si hsla().

La fel ca si la marginile exterioare si interioare putem seta o linie doar pe una dintre laturi iar limbajul CSS ne ofera alte patru proprietatii iar celelante trei tipuri de valori sunt obligatoriu de declarat si aici.

  • border-left → seteaza o linie pe latura din stanga elementului
  • border-right → seteaza o linie pe latura din dreapta elementului
  • border-top → seteaza o linie pe latura de sus a elementului
  • border-bottom → seteaza o linie pe latura de jos a elementului

In cazul in care ne dorim ca linia sa nu fie afisata putem folosi valoarea none.