Tutorial complet CSS
5.1 Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
Exemplu: definim un stil pentru intreg BODY si un altul pentru eticheta p
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!--
body {background-color: #FFFF00;}
p {background-color: #FF0000;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</p>
</body>
</html>
5.2 Imagine de fond
Imaginile pot fi folosite ca fundal in spatele intregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p
<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.3 Repetare
Functie de dimensiunile obiectului caruia ii sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x imaginea se repeta pe orizontala
repeat-y imaginea se repeta pe verticala
no-repeat imaginea nu se repeta
Exemplu: imaginea nu se repeta sub eticheta p
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!--
p {background-image: url(poza.jpg);
background-repeat: no-repeat;}
-->
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</p>
</body>
</html>
5.4 Pozitia
In mod normal imaginea de fundal incepe din coltul stanga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
in prima pozitie poate fi: top, center, bottom, percentage sau pixel
in a doua pozitie poate fi: right, center, left, percentage sau pixel
Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare
<html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</body>
</html>
<head>
<title>Exemplu 5_4</title>
<style type="text/css">
<!--
body {background-image: url(poza.jpg);
background-repeat: no-repeat;
background-position: top center;}
-->
</style>
</head>
<body>
Text normal
</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!
