Tutorial complet CSS
Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).
8.1 Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.
Exemplu: am aplicat pozitionarea absoluta etichetei h4
<html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>
<head>
<title>Exemplu 8_1</title>
</head>
<body>
<h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4>
<h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4>
</body>
</html>
8.2 Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">
<!--
.absolut {position: absolute; left: 200px; top: 150px;}
.relativ {position: relative; left: 50px; top: 50px;}
-->
</style>
</head>
<body>
<div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div>
Text
<div class="relativ">Pozitionare relativa, dupa "Text"</div>
</body>
</html>
8.3 Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 si tot asa in continuare. Elementul cu indexul cel mai mare este asezat deasupra.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ
<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html>
Link-ul autorului:
www.drogoreanu.ro/tutorials/css.php
Comentarii
danut manolache
mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
mi-a placut foarte mult expunerea precisa, fara inflorituri. daca as avea banuti sigur as face cursuri cu acest domn.
multumesc mult
danut
23-Jul-2010 - 11:27
dan
<b>super</b>
<b>super</b>
05-Sep-2010 - 08:19
elena
Ms mult pt timpul acordat in realizarea acestui tutorial
Ms mult pt timpul acordat in realizarea acestui tutorial
10-Sep-2010 - 13:16
vizitator
Util, Multumesc
Util, Multumesc
25-Oct-2010 - 15:15
alina
Imi spuneti va rog ce cod trebuie sa contina o pagina simpla de css pe care sa o salvez cu .css pe notepad pe care apoi sa o pot folosi ca foaie externa sa puna culoarea de fundal pentru alte pagini? O pagina care se salveaza cu .CSS are doar elemente de CSS sau trebuie combinate cu HTML si salvata cu .CSS ? Pagina externa care contine link catre fisierul .CSS(si coduri HTML) trebuie salvata cu .CSS sau .HTML? Va multumesc.
Imi spuneti va rog ce cod trebuie sa contina o pagina simpla de css pe care sa o salvez cu .css pe notepad pe care apoi sa o pot folosi ca foaie externa sa puna culoarea de fundal pentru alte pagini? O pagina care se salveaza cu .CSS are doar elemente de CSS sau trebuie combinate cu HTML si salvata cu .CSS ? Pagina externa care contine link catre fisierul .CSS(si coduri HTML) trebuie salvata cu .CSS sau .HTML? Va multumesc.
18-Nov-2010 - 09:15
Mihai
Alina, n-am apucat sa citesc acest articol dar sunt sigur ca gasesti raspunsuri pentru intrebarile tale in el.
Totusi o sa incerc eu sa te lamurasc cat de cat cum sta treaba cu HTML-ul si CSS-ul ...
In primul rand sa spunem ca avem niste fisiere HTML in care avem niste TAG-uri de tip DIV, cateva de tip IMG si altele de tip A (ancora).
In sectiunea HEAD a fisierului cu extensia HTML se pune un link (<link rel="stylesheet" type="text/css" href="fisier_de_stil.css">) catre fisierul nostru cu extensia CSS.
In acest fisier CSS avem DOAR cod CSS, si facem legatura cu elementele din fisierul HTML prin ID-uri, CLASE si cateodata cu numele tagului (nerecomandat totusi).
Astfel, presupunand ca avem in fisierul cu extensia HTML un tag DIV cu ID-ul "test", in CSS il vom selecta cu "div#test".
"div" - numele de tag (putea fi la fel de bine "a", "img" sau un alt tag)
"#" - ne spune ca este vorba de un ID nu de o CLASA (clasa fiind notata cu punct)
"test" - numele ales de noi pentru div-ul respectiv.
Ca sa-ti raspund la intrebari...pentru a da valoare culorii de fundal a unui div sau a unei parti de continut exista atributul "background-color" (ex: div#test {background-color : red;} - div-ul cu id-ul numit "test" va avea culoarea de fundal rosie).
La a 2-a intrebare...O pagina salvata cu extensia CSS poate avea cod de mai multe feluri...dar niciodata HTML (la nivelul asta, la care esti, e bine sa stii ca se pune doar cod CSS).
Pagina "externa" cum o numesti tu...e defapt pagina principala care are partea de cod HTML unde exista obiectele cu numele lor ce urmeaza a fi stilizate intr-un fisier CSS si trebuie salvata cu extensia HTML.
Poate nu m-am facut foarte inteles ... dar sper ca te-am mai luminat putin ... si poate e util si pentru cei ce vor urma ...
Alina, n-am apucat sa citesc acest articol dar sunt sigur ca gasesti raspunsuri pentru intrebarile tale in el.
Totusi o sa incerc eu sa te lamurasc cat de cat cum sta treaba cu HTML-ul si CSS-ul ...
In primul rand sa spunem ca avem niste fisiere HTML in care avem niste TAG-uri de tip DIV, cateva de tip IMG si altele de tip A (ancora).
In sectiunea HEAD a fisierului cu extensia HTML se pune un link (<link rel="stylesheet" type="text/css" href="fisier_de_stil.css">) catre fisierul nostru cu extensia CSS.
In acest fisier CSS avem DOAR cod CSS, si facem legatura cu elementele din fisierul HTML prin ID-uri, CLASE si cateodata cu numele tagului (nerecomandat totusi).
Astfel, presupunand ca avem in fisierul cu extensia HTML un tag DIV cu ID-ul "test", in CSS il vom selecta cu "div#test".
"div" - numele de tag (putea fi la fel de bine "a", "img" sau un alt tag)
"#" - ne spune ca este vorba de un ID nu de o CLASA (clasa fiind notata cu punct)
"test" - numele ales de noi pentru div-ul respectiv.
Ca sa-ti raspund la intrebari...pentru a da valoare culorii de fundal a unui div sau a unei parti de continut exista atributul "background-color" (ex: div#test {background-color : red;} - div-ul cu id-ul numit "test" va avea culoarea de fundal rosie).
La a 2-a intrebare...O pagina salvata cu extensia CSS poate avea cod de mai multe feluri...dar niciodata HTML (la nivelul asta, la care esti, e bine sa stii ca se pune doar cod CSS).
Pagina "externa" cum o numesti tu...e defapt pagina principala care are partea de cod HTML unde exista obiectele cu numele lor ce urmeaza a fi stilizate intr-un fisier CSS si trebuie salvata cu extensia HTML.
Poate nu m-am facut foarte inteles ... dar sper ca te-am mai luminat putin ... si poate e util si pentru cei ce vor urma ...
19-Mar-2011 - 01:04
Alex
Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
Imi spune si mie cineva cum pot trage o linie verticala de exemplu la un CV si cum pot numerota randurile?Multumesc
27-Mar-2011 - 11:55
Valentin
articolul este ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
articolul este ffff bun .stiind f.bine html si css este usor sa treci mai departe.altfel o dai "in bara".
10-Apr-2011 - 13:36
Radu
cel mai tare site web de pe tot internetul. N-am cuvinte sa multumesc celor care au scris aceste tutoriale, atat de la obiect si le-au facut atat de accesibile. De mult caut un tutorial despre CSS iar in numai 8 pagini autorul a punctat depsre cam tot ce ai nevoie ca sa pornesti serios la drum.
Sunteti cei mai adevarati
cel mai tare site web de pe tot internetul. N-am cuvinte sa multumesc celor care au scris aceste tutoriale, atat de la obiect si le-au facut atat de accesibile. De mult caut un tutorial despre CSS iar in numai 8 pagini autorul a punctat depsre cam tot ce ai nevoie ca sa pornesti serios la drum.
Sunteti cei mai adevarati
17-Apr-2011 - 12:17
cornerro
exemplul 4.1 contine o greseala: codul css e pentru un "p" in timp ce html-ul introduce un "div".
limbajul e sofisticat si contine inconsecvente formale, uneori inadvertente semantice. pentru cei care au parcurs deja un tutorial de genul acestuia: http://www.html.net/tutorials/css/, lectiile de aici vor capata mai mult sens.
oricum, multumim pentru efort!
exemplul 4.1 contine o greseala: codul css e pentru un "p" in timp ce html-ul introduce un "div".
limbajul e sofisticat si contine inconsecvente formale, uneori inadvertente semantice. pentru cei care au parcurs deja un tutorial de genul acestuia: http://www.html.net/tutorials/css/, lectiile de aici vor capata mai mult sens.
oricum, multumim pentru efort!
05-Jun-2011 - 23:05
antinogel
ar fi fost f simplu si elegant, ceea ce nu este cazul, ca informatiile pe care le oferi sa le pui pe o singura pagina, nu sa trebuiasca sa navighezi prin nu stiu cate pagini, si de asemeni o posibilitatea de descarcare, salvare, printare, ceea ce de asemeni nu este cazul, probabil face parte din politica general de pe internet de pierdere de cat mai mult timp pe sit sau pagina, pentru ranking nu? slabut situl dar cu multe pretentii, ati impanzit internetul cu tot felul de tampenii
ar fi fost f simplu si elegant, ceea ce nu este cazul, ca informatiile pe care le oferi sa le pui pe o singura pagina, nu sa trebuiasca sa navighezi prin nu stiu cate pagini, si de asemeni o posibilitatea de descarcare, salvare, printare, ceea ce de asemeni nu este cazul, probabil face parte din politica general de pe internet de pierdere de cat mai mult timp pe sit sau pagina, pentru ranking nu? slabut situl dar cu multe pretentii, ati impanzit internetul cu tot felul de tampenii
08-Jul-2011 - 17:36
Voteaza acest articol!
Trimite un comentariu!
