Indiferent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate fi tratata ca un element distinct pe ecran si poate fi controlata prin intermediul CSS.
Orice element creat intr-o foaie de stil este prezentat in propriul lui cadru.
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, chenarul, completarea (umplerea, cunoscuta ca "padding"), latimea si inaltimea, 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, culoare, fundal) se aplica in continutului casetei. Continutul poate include texte, liste, formulare sau imagini.

1. Latimea si inaltimea unui element

Latimea si inaltimea elementelor pot fi specificate cu ajutorul proprietatilor width si height.
In mod prestabilit acestea sunt determinate automat de catre navigator, fiind egale cu necesarul afisarii intregului continut. Pentru definirea latimii si inaltimii se folosesc urmatoarele tipuri de valori:

Sintaxa generala pentru configurarea latimii si inaltimii este: 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; }

2. Marginile unui element

Proprietatea margin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specificarea unei valor 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, dreapta, jos, stanga.
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:

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.

3. Chenarul unui element

Proprietatea border permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. Aceasta foloseste 3 valori distincte, pentru a configura latimea (grosimea), stilul si culoarea liniei bordurii.
Sintaxa generala pentru definirea chenarului este:

Unde Iata un exemplu in care div-urile vor avea o bordura groasa de 1 pixel, solid si culoare albastra:
div { border:1px solid blue; }

- Pot fi folosite si proprietati separate pentru fiecare: "border-width", "border-style" si "border-color"; prezentate in continuare.

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 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: Pentru specificarea valorii, pot fi folosite urmatoarele tipuri:
CSS borders
Ultimele patru valori sunt reprezentate tridimensional, iar in cazul in care ele nu sunt acceptate de catre navigator, in locul lor se va folosi valoarea cu linie plina.

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: Puteti stabili culoarea fiecarei margini si separat, folosind proprietatile:
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:

4. Adaugarea spatiului in interior, in jurul elementului

Proprietatea padding adauga o cantitate de spatiu suplimentar in jurul continutului elementului, in interiorul chenarului, intre bordura si continut.
Forma generala pentru utilizarea acestei proprietati este:

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:

5. 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 pentru utilizarea acestei proprietati este:

Unde "vaoare" poate fi" left, right si none
Valoarea "none" permite elementului sa fie plasat acolo unde este posibil, iar celelalte valori forteaza plasarea elementului in stanga sau in dreapta ecranului, textul din exteriorul etichetei HTML respective va fi plasat in partea opusa, in jurul elementului.
Iata un exemplu in care elementul cu id="un_id" va fi fortat sa fie pozitionat in dreapta celorlaltor elemente:
#un_id { float:right; }

6. Anularea plasarii unui element in spatiul eliberat de "float"

Asemanator cu actiunea etichetei HTML <br>, care trece pe un nou rand elementele ce o preced, este si proprietatea clear.
Cu ajutorul acesteia se poate anula ocuparea unui spatiu care a fost lasat liber de un element care utilizeaza proprietatea "float".
Sintaxa generala pentru utilizarea proprietati clear:

Unde "valoare" specifica latura in jurul careia este interzisa 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.
De exemplu, daca aveti un DIV pozitionat fortat in dreapta, un paragraful care urmeaza dupa el va fi afisat in stanga DIV-ului respectiv. Pentru a anula acest lucru, ca paragraful sa fie afisat sub DIV, se foloseste proprietatea "clear", precum in exemplul urmator:
#un_div { float:right; }
p { clear:both; }

7. Afisarea si ascunderea elementelor

Proprietatea display poate stabili daca un element va fi de tip block, incluzand linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub forma de lista sau daca elementul este afisat sau nu.
Sintaxa generala pentru aceasta proprietate este:

Unde "valoare" poate fi una din urmatoarele optiuni: Iata un exemplu in care elementele <li> sunt asezate in linie, iar un element cu id="un_id" va fi ascuns in pagina:
li { display:inline; }
#un_id { display:none; }

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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Controale pentru chenare si afisarea elementelor

Last accessed pages

  1. Bubble Hit (142)
  2. Cursuri limba engleza gratuite si lectii online (1273)
  3. Backgammon (685)
  4. Zuma Deluxe (1954)
  5. Butterfly Kyodai (2024)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2485)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  4. Butterfly Kyodai (2024)
  5. Zuma Deluxe (1954)