7/23/2019 Css Properties & Values

1/4

/* */ - incadreaza comentariile in CSS.

background-color specifica culoarea de fundal a unui element.

-background-image specifica o imagine de fundal pentru un element.

- sintaxa: background-image: url(adresa fotografiei);

Imgainile de fundal se repeat automat, ca sa acopere intreaga suprafata a

elementului. Ele se repeta atat ertical, cat si orizontal. !entru a se repeta numai

intr-o directie, ii specificam acest lucru cu background-repeat: repeat-x (sau y);

"aca rem sa nu se repete, alegem background-repeat: no-repeat;

Ca sa putem alege pozitia imaginii de fundal, putem alege proprietatea

background-position:

cu o aloare exp: right-top, left top, left center, left bottom,right top, right center, right bottom, center top, center center, center bottom;

Background-attachement sta#ileste daca o imagine de fundal se misca cu textul

sau nu, cand naig$ezi pe pagina. !utem alege alorile :fixed %&'&(E )I&,

scroll &S+& E "E)&+ sau inherit )&CE &CE&SI C% C&

EE'E(+ !&%I(+E.

Ca sa scurtam trea#a, putem folosi doar #ac0ground: urmat direct de alorile

pentru fiecare proprietate in parte, in ordinea asta: color, image, repeat,attac$ement, position. Cea de genul

background: red url( blabl!"pg) no-repeat fixed right-bottom;

color: -specifica culoarea unui text1

text-align: - specifica pozitia unui text in rand: poate lua alorile : right, left,

center si"ustify care intinde literele astfel incat capetele randurilor sa fie drepte.

Text-decoration specifica ce decoratie sa ai#a un text. Cel mai adesea e folositpentru a sterge linia de su# lin0uri, cu aloarea none! 'ai poate primi alorile :

o#erline, underline, line-through sau blink $%& ' %*% +- '.&*%

$/%* 0.112%!

+u e recomandata sublinierea textelor care nu sunt linkuri, pentru ca de multe

ori utili3atorul e incurcat!

7/23/2019 Css Properties & Values

2/4

Text-transform specifica daca cuintele sa fie cu litera mare sau mica. !oate

aea aloarile none asta e #2 default, uppercase asta transforma toate litere in

ma3uscule, lo4ercase - transforma literele in minuscule si capitali3e prima litera

a fiecarui cuant deine ma3uscula.

Text-indent specifica daca un text are alineat. )ie in pixeli, px, cm, ptetc., fie in

procente, fata de elemtentul parinte.

Font-family specifica ce font sa ai#a un text. !entru ca eita situatia in care

#ro4serul nu cunoaste fontul respecti, e de preferat sa adaugam si de rezera un

sans-serif, serifsau monospace. )onturile de tip sans-serif sunt mai putin

o#ositoare pentru utilizator.

Font-size specifica marimea literelor dintr-un text. 5 putem specifica in pixeli,

px, dar de preferat e sa folosim em ceea ce indica normalul utilizatorului. est

practice ar fi sa folosim si un procent, in #od2-ul elementului, ca sa recunoasca

toate #ro4serele. Exp: body5font-si3e: 6778;9

$i#5font-si3e: 6,em;9

Font-weight specifica cat de groase sa fie caracterele. !oate lua alorile :

normal, bold, light, lighter sau o #aloare de la 677 la 77!

a:link pseudoclasa care specifica cum sa arate un lin0 inca neizitat.

a:visited specifica cum arata un lin0 care a fost izitat.

a:hover specifica cum arata un lin0 peste care trece cursorul.

a: active specifica cum arata un lin0 in momentul in care este accesat.

In sintaxa, hovertre#uie sa fie intotdeauna scris dupa ce scriem linksi visited, iar

activeeste intotdeauna dupa hover. +oate astea cand le folosim pe toate.

list-style-type specifica ce sa ai#a in fata elementele unei liste. !oate lua mai

multe alori, none, circle, suare, upper-roman, lower-alpha, upper-alpha,

lower-roman, decimal, decimal-leading-zero!

"ist-style-image specifica o imagine care sa preceada elementele unei liste.

ineinteles, cu aloarea url(adresa imaginii)

7/23/2019 Css Properties & Values

3/4

#ertical-align specifica cum sa fie aliniat pe erticala textul in ta#el. !oate lua

alori : bottom, top,presupun.

$order-style specifica felul marginii unui element. !oate lua alorile : dotted,

dashed, solid, double!

$order-width specifica latimea marginii unui element. !oate fi sta#ilita in pixeli

sau cu alorile thin, medium sau thick!

$order-color specifica culoarea marginii unui element. &stea doua nu au aloare

daca se folosesc fara #order-st2le.

$order-top-style

$order-bottom-style c$estie foarte misto care permite stilizarea diferita a

marginilor.

$order-right-style

$order-left-style

%utline- specifica o linie in 3urul elementului, care sa-l scoata in eident. &re

aceleasi c$estii ca #order.

&argin- creeaza un spatiu in 3urul unui element. (u are culoare de fundal, e

transparenta. !oate aea alorile: auto calculata de #ro4ser sau putem da o

aloare in pixeli sau procente.

'adding creeaza un spatiu in 3urul continutului unui element, intre continut si

#order, mai exact.

"aca rem sa stilizam mai multe elemente in acelasi fel, e de a3uns sa le trecem pe

toate in acelasi selector: exp: p, h(, a, div, table, ul, ol etc! ) niste valori comune*

"e asemenea, putem folosi selectori care se afla inauntrul altor selectori. Exp: divp a )un stil pentru linkurile care se afla in paragrafelele din divuri*

+eight, width, max-height, max-width, min-height, min-width specifica

dimnensiunile elementelor.

7/23/2019 Css Properties & Values

4/4

isplay specifica cum sa fie un element afisat. Cu aloarea2nline permite altor

elemente sa stea langa el pe acelasi rand. Cu aloarea block nu permite acest

lucru.

'osition specifica ce pozitie sa ai#a un element. &re ca alori top, bottom, left,right! &em si doua cazuri special:fixed - ramane fix c$iar daca naigam in 3os

pe pagina1 relati#e in com#inatie cu una din cele de sus, 6top #ottom etc7 a fi

pozitionat relati la pozitia lui o#isnuita. Exp: a)'ositon: relative "eft: -./px*

a deplasa lin0ul cu douazeci de centimetri spre stanga fata de pozitia lui actuala.

Cu pozitia absolute specificam unui element cum sa fie fata de primul element

parinte. "aca nu are niciunul se a pozitiona fata de $tml.

0ursor specifica cum sa arate cursorul cand treci peste un anumit text. !oate

aea alorile : auto, help, progress, wait, pointer, text, sau c$iar url12cu adresaunei poze34!

%verflow- specifica ce sa faci cand continutul unui element depaseste

dimensiunile pe care le dam acelui element. !oate lua alorile : hidden, scroll,

auto, visible!

z-index- sta#ileste prioritatea elemtentelor care se suprapun.!oate lua alori

numerice, inclusi negatie.

Float specifica unde sa se pozitioneze un element left sau right! Elementele

care urmeaza dupa el se or mula dupa el.

0lear specifica pe care parte un element nu poate primi alte elemente

8plutitoare9. alori : right, left, both!