Explorați Cărți electronice
Categorii
Explorați Cărți audio
Categorii
Explorați Reviste
Categorii
Explorați Documente
Categorii
Curs CSS
Încărcat de
Dascal AndrianTitlu original
Drepturi de autor
Formate disponibile
Partajați acest document
Partajați sau inserați document
Vi se pare util acest document?
Este necorespunzător acest conținut?
Raportați acest documentDrepturi de autor:
Formate disponibile
Curs CSS
Titlu original:
Încărcat de
Dascal AndrianDrepturi de autor:
Formate disponibile
CSS - Notiuni de baza
CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru
formatarea paginilor web (de exemplu formatare text, background sau aranjare in
pagina, etc.).
Beneficiile sintaxei CSS sunt:
formatarea este introdusa intr-un singur loc pentru tot documentul
editarea rapida a etichetelor
datorita introducerii intr-un singur loc a etichetelor se obtine o micsorare a
codului paginii, implicit incarcarea mai rapida a acesteia
Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe
Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa de nivelul 1
iar cea mai mica importanta o are cea de nivelul 3.
Folosirea unui fisier extern sau nivel 3 care sa contina comenzi CSS este foarte
practic deoarece poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot
folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii codului
corespunzator in fiecare pagina si totodata editarea lor intr-un singur loc pentru mai
multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei
linii:
<linkrel="stylesheet"type="text/css"href="fisier_css.css">
Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS.
Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de
etichete <head> si </head> conform sintaxei:
<styletype="text/css">
<!
...comenziCSS...
>
</style>
Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit
pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul
blocului style.
Comenzile CSS de nivel 1 sau inline sunt cele mai folosite, ele suprascriind orice alte
comenzi CSS. Sunt amplasate in interiorul etichetelor HTML aflate in zona BODY si au
sintaxa:
<etichetastyle="codulCSSdorit">
...textulsauobiectulasupracaruiaesteaplicatcodulCSS...
</eticheta>
Este permisa folosirea comentariilor in CSS astfel:
/*AcestaesteuncomentariuinCSS*/
div, span si etichete CSS
Eticheta <div> functioneaza asemanator cu eticheta <p>, putand gazdui comenzi
CSS aplicabile la un bloc sau mai multe din continutul paginii.
Eticheta <span> este similara cu eticheta <font> (pe cale de a fi eliminata de
consortiul W3C) aplicandu-se elementelor dintr-un paragraf.
Etichetele CSS sunt cunoscute sub numele de elemente sau selectori avand un
layout asemanator cu etichetele HTML.
etichetaHTML
<etichetaargument="valoare">
etichetaCSS
element{argument:valoare;}
elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea
sunt aceleasi ca in HTML.
Exemplu: acelasi text realizat in HTML si in HTML cu CSS
HTML
<fontcolor="#00FF00">
<p>Textverde</p>
</font>
HTMLcuCSS
<pstyle="color:#00FF00;">
Textverde
</p>
Comenzile de CSS pot fi plasate si in zona HEAD rezultand o functionare identica,
chiar mai mult, aceleasi comenzi putand fi folosite in mai multe locuri in aceeasi
pagina.
Exemplu: comenzi CSS incluse in zona HEAD
<html>
<head>
<title>Exemplul1_1</title>
<styletype="text/css">
<!p{color:#00FF00;}>
</style>
</head>
<body>
<p>Textverde</p>
Textnegru
<p>Textverde</p>
</body>
</html>
Elementele id si class
id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci
cand dorim sa aplicam un style de formatare unei anume zone. Pentru
compatibilitate cu versiunile anterioare de browsere numele asociate zonelor nu vor
contine caracterul _.
Elementul id se aplica unui style de format o singura data sau la o singura eticheta
HTML, plasandu-se un nume acelui style. Acest element necesita existenta comezilor
CSS in zona HEAD sau intr-un fisier extern.
Exemplu: folosirea elementului id
<html>
<head>
<title>Exemplu2_1</title>
<styletype="text/css">
<!#albastru{color:#0000FF;}>
</style>
</head>
<body>
<pid="albastru">Textalbastruintrodusprinid"albastru"</p>
Textnegru
</body>
</html>
Elementul class se similar cu id dar spre deosebire de acesta poate fi folosit de mai
multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS in
zona HEAD sau intr-un fisier extern.
Exemplu: folosirea elementului class
<html>
<head>
<title>Exemplu2_2</title>
<styletype="text/css">
<!.rosu{color:#FF0000;}>
</style>
</head>
<body>
<pclass="rosu">Primultextrosuintrodusprinclass"rosu"</p>
Textnegru
<pclass="rosu">Aldoileatextrosuintrodusprinclass"rosu"</p>
</body>
</html>
Stiluri pentru fonturi
Aceste elemente specifica argumentul fontului care se asociaza unui element HTML
fiind incluse ori in zona HEAD ori in interiorul etichetei dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta
argumentele type, style, size si weight.
font-family
font-family este de fapt o lista de fonturi din care browserul va folosi in ordinea in
care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut il
foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din
lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
In situatia in care numele fontului este format din doua cuvinte se incadreaza intre
ghilimele duble pentru ca browserul sa le interpreteze impreuna.
Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele
doua fonturi din lista, folosindu-l pe al treilea
<html>
<head>
<title>Exemplu3_1</title>
<styletype="text/css">
<!p{fontfamily:font1,font2,arial;}>
</style>
</head>
<body>
<p>TextscriscucufontulArial</p>
Textnegru
<p>TextscriscucufontulArial</p>
</body>
</html>
Exemplu: acelasi exemplu dar CSS introdus in eticheta p din HTML
<html>
<head>
<title>Exemplu3_2</title>
</head>
<body>
<pstyle="fontfamily:font1,font2,arial;">Textscriscucufontul
Arial</p>
Textnegru
<pstyle="fontfamily:font1,font2,arial;">Textscriscucufontul
Arial</p>
</body>
</html>
font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat in pixeli (px),
puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta
<font>.
Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli
<html>
<head>
<title>Exemplu3_3</title>
<styletype="text/css">
<!p{fontsize:20px;}>
</style>
</head>
<body>
<p>Textscriscufontde20px</p>
Textnegru
</body>
</html>
Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte
inlocuiesc dimensiunile de la 1 la 7 de la veche eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7
Pentru verificare se poate folosi exemplul anterior in care se inlocuieste 20px cu unul
din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate
poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimband 20px cu 200%.
font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile
normal si italic.
<styletype="text/css">
<!p{fontstyle:italic;}>
</style>
font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile
numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
<styletype="text/css">
<!p{fontweight:700;}>
</style>
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan in interiorul aceeasi etichete fiind
despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
<html>
<head>
<title>Exemplu3_4</title>
<styletype="text/css">
<!
p{
fontfamily:arial;
fontsize:20px;
fontstyle:italic;
fontweight:800;}
>
</style>
</head>
<body>
<p>TextscriscuArial,20px,italic,800</p>
Textnegru
</body>
</html>
Stiluri pentru text
Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si
admite valorile left, right si center ca si eticheta align din HTML.
In continuare este prezentat ca exemplu codul folosit in HEAD, aplicat etichetei p:
<styletype="text/css">
<!
p{textalign:center;}
>
</style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
<html>
<head>
<title>Exemplu4_1</title>
<styletype="text/css">
<!
p{textalign:center;}
>
</style>
</head>
<body>
<divclass="pecentru"><imgsrc="poza.jpg"></div>
Textneformatat
<divclass="pecentru">Textformatat</div>
</body>
</html>
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si
poate lua valorile: top, middle si bottom.
In exemplul de mai jos este creat clasa sus care va putea fi aplicat elementelor <td>
ale tabelului
<styletype="text/css">
<!
.sus{verticalalign:top;}
>
</style>
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si
right. In functie de valoarea aleasa imaginea va fi aliniata in partea opusa a paginii.
Exemplu: cream clasa auto si o aplicam inaginii
<html>
<head>
<title>Exemplu4_2</title>
<styletype="text/css">
<!
.auto{float:left;}
>
</style>
</head>
<body>
<imgsrc="poza.jpg"class="auto">
Textulsealiniazaladreapta,iarpozalastangadatoritaclasei
"auto".
</body>
</html>
Tabulare
text-indent este folosit pentru alinierea textului in interior avand valori exprimate in
inci (in), centimetri (cm) sau pixeli (px).
In exemplul de mai jos text-indent este aplicat etichetei p deplasand textul cu 10
pixeli in interior
<styletype="text/css">
<!
p{textindent:10px;}
>
</style>
Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea
valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu4_3</title>
<styletype="text/css">
<!
p{textdecoration:underline;}
>
</style>
</head>
<body>
Textnormal
<p>Textsubliniat</p>
</body>
</html>
Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.
Exemplu: stilul asociat etichetei p este prezentat in HEAD
<html>
<head>
<title>Exemplu4_4</title>
<styletype="text/css">
<!
p{color:#0000FF;}
>
</style>
</head>
<body>
Textnormal
<p>Textalbastru</p>
</body>
</html>
Stiluri pentru legaturi
In HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK
declarate in interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.
Exemplu
<html>
<head>
<title>Exemplu4_5</title>
<styletype="text/css">
<!
a{fontfamily:arial;fontsize:20px;}
a:link{color:#0000FF;}
a:visited{color:#00FF00;}
a:active{color:#FF0000;}
a:hover{color:#000000;}
>
</style>
</head>
<body>
Textnormal
<ahref="exemplu4_4.html">link</a>catreexemplul4_4
</body>
</html>
a defineste stilul general pentru legatura
a:link defineste stilul legaturii nevizitate
a:visited defineste stilul legaturii vizitate
a:active defineste stilul legaturii active (nu prea se foloseste)
a:hover defineste stilul cand mouse-ul este deasupra legaturii
Stiluri pentru background
Background culoare sau imagine poate fi definita pentru intreaga pagina, o celula a
tabelului sau pentru text.
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>Exemplu5_1</title>
<styletype="text/css">
<!
body{backgroundcolor:#FFFF00;}
p{backgroundcolor:#FF0000;}
>
</style>
</head>
<body>
Textnormal
<p>Textcubackgroundrosu</p>
</body>
</html>
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>Exemplu5_2</title>
<styletype="text/css">
<!
p{backgroundimage:url(poza.jpg);}
>
</style>
</head>
<body>
Textnormal
<p>Textcuimaginedefond</p>
</body>
</html>
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>Exemplu5_3</title>
<styletype="text/css">
<!
p{backgroundimage:url(poza.jpg);
backgroundrepeat:norepeat;}
>
</style>
</head>
<body>
Textnormal
<p>Textcuimaginedefond</p>
</body>
</html>
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>Exemplu5_4</title>
<styletype="text/css">
<!
body{backgroundimage:url(poza.jpg);
backgroundrepeat:norepeat;
backgroundposition:topcenter;}
>
</style>
</head>
<body>
Textnormal
</body>
</html>
Stiluri pentru liste
list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugand
comenzi CSS in zona HEAD putem adauga pe langa numere si cifre sau alte
simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decat pentru
eticheta li.
Sintaxa este:
<styletype="text/css">
<!
li{liststyletype:valoare;}
>
</style>
valoarea poate fi:
valoare disc
disc disc
circle cerc
square patrat
decimal numere intregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic
Exemplu: lista ordonata folosind marcaje cu litere mici
<html>
<head>
<title>Exemplu6_1</title>
<styletype="text/css">
<!
li{liststyletype:loweralpha;}
>
</style>
</head>
<body>
Necesarmateriale:
<ol>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ol>
</body>
</html>
list-style-image
In afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si
imagini prin comansa CSS list-style-image. Imaginile sunt introduse prin adresa
url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
<html>
<head>
<title>Exemplu6_2</title>
<styletype="text/css">
<!
li{liststyleimage:url(punct.gif);}
>
</style>
</head>
<body>
Necesarmateriale:
<ul>
<li>caramida</li>
<li>ciment</li>
<li>ipsos</li>
</ul>
</body>
</html>
Chenare si margini
Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele
elemente:
marginea (margin) este spatiul exterior chenarului pana la celelalte elemente
chenarul (border) este o bordura care inconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)
Originea elementului este considerat coltul din dreapta sus fata de care se vor
raporta toate dimensiunile prezentate in continuare.
width si height
Latimea si inaltimea unui element sunt stabilite in HTML prin atributele width si
height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii
<html>
<head>
<title>Exemplu7_1</title>
<styletype="text/css">
<!
img{width:50px;height:100px;}
>
</style>
</head>
<body>
<imgsrc="margini.gif">
</body>
</html>
padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile.
Distantele pot fi stabilite si individual folosind padding-top, padding-bottom,
padding-left sau padding-right.
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan
pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top,
margin-bottom, margin-left sau margin-right.
Valorile pentru padding si margin pot fi exprimate in: px (pixeli), in (inci), pt
(puncte) sau cm (centimetri).
Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura
stanga si 25px fata de latura de sus
<html>
<head>
<title>Exemplu7_2</title>
<styletype="text/css">
<!
img{marginleft:100px;margintop:25px;}
>
</style>
</head>
<body>
<imgsrc="margini.gif">
</body>
</html>
border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru
definirea chenarului este border avand proprietatile asociate width, style si color.
Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet Explorer cat si in
Netscape trebuie sa declaram pentru border cel putin width si style.
border-width stabileste grosimea chenarului si poate fi exprimata in px (pixeli), pt
(puncte), cm (centimetri) sau in (inci).
border-style stabileste tipul chenarului si poate fi dotted, dashed, solid, double,
groove, ridge, inset si outset.
border-color stabileste culoarea chenarului si poate fi exprimata prin valoare
hexazecimala sau in cuvinte.
Exemplu: definim noua clase utilizand proprietatile border-width border-style si
border-color
<html>
<head>
<title>Exemplu7_3</title>
<styletype="text/css">
<!
.clasa1{borderwidth:2px;borderstyle:dotted;bordercolor:red;}
.clasa2{borderwidth:3px;borderstyle:dashed;bordercolor:blue;}
.clasa3{borderwidth:2px;borderstyle:solid;bordercolor:green;}
.clasa4{borderwidth:3px;borderstyle:double;bordercolor:black;}
.clasa5{borderwidth:2px;borderstyle:groove;bordercolor:silver;}
.clasa6{borderwidth:3px;borderstyle:ridge;bordercolor:lime;}
.clasa7{borderwidth:2px;borderstyle:inset;bordercolor:yellow;}
.clasa8{borderwidth:3px;borderstyle:outset;bordercolor:aqua;}
.clasa9{borderwidth:2px;borderstyle:hidden;bordercolor:olive;}
>
</style>
</head>
<body>
<divclass="clasa1">borderwidth:2px;borderstyle:dotted;border
color:red;</div><br>
<divclass="clasa2">borderwidth:3px;borderstyle:dashed;border
color:blue;</div><br>
<divclass="clasa3">borderwidth:2px;borderstyle:solid;border
color:green;</div><br>
<divclass="clasa4">borderwidth:3px;borderstyle:double;border
color:black;</div><br>
<divclass="clasa5">borderwidth:2px;borderstyle:groove;border
color:silver;</div><br>
<divclass="clasa6">borderwidth:3px;borderstyle:ridge;border
color:lime;</div><br>
<divclass="clasa7">borderwidth:2px;borderstyle:inset;border
color:yellow;</div><br>
<divclass="clasa8">borderwidth:3px;borderstyle:outset;border
color:aqua;</div><br>
<divclass="clasa9">borderwidth:2px;borderstyle:hidden;border
color:olive;</div>
</body>
</html>
Pozitionare
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele.
Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
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).
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>Exemplu8_1</title>
</head>
<body>
<h4style="position:absolute;left:50px;top:50px">Text1</h4>
<h4style="position:absolute;left:100px;top:200px">Text2</h4>
</body>
</html>
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>Exemplu8_2</title>
<styletype="text/css">
<!
.absolut{position:absolute;left:200px;top:150px;}
.relativ{position:relative;left:50px;top:50px;}
>
</style>
</head>
<body>
<divclass="absolut">Pozitionareabsoluta,independentdecelelate
obiectedinpagina</div>
Text
<divclass="relativ">Pozitionarerelativa,dupa"Text"</div>
</body>
</html>
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 trei obiecte pozitionate absolut
<html>
<head>
<title>Exemplu8_3</title>
<styletype="text/css">
<!
.element1{position:absolute;left:30px;top:30px;zindex:3}
.element2{position:absolute;left:50px;top:50px;zindex:2}
.element3{position:absolute;left:70px;top:70px;zindex:1}
>
</style>
</head>
<body>
<divclass="element1"><imgsrc="poza.jpg"></div>
<divclass="element2"><imgsrc="poza.jpg"></div>
<divclass="element3"><imgsrc="poza.jpg"></div>
</body>
</html>
Pozitionare
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele.
Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
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).
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>Exemplu8_1</title>
</head>
<body>
<h4style="position:absolute;left:50px;top:50px">Text1</h4>
<h4style="position:absolute;left:100px;top:200px">Text2</h4>
</body>
</html>
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>Exemplu8_2</title>
<styletype="text/css">
<!
.absolut{position:absolute;left:200px;top:150px;}
.relativ{position:relative;left:50px;top:50px;}
>
</style>
</head>
<body>
<divclass="absolut">Pozitionareabsoluta,independentdecelelate
obiectedinpagina</div>
Text
<divclass="relativ">Pozitionarerelativa,dupa"Text"</div>
</body>
</html>
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 trei obiecte pozitionate absolut
<html>
<head>
<title>Exemplu8_3</title>
<styletype="text/css">
<!
.element1{position:absolute;left:30px;top:30px;zindex:3}
.element2{position:absolute;left:50px;top:50px;zindex:2}
.element3{position:absolute;left:70px;top:70px;zindex:1}
>
</style>
</head>
<body>
<divclass="element1"><imgsrc="poza.jpg"></div>
<divclass="element2"><imgsrc="poza.jpg"></div>
<divclass="element3"><imgsrc="poza.jpg"></div>
</body>
</html>
Proprietati CSS
Data publicarii: Iunie 2006
font, text
font-family font-size
font-style font-weight
text-align text-indent
text-decoration
color, background
background-color background-image
background-repeat background-position
color
legaturi
a a: link
a: visited a: active
a: hover
liste
list-style-type list-style-image
dimensiuni, chenare, margini, completari
width height
border-width border-style
border-color
margin margin-top
margin-bottom margin-left
margin-right padding
padding-top padding-bottom
padding-left padding-right
pozitie
position-absolute position-relative
z-index float
vertical-align
