Documente Academic
Documente Profesional
Documente Cultură
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:
<link rel="stylesheet" type="text/css" href="fisier_css.css">
Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de
etichete <head> si </head> conform sintaxei:
<style type="text/css">
<!
... comenzi CSS ...
>
</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:
<eticheta style="codul CSS dorit">
...textul sau obiectul asupra caruia este aplicat codul CSS...
</eticheta>
/* Acesta este un comentariu in CSS */
Etichetele CSS sunt cunoscute sub numele de elemente sau selectori avand un
layout asemanator cu etichetele HTML.
eticheta HTML
<eticheta argument="valoare">
eticheta CSS
element{argument: valoare;}
HTML
<font color="#00FF00">
<p>Text verde</p>
</font>
HTML cu CSS
<p style="color: #00FF00;">
Text verde
</p>
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.
<html>
<head>
<title>Exemplu 2_1</title>
<style type="text/css">
<! #albastru{color: #0000FF;}>
</style>
</head>
<body>
<p id="albastru">Text albastru introdus prin id "albastru"</p>
Text negru
</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.
<html>
<head>
<title>Exemplu 2_2</title>
<style type="text/css">
<! .rosu{color: #FF0000;}>
</style>
</head>
<body>
<p class="rosu">Primul text rosu introdus prin class "rosu"</p>
Text negru
<p class="rosu">Al doilea text rosu introdus prin class "rosu"</p>
</body>
</html>
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.
<html>
<head>
<title>Exemplu 3_1</title>
<style type="text/css">
<! p{fontfamily: font1,font2,arial;}>
</style>
</head>
<body>
<p>Text scris cu cu fontul Arial</p>
Text negru
<p>Text scris cu cu fontul Arial</p>
</body>
</html>
<html>
<head>
<title>Exemplu 3_2</title>
</head>
<body>
<p style="fontfamily: font1,font2,arial;">Text scris cu cu fontul
Arial</p>
Text negru
<p style="fontfamily: font1,font2,arial;">Text scris cu cu fontul
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>.
<html>
<head>
<title>Exemplu 3_3</title>
<style type="text/css">
<! p{fontsize: 20px;}>
</style>
</head>
<body>
<p>Text scris cu font de 20px</p>
Text negru
</body>
</html>
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.
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.
<style type="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.
<style type="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).
<html>
<head>
<title>Exemplu 3_4</title>
<style type="text/css">
<!
p{
fontfamily: arial;
fontsize: 20px;
fontstyle: italic;
fontweight: 800;}
>
</style>
</head>
<body>
<p>Text scris cu Arial, 20px, italic, 800</p>
Text negru
</body>
</html>
<style type="text/css">
<!
p{textalign: center;}
>
</style>
Exemplu: prin intermediul lui div aplicam stilul pecentru imaginii si textului
<html>
<head>
<title>Exemplu 4_1</title>
<style type="text/css">
<!
p{textalign: center;}
>
</style>
</head>
<body>
<div class="pecentru"><img src="poza.jpg"></div>
Text neformatat
<div class="pecentru">Text formatat</div>
</body>
</html>
<style type="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.
<html>
<head>
<title>Exemplu 4_2</title>
<style type="text/css">
<!
.auto{float: left;}
>
</style>
</head>
<body>
<img src="poza.jpg" class="auto">
Textul se aliniaza la dreapta, iar poza la stanga datorita clasei
"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
<style type="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.
<html>
<head>
<title>Exemplu 4_3</title>
<style type="text/css">
<!
p{textdecoration: underline;}
>
</style>
</head>
<body>
Text normal
<p>Text subliniat</p>
</body>
</html>
Culoare
color defineste culoarea textului dintr-o zona sau intraga pagina.
<html>
<head>
<title>Exemplu 4_4</title>
<style type="text/css">
<!
p{color: #0000FF;}
>
</style>
</head>
<body>
Text normal
<p>Text albastru</p>
</body>
</html>
<html>
<head>
<title>Exemplu 4_5</title>
<style type="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>
Text normal
<a href="exemplu4_4.html">link</a> catre exemplul 4_4
</body>
</html>
Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete
HTML.
<html>
<head>
<title>Exemplu 5_1</title>
<style type="text/css">
<!
body {backgroundcolor: #FFFF00;}
p {backgroundcolor: #FF0000;}
>
</style>
</head>
<body>
Text normal
<p>Text cu background rosu</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.
<html>
<head>
<title>Exemplu 5_2</title>
<style type="text/css">
<!
p {backgroundimage: url(poza.jpg);}
>
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</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
<html>
<head>
<title>Exemplu 5_3</title>
<style type="text/css">
<!
p {backgroundimage: url(poza.jpg);
backgroundrepeat: norepeat;}
>
</style>
</head>
<body>
Text normal
<p>Text cu imagine de fond</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>Exemplu 5_4</title>
<style type="text/css">
<!
body {backgroundimage: url(poza.jpg);
backgroundrepeat: norepeat;
backgroundposition: top center;}
>
</style>
</head>
<body>
Text normal
</body>
</html>
Sintaxa este:
<style type="text/css">
<!
li {liststyletype: valoare;}
>
</style>
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
<html>
<head>
<title>Exemplu 6_1</title>
<style type="text/css">
<!
li {liststyletype: loweralpha;}
>
</style>
</head>
<body>
Necesar materiale:
<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().
<html>
<head>
<title>Exemplu 6_2</title>
<style type="text/css">
<!
li {liststyleimage: url(punct.gif);}
>
</style>
</head>
<body>
Necesar materiale:
<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:
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.
<html>
<head>
<title>Exemplu 7_1</title>
<style type="text/css">
<!
img {width: 50px; height: 100px;}
>
</style>
</head>
<body>
<img src="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>Exemplu 7_2</title>
<style type="text/css">
<!
img {marginleft: 100px; margintop: 25px;}
>
</style>
</head>
<body>
<img src="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.
<html>
<head>
<title>Exemplu 7_3</title>
<style type="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>
<div class="clasa1">borderwidth: 2px; borderstyle: dotted; border
color: red;</div><br>
<div class="clasa2">borderwidth: 3px; borderstyle: dashed; border
color: blue;</div><br>
<div class="clasa3">borderwidth: 2px; borderstyle: solid; border
color: green;</div><br>
<div class="clasa4">borderwidth: 3px; borderstyle: double; border
color: black;</div><br>
<div class="clasa5">borderwidth: 2px; borderstyle: groove; border
color: silver;</div><br>
<div class="clasa6">borderwidth: 3px; borderstyle: ridge; border
color: lime;</div><br>
<div class="clasa7">borderwidth: 2px; borderstyle: inset; border
color: yellow;</div><br>
<div class="clasa8">borderwidth: 3px; borderstyle: outset; border
color: aqua;</div><br>
<div class="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.
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.
<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>
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.
<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>
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.
<html>
<head>
<title>Exemplu 8_3</title>
<style type="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>
<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>
Pozitionare
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele.
Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
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.
<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>
<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>
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>Exemplu 8_3</title>
<style type="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>
<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>
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