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:

Sintaxa generala pentru configurarea latimii si inaltimii este:
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:
#un_id { width:300px; height:500px; }

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:

selector { margin: valoare/valori; }
Tipul de valoare folosit poate avea urmatoarele optiuni:
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:
div { margin:10px 5px 8px 15px; }

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:

selector { border:val_grosime val_stil val_culoare; }
Unde
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>
- Pot fi folosite si proprietati separate pentru fiecare valoare: "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:
selector { border-width: valoare; }
Daca specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
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:
selector { border-style:valoare; }
Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
CSS borders

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:
selector { border-color: valoare; }
Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:
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:

selector { padding: valoare/valori; }
Valoarea pentru completarea spatiului poate fi una din urmatoarele: Cand specificati toate cele patru valori, ele sunt aplicate in ordinea: sus, dreapta, jos, stanga.
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:
div { padding:4px 2px 3px 2px; }

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:

selector { float:valoare; }
Unde "vaoare" poate fi" left, right sau none
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:

selector { clear:valoare; }
Unde "valoare" specifica latura in jurul careia este oprita infasurarea textului si poate lua valoarea: left, right sau both. Se poate folosi si valoarea "none", ceea ce are ca efect anularea altor atribute ale proprietatii clear.

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:

.element { display: valoare; }
Cele mai utilizate valori:
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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Afisare si chenare din CSS la elemente HTML

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)