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 tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Afisare si chenare din CSS la elemente HTML

Last accessed pages

  1. Teste PHP - mediu (748)
  2. PHP Functii Anonime - Closures (169)
  3. PHP PDO - setAttribute si beginTransaction (102)
  4. Conditional IF in Limba Engleza - Fraze Conditionale (20698)
  5. PHP PDO - prepare si execute (191)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2029)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1414)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (998)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (980)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (921)