Indiferent daca un element este de sine statatr sau imbricat in alte elemente, acesta poate fi tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.
Notiunea de element se refera la componentele unui document HTML, configurate prin intermediul etichetelor HTML.
Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara: marginile (margin), chenarul (border), completarea (umplerea, cunoscuta ca "padding"), latimea (width) si inaltimea (height), care pot fi modificate cu ajutorul CSS.
Elementele HTML au patru laturi (sus, dreapta, jos si stanga) la care se pot aplica proprietatile CSS specifice, restul proprietatilor CSS (font, text, color, background) se aplica la continutului casetei. Continutul poate include texte, liste, formulare, imagini.
Latimea si inaltimea unui element
Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width, respectiv height.
In mod prestabilit (default) acestea sunt setate automat de catre navigator.
Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori:
- - o valoare de tip numeric, de obicei in pixeli (px), sau em;
- - un procent, care stabileste o valoare proportionala in functie de cea a elementului parinte;
- - valoarea auto, care foloseste latimea si inaltimea calculata de navigator, si care reprezinta cantitatea de spatiu maxim pe care o poate ocupa elementul pentru afisarea continutului.
selector {
width:valoare;
height:valoare;
}
Iata un exemplu in care elementul cu id="un_id" va avea latimea de 300 pixeli si inaltimea de 500 pixeli:
Marginile unui element
Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specificarea unei valori pentru marginea din fiecare latura (sus, dreapta, jos, stanga).
Daca specificati cele 4 valori in aceeasi definitie, acestea reprezinta marginile elementului in urmatoarea ordine: sus (top), dreapta (right), jos (bottom), stanga (left).
Daca specificati doar o valoare, aceasta va fi aplicata tuturor marginilor.
- In cazu in care specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile marginilor opuse.
Sintaxa generala pentru configurarea marginilor unui selector este:
- - o valoare de tip lungime (numerica) – px, em; care poate fi si negativa;
- - o valoare procentuala (procent) – creaza o margine proportionala cu latimea elementului parinte;
- - valoarea auto – lasa controlul marginilor la decizia navigatorului.
Iata un exemplu in care etichetele DIV vor avea distanta pentru marginea de sus 10 pixeli, dreapta 5 pixeli, jos 8 pixeli si in stanga 15 pixeli:
Exista posibilitatea de a stabili valoarea marginii doar pentru o singura latura, fara a tine cont de celelalte margini. Pentru aceasta sunt folosite proprietatile margin-top, margin-bottom, margin-left si margin-right cu aceleasi valori ca si in cazul proprietatii margin, dupa cum puteti vedea mai jos.
selector { margin-top: valoare; }
selector { margin-bottom: valoare; }
selector { margin-left: valoare; }
selector { margin-right: valoare; }
Chenarul unui element - border
Proprietatea border defineste o bordura in jurul elementului, stabilind grosimea, stilul si culoarea bordurii.
Sintaxa generala pentru definirea chenarului este:
- - prima valoare (val_grosime) reprezinta grosimea chenarului si poate fi una din urmatoarele tipuri:
- - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
- un cuvant cheie (thin, medium, thick) care caracterizeaza o dimensiune relativa.
- - o valoare de tip lungime (valoarea 0 determina anularea afisarii chenarului);
- - a doua valoare (val_stil) reprezinta numele stilului atribuit chenarului (solid, dotted, dashed). Valoarea "none" anuleaza afisarea chenarului.
- - ultima valoare (val_culoare) reprezinta culoarea, exprimata in cod hexa sau valoare RGB.
Iata un exemplu in care div-urile cu cu clasa '.bor_blue' vor avea o bordura groasa de 2 pixeli, solid si culoare albastra:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
div.bor_blue {
border:2px solid blue;
}
</style>
</head>
<body>
<div class='bor_blue'>Div cu clasa .bor_blue</div>
<div>Alt DIV, fara class.<br>
Un alt rand in acest Div.</div>
<div class='bor_blue'>Asta deduceti singur.</div>
</body>
</html>
border-width" (grosimea), "border-style" (stilul) si "border-color" (culoarea).Un atribut care poate fi folosit in configurarea chenarului este border-width, acesta furnizeaza o metoda rapida pentru stabilirea latimii celor patru laturi din jurul unei casete.
Sintaxa generala este:
Daca specificati doar o valoare, ea va fi aplicata tuturor marginilor.
Daca folositi doua sau trei valori, valorile care lipsesc sunt copiate din valorile marginilor opuse lor in caseta.
Aspectul bordurii poate fi stabilit prin atributul border-style; stilul este aplicat celor patru margini si este definit astfel:
Un alt atribut care poate fi utilizat in configurarea chenarului este border-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si foloseste pentru valoarea ei un singur cuvant cheie exprimat in cod hexa, valoare RGB sau numele culorii.
Sintaxa generala este:
border-top-color, border-right-color, border-bottom-color, border-left-color
Fiecare latura a chenarului poate avea valori configurate in mod separat (prin care se stabilesc stilul si culoarea fiecarei borduri din jurul elementului) dupa cum este prezentat mai jos:
selector { border-top: grosime stil culoare; }
selector { border-bottom: grosime stil culoare; }
selector { border-left: grosime stil culoare; }
selector { border-right: grosime stil culoare; }
Adaugarea spatiului in interior - padding
Proprietatea padding adauga o cantitate de spatiu intre margine (bordura) si continutului elementului, in interiorul chenarului.
Forma generala pentru utilizarea acestei proprietati este:
- - o valoare de tip lungime
- - o valoare procentuala – creaza umplerea in raport cu latimea elementului parinte.
Daca specificati doar o valoare, aceasta va fi aplicata tuturor celor patru directii.
Daca specificati doua sau trei valori, atunci valorile care lipsesc sunt copiate dupa valorile laturilor opuse.
Iata un exemplu in care etichetele DIV vor avea distanta padding: sus 4 pixeli, dreapta 2 pixeli, jos 3 pixeli si in stanga 2 pixeli:
Fiecare latura a chenarului poate avea proprietatea padding configurata separat:
selector { padding-top:valoare; }
selector { padding-bottom:valoare; }
selector { padding-left:valoare; }
selector { pading-right:valoare; }
Elemente float
CSS ofera posibilitatea de a "infasura" anumite elemente in jurul altora. Acest lucru se face prin intermediul proprietatii float, care determina o mutare fortata a elementului in directia data de valoarea mentionata, lasand loc liber in spatiul opus directiei, care va fi ocupat de urmatorul element din codul HTML.
Sintaxa generala:
Valoarea "none" anuleaza valorile "float" la acel element.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#un_id {
background:#ddddfe;
float:right;
height:80px;
width:180px
}
</style>
</head>
<body>
<div id='un_id'>Div cu float:right;</div>
<p>Paragraf dupa acel Div.</p>
</body>
</html>
Anularea plasarii in spatiul eliberat de "float" - clear
Cu proprietatea clear se poate anula ocuparea unui spatiu care a fost lasat liber de un element care utilizeaza proprietatea "float".
Sintaxa:
In exemplu de sus, cu DIV-ul pozitionat cu "float:right;", paragraful care e dupa el va fi afisat in stanga DIV-ului. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se aplica proprietatea "clear", precum in exemplul urmator:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
#un_id {
background:#ddddfe;
float:right;
height:80px;
width:180px
}
.clrb { clear:both; }
</style>
</head>
<body>
<div id='un_id'>Div cu float:right;</div>
<p class='clrb'>Paragraf cu o clasa ce seteaza 'clear:both;'.</p>
Alt continut dupa Div.
</body>
</html>
Afisarea si ascunderea elementelor
Proprietatea display defineste modul de afisare a elementului.
- Sintaxa generala:
- block – defineste elementul ca fiind de tip bloc, precum <p> (incepe pe un rand nou si are alt rand dupa el).
- inline – defineste elementul ca tip in linie (precum <span>). Proprietatile "width" si "height" nu au efect.
- inline-block – defineste elementul ca tip in linie, dar pot fi aplicate valori pentru "width" si "height".
- none – elementul nu mai este afisat; e complet ascuns din pagina.
Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.ds_li li { display:inline; }
#un_id { display:none; }
</style>
</head>
<body>
<div id='un_id'>Div care nu va fi afisat.</div>
<ul class='ds_li'>
<li>MarPlo.net</li>
<li>GamV.eu</li>
<li>CoursesWeb.net</li>
</ul>
</body>
</html>
Proprietatea display nu trebuie confundata cu visibility. Spre deosebire de visibility care nu afiseaza elementul dar lasa liber spatiu pentru element, sintaxa display: none; elimina complet elementul din pagina.