CSS - Cascading Style Sheets - Tutoriale, exemple si explicatii din care sa invatati, daca exersati si singuri. Cuprins Lectii : 1 - Scrierea codului CSS •
Obiectele (regulile) CSS : selector, clasa si identifcator.
•
Componentele unui obiect CSS
2 - Crearea Foilor de Stil •
Etichete HT! si stiluri CSS
•
"efnirea selectorilor
•
Crearea etichetelor HT! personali#ate
•
"efnirea de reguli similare
•
"efnirea etichetelor in conte$t (imbricate)
•
Cresterea prioritatii unei defnitii
•
"eterminarea ordinii cascadei
•
%daugarea comentariilor la CSS
3 - Confgurarea onturilor •
Stabilirea &ontului
•
Stabilirea dimensiunii &ontului
Te$t Te$t inclinat inclinat
•
•
'rosimea &ontului
•
auscule mici
•
alori multiple pentru &ont
4 - Confgurarea textului •
Spatiul intre litere
•
Spatiul dintre cu*inte
•
Spatiul intre linii
•
arimea (tipul) literelor
•
%linierea te$tului
•
%linierea pe *erticala a te$tului
•
+ormarea paragra&elor
•
%plicarea elementelor decorati*e
•
Spatiile albe
5 - Confgurari pentru culori si undal •
Confgurarea &undalului o Culoarea &undalului o maginea de &undal o epetarea imaginii de &undal
Controlul imaginii de &undal o Controlul o o#itia imaginii de &undal
Stabilirea simultana a proprietatilor &undalului o Stabilirea •
Stabilirea culorii din prim-plan
6 - Controale pentru chenare si af sarea eleentelor •
!atimea si inaltimea unui element
•
arginile unui element
•
Chenarul unui element
•
%daugarea spatiului in interior in urul elementului
•
Elemente /oat
•
%nularea plasarii unui element in spatiul eliberat de 0/oat0
•
%fsarea si ascunderea elementelor
! - Controale de po"itionare •
Stabilirea modului de po#itionare o o#itionarea statica o o#itionarea relati*a o o#itionarea absoluta o o#itionarea f$a
•
o#itionarea in raport cu latura de sus, respecti* stanga
•
o#itionarea in raport cu latura de os, respecti* dreapta
•
o#itionarea in spatiul 1"
•
ncluderea unui element absolut intr-un element relati*
•
ncluderea unui element relati* intr-un element absolut
# - Confgurari pentru $i"i%ilitate si ouse •
Stabilirea *i#ibilitatii unui element
•
Stabilirea supra&etei *i#ibile a unui element
•
"efnirea po#itiei depasirii
•
%spectul indicatorului de mouse
& - 'seudo-clasele •
seudo-clase cu selector
•
seudo-clase si clase
•
seudo-clase cu id-uri si elemente de &ormular
1( - 'seudo-eleente •
n aceasta lectie in*atati ce sunt si ce &ac pseudo-elementele
•
a&ter, be&ore, frst-letter, frst-line
CSS3 - )ac*ground proprietati noi
2 roprietati noi pt. bac3ground, adaugate in CSS1: bac3ground-si#e, bac3ground-origin si bac3ground-clip. CSS3 - )order proprietati noi
2 roprietati noi pt. border (bordura), adaugate in CSS1. otunire colturi cu border-radius, adaugare umbra la chenar cu bo$-shado4, utili#are imagine pt. aspectul bordurii cu border-image. CSS3 - text-shado+, +ord-+rap, text-o$ero+
2 roprietati pentru e&ecte de te$t, adaugate in CSS1. CSS3 opacit.
2 Setare opacitate si transparenta la elementele HT! cu proprietatea CSS opacit5. CSS3 /ransorari 20
2 Trans&ormare elemente HT! in plan 6" (mutare, rotire, redimensionare, distorsie), &olosind proprietatea 0trans&orm0 si metodele: translate(), rotate(), scale(), s3e4(). CSS3 transition
2 %dauga un e&ect de animatie cand se modifca proprietatile CSS ale unui element HT!, schimband gradual de la un stil la altut. e site-ul courses4eb.net, la sectiunea: CSS - Cascading St5le Sheets gasiti o pagina ( ideo /utorials ) cu e$emple si lectii *ideo
pentru in*atarea principalelor elemente CSS. - %cele tutoriale sunt de initiere pt. incepatori, in limba engle#a. e acelasi site, e si o pagina 0o+nload 0o+nload,, unde gasiti mai multe resurse: "+ e-boo3s si cursuri *ideo pe care le puteti descarca ( tot in engleza). engleza). - !ectii si tutoriale online de initiere CSS - Curs realizat de MarPlo
ntroducere Crearea paginilor HT! este un lucru relati* simplu, in*atarea etichetelor HT! si crearea unor imagini ducand la reali#area de pagini 4eb de o comple$itate comple$itate medie. Odata cu de#*oltarea internetului, site-urile au de*enit din ce in ce mai comple$e, cu un numar mai mare de pagini, cerintele pri*ind grafca si elementele din pagina au de*enit mai pretentioase si ast&el proiectarea paginilor 4eb a de*enit o sarcina ce*a mai difcila. O problema importanta cand a*em un site cu multe pagini este atunci cand dorim sa &acem &a cem anumite schimbari in elementele pagini: &ondul, grafca sau &ontul te$telor din pagini. rin utili#area CSS (Cascading St5le Sheets), in traducere 0foi 0 foi de stil in cascada0, cascada 0, acest lucru nu mai este o problema, reali#andu-se relati* usor, prin schimbarea sau adaugarea unor elemente in codul CSS, ne find ne*oi sa lucram la fecare pagina sau la fecare element din pagina. CSS se ocupa in general cu aspectul si controlul grafc al elementelor din pagina, cum ar f: te$tul, imaginile, &ondul, culorile si ase#area acestora in cadrul &erestrei paginii. CSS &oloseste stiluri, acestea inglobea#a, sub un anumit nume, atribute de &ormatare care se aplica asupra unui element indi*idual din pagina, asupra unui grup de elemente sau la ni*elul intregului document. CSS &unctionea#a cu HT!, insa nu este HT!. El e$tinde &unctionalitatile HT!, permitand redefnirea etichetelor HT! e$istente. rin utili#area CSS aspectul documentului pe ansamblu, sau a unui element indi*idual din interiorul sau, poate f controlat mult mai usor. usor. Stilurile pot f aplicate asupra unui element, a unui document sau chiar asupra unui intreg site 4eb. 7n de#a*anta ar f ca unele na*igatoare nu sunt compatibile CSS,
ast&el ca documentele HT! sunt afsate ca si cum CSS n-ar e$ista, dar cele mai cunoscute si utili#ate bro4sere, cum ar f: o#illa +ire&o$, ire&o$, nternet E$plorer, Opera, si altele, sunt compatibile CSS. %cest curs pre#inta elementele elementele de ba#a CSS si modul de lucru lu cru cu 0&oile de stil0, *a in*ata cum sa adaugati si sa &olositi CSS in paginile d*. 4eb. Tot Tot ce a*eti ne*oie este este un editor de te$te te$te simplu, cum ar f 8otepad, si un na*igator, de e$emplu o#illa +ire&o$, care este gratuit entru a in*ata cat mai bine elementele pre#entate in aceste lectii, e$ersati personal fecare e$emplu si proprietate e$plicata. etineti e tineti ca acest curs repre#inta repre#inta un punct de plecare, ne find pre#entate aici toate proprietatile si elementele CSS. entru o cunoastere mai amanuntita a acestora, *i#itati site-ul 444.41.org 444.41.org,, la sectiunile despre CSS.
Scrierea codului CS C SS Codurile CSS pot f scrise in interiorul paginii sau intr-un intr-un fsier e$tern cu e$tensia0.css0. Codul CSS, ca &orma generala, este alcatuit din: obiectul care *a f &ormatat. proprietatile acestuia si *aloarea (sau atributele) fecarei proprietati. Cand este adaugat in documentul HT!, trebuie scris in cadrul unui unu i tag st.le in st.le in sectiunea HE%" a documentului HT!, dupa cum se *ede in &ormula generala de cmai os9 html; head; title;Titlul
- Obser*ati sinta$a codului CSS. erechile proprietate:$aloare proprietate:$aloare se se scriu intre acoladele obiectului CSS pe care-l defnesc, intre 0proprietate0 0proprietate0 si 0*aloare0 trebuie sa fe un caracter doua-puncte ( :) iar la s&arsitul perechii se adauga un caracter punct-si-*irgula punct-si-*irgula ( ( ) - Cand este adaugat intr-un fsier e$tern 0.css0, codul CSS se scrie la &el, dar nu se mai adauga tag-ul st5le;. 1< =%iectele >regulile? CSS
E$ista trei tipuri principale de obiecte CSS: selector, clasa si identifcator. - Selectorul @/AL Selectorul HT! se &oloseste pentru a redefni modul de afsare a continutului etichetei HT!. 7n selector HT! repre#inta partea etichetei HT! care indica na*igatorului tipul de eticheta. ata un e$emplu: e$emplu: h= > &ont-&amil5:0%rial09 &ont-si#e:=?p$9 @
- %ici selectorul este 0h=0. "efnirea unui selector HT! &olosind CSS are ca re#ultat redefnirea etichetei HT!. Selectorul si eticheta desi par identice, totusi nu sunt. - Clasa Clasa este un obiect care poate f aplicat oricarei etichete HT!. O clasa trebuie creata in interiorul etichetei HT! inainte de a f defnita intr-un cod CSS. Crearea clasei in interiorul etichetei se &ace simplu, prin specifcarea cu*antului class si class si numele clasei, ca in e$emplu de mai os: •
h1 classnue8clasa /ext 7h1
- 0numeAclasa0, poate f orice nume dorim. - %poi in interiorul codului CSS, clasa trebuie defnita prin adaugarea unui caracter punct (.) inaintea numelui clasei, ca in e$emplu urmator: .numeAclasa > &ont-&amil5:0%rial09 &ont-si#e:=?p$9 @
8umele aceleasi clase poate f atribuit mai multor etichete HT! din aceeasi pagina, si toate *or prelua acelasi stil css.
- dentifcator Obiectele de tip identifcator (") sunt asemanatoare cu clasele. ot f aplicate oricarei etichete HT!, dar spre deosebire de clase, numele unui identifcator trebuie atribuit numai unei singure etichete HT! dintr-o pagina, pentru alta eticheta se adauga un " cu nume di&erit. Ca si clasa, identifcatoru trebuie intai creat in interiorul etichetei HT!. odul de creare este simplu, prin specifcarea cu*antului id si numele clasei, ca in e$emplu de mai os: •
h1 idnue8id /ext 7h1
- 0numeAid0, poate f orice nume dorim. n interiorul codului CSS, identifcatorul este defnit prin adaugarea unui caracter die# (B) inaintea numelui, ca in e$emplu urmator: BnumeAid > &ont-&amil5:0%rial09 &ont-si#e:=?p$9 @
In urmatoarea lectie va explicat mai amanuntit modul de denire si rolul acestor obiecte CSS . 2< Coponentele unui o%iect C SS
Obiectele CSS, indi&erent de tipul lor, au in componenta urmatoarele elemente: •
•
•
Selectorii - identifca un obiect9 pot f selectori de etichete HT!, clase sau identifcatori. 'roprietatile - identifca o proprietate a obiectului9 se re&era in special la aspect. alorile - sunt atributele unei proprietati9 pot f cu*inte cheie, *alori numerice sau procentuale, tipul *alorii depin#and de proprietate.
Sinta$a generala a unei reguli CSS este urmatoarea: •
selector 9proprietate: $aloare ;
roprietatile si *alorile constituie defnitia regulii (obiectului) CSS. %cestea se regasesc sub &orma de perechi,despartite de caracterul doua puncte :, fecare pereche se termina cu un caracter punct si *irgula 090. Etichetele HT! nu sunt sensibile la di&erenta intre mauscule si litere mici. "ar odata cu aparitia limbaului DHT!, acesta &ace distinctie intre mauscule si minuscule, ast&el ca toate etichetele si toti selectorii trebuie scrisi cu litere mici.
Crearea Foilor de Stil 1< Btichete @/AL si stiluri CSS
CSS o&era posibilitatea de a schimba aspectul fecarei etichete in parte, prin stabilirea unui anume stil in interiorul ei, cu atributul 0st.le0. %cest lucru este util mai ales pentru a anula alte stiluri ale elementului respecti* sau de a da elemente grafce de stil doar etichetei respecti*e. Sinta$a pentru defnirea stilurilor in interiorul unei etichete HT! este urmatoarea: •
eticheta st.leproprietate:$aloare text <<< 7eticheta
CSS permite si defnirea unor reguli de stil generale intr-o pagina 4eb. %cest set de reguli trebuie scris in sectiunea de antet (head) a documentului, in cadrul tag-ului st5le;. Sinta$a pentru defnirea CSS intr-un document HT!, in interiorul etichetei head;
st.le t.petext7css selector81 9proprietate1:$aloare1 proprietate2:$aloare2 <<< ; <<< selector8n 9proprietate1:$aloare1 proprietate2:$aloare2 <<< ; 7st.le
- "efnirea tuturor stilurilor intr-o locatie comuna usurea#a modifcarea mai rapida a unei pagini. ata un e$emplu practic de cod css:
st5le t5pe0te$t
&ont-&amil5:F%rialF9 &ont-si#e:=?p$9 &ont-4eight:bold9 color:B====G9 @ p >&ont-&amil5:F%rialF9 &ont-si#e:=6p$9 color:blue9 @
+oile de stil pot f utili#ate nu doar la ni*el de pagina 4eb, ci si la ni*el de intreg site. %st&el, trebuie creata o &oaie de stil e$terna intrun fsier separat, de pre&erat cu e$tensia 0.css0, care poate f inclus in pagina HT! prin doua procedee: legatura sau import. Crearea unei &oaie de stil e$terne se &ace scriind codul CSS intr-un fsier te$t cu autorul unui editor de te$te simplu (de e$emplu 8otepad in indo4s), sau speciali#at in acest sens (precum 8otepadII). n fsierul e$tern creat se adauga reguli CSS, &ara insa ca aceste reguli sa fe incadrate in etichete STJ!E. "upa ce a &ost creata &oaia de stil e$terna, aceasta poate f &olosita de un document HT! utili#and urmatoarea sinta$a, in interiorul tag-ului head;
lin* relst.lesheet hrenue8fsier
- Eticheta !8K apare in antetul documentului (sectiunea head), iar atributele &olosite transmit na*igatorului tipul de legatura (0rel0 L legatura cu o &oaie de stil, 0t5pe0 - tipul codului din fsier) si locatia inspre fsierul ce contine codul CSS (0hre&0 L calea si numele complet al fsierului, inclusi* e$tensia). O alta modalitate de utili#are a &oilor de stil e$terne intr-un document HT! o repre#inta importul acestora &olosind comanda iport. Sinta$a pentru importul unei &oi de stil e$terne este urmatoarea: •
st.le t.petext7css iport url>nue8fsier
entru a importa un fsier CSS e$tern se &oloseste in cadrul sectiunii HE%" a documentului HT! eticheta STJ!E. n cadrul acestei etichete este adaugata instructiunea 0Mimport0 de mai sus, unde 0numeAfsier.css0 repre#inta calea si numele fsierului ce contine regulile CSS defnite. %laturi de instructiunea 0Mimport0, in cadrul etichetei STJ!E, pot f adaugate defniti si selectori suplimentari.
!egatura la un fsier CSS e$tern sau importul acestuia intr-un document HT! are acelasi e&ect ca si cum stilurile incluse ar f &ost defnire direct in eticheta STJ!E din sectiunea HE%" a documentului HT!. 2< 0efnirea selectorilor
- Selectorii HT! pot f defniti prin adaugarea unui numar de defnitii compatibilie cu eticheta HT! la care se re&era, a*and urmatoarea &orma generala: •
selector8@/AL 9 proprietate1:$aloare1 proprietate2:$aloare2 <<< ;
"upa redefnirea etichetei HT!, stilurile etichetelor respecti*e din documentul HT! *or f modifcate automat. rin redefnirea unei etichete, proprietatile prestabilite e$istente nu sunt anulate, ci se adauga altele noi. 7tili#area selectorilor de tip clasa o&era posibilitatea confgurarii unor stiluri care se pot aplica doar acelor elemente care sunt etichetate cu clasa respecti*a. Sinta$a generala de defnire a unei clase CSS este: •
E$ista ca#ul in care o clasa este asociata unui selector HT!, ceea ce inseamna ca acea clasa poate f &olosita doar cu eticheta HT! respecti*a. entru a defni o clasa care sa a&ecte#e in mod direct un anume selector HT!, se &oloseste urmatoarea sinta$a: •
selector8@/AL
Selectoarele de clasa sunt acceptate de toate na*igatoarele. 8umele unei clase e recomandat sa fe di&erit de cu*antele re#er*ate Na*aScript. - %semanator cu selectorii de clasa se defnesc si identifcatorii (idul). %cestia sunt &olositi pentru crearea de stiluri care pot f atribuite unei singure etichete HT! dintr-o pagina. Sinta$a generala de defnire a unui identifcator este:
•
Didentifcator 9 proprietate1:$aloare1 proprietate2:$aloare2 <<< ;
dentifcatorii permit defnirea unui element sub &orma unui obiect, find &olositi doar o singura data in cadrul unei pagini 4eb pentru identifcarea tag-ului respecti*, ast&el poate f manipulat si cu autorul &unctiilor Na*aScript. 8umele unui identifcator e recomandat sa fe di&erit de cu*antele re#er*ate Na*aScript. 3< Crearea etichetelor @/AL personali"ate
aoritatea etichetelor HT! au unele proprietati prestabilite. %cestea fe raman asa cum sunt, fe pot f redefnite. E$ista insa ca#uri in care se doreste crearea unor etichete personali#ate, pornind de la #ero. n acest ca# se &olosesc etichetele span si di$. Eticheta span nu are proprietati mostenite. Ea repre#inta doar o locatie *ida care crea#a o eticheta in linie. entru a confgura o eticheta in linie trebuie defnita o clasa sau identifcator care sa poata f aplicat apoi unei etichete span;. ata un e$emplu cu, &orma generala, in care selectori sunt precedati de eticheta span; : ... span class0numeAclasa0; ...
%cum iata cum pot f defniti acestia in interiorul unei &oi de stil: .numeAclasa > proprietate=:*aloare=9 proprietate6:*aloare69 ... @ Bspan= > proprietate=:*aloare=9 proprietate6:*aloare69 ... @ span .clasaAspan > proprietate=:*aloare=9 proprietate6:*aloare69 ... @
n momentul in care se doreste confgurarea unui bloc separat de restul continutului unui document HT!, solutia este eticheta di$. %ceasta crea#a o #ona proprie in pagina, cu linie noua atat deasupra sa cat si dedesubtul sau. entru crearea etichetelor " se procedea#a la &el ca si in ca#ul etichetelor in linie S%8, prin defnirea mai intai a unei etichete de tip clasa sau identifcator, urmata apoi de aplicarea ei asupra unei etichete di*;.
ata &orma generala de aplicare a unei etichete di*; intr-o pagina HT! : ... di* class0numeAclasa0; ...
"efnirea acestor etichete di*; intr-un cod CSS se &ace ast&el: di* > proprietate=:*aloare=9 proprietate6:*aloare69 ... @ .numeAclasa > proprietate=:*aloare=9 proprietate6:*aloare69 ... @ Bdi*= > proprietate=:*aloare=9 proprietate6:*aloare69 ... @
egulile CSS pentru defnirea etichetelor span; sau di*;, pot f plasate la &el ca si celelalte tipuri de selectoare, in sectiunea 0head0 a documentului in interiorul etichetei 0st5le0, sau intr-un fsier e$tern care* ulterior este legat sau importat in documentul HT!. Mai multe lucruri despre DI si SP!" puteti invata de aici #$ DI si SP!". 4< 0ef nirea de reguli siilare
"aca mai multi selectori &olosesc aceleasi defnitii css, acestia pot a*ea aceeasi lista de elemente, find scrisi separat prin *irgule. Sinta$a generala pentru defnirea unei liste cu mai multi selectori este urmatoarea: •
selector1, selector2, <<< 9 proprietate1:$aloare1 proprietate2:$aloare2 <<< ;
mpreuna cu selectorii pot f de asemenea defniti identifcatorii si clasele. "e#a*antaul ar f ca in momentul in care este modifcata o *aloare a unei proprietati incluse in defnitie, *aloarea respecti*a se *a modifca in toate etichetele repre#entate de acesti selectori. 5< 0ef nirea etichetelor in context >i%ricate?
Cand o eticheta este inconurata de alte etichete (a/andu-se ast&el una in interiorul alteia), spunem ca aceste etichete sunt imbricate. Eticheta e$terioara se numeste, in acest ca#, eticheta parinte, iar cea in&erioara se numeste copil. Se pot crea reguli care re*in numai etichetelor copil, sinta$a generala a unei ast&el de reguli find:
•
selector1 selector2 <<< 9 proprietate1:$aloare1 proprietate2:$aloare2 <<< ;
- 7nde 0selector=0 este selectorul parinte iar 0selector60 este selectorul copil. !ista de selectori imbricati poate f mai mare de doi, ultimul selector din lista este cel care primeste toate stilurile incluse in regula si in plus le mosteneste si pe cele ale parintilor. Ca si selectorii singuri, selectorii imbricati pot include in lista clase, identifcatori sau selectori HT!. Toate etichetele HT!, cu e$ceptia etichetei O"J, au cel putin o eticheta parinte care le inconoara. "e cele mai multe ori stilurile etichetelor din interior preiau stilurile etichetelor parinte (e$ista insa ca#uri in care proprietatile nu sunt mostenite de etichetele imbricate). %cest mecanism se numeste mostenirea stilurilor. rin redefnirea unui selector, eticheta nu-si pierde proprietatile prestabilite, doar in ca#ul in care acestea sunt modifcate. %st&el proprietatile mostenite pot f anulate prin redefnirea acestora in lista de defnitii a etichetei imbricate. 6< Cresterea prioritatii unei def nitii
aloarea Eiportant adaugata unei defnitii atribuie ma$imum de prioritate in determinarea ordinii unei e$ecutii. aloarea Eiportant trebuie plasata inaintea caracterului F9F, ca in e$empul urmator: •
selector 9 proprietate1:$aloare1 proprietate2:$aloare2 E iportant <<< ;
!< 0eterinarea ordinii executiei
"eoarece e$ista mai multe moduri de a aplica stilurile, pot apare situatii in care unei etichete sa-i fe aplicate mai multe stiluri. +oile de stil din doua sau mai multe surse, &olosite simultan, pot cau#a contradictii. "e aceea e$ista cate*a reguli care determina ordinea e$ecutiei (numita si cascada), acestea sunt: •
=. egulile CSS scrise in interiorul paginii HT!, in cadrul etichetei 0st5le0 din sectiunea 0head0 au o prioritate mai mare decat cele scrise intr-un fsier e$tern, iar regulile scrise in interiorul etichetelor au o prioritate mai mare decat cele din cadrul etichetei 0st5le0 din sectiunea 0head0.
6. E$istenta atributului Eiportant L con&era prioritate ma$ima la afsare defnitiei in care este utili#at. 1. Sursa regulilor L e$ista numeroase na*igatoare care permit utili#atorului sa-si defneasca propriile &oi de stil. Totusi, &oile de stil ale autorului le anulea#a pe cele ale *i#itatorului daca acestea din urma nu au *aloarea 0Pimportant0. Q. Specifcitate L cu cat o regula dispune de mai multi selectori HT!, de clasa si de identifcator, cu atat prioritatea ei creste. "-urile au *aloarea =RR, clasele au *aloarea =R, iar selectorii HT! au *aloarea =. ?. Aoentul aparitiei L cu cat un stil apare mai tar#iu, cu atat importanta lui este mai mare. %st&el, defnitiile unei etichete copil au prioritatea mai mare si anulea#a toate stilurile precedente cu care intra in con/ict. #< daugarea coentariilor la CSS
Este bine ca uneori sa fe adaugate comentarii in codul CSS, mai ales in ca#ul fsierelor e$terne. Comentariile auta la intelegerea codului, &acandu-se ast&el cunoscut, pentru mai tar#iu, rolu anumitor elemente din codul CSS. Comentariile nu au nici un e&ect si pot f plasate in urul regulilor, find utile si in ca#ul na*igatoarelor care nu suporta CSS. entru a adauga comentarii in regulile de stil a*em la dispo#itie doua modalitati: •
•
n ca#ul in care comentariul se intinde pe un singur rand este sufcienta &olosirea perechii de caractere F 77F urmata de comentariu. n ca#ul in care comentariul contine mai multe linie, trebuie plasat intre F7GF care deschide #ona de comentariu si F G7F care indica s&arsitul comentariului.
n ca#ul &olosirii comentariilor cu F77F se pot adauga oricate slash-uri, minimul find de doua. ata un e$emplu in care puteti *edea cum pot f adaugate comentariile: < Comentariu, pe mai multe linii < .numeAclasa > proprietate=:*aloare=9 proprietate6:*aloare69 ... @
<< Comentariu pe o singura linie Bdi*= > proprietate=:*aloare=9 proprietate6:*aloare69 ... @
Confgurarea onturilor %legerea potri*ita a &onturilor si &olosirea acestora in cadrul paginilor 4eb este importanta, poate atrage critici si comentarii din partea *i#itatorilor, mai ales daca &ormatarea clasica prin scris normal, aldin sau cursi* nu este &olosita corespun#ator. CSS include &acilitati de control asupra aspectului &onturilor, prin posibilitatea de a stabili &amilia de &onturi, atributele ingrosat si inclinat, dimensiunea literelor precum si spatiul dintre linii. E$ista cinci &amilii de &onturi de ba#a: •
•
•
•
•
seri L au un ornament (seri&) plasat la terminatia literei, care ii o&era o distinctie speciala. Sunt &olosite pentru tiparire, chiar daca te$tele sunt mai mari sau mai mici. 8u sunt indicate pentru afsarea te$telor pe ecran. sans seri L sunt &onturi care nu &olosesc seri&e, find indicate pentru continut te$t general. onospace L &onturile monospatiate pot a*ea seri&e, ele se deosebesc prin &aptul ca fecare litera ocupa aceeasi cantitate de spatiu. Sunt cele mai indicate pentru te$tele care trebuie citite cu e$actitate, ca de e$emplu liniile de program. cursi$e L imita scrisul de mana, intr-o maniera stili#ata. Sunt indicate in scopuri decorati*e, nefind recomandate pentru scrierea unor te$te mai lungi. antas. L nu se incadrea#a in nici una dintre categoriile de mai sus, find &onturi care au un caracter predominant ornamental (repre#entand ilustratii sau pictograme).
1< Sta%ilirea ontului
+ontul &olosit pentru afsarea unui te$t poate f stabilit prin proprietatea 0&ont0. entru defnirea &ontului in cadrul unei reguli, trebuie specifcata, dupa selectorul din cadrul &oii de stil, proprietatea ont-
ail. urmata de numele &ontului sau a &onturilor (despartite prin *irgula). Este bine ca numele &onturilor sa fe incadrate intre ghilimele simple sau duble, mai ales daca numele acestora contine spatii. +orma generala find urmatoarea: •
selector 9 ont-ail.:nue8ont1, nue8ont2, <<<, nue8generic ;
- "upa ultima *irgula se pot &olosi urmatoarele nume generice de &onturi: 0seri&0, 0sans-seri&0, 0cursi*e0, 0monospace0 sau 0&antas50. ncluderea unei asemenea *alori este optionala, insa recomandata. ata un e$emplu practic: h= > &ont-&amil5:0%rial0, 0Hel*etica0, sans-seri& @
Cand este specifcata o lista de &onturi, na*igatorul incearca sa &oloseasca primul &ont din lista, daca nu este gasit parcurge lista pana in momentul in care intalneste un &ont instalat. "aca nu e$ista &onturi echi*alente, te$tul *a f afsat cu &ontul prestabilit de bro4ser. "aca este specifcat un nume generic, te$tul *a f afsat cu un &ont apartinand aceluiasi stil, in ca#ul in care &onturile specifcate in lista nu sunt disponibile. E$ista posibilitatea &olosirii unei palete largi de &onturi in crearea paginilor 4eb, nu doar a celor din lista limitata a &onturilor compatibile cu na*igatoarele. Solutia consta in inglobarea &ontului in cadrul paginii si trimiterea lui in mod automat in calculatorul *i#itatorului, adica, descarcarea si &olosirea lui automata. entru a ingloba un &ont intr-o pagina si a-l descarca, se &oloseste intructiunea ont-ace. %ceasta trebuie sa includa proprietatea ont-ail., urmata de numele &ontului si apoi trebuie indicata locatia pe ser*er de unde poate f descarcat &ontul respecti*. Codul CSS este urmatorul: •
ont-ace 9 ont-ail.:nue8ont src: url>locatie8ont? ;
8u poate f ales orice &ont pentru a f descarcat, acesta trebuie sa respecte un anume &ormat. Totusi, problema este ca nu e$ista un &ormat *alabil pentru toate na*igatoarele, de e$emplu nternet E$plorer &oloseste &onturi in &ormat 0eo&0 (obtinute cu autorul unui program numit E+T), iar o#illa &oloseste un &ormat 0ot&0.
2< Sta%ilirea diensiunii ontului
Cu autorul CSS se poate stabili dimensiunea &ontului &olosind *alori absolute (e$primate in di&erite unitati de masura: pi$eli, centimetri), procentuale, sau chiar relati*e. entru a defni dimensiunea &ontului in cadrul unei reguli trebuie specifcata proprietatea ont-si"e urmata de o *aloare a dimensiunii care poate lua una din urmatoarele tipuri de *alori: •
•
•
•
- unitate de asura - e$primata in pi$eli, puncte, inci sau centimetri - expresie a%soluta - $$-small, $-small, small, medium, large, $large si $$-large - e$presiile saller sau larger, ca raport cu elementul parinte - procent - un numar e$primat in procente (cu ), care indica marimea te$tului in raport cu dimensiunea elementului parinte
ata &orma generala a codului CSS pentru stabilirea dimensiunii &ontului: •
selector 9 ont-si"e:$aloare ;
Este bine ca pentru &oile de stil care &ormatea#a iesirea la imprimanta sa se &oloseasca ca unitati de masura punctele, cm sau mm. i$elii repre#inta, probabil, cea mai des utili#ata unitate de masura pentru stabilirea dimensiunii &ontului. i$elii nu repre#inta o masura &oarte sigura, dar, de obicei, pentru afsarea pe ecran, constituie o masura mai sigura decat dimensiunea in puncte. ata un e$emplu practic e$primat in pi$eli: h= > &ont-si#e:=?p$9 @
3< /ext inc linat
%tributul 0&ont-st5le0 permite scrierea te$telor inclinate in doua moduri: 0cursi*0 si 0oblic0. 8otiunile pot f con&undate, insa cursi*ul se re&era la *ersiunea unui &ont a carui caractere au o inclinare spre dreapta, iar oblicul este un &ont inclinat &ortat spre dreapta. entru a crea caractere cursi*e in cadrul unei reguli trebuie preci#ata proprietatea ont-st.le, ast&el:
•
selector 9 ont-st.le:$aloare ;
7nde 0*aloare0 poate f unul din urmatoarele cu*inte: noral, italic sau o%liHue ata un e$emplu: h= > &ont-st5le:italic9 @
aloarea noral se poate &olosi pentru a sterge &ormatarea cu caractere inclinate atunci cand aceasta este mostenita. 4< Irosiea ontului
ngrosarea este una dintre metodele utili#ate des pentru scoaterea in e*identa a unui te$t. CSS con&era mai multa /e$ibilitate in utili#area te$tului ingrosat decat elementul HT! b;, prin posibilitatea introducerii unei *alori proprietatii ont+eight, dupa cum urmea#a: •
%old L scrie &ontul &olosind caractere ingrosate
•
%older - mareste grosimea &ontului relati* la grosimea curenta
•
lighter L micsorea#a grosimea &ontului &ata de grosimea curenta
•
•
- o *aloare cuprinsa intre 1(( si &(( (multiplu de =RR) L repre#inta *aloarea ingrosarii, ba#ata pe *ersiunile alternati*e disponibile ale &ontului noral L elimina &ormatarea cu caractere aldine (ingrosate)
n ca#ul &olosiri *alorii cuprinse intre =RR si URR, QRR repre#inta *aloarea corespun#atoare te$tului normal, iar VRR *aloarea ingrosarii pentru stilul aldin. aoritatea &onturilor nu dispun de noua ponderi, ast&el ca daca este specifcata o *aloare care nu este disponibila, *a f &olosita o alta pondere. +orma generala pentru stabilirea grosimii &ontului este urmatoarea: •
selector 9 ont-+eight:$aloare ;
ata un e$emplu practic: h= > &ont- 4eight:bold9 @
5< AaJuscule ici
ausculele mici sunt &olosite de obicei in cadrul titlurilor, ele find obtinute prin con*ertirea literelor mici in mauscule cu o dimensiune mai mica decat mausculelor normale. %st&el se obtin cu*inte in care toate literele sunt scrise cu mauscule insa prima litera este mai inalta decat celelalte. Stabilirea unei reguli pentru mauscule mici se reali#ea#a prin utili#area proprietatii ont-$ariant cu *aloarea sall-caps. rin &olosirea *aloriinoral, *or f anulate celelalte *alori mostenite ale proprietatii ont-$ariant. +orma generala este urmatoarea: •
selector 9 ont-$ariant:$aloare ;
ata cum &ormatam un te$t dintr-o eticheta 0h=0 cu *aloarea 0smallcaps0: h= > &ont-*ariant:small-caps9 @
6< alori ultiple pentru ont
"eseori este util sa fe preci#ate toate elementele &ontului intr-o singura defnitie. entru a se reali#a acest lucru este &olosita proprietatea 0&ont0 urmata de *alorile pentru celelalte proprietati, separate prin spatiu. Sinta$a generala este urmatoarea: •
selector 9 ont:$al8ont-ail. $al8ont-st.le $al8ont$ariant $al8ont-+eight $al8ont-si"e $al8height ;
"aca o anumita *aloare din lista este omisa, na*igatorul *a &olosi *aloarea prestabilita. ata si un e$emplu practic de &olosire a mai multor *alori in aceeasi defnitie: h= > &ont:0%rial0,sans-seri& italic small-caps bold =Qpt9 @
Confgurarea textului Te$tele alcatuiesc o buna parte din paginile 4eb. etodele de afsare a te$telor prin controlul nu numai a &ontului, dimensiunii si culorilor, ci si prin alte elemente, pot imbunatati aspectul pagini si pot atrage atentia asupra anumitor elemente din te$t. 1< Spatiul intre litere
Spatierea se re&era la cantitatea de spatiu dintre literele unui cu*ant. Se poate aduaga sau reduce spatiul dintre litere &olosind proprietatealetter-spacing, urmata de o *aloare e$primata intr-o anumita unitate de masura, ce poate lua si *alori negati*e. Sinta$a generala este urmatoarea: •
selector 9 letter-spacing:$aloare ;
"aca *aloarea proprietatii este noral sau ( atunci spatierea *a f f$ata la *alorile implicite (&ara modifcari suplimentare). "aca se utili#ea#a o *aloare e$primata in e atunci dimensiunea re#ultata *a f calculata in raport cu cea a elementului parinte. E$emplu: h= > letter-spacing:=,?em9 @
- uteti &olosi si pi$eli (p$) 2< Spatiul dintre cu$inte
CSS da posibilitatea modifcarii spatiului intre cu*inte atat prin marire, cat si prin micsorare. Spatiul dintre cu*inte poate f modifcat &olosind proprietatea +ord-spacing, urmata de o *aloare e$primata intr-o anumita unitate, find de obicei stabilita in pi$eli. entru anularea spatierii intre cu*inte, *aloarea proprietatii trebuie sa fe: noral. Sinta$a generala este urmatoarea: •
selector 9 +ord-spacing:$aloare ;
O *aloare po#iti*a semnifca un plus de spatiu adaugat la *aloarea implicita, iar o *aloare negati*a reduce acest spatiu. "aca *aloarea este egala cu R atunci spatiul dintre cu*inte este f$at la *aloarea prestabilita, neproducand de &apt nici un e&ect, find similar cu *aloarea normal. ata un e$emplu in care marim spatiul intre cu*intele din eticheta 0h60 cu W pi$eli: h6 > 4ord-spacing:Wp$9 @
3< Spatiul intre linii
naltimea randurilor se re&era la spatiul dintre liniile paragra&ului. odifcarea spatiului intre linii poate a*ea ca e&ect o mai buna si usoara citire a te$tului in ca#ul in care aceasta este mai mare
(crea#a o regiune cu spatiu intre liniile de te$t). %lteori, daca inaltimea este mai mica (&olosita la randurile de titlu), poate con&eri un aspect mai stilat. entru a modifica inaltimea randurilor se &oloseste proprietatea line-height, urmata de o *aloare care poate f e$primata in trei moduri: •
•
•
- un nuar care inseamna multiplicarea dimensiunii &ontului cu numarul respecti* pentru a obtine *aloarea spatierii9 - o $aloare de tip a%solut, e$primata in pi$eli, puncte sau orice alta unitate de masura &olosita in CSS, care indi&erent de dimensiunea stabilita a &ontului, inaltimea liniei *a a*ea o *aloare e$acta9 - un procent, care stabileste inaltimea liniei ca find egala cu un anumit procent din dimensiunea &ontului &olosit pentru scrierea te$tului.
Sinta$a generala pentru modifcarea spatiului intre linii este: •
selector 9 line-height:$aloare ;
ata un e$emplu in care marim inaltimea liniei cu ?R din dimensiunea &ontului: h= > line-height:=?R9 @
Inaltimea liniei poate de asemenea denita si in cadrul proprietatii %font#size%, prin introducerea caracterului %&% urmat de valoarea pentru inaltimea randului, imediat dupa dimensiunea fontului. 'xemplu( h1 { font-size:12px/28px; }
4< Aariea >tipul? literelor
E$ista ca#uri in care se doreste afsarea te$tului cu un anume tip de litere. +olosind CSS, se poate specifca e$plicit ca te$tul sa apara cu mauscule initiale, mauscule, minuscule, combinat sau asa cum a &ost el scris. Cu autorul proprietatii text-transor se poate controla marimea literelor din te$t, indi&erent de modul cum a &ost el scris initial. entru a schimba tipul literelor dintr-un te$t, proprietatea texttransor *a f urmata de o *aloare care poate f:
•
•
•
•
capitali"e L pentru ca primul caracter din fecare cu*ant sa fe scris cu mauscula9 uppercase L pentru ca toate caracterele sa fe scrise cu mauscule9 lo+ercase - pentru ca toate caracterele sa fe scrise cu litere mici9 none L pentru ca te$tul sa fe afsat asa cum este.
Sinta$a generala este: •
selector 9 text-transor:$aloare ;
ata un e$emplu in care toate literele *or f afsate cu mauscule: h= > te$t-trans&orm:uppercase9 @
roprietatea 0te$t-trans&orm0 este utila atunci cand te$tele sunt create in mod dinamic (de e$emplu, in ca#ul in care ele pro*in dintro ba#a de date sau &orm HT!). 5< linierea textului
7n te$t poate f aliniat de la marginea din stanga, din dreapta, centrat sau la ambele margini (stanga-dreapta). roprietatea text-align o&era posibilitatea controlului asupra alinierii te$tului. "efnirea alinierii se &ace specifcand dupa proprietatea textalign una din *alorile: let, right, centersau Justi.. +orma generala este: •
selector 9 text-align:$aloare ;
roprietatea poate f aplicata numai elementelor la ni*el de bloc (", 7!, H$, p), *aloarea sa implicita find in maoritatea ca#urilor stabilita la *aloarea 0le&t0. ata un e$emplu in care te$tul din eticheta 0h60 este aliniat 0stangadreapta0: h6 > te$t-align:usti&59 @
- n ca#ul in care alinierea te$tului este 0stanga-dreapta0, spatierea cu*intelor si a literelor se schimba pentru a se obtine linii de aceeasi lungime.
6< linierea pe $erticala a textului
Cu autorul proprietatii $ertical-align se poate preci#a po#itia unor elemente (in linie) in raport cu te$tul din urul lor. %sta inseamna ca proprietatea poate f &olosita doar cu etichete in linie care nu determina un salt la linie noua, de obicei utili#andu-se cu eticheta 0span0. Sinta$a pentru utili#area proprietatii $ertical-align este: •
selector 9 $ertical-align:$aloare ;
entru defnirea alinierii pe *erticala a te$tului se &oloseste una din urmatoarele optiuni: •
super L pentru scrierea te$tului in stil e$ponent, deasupra liniei de ba#a9
•
su% - pentru scrierea te$tului in stil indice, sub linia de ba#a9
•
%aseline L pentru scrierea te$tului pe linia de ba#a9
•
•
- una din *alorile: 0top0, 0middle0, 0bottom0, 0te$t-top0, 0te$tbottom0 L pentru a alinia te$tul relati* la alinierea parintelui acestuia9 - *aloare procentuala L care ridica sau coboara linia de ba#a a elementului proportional cu dimensiunea &ontului elementului parinte.
ata un e$emplu in care te$tul din eticheta span; *a aparea ca e$ponent &ata de te$tul din stanga-dreapta lui: span > *ertical-align:super9 @
!< Forarea paragraelor
Cu autorul proprietatii text-indent se poate stabili ce spatiu suplimentar este inserat la inceputul primei linii de te$t dintr-un paragra&. entru aceasta, proprietatea text-indent este urmata de o *aloare e$primata intr-o unitate de masura (pi$eli sau em) sau in procente (proportional cu latimea paragra&ului). Sinta$a generala este: •
selector 9 text-indent:$aloare ;
alorile po#iti*e determina o indentare tipica (spre dreapta), in timp ce *alorile negati*e determina o indentare inspre argine, find necesar sau marirea umplerii (padding) sau marirea marginilor. ata un e$emplu de cod CSS in care *a f determinat un spatiu de 6R pi$eli la inceputul paragra&ului din eticheta p;: p > te$t-indent:6Rp$9 @
"aca se utili#ea#a o *aloare e$primata in unitati 0em0, atunci re#ultatul *a f relati* la dimensiunea &ontului elementului asupra caruia se aplica. entru eliminarea decalarii se utili#ea#a *aloarea R. #< plicarea eleentelor decorati$e
CSS permite ornarea te$tului prin scoaterea lui in e*identa in patru moduri: subliniere, supraliniere, taierea te$tului cu o linie sau crearea de te$te care clipesc. %plicarea de elemente ornamentale unui te$t se reali#ea#a prin proprietatea text-decoration, urmata de una din *alorile: •
underline L pentru a sublinia te$tul
•
o$erline L pentru a trasa o linie deasupra te$tului
•
line-through L pentru a taia te$tul cu o linie
•
%lin* L pentru a &ace te$tul sa apara si dispara intermitent
+orma generala este : •
selector 9 text-decoration:$aloare ;
entru a elimina decoratiile se &oloseste *aloarea 0none0. rin &olosirea acestei *alori se elimina si sublinierile lin3-urilor, chiar daca na*igatorul are prestabilit sa le arate subliniat. ata un e$emplu de cod in urma caruia lin3-urile nu *or mai f afsate subliniat: a:lin3 > te$t-decoration:none9 @
'lementul decorativ %blin)% a prezentat probleme, ind de curand eliminat de unele navigatoarelor.
&< Spatiile al%e
ntreruperile de linie si spatiile albe dintr-un document HT! sunt tratate ca un singur spatiu sau sunt ignorate, daca nu este utili#ata eticheta pre;. CSS permite afsarea acestor spatii, precum si a intreruperilor te$tului, utili#and proprietatea +hite-space, urmata de *aloarea 0pre0. +orma generala este: •
selector 9 +hite-space:$aloare ;
n locul cu*antului 0*aloare0 poate f adaugat: 0pre0, 0no4rap0 sau 0normal0 7tili#area *alorii 0no+rap0 impiedica trecerea la linia urmatoare. aloarea 0normal0 permite na*igatorului sa decida asupra modului de tratare a spatiilor. "e obicei, acestea *or f trans&ormate intr-un singur spatiu. ata un e$emplu in urma caruia spatiile albe si trecerea la linia noua *or f afsate asa cum au &ost scrise: p > 4hite-space:pre9 @
Spre deosebire de eticheta pre; care schimba &ontul cu unul monospatiat, *aloarea 0pre0 a proprietatii +hite-space nu are nici un e&ect asupra &ontului elementului la care se aplica.
Confgurari pentru culori si undal "aca HT! permitea confgurarea unor culori si elemente grafce de &undal doar pentru anumite elemente, CSS permite defnirea culorii si a &undalului pentru orice element din pagina 4eb. 1< Confgurarea undalului
Se poate schimba &undalul (bac3ground) intregii pagini, sau pentru un anumit element din pagina, fe el de tip ", paragra&, imagine, tabel sau &ormular. a) Culoarea undalului entru a schimba culoarea &undalului se utili#ea#a proprietatea %ac*ground-color, urmata de o *aloare care repre#inta numele culorii sau *aloarea ', e$primata in cod he$a. Sinta$a generala este:
•
selector 9%ac*ground-color:$aloare ;
"aca se &oloseste *aloarea 0transparent0 na*igatorul *a afsa culoarea prestabilita sau cea a elementului parinte. entru schimbarea &undalului intregii pagini se aplica aceasta proprietate selectorului 0bod50. ata un e$emplu in care culoarea de &undal a paginii este schimbata in albastru: bod5 > bac3ground-color:BRRRRG9 @
b) aginea de undal uteti utili#a pentru &undal si o imagine, pentru aceasta se &oloseste proprietatea %ac*ground-iage, urmata de adresa 7! a locatiei imaginii. Sinta$a generala este: •
selector 9 %ac*ground-iage:url>Kadresa8MLK? ;
7nde 0adresaA7!0 este calea si numele imaginii care *a f &olosita "aca in locul adresei 7! se &oloseste *aloarea 0none0, na*igatorul nu *a &olosi nici o imagine. ata un e$emplu in care pentru &undalul paginii este &olosita o imagine: bod5 > bac3ground-image:url(Xcale
c) Mepetarea iaginii de undal e langa posibilitatea afsarii unui element grafc ca &undal, CSS o&era si un mod de repetare a acestuia. entru a repeta imaginea de &undal se &oloseste proprietatea %ac*ground-repeat, urmata de o *aloare care poate a*ea una din urmatoarele optiuni: •
repeat L pentru a repeta imaginea pe toata supra&ata elementului respecti*9
•
repeat-x L pentru a repeta imaginea numai pe ori#ontala9
•
repeat-. L pentru a repeta imaginea numai pe *erticala9
•
no-repeat L pentru a afsa imaginea o singura data, &ara repetare.
+orma generala este: •
selector 9 %ac*ground-repeat:$aloare ;
ata un e$emplu de cod in care imaginea &olosita pentru &undalul paginii se *a repeta pe *erticala pe toata inaltimea documentului: bod5 > bac3ground-repeat:repeat-59 @
d) Controlul iaginii de undal CSS poate defni modul de tratare a &undalului la derularea paginii, pentru aceasta se &oloseste proprietatea %ac*groundattachent cu optiunea 0fxed0, pentru a lipi imaginea de &undal de &ereastra na*igatorului sau optiunea 0scroll0, pentru a permite derularea imaginii de &undal alaturi de elementul corespun#ator atunci cand *i#itatorul derulea#a pagina. Sinta$a generala este: •
selector 9 %ac*ground-attachent:$aloare ;
ata un e$emplu practic aplicat imaginii &olosita pentru &undalul paginii: bod5 > bac3ground-attachment:scroll9 @
e) 'o"itia iaginii de undal entru a po#itiona imaginii de &undal in &unctie de coltul din stangasus al elementului se utili#ea#a proprietatea %ac*groundposition urmata de doua *alori (coordonate $ si 5) separate prin spatiu, X$X pentru po#itia ori#ontala si X5X pentru cea *erticala. +orma generala a acestei proprietati este: •
selector 9 %ac*ground-position:$aloare ;
Coordonatele $ si 5 pot f e$primate ca *alori absolute sau ca procente. Se pot &olosi si cu*intele cheie: 0 let0, 0center0 sau 0right0 pentru coordonata $9 respecti* 0top0, 0center0 sau 0%otto0 pentru coordonata 5.
ata un e$emplu in care imaginea de &undal a paginii este po#itionata la =R pi$eli ($ si 5) relati* la coltul din stanga-sus: bod5 > bac3ground-position:=Rp$ =Rp$9 @
&) Sta%ilirea siultana a proprietatilor undalului Toate proprietatile &undalului pot f confgurate cu autorul proprietatii %ac*ground. Se poate stabili simultan printr-o lista de *alori proprietatile &undalului, enumerate in orice ordine si separate prin spatiu. Cand se utili#ea#a proprietatea %ac*ground, nu este necesar sa fe specifcate toate proprietatile, cele nespecifcate find stabilite la *aloare lor implicita. Sinta$a generala este: •
selector 9%ac*ground:$al8%g-color $al8%g-ig $al8%grepet $al8%g-attach $al8%g-position ;
aloarea implicita a proprietatii %ac*ground-color este 0transparent0. aloarea implicita a proprietatii %ac*ground-iage este 0none0. aloarea implicita a proprietatii %ac*ground-attachent este 0scroll0. aloarea implicita a proprietatii %ac*ground-position este 0top le&t0. ata si un e$emplu in care sunt aplicate mai multe proprietati pentru bac3ground, in aceeasi defnitie: di* > bac3ground:BeWeW&e url(Ximagine.pgX) ?R repeat @
- "-ul *a a*ea culoarea de &ndal 0BeWeW&e0, cu o imagine po#itionata la umatatea distantei D, J si care se repeta. 2< Sta%ilirea culorii din pri-plan
roprietatea color poate schimba culoare oricarui element, fe el te$t, linie ori#ontala sau element de tip &ormular. Sinta$a generala pentru utili#area acestei proprietati este: •
selector 9 color:$aloare ;
aloarea culorii poate f:
•
•
•
nuele culorii - una din cele =Y culori predefnite (red, green, blue, 4hite, sil*er, ...) $aloare in hexa - sub &orma Brrggbb $aloare MI) - sub &orma rgb(r, g, b), unde r, g, b pot f repre#entate prin numere intregi cuprinse intre R si 6?? sau procente de rosu, *erde si albastru cu *alori intre R si =RR.
ata un e$emplu de cod CSS in care culoarea te$tului din eticheta 0h10 este defnita *erde: h1 > color:green9 @
- Pentru o lista cu mai multe culori specice, vizitati pagina( *ista coduri culori
Controale pentru chenare si afsarea eleentelor ndi&erent daca o eticheta este de sine statatoare sau imbricata in alte etichete, aceasta poate f tratata ca un element distinct pe ecran si poate f controlata prin intermediul CSS. Orice element creat intr-o &oaie de stil este pre#entat in propriul lui cadru. 8otiunea de element se re&era la componentele unui document HT!, confgurate prin intermediul etichetelor HT!. Caseta (cadrul elementului) dispune de numeroase proprietati, intre care se numara: marginile, chenarul, completarea (umplerea, cunoscuta ca 0padding0), latimea si inaltimea, care pot f modifcate cu autorul CSS. Elementele HT! au patru laturi (sus, dreapta, os si stanga) la care se pot aplica proprietatile CSS specifce, restul proprietatilor CSS (&ont, te$t, culoare, &undal) se aplica in continutului casetei. Continutul poate include te$te, liste, &ormulare sau imagini. 1< Latiea si inaltiea unui eleent
!atimea si inaltimea elementelor pot f specifcate cu autorul proprietatilor +idth si height. n mod prestabilit acestea sunt determinate automat de catre na*igator, find egale cu necesarul afsarii intregului continut.
entru defnirea latimii si inaltimii se &olosesc urmatoarele tipuri de *alori: •
•
•
- o *aloare de tip nueric, de obicei in pi$eli9 - un procent, care stabileste o *aloare proportionala in &unctie de cea a elementului parinte9 - *aloarea auto, care &oloseste latimea si inaltimea calculata de na*igator, si care repre#inta cantitatea de spatiu ma$im pe care o poate ocupa elementul pentru afsarea intregului continut.
Sinta$a generala pentru confgurarea latimii si inaltimii este: •
selector 9 +idth:$aloare height:$aloare ;
ata un e$emplu in care elementul cu id0unAid0 *a a*ea latimea de 1RR pi$eli si inaltimea de ?RR pi$eli: BunAid > 4idth:1RRp$9 height:?RRp$9 @
2< Aarginile unui eleent
roprietatea argin permite stabilirea distantei dintre un element si alte elemente alaturate, prin specifcarea unei *alor pentru marginea din fecare latura (sus, dreapta, os, stanga). "aca specifcati cele Q *alori in aceeasi defnitie, acestea repre#inta marginile elementului in urmatoarea ordine: sus, dreapta, os, stanga. "aca specifcati doar o *aloare, aceasta *a f aplicata tuturor marginilor. n ca#u in care specifcati doua sau trei *alori, atunci *alorile care lipsesc sunt copiate dupa *alorile marginilor opuse. Sinta$a generala pentru confgurarea marginilor unui selector este: •
selector 9 argin:$aloare7$alori ;
Tipul de *aloare &olosit poate a*ea urmatoarele optiuni: •
•
- o *aloare de tip lungie >nuerica? L care poate f si negati*a9 - o *aloare procentuala >procent? L crea#a o margine proportionala cu latimea elementului parinte9
•
- *aloarea auto L lasa controlul marginilor la deci#ia na*igatorului.
ata un e$emplu in care etichetele " *or a*ea distanta pentru marginea de sus =R pi$eli, dreapta ? pi$eli, os W pi$eli si in stanga =? pi$eli: di* > margin:=Rp$ ?p$ Wp$ =?p$9 @
E$ista posibilitatea de a stabili *aloarea marginii doar pentru o singura latura, &ara a tine cont de celelalte margini. entru aceasta sunt &olosite proprietatile argin-top, argin-%otto, arginlet si argin-right cu aceleasi *alori ca si in ca#ul proprietatii argin, dupa cum puteti *edea mai os. •
selector 9 argin-top:$aloare ; selector 9 argin-%otto:$aloare ; selector 9 argin-let:$aloare ; selector 9 argin-right:$aloare ;
3< Chenarul unui eleent
roprietatea %order permite stabilirea simultana a atributelor chenarului pentru toate cele patru laturi ale casetei. %ceasta &oloseste 1 *alori distincte, pentru a confgura latimea (grosimea), stilul si culoarea liniei bordurii. Sinta$a generala pentru defnirea chenarului este: •
selector 9 %order:$al8grosie $al8stil $al8culoare ;
7nde •
- prima *aloare (*alAgrosime) repre#inta grosimea chenarului si poate f una din urmatoarele tipuri: •
o - o *aloare de tip lungime (*aloarea R determina anularea afsarii chenarului)9 - un cu*ant cheie (thin, ediu, thic* ) care caracteri#ea#a o dimensiune relati*a.
•
•
- a doua *aloare (*alAstil) repre#inta numele stilului atribuit chenarului (*aloarea 0none0 anulea#a afsarea chenarului)9 - ultima *aloare (*alAculoare) repre#inta culoarea, e$primata in cod he$a sau *aloare '.
ata un e$emplu in care di*-urile *or a*ea o bordura groasa de = pi$el, solid si culoare albastra: di* > border:=p$ solid blue9 @
- ot f &olosite si proprietati separate pentru fecare: 0border-4idth0, 0border-st5le0 si 0border-color09 pre#entate in continuare. 7n atribut care poate f &olosit in confgurarea chenarului este %order-+idth, acesta &urni#ea#a o metoda rapida pentru stabilirea latimii celor patru laturi din urul unei casete. Sinta$a generala este: •
selector 9 %order-+idth:$aloare ;
"aca specifcati toate cele patru *alori, ele sunt aplicate in ordinea: sus, dreapta, os, stanga. "aca specifcati doar o *aloare, ea *a f aplicata tuturor marginilor. "aca &olositi doua sau trei *alori, *alorile care lipsesc sunt copiate din *alorile marginilor opuse lor in caseta. %spectul bordurii poate f stabilit prin atributul %order-st.le9 stilul este aplicat celor patru margini si este defnit ast&el: •
selector 9 %order-st.le:$aloare ;
entru specifcarea *alorii, pot f &olosite urmatoarele tipuri:
7ltimele patru *alori sunt repre#entate tridimensional, iar in ca#ul in care ele nu sunt acceptate de catre na*igator, in locul lor se *a &olosi *aloarea cu linie plina. 7n alt atribut care poate f utili#at in confgurarea chenarului este %order-color, acesta stabileste culoarea pentru toate cele patru laturi ale chenarului si &oloseste pentru *aloarea ei un singur cu*ant cheie e$primat in cod he$a, *aloare ' sau numele culorii. Sinta$a generala este: •
selector 9 %order-color:$aloare ;
uteti stabili culoarea fecarei margini si separat, &olosind proprietatile: •
%order-top-color, %order-right-color, %order-%otto-color s i %order-let-color
+iecare latura a chenarului poate a*ea *alori confgurate in mod separat (prin care se stabilesc stilul si culoarea fecarei borduri din urul elementului) dupa cum este pre#entat mai os: •
selector 9 %order-top:grosie stil culoare ; selector 9 %order-%otto:grosie stil culoare ; selector 9 %order-let:grosie stil culoare ; selector 9 %order-right:grosie stil culoare ;
4< daugarea spatiului in interior, in Jurul eleentului
roprietatea padding adauga o cantitate de spatiu suplimentar in urul continutului elementului, in interiorul chenarului, intre bordura si continut. +orma generala pentru utili#area acestei proprietati este: •
selector 9 padding: $aloare7$alori ;
aloarea pentru completarea spatiului poate f una din urmatoarele: •
•
- o *aloare de tip lungie - o *aloare procentuala L crea#a umplerea in raport cu latimea elementului parinte.
Cand specifcati toate cele patru *alori, ele sunt aplicate in ordinea: sus, dreapta, os, stanga. "aca specifcati doar o *aloare, aceasta *a f aplicata tuturor celor patru directii. "aca specifcati doua sau trei *alori, atunci *alorile care lipsesc sunt copiate dupa *alorile laturilor opuse. ata un e$emplu in care etichetele " *or a*ea distanta padding: sus Q pi$eli, dreapta 6 pi$eli, os 1 pi$eli si in stanga 6 pi$eli: di* > padding:Qp$ 6p$ 1p$ 6p$9 @
+iecare latura a chenarului poate a*ea proprietatea padding confgurata separat: •
selector 9 padding-top:$aloare ; selector 9 padding-%otto:$aloare ; selector 9 padding-let:$aloare ; selector 9 pading-right:$aloare ;
5< Bleente oat
CSS o&era posibilitatea de a 0in&asura0 anumite elemente in urul altora. %cest lucru se &ace prin intermediul proprietatii oat, care determina o mutare &ortata a elementului in directia data de *aloarea mentionata, lasand loc liber in spatiul opus directiei, care *a f ocupat de urmatorul element din codul HT!. Sinta$a generala pentru utili#area acestei proprietati este: •
selector 9 oat:$aloare ;
7nde 0*aoare0 poate f0 let, right si none aloarea 0none0 permite elementului sa fe plasat acolo unde este posibil, iar celelalte *alori &ortea#a plasarea elementului in stanga sau in dreapta ecranului, te$tul din e$teriorul etichetei HT! respecti*e *a f plasat in partea opusa, in urul elementului. ata un e$emplu in care elementul cu id0unAid0 *a f &ortat sa fe po#itionat in dreapta celorlaltor elemente: BunAid > /oat:right9 @
6< nularea plasarii unui eleent in spatiul eli%erat de oat
%semanator cu actiunea etichetei HT! br;, care trece pe un nou rand elementele ce o preced, este si proprietatea clear. Cu autorul acesteia se poate anula ocuparea unui spatiu care a &ost lasat liber de un element care utili#ea#a proprietatea 0/oat0. Sinta$a generala pentru utili#area proprietati clear: •
selector 9 clear:$aloare ;
7nde 0*aloare0 specifca latura in urul careia este inter#isa in&asurarea te$tului si poate lua *aloarea: let, right sau %oth. Se poate &olosi si *aloarea 0none0, ceea ce are ca e&ect anularea altor atribute ale proprietatii clear. "e e$emplu, daca a*eti un " po#itionat &ortat in dreapta, un paragra&ul care urmea#a dupa el *a f afsat in stanga "-ului respecti*. entru a anula acest lucru, ca paragra&ul sa fe afsat sub ", se &oloseste proprietatea 0clear0, precum in e$emplul urmator: BunAdi* > /oat:right9 @ p > clear:both9 @
!< f sarea si ascunderea eleentelor
roprietatea displa. poate stabili daca un element *a f de tip bloc3, inclu#and linii noi deasupra si dedesubtul sau, daca este inclus in linie, daca este tratat sub &orma de lista sau daca elementul este afsat sau nu. Sinta$a generala pentru aceasta proprietate este: •
selector 9 displa.:$aloare ;
7nde 0*aloare0 poate f una din urmatoarele optiuni:
•
•
•
•
list-ite L plasea#a in prima linie a te$tului un indicator pentru articole de tip lista, dar si un salt deasupra si dedesubtul articolului9 %loc* L defneste eticheta ca find de tip bloc si plasea#a un salt la linie noua deasupra si dedesubtul ei9 inline L defneste eticheta ca o eticheta in linie si elimina caracterele de salt la linie noua9 none L determina ascunderea elementului si neafsarea lui de catre na*igator9 codul acestuia este incarcat insa continutul sau nu e afsat in pagina.
ata un e$emplu in care elementele li; sunt ase#ate in linie, iar un element cu id0unAid0 *a f ascuns in pagina: li > displa5:inline9 @ BunAid > displa5:none9 @
Proprietatea display nu trebuie confundata cu visibility . Spre deosebire de visibility care nu aseaza elementul dar lasa liber spatiu pentru element, sintaxa display: noneelimina complet elementul din pagina.
Controale de po"itionare o#itionarea elementelor &olosind CSS este mai precisa decat prin intermediul obiectelor grafce HT! sau a tabelelor, afsarea &acandu-se mult mai rapid. rin intermediul CSS este permisa po#itionarea e$acta sau relati*a a elementelor intr-o &ereastra sau in raport cu alte elemente. +ereastra na*igatorului este supra&ata in care sunt afsate toate elementele. Ea poate f redimensionata sau po#itionata pe ecran, sau poate f di*i#ata in alte &erestre prin intermediul cadrelor. Toatele elementele amplasate in &ereastra sunt po#itionate relati* la coltul din stanga-sus. 1< Sta%ilirea odului de po"itionare
rin utili#area proprietatii position se poate specifca po#itia elementului in pagina 4eb. 7n element poate a*ea una din urmatoarele *alori de po#itionare: static, relati$e, a%solut si fxed.
Tipul de po#itie indica na*igatorului cum sa trate#e amplasarea unui element intr-o &ereastra. a? 'o"itionarea statica aloarea initiala, prestabilita, a po#itionarii elementelor in &ereastra este 0static0. Cand nu este specifcata o po#itionare 0relati*a0, 0absoluta0 sau 0f$a09 elementele sunt dispuse unul dupa altul in interiorul documentului. Sinta$a pentru specifcarea po#itionarii static este: •
selector 9 position:static ;
- 7n element static nu poate f repo#itionat in mod e$plicit. %? 'o"itionarea relati$a 7n element cu po#itionare 0relati*a0 este amplasat la locul sau in cadrul &erestrei sau a elementului parinte, in sensul ca el apare dupa toate elementele dinaintea sa, respecti* inaintea tuturor elementelor amplasate dupa el. Sinta$a pentru specifcarea po#itionarii relati$e este: •
selector 9 position:relati$e ;
- Elementele po#itionate relati* pot f mutate din locatia lor &olosind proprietatile 0top0 si 0le&t0 sau 0bottom0 si 0right0. c? 'o"itionarea a%soluta o#itionarea absoluta are ca e&ect crearea unui element nea&ectat de restul documentului, plasarea lui in &ereastra find &acuta intr-o locatie precisa, defnita prin intermediul coordonatelor x si ., indi&erent de po#itiile altor elemente. Sinta$a pentru specifcarea po#itionarii a%solute este: •
selector 9 position:a%solute ;
- Originea (punctul de coordonate R,R) este coltul din stanga-sus al &erestrei sau al obiectului in care este inclus elementul po#itionat absolut.
d? 'o"itionarea fxa o#itionarea o#itionarea f$a a unui element este apro$imati* la &el cu cea absoluta, cu di&erenta ca la derularea paginii elementul f$at ramane pe po#itia lui initiala, &ara a se derula. Sinta$a pentru specifcarea po#itionarii fxed este: fxed este: •
selector 9 position:fxed ;
2< 'o"itionarea in raport cu latura de sus, respecti$ stanga
"upa stabilirea tipului de po#itionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului sau parinte, &olosind proprietatile top si top si let +orma generala este: •
selector 9 top:$aloare let:$aloare ;
- 7nde 0*aloare0 poate f: •
•
•
- o *aloare de tip numeric, care defneste distanta dintre laturile &erestrei sau a elementului parinte si laturile elementului9 - o *aloare procentuala, care semnifca deplasarea &ata de laturile &erestrei sau a elementului parinte9 - *aloarea auto, care permite na*igatorului sa calcule#e el insusi *aloarea.
ot f utili#ate proprietatile top si top si let sau let sau %otto si %otto si right, right, de asemenea pot lua si *alori negati*e. n ca#ul in care este *orba despre elemente elemente imbricate, acestea *or f deplasate solidar cu elementul parinte daca acesta are position(relative are position(relative.. ata un e$emplu in care o eticheta h=; este po#itionata la o distanta de =R pi$eli &ata de marginile sus si stanga ale unui " in interiu caruia se a/a: st5le t5pe0te$t position:relati*e9 @ h= > top:=Rp$9 le&t:=Rp$9 @
di*; h=;Te$t...
3< 'o"itionarea in raport cu latura de Jos, respecti$ dreapta
n unele ca#uri este necesara po#itionarea in raport cu laturile de os, respecti* respecti* dreapta. n acest acest ca# originea *a f coltul din din dreapta os al &erestrei &erestrei sau al elementului parinte. parinte. "efnirea marginilor &ata de latura de os, respecti* din dreapta se &ace cu autorul proprietatilor %otto si %otto si right9 right9 ele pot lua aceleasi *alori ca si 0le&t0 si 0top0, de asemenea pot f combinate cu acestea. +orma generala este: •
selector 9 %otto:$aloare right:$aloare ;
n ca#ul in care pentru acelasi element sunt stabilite atat marginile 0top < le&t0 cat si 0bottom < right0, re#ultatul afsat depinde de na*igator, dar in mod prestabilit se &olosesc po#itiile top si top si let. let. 4< 'o"itionarea in spatiul 30
Elementele pot primi o a treia dimensiune, si anume ase#area lor in sti*a, unele in raport cu altele. %mplasarea se &ace in mod automat, incepand cu *aloarea R si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HT! si relati* la elementele parinte. entru po#itionarea elementelor elementelor in sti*a unele peste altele se &oloseste proprietatea "-index. "-index. aloarea acestei proprietati find relatia tridimensionala a elementului in raport cu alte elemente din &ereastra. Sinta$a generala pentru proprietatea "-index este: "-index este: •
selector 9 "-index:$aloare ;
7nde 0*aloare0 este un numar intreg, po#iti*, R sau negati*. negati*. n ca#ul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic. 7tili#area unei *alori negati*e determina amplasarea elementului
dedesubtul parintelui sau cu atatea ni*eluri cu cate indica indexul ". 5< ncluderea unui eleent a%solut intr-un eleent relati$
7n element poate f po#itionat e$act in cadrul unei &erestre, sau el poate f inclus intr-un intr-un element cu po#itionare relati*a. n ca#ul includerii unui element po#itionat absolut intr-un intr-un element po#itionat relati*, elementul absolut este po#itionat &olosind ca origine coltul din stanga-sus al elementului relati*. relati*. ata un e$emplu de cod HT! in care o eticheta di*; (cu class0absolut0) este inclusa (imbricata) in alta eticheta di*; (cu class0relati*0): di* classrelati*; ... di* classabsol classabsolut; ut; ...
entru a &ace o po#itionare absoluta a elementului inclus (care are class0absolut0) in elementul parinte (care are class0relati*0), caruia ii defnim o po#itionare relati*a9 scriem in &oaia de stil urmatorul cod: .relati* >position:relati*e9 top:1Rp$9 le&t:?Rp$9 @ .absolut >position:absolute9 top:=?p$9 le&t:Rp$9 @
6< ncluderea unui eleent relati$ intr-un eleent a%solut
Cand un element po#itionat absolut este inclus intr-un element po#itionat relati*, primul &oloseste ca origine coltul din stanga-sus al parintelui. n ca#ul in care un element po#itionat relati* este plasat in interiorul unui element po#itionat absolut, acesta se *a deplasa o data cu elementul absolut. ata un e$emplu de cod HT! in care o eticheta di*; (cu class0relati*0) class0relati*0) este inclusa (imbricata) in alta eticheta di*; (cu ( cu class0absolut0): di* classabsolut; ... di* classrelati classrelati*; *; ...
entru a &ace o po#itionare relati*a a elementului inclus (care are class0relati*0) in elementul parinte (care are class0absolut0), caruia ii defnim o po#itionare absoluta9 adaugam in &oaia de stil urmatorul cod: .absolut >position:absolute9 top:6Rp$9 le&t:6?p$9 @ .relati* >position:relati*e9 top:=Rp$9 le&t:?p$9 @
Confgurari pentru $i"i%ilitate si ouse CSS o&era posibilitatea de a afsa sau ascunde unele elemente sau parti ale unor elemente. 1< Sta%ilirea $i"i%ilitatii unui eleent
roprietatea $isi%ilit. poate controla &aptul ca un element sa fe *i#ibil sau nu. Chiar daca elementul este in*i#ibil, el *a ocupa un spatiu liber in pagina, acolo unde ar f trebuit sa fe afsat. Sinta$a pentru &olosirea acestei proprietati este urmatoarea: •
selector 9 $isi%ilit.:$aloare ;
7nde 0*aloare0 poate f: •
hidden L ascunde elementul de la afsarea pe ecran9
•
$isi%le L afsea#a elementul9
•
inherit L *i#ibilitatea elementului este mostenita de la elementul parinte.
ata un e$emplu in urma caruia te$tul din interiorul etichetei h=; *a f in*i#ibil: h= > *isibilit5:hidden9 @
Pentru a ascunde complet asarea unui element in pagina, se poate utiliza formula display:none;
2< Sta%ilirea supraetei $i"i%ile a unui eleent
"efnirea supra&etei *i#ibile a unui element stabileste portiunea din elementul respecti* care este *i#ibila in &ereastra na*igatorului. estul continutului acelui element nu dispare, ci este in*i#ibil pentru *i#itator.
entru a defni &orma regiunii *i#ibile se &oloseste proprietatea clip cu *aloarea rect (defnita prin patru *alori separate prin spatii si incadrate de parante#e rotunde) +orma generala este: •
selector 9clip:rect>$al1 $al2 $al3 $al4? ;
- alorile construesc un patrulater, defnesc distanta dintre coltul din stanga-sus al elementului si laturile de sus, dreapta, os si stanga ale regiunii *i#ibile. ata un e$emplu de cod CSS in care supra&ata *i#ibila a unui element cu id0*i#0 *a f cea incadrata de *alorile atributului rect: B*i# > clip: rect(6? 1RR =6? =RR)9 @
"aca se &oloseste *aloarea 0auto0, na*igatorul calculea#a dimensiunea regiunii *i#ibile la =RR. egiunile de *i#ibilitate pot a*ea doar &orma dreptunghiulara. 3< 0ef nirea po"itiei depasirii
7neori elementele nu sunt in totalitate continute in casetele lor, caseta nefind sufcient de mare, ast&el ca o parte a continutului nu este afsata sau depaseste marginea stabilita. roprietatea o$ero+ permite tratarea continutului in e$ces, controland ast&el modul de afsare sau nu al acesuia. +orma generala a proprietatii o$ero+ este: •
selector 9 o$ero+:$aloare ;
- 7nde 0*aloare0 stabileste unde *a f plasata depasirea, &olosind una din *alorile: •
•
•
•
$isi%le L e$tinde caseta elementului ast&el incat sa incapa tot continutul sau, ignorand delimitarea supra&etei *i#ibile. Este optiunea prestabilita. hidden L ascunde continutul care nu incape in caseta elementului, si impiedica aparitia barei de derulare. scroll L adauga intotdeauna bare de derulare elementului, pentru ca sa se poata accesa tot continutul elementului. auto L barele de derulare apar doar atunci cand este necesar.
ata un e$emplu in care toate elementele cu class0e$tradim0 *or a*ea bare de scroll: .e$tradim > o*er/o4:scroll9 @
entru defnirea proprietatii 0o*er/o40 doar pentru una din directii: ori#ontala sau *erticala9 adica bara de derulare sa fe disponibila sau nu doar pentru una din aceste directii, se poate &olosi o alta *arianta a acestei proprietati, si anume: •
o$ero+-x:$aloare - pentru ori#ontala
•
o$ero+-.:$aloare - pentru *erticala
- 7nde 0*aloare0 poate f una din *alorile pre#entate mai sus. 4< spectul indicatorului de ouse
n mod normal, aspectul indicatorului de mouse este determinat de bro4ser. 8a*igatorul modifca indicatorul de mouse in &unctie de continutul deasupra caruia se a/a acesta. 7neori este dorita anularea sau completarea pre&erintelor na*igatorului si confgurarea unor aspecte personali#ate. roprietatea cursor auta la stabilirea aspectului unui indicator de mouse. Sinta$a este urmatoarea: •
selector 9 cursor:$aloare ;
7nde 0*aloare0 poate a*ea urmatoarele nume pentru indicatoarele de mouse:
- "aca se &oloseste *alorea 0auto0, na*igatorul decide asupra tipului de indicator &olosit.
'seudo-clase 'seudo-clasele permit adaugarea de stiluri CSS doar la anumite elemente ale aceluiasi selector, id sau clasa. "e e$emplu, cand defniti un stil pentru un anumit tag HT! sau pentru o clasa, continutul din toate aceleasi tag-uri sau aceeasi clasa *or a*ea acel stil, iar daca doriti sa defniti un stil di&erit pentru primul (sau ultimul) din acele tag-uri ori pentru primul continut defnit de aceeasi clasa, puteti reali#a asta &olosind pseudo-clasele. "e asemenea, acestea pot modifca stilul grafc al elementelor cand mouse-ul actionea#a asupra lor. Pentru a functiona in Internet 'xplorer + este necesar declararea -D/CT0P'$, care se adauga la inceputul documentului HT!, mai multe detalii (in engle#a) gasiti %ici. Sinta$a pentru utili#area pseudo-clasei este urmatoarea: eleent:pseudo-clasa 9 proprietate:$aloare ; - unde 0element0 este un selector, id sau clasa, iar 0pseudo-clasa0 este una din e$presiile urmatoare: •
acti$e - %dauga un stil unui element cand acesta este acti*at (actionat prin clic) pe el)
•
•
•
•
•
frst-child - %dauga un stil unui element care este primul din acel tip de elemente ocus - +olosit pentru input-urile de &ormulare, le adauga un stil cand acestea sunt acti*e (dupa clic) si cursorul de text in ele ) ho$er - %dauga un stil unui element cand mouse-ul se a/a deasupra lui lang>cu$ant? - %dauga un stil unui element care are atributul lang1%cuvant% (nu e suportat de Sa&ari si E mai mic de W) last-child - %dauga un stil unui element care este ultimul din acel tip de elemente
•
lin* - %dauga un stil unui lin3 ne*i#itat
•
$isited - %dauga un stil unui lin3 *i#itat
Ca sa intelegeti mai bine cum &unctionea#a si ce &ac pseudo-clasele, studiati e$emplele care sunt pre#entate in continuare. 1< 'seudo-clase cu selector
Selectoarele &ac re&erire la tag-urile HT! pe care le denumesc (de e$.: p pentru p;, li pentru li;, di$ pentru di*;, etc.). n e$emplul urmator este &olosit 0frst-child0 pentru paragra&: P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< color:blue9 @
- e#ultatul *a f urmatorul, primul paragra& *a a*ea te$tul albastru. 7n te$t din primul paragra& Continut din al doilea paragra& Te$tul din al treilea paragra& ata si un e$emplu cu 0ho*er0 pentru li; P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< bac3ground-color:BWW&eWW9 @
- Cand po#itionati mouse-ul deasupra fecarui !, acesta *a a*ea bac3ground *erde, testati mai os •
Te$t list = ...
•
Te$t list 6 ...
•
Te$t list 1 ...
2< 'seudo-clase si clase
Trebuie stiut ca pseudo-clasele nu sunt acelasi lucru ca si clasele, acestea find cele care &ac re&erire la *aloarea atributului 0class0 si in CSS se adauga dupa un caracter punct (<).
ata un e$emplu in care sunt &olosite pseudo-clasele 0lang(cu*ant)0 ( pt. I' incepand cu versiunea 2) sl 0last-child0 la o clasa 0.testX P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< bac3ground-color:BWW&eWW9 @ .test:lang(da) > color:blue9 @
- Obser*ati ca stilul defnit pentru 0.test:last-child0 *a f aplicat doar ultimului element care are clasa 0test0, iar 0lang(da)0 se aplica numai elementului care pe langa class1%test% are si lang1%da%. - e#ultatul este acesta: •
Te$t in list cu class = ...
•
Te$t in list cu class 6 ...
•
Te$t in list cu class 1 ...
ata un alt e$emplu in care sunt combinate o clasa (test), un selector (tag i;) si 0frst-child0: P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional<
.test i:frst-child > &ont-4eight:bold @
- Stilul CSS *a f aplicat primelor tag-uri i; din fecare clasa 0.test0, dupa cu puteti *edea mai os a!ag!af cu mai multe tag-uri : text oblic, alt test oblic
%lt paragra&: si! inclinat si bold , alt sir italic - "aca doriti ca stilul sa fe aplicat tuturor etichetelor i; din prima clasa, scrieti:
n CSS, id-urile &ac re&erire la *aloarea atributului " si se scriu dupa caracterul D. ata un e$emplu in care este &olosita pseudo-clasa 0ho*er0 impreuna cu un ", iar 0&ocus0 impreuna cu o clasa (focus nu functioneaza pe versiuni de I' mai mici de 2) P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< bac3ground-color:Bdada&e9 @ .test:&ocus > bac3ground-color:Beded&e9 @
bod5; &orm action00 method0post0; input t5pe0te$t0 class0test0 <;br <; te$tarea cols06R0 ro4s0?0 class0test0;
- Stilul CSS defnit in acest e$emplu &ace ca atunci cand mouse-ul se a/a deasupra butonului (care are id0unid0) acesta sa isi schimbe culoarea de &undal, iar cand se da clic3 pe #onele de te$t din &ormular (care au class0test0), la &el se modifca culoarea bac3ground. - e#ultatul este urmatorul &ormular.
seudo-elemente
'seudo-eleentele permit adaugarea de stiluri CSS anumitor parti din continutul unui element HT!. "e e$emplu, cand defniti un stil pentru un anumit tag HT! (sau pentru o clasa), tot continutul incadrat de acel tag *a a*ea acelasi stil, iar daca *reti sa adaugati un stil CSS di&erit primei litere sau primului rand dintr-un paragra&, se &olosesc pseudo-elemente. Sinta$a pentru utili#area pseudo-elementelor este urmatoarea: o%iect8css:pseudo-eleent 9 proprietate:$aloare ; - unde 0obiectAcss0 este un selector, id sau clasa, iar 0pseudoelement0 este una din e$presiile urmatoare: •
ater - %dauga continut dupa un element HT! (nu e suportat de versiuni I' mai mici de 2 )
•
%eore - %dauga continut inaintea unui element HT! ( nu e suportat de versiuni I' mai mici de 2)
•
frst-letter - %dauga un stil css primului caracter dintr-un te$t
•
frst-line - %dauga un stil primei linii dintr-un te$t
Ca sa intelegeti mai bine cum &unctionea#a si ce &ac pseudoelementele, iata cate*a e$emple cu fecare in parte. =. a&ter
entru a adauga un anumit continut (te$t, imagine, sunet .4a*) prin CSS, se &oloseste proprietatea content si *aloarea ce repre#inta continutul respecti*: te$t se adauga intre ghilimele, iar imagine sau sunet .4a* se adauga &olosind ca *aloare url>adresa8fsier? n urmatorul e$emplu *a f adaugat un continut te$t dupa fecare element hQ;. P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< content:0arlo09 color:blue9 @
- e#ultatul *a f cel de os. - Obser*ati cum este adaugat cu*antul 0arlo0, imediat dupa
ultimul caracter al fecarui element hQ;, ca si cum ar &ace parte din te$tul initial, dar putand a*ea stil propriu. Contin"t"l din p!i#"l tag $% &&& 'a!lo (n alt text din alt ele#ent $% 'a!lo
- n loc de selector puteti &olosi si " sau clasa. 6. be&ore
)eore este similar cu 0a&ter0, continutul se adauga la &el, dar la inceputul elementului. entru o mai mare di&ersitate, puteti combina pseudo-clasele cu pseudo-elemente &olosind sinta$a: o%iect8css:pseudo-clasa:pseudo-eleent 9 proprietate:$aloare ; - Pseudo#clasele sunt explicate in lectia anterioara. Ca sa *edeti e&ectul, iata un e$emplu aplicat cu 0be&ore0 acelorasi tag-uri HQ din e$emplul precedent. P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< content:0arlo- 09 color:blue9 @
- "e data aceasta continutul 0arlo- 0 este adaugat imediat in &ata si doar primului element hQ; ( precizat prin 3rst#c4ild3), dupa cum puteti *edea mai os:
'a!lo- Contin"t"l din p!i#"l tag $% &&& (n alt text din alt ele#ent
%$- "aca *reti sa adaugati in loc de continut te$t o imagine, de e$emplu .gi&, scrieti codul CSS ast&el: h4:frst-child:%eore 9 content:url>iagine
First-letter aplica un stil CSS doar primului caracter dintr-un te$t. n urmatorul e$emplu este aplicat un stil CSS primului caracter din continutul fecarui element defnit printr-o clasa 0test0. P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< &ont-si#e:6?p$9 color:red9 @
- "upa cum puteti *edea in re#ultatul de mai os, prima litera din continutul fecarui tag ce are class0test0 este de culoare rosie si marime 6?p$.
Te$tul din paragra& ... %lt continut int-un tag ", dar cu aceeasi clasa. Q. f rst-line
First-line aplica un stil CSS doar primei linii din continutul elementului HT!. Studiati e$emplul urmator: P"OCTJE html 7!C 0-<<1C<<"T" DHT! =.R Transitional< &ont-4eight:bold9 color:blue9 @
- e#ultatul este urmatorul, com&orm codului CSS, prima linie din fecare element cu class0test0 are te$tul albastru si ingrosat. 'aragra cu ai ulte linii % doua linie ... %lta linie din acelasi paragra&. Continut pe doua linii intr-un tag 0 % doua linie din ".
Creare Aeniu 0u%lu cu CSS •
eniu Ori#ontal-ertical
n acest tutorial puteti in*ata cum sa creati Aeniu 0u%lu cu CSS (orizontal si vertical). Meniu dublu inseamna ca lista meniului contine inca un eniu cu alte lin3-uri (denumit si Sub-eniu).
n general, eniurile sunt create &olosind tag-urile ul; (sau ol;) si li; tags. - Presupunand ca de5a stiti CSS si 6TM*, aplicati &adaptati codurile prezentate mai 5os, personalizandu#le si cu alte elemente CSS, dupa cum doriti sa creati designul 7colturi rotun5ite, imagini pt. fundal, etc.8. Aeniu ertical 0u%lu
Aeniul $ertical este de obicei adaugat in marginile laterale ale paginii. ata un e$emplu simplu (mutati cursorul mouse#ului pe el): agina personala N /utorialle CSS N /utoriale @/AL Contact - Codul HT! si CSS de mai os crea#a acest meniu ( Proprietatile CSS trebuie adaugate in zona -4ead$, sau intr#un sier %.css%): st5le;P-Bmenu* > 4idth:6RRp$9 border:=p$ solid blue9 bac3ground-color:Bdaed&e9 padding:6p$9 @ < roprietati pentru primul ni*el din meniul *ertical < Bmenu* li > margin:=p$ R9 bac3ground-color:B&R&=&e9 padding:=p$9 list-st5le-t5pe:none9 &ont-4eight:YRR9 te$t-align:le&t9 @
Bmenu* li a > displa5:bloc39 margin:R9 &ont-4eight:normal9 @ Bmenu* li a:ho*er > bac3ground-color:B&e&e&e9 te$t-decoration:none9 &ont-st5le:obliZue9 @ < roprietati pentru ni*elul doi din meniul *ertical < Bmenu* li:ho*er ul > displa5:bloc39 @ Bmenu* li ul > displa5:none9 position:relati*e9 margin:-=p$ R -6p$ R9 padding:=p$ R9 @ Bmenu* li ul li > margin:6p$ R R 6Rp$9 bac3ground-color:Bed&eed9 padding:=p$ R9 border:=p$ dotted 5ello49 @ --;
ul; li;a hre&0http:<<444.marplo.net
- 0Smecheria0 la acest eniu este acest cod (ceea ce &ace a doua lista 7! *i#ibila cand mouse-ul e deasupra listei ! parinte): Bmenu* li:ho*er ul > displa5:bloc39 @
2 O alta *arianta de meniu *ertical dublu: agina personala I Tutorialle CSS I Tutoriale HT! Contact - Codul CSS si HT! pt. acest meniu: st5le;P--
Bmenu* > position:relati*e9 4idth:=YRp$9 border:=p$ solid blue9 bac3ground-color:Bdaed&e9 padding:6p$9 @ < roprietati pentru primul ni*el din meniul *ertical < Bmenu* li > margin:=p$ R9 bac3ground-color:B&R&=&e9 padding:=p$9 list-st5le-t5pe:none9 &ont-4eight:YRR9 te$t-align:le&t9 @ Bmenu* li a, Bmenu* li span > displa5:bloc39 margin:R9 &ont-4eight:normal9 @ Bmenu* li a:ho*er > bac3ground-color:B&e&e&e9 te$t-decoration:none9 &ont-st5le:obliZue9 @ < roprietati pentru ni*elul doi din meniul *ertical < Bmenu* li:ho*er ul > displa5:bloc39 @
Bmenu* li ul > displa5:none9 position:absolute9 #-inde$:UUUW9 4idth:=RR9 le&t:=?=p$9 margin:-6Rp$ auto R auto9 bac3ground-color:Bdaed&e9 border:=p$ dashed blue9 padding:=p$9 @ Bmenu* li ul li > margin:=p$9 bac3ground-color:Bed&eed9 padding:=p$ R =p$ 6p$9 @ --;
li;a hre&0http:<<444.marplo.net
- Sub-meniul (9menuv li ul) trebuie sa aibe urmatoarele proprietati CSS, ca sa-l ascunda si sa nu a&ecte#e celelalte liste cand e descoperit (proprietatea z#index(:::2; il &ace sa fe afsat peste celelalte liste). displa5:none9 position:absolute9 #-inde$:UUUW9
- n codul CSS al acestui eniu este important ca selectorul Denu sa aibe defnita proprietatea 0 position0 (relati*e, absolute). %ceasta e necesar ca sa &unctione#e z# index(:::2; (in 9menuv li ul) in nternet E$plorer. Aeniu =ri"ontal-ertical
Aeniul ori"ontal-$ertical este un meniu cu lista afsata pe o linie ori#ontala, iar fecare lista poate sa contina un alt meniu cu liste *erticale, care este initial ascuns, si afsat cand mouse-ul e pe te$tul
- Codul sursa: st5le;P--
Bmenu* > position:relati*e9 padding:6p$9 @ < roprietati pentru lista ori#ontala < Bmenu* li > /oat:le&t9 margin:=p$ Wp$9 border:=p$ solid blue9 bac3ground-color:Bdaed&e9 padding:=p$ 6p$9 list-st5le-t5pe:none9 &ont-4eight:YRR9 te$t-align:le&t9 te$t-decoration:nderline9 @ < roprietati pentru listele *erticale < Bmenu* li:ho*er ul > displa5:bloc39 @ Bmenu* li ul > displa5:none9 position:absolute9 margin:=p$ auto =p$ -Wp$9 bac3ground-color:B&R&=&e9 border:=p$ dashed blue9 padding:=p$9 @ Bmenu* li ul li > position:relati*e9
clear:both9 4idth:UU9 margin:=p$ R9 border:none9 bac3ground-color:Bed&eed9 padding:=p$9 @ < !in3-uri in sub-menu < Bmenu* ul li a > displa5:bloc39 margin:R9 &ont-4eight:normal9 padding:=p$9 @ Bmenu* ul li a:ho*er > bac3ground-color:B&e&e&e9 te$t-decoration:none9 &ont-st5le:obliZue9 @ --;
li;Tutoriale HT! ul; li;a hre&0http:<<444.marplo.net
n codul CSS al acestui eniu sunt importante urmatoarele proprietati: - 9menuv li trebuie sa contina aceasta proprietate ca sa ase#e listele pe linie ori#ontala: /oat:le&t9
- Sub-meniul (9menuv li ul) trebuie sa aibe aceste proprietati CSS, ca sa-l ascunda si sa nu a&ecte#e celelalte liste cand e afsat. displa5:none9 position:absolute9
- !istele din sub-meniu (9menuv li ul li) trebuie sa aibe aceste proprietati CSS, care anlea#a e&ectul lui:
)utoane pentru lin*-uri olosind o singura iagine si CSS 2 O singura imagine pt meniu cu mai multe lin3-uri +iecare imagine care trebuie incarcata in pagina necesita o cerere de la bro4ser catre ser*er si asteptarea raspunsului, ast&el, daca
a*eti un meniu cu ? lin3-uri cu imagine, pentru a &ace ca pagina sa se incarce mai repede, e bine sa &olositi un singur fsier cu imagini ouse-ul deasupra?, si acti$e >cand se apasa clic?. "e asemenea, cum se poate &olosi o singura imagine pentru mai multe lin3-uri intr-un meniu. Este simplu, ideea este ca desenele butonului pt cele 1 stari sa fe simetric ase#ate in imagine, *ertical: top) cente!) botto# (sus, centru, os)9 sau ori#ontal: left) cente!) !ight (stanga, centru, dreapta). Este indicat ca inaltimea imaginii (sau lungimea, in &unctie de cum sunt po#itionate butoanele in imagine) sa se imparta e$act la 1. %poi, in CSS setati proprietatile +idth si height ale lin3-ului cu aceeasi *aloare ca lungimea si inaltimea butonului desenat in imagine. 2 "aca butoanele pt starile lin3-ului (normal, ho*er, acti*e) sunt desenate *ertical, precum acestea:
Setati proprietatea CSS %ac*ground-position cu aceste perechi de *alori: R, R9 R, ?R9 si R, =RR (sau: top, center, bottom)9 pt fecare conditie (normal, ho*er, acti*e). *olosind valo!i in p!ocente) ofe!a "n cont!ol #ai b"n al pozitiona!ii . - ata un e$emplu (lungimea imaginii e$te =6? pi$eli, inaltimea =6R pi$eli9 cu butoanele desenate *ertical. naltimea butonului
Baddne4 > 4idth: =6?p$9 height: QRp$9 displa5: bloc39 bac3ground: url(XbuttonAimg=.gi&X)9 bac3ground-position: R R9 bac3ground-repeat: no-repeat9 border: none9 te$t-indent: -UUUUp$9
< Sa nu se afse#e te$tul din lin3 <
@ < Cand cursorul de mouse e deasupra butonului < Baddne4:ho*er > bac3ground-position: R ?R9 @ < Cand butonul bac3ground-position: R =RR9 @ <<--;
e#ultat (po#itionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa *edeti starea 0acti*e0):
2 "aca butoanele pt starile lin3-ului (normal, ho*er, acti*e) sunt desenate ori#ontal, precum acestea:
- Setati proprietatea CSS %ac*ground-position cu aceste perechi de *alori: R, R9 ?R R9 si =RR R (sau: le&t, center, right)9 pt fecare conditie (normal, ho*er, acti*e). - ata un e$emplu cu butoanele desenate ori#ontal: Pdoct5pe html; html lang0en0; head; meta charset0ut&-W0 <; title;E$emplu lin3 4idth: =6?p$9 height: QRp$9 displa5: bloc39 bac3ground: url(XbuttonAimg6.gi&X)9 bac3ground-position: R R9 bac3ground-repeat: no-repeat9 te$t-indent: -UUUUp$9
< Sa nu se afse#e te$tul din lin3 <
@ < Cand cursorul de mouse e deasupra butonului < Baddne4:ho*er > bac3ground-position: ?R R9 @ < Cand butonul bac3ground-position: =RR R9 @
<<--;
e#ultat: arlo.net
= singura iagine pt eniu cu ai ulte lin*-uri
n mod similar se poate &olosi o singura imagine cu butoane pt un meniu cu mai multe lin3-uri. Trucul este sa desenati butoanele simetric, apoi defniti proprietatea CSS %ac*ground-position in &unctie de po#itia butoanelor in imagine, &olosind procente ce repre#inta distanta &ata de coltul stanga-sus, pe!echea de valo!i: stanga) s"s (poate f necesar sa testati mai multe *alori pana obtineti afsarea cea mai buna a fecarui buton). - ata un e$emplu, eniu cu Q lin3-uri &olosind aceasta imagine:
st5le t5pe0te$t
4idth: =6?p$9 height: QRp$9 displa5: bloc39 bac3ground: url(Xbuttons.gi&X)9 bac3ground-repeat: no-repeat9 te$t-indent: -UUUUp$9
< Sa nu se afse#e te$tul din lin3 <
@ < utonul din imagine pt rimul lin3 < Bmenu Baddne4 > bac3ground-position: R R9 @ < rimul lin3 ho*er < Bmenu Baddne4:ho*er > bac3ground-position: QW R9 @ < rimul lin3 cand e apasat < Bmenu Baddne4:acti*e > bac3ground-position: =RR R9 @ < utonul din imagine pt al "oilea lin3 < Bmenu Bdelete > bac3ground-position: R 169 @ < al "oilea lin3 ho*er < Bmenu Bdelete:ho*er > bac3ground-position: QW 169 @ < al "oilea lin3 cand e apasat < Bmenu Bdelete:acti*e > bac3ground-position: =RR 169
@ < utonul din imagine pt al Treilea lin3 < Bmenu Baccept > bac3ground-position: R YY9 @ < al Treilea lin3 ho*er < Bmenu Baccept:ho*er > bac3ground-position: QW YY9 @ < al Treilea lin3 cand e apasat < Bmenu Baccept:acti*e > bac3ground-position: =RR YY9 @ < utonul din imagine pt al patrulea lin3 < Bmenu Bcancel > bac3ground-position: R UU9 @ < al patrulea lin3 ho*er < Bmenu Bcancel:ho*er > bac3ground-position: QW UU9 @ < al patrulea lin3 cand e apasat < Bmenu Bcancel:acti*e > bac3ground-position: =RR UU9 @ <<--;
a hre&0B0 title0"elete0 id0delete0;"elete
e#ultat (po#itionati cursorul de mouse pe buton, apoi tineti apasat clic ca sa *edeti starea 0acti*e0): %dd 8e4 "elete %ccept Cancel
CSS3 - )ac*ground proprietati noi •
Culoare 'radient
•
bac3ground-origin
•
bac3ground-clip
•
CSS1 magini multiple de &undal
CSS1 contine trei proprietati noi pt. bac3ground: bac)ground#size, bac)ground#origin, si bac)ground#clip, de asemenea, puteti adauga mai multe imagini pentru &undalul unui element, si chiar sa &olositi culori gradient, cu linear#gradient . %ac*ground-si"e
roprietatea bac3ground-si#e permite determinarea marimii imaginii de bac3ground. %st&el, puteti &olosi aceeasi imagine in mai multe elemente cu dimensiuni di&erite. - alori (puteti specifca dimensiunile in pi$eli (p$) sau in procente ()): •
auto - e *aloarea predefnita (de&ault). edimensionea#a laturile imaginii ast&el incat se mentine aspectul imaginii, daca ambele *alori sunt auto, imaginea apare la dimensiunile ei.
•
•
•
•
procente - edimensionea#a lungimea si inaltimea po#ei pt. bac3ground, in procente relati*e la elementul parinte (nu la imagine). rima *aloare repre#inta lungimea, a doua inaltimea. "aca se specifca numai o *aloare, cealalta e setata 0auto0. pixeli - edimensionea#a lungimea si inaltimea la marimile specifcate. "aca se specifca numai o *aloare, cealalta e setata 0auto0. co$er - o#a pt. bac3ground e marita (sau micsorata) ast&el incat sa acopere toata supra&ata de &undal. contain - o#a pt. bac3ground e marita (sau micsorata) ast&el incat sa fe cuprinsa in #ona de continut.
roprietatea bac3ground-si#e e recunoscuta in EUI, +ire&o$ QI, Opera, Chrome, si Sa&ari ?I. - E$emplu: st5le t5pe0te$t 4idth:6RRp$9 height:=RRp$9 border:=p$ solid blue9 bac3ground:url(Xcss1.pgX)9 bac3ground-si#e:=RRp$ YRp$9 bac3ground-repeat:no-repeat9 @ Bid6 > 4idth:1RRp$9 height:=6Rp$9 border:=p$ solid BR=daR69 bac3ground:url(Xcss1.pgX)9 bac3ground-si#e:contain9 bac3ground-repeat:no-repeat9 @
Bid1 > 4idth:1RRp$9 height:=6Rp$9 border:=p$ solid sil*er9 bac3ground:url(Xcss1.pgX)9 bac3ground-si#e:co*er9 @ --;
e#ultat:
Curs CSS gratuit - dimensiuni in pi$eli
444.courses4eb.net - *aloare contain 444.marplo.net - *aloare co*er Culoare Iradient
roprietatea bac3ground poate primi o *aloare speciala care defneste o culoare gradient. Sinta$a pentru codul ce defneste gradient-ul di&era de la un bro4ser la altul, de aceea trebuie specifcata pentru fecare din na*igatoarele 4eb maore, dupa cum se *ede in e$emplul urmator. st5le t5pe0te$t 4idth:1RRp$9 height:=6Rp$9
flter: progid:"DmageTrans&orm.icroso&t.gradient(startColorstrXBda&edaX, endColorstrXBR1RW&eX)9 < E V, W < bac3ground-image: -ms-linear-gradient(top le&t, BR=&eR6, BR=R6&e)9 E=R < bac3ground: -mo#-linear-gradient(top le&t, B=&=, BG&, B==&)9 +ire&o$ <
<
< o#illa
< Sa&ari, Chrome < bac3ground-image: -4eb3it-gradient(linear, le&t top, right bottom, colorstop(R, BR&=), color-stop(R.?, BG&), color-stop(=, BR=&))9 bac3ground-image: -o-linear-gradient(top le&t, BR=&eR6, BR=R6&e)9 Opera ==.=I < bac3ground: linear-gradient(top le&t, B=&=, BG&, B==&)9 ar3up <
<
< 1C
@ --;
e#ultat: Curs gratuit CSS 444.marplo.net "irectia culori gradient si distanta pe care culorile o iau poate f controlata. "aca doriti ca directia gradient-ului sa inceapa de sus, &olositi doar top, in loc de 0top le&t09 pentru stanga adaugati doar le&t. Ca sa setati distanta culorii in gradient, adaugati o *aloare de tip procent dupa culoare (sau o *aloare intre R si = pt. bro4sere eb3it). - E$emplu: st5le t5pe0te$t 4idth:1RRp$9 height:=6Rp$9 flter: progid:"DmageTrans&orm.icroso&t.gradient(startColorstrXBda&edaX, endColorstrXBR1RW&eX)9 < E V, W <
bac3ground-image: -ms-linear-gradient(top, BR=&eR6 R, BR=R6&e UU)9 < E=R < bac3ground: -mo#-linear-gradient(top, B=&= R, BG& Y?, B==& UU)9 < o#illa +ire&o$ < < Sa&ari, Chrome < bac3ground-image: -4eb3it-gradient(linear, le&t top, le&t bottom, colorstop(R, BR&=), color-stop(R.Y, BG&), color-stop(=, BR=&))9 bac3ground-image: -o-linear-gradient(top, BR=&eR6 R, BR=R6&e UU)9 < Opera ==.=I < bac3ground: linear-gradient(top, B=&= R, BG& Y?, B==& UU)9 1C ar3up <
<
@ --;
%ac*ground-origin
roprietatea bac3ground-origin specifca #ona de po#itionare a imaginii in bac3ground. oate lua trei *alori di&erite: •
•
•
padding-%ox - po#itia e relati*a la coltul din stanga-sus unde incepe padding. %order-%ox - po#itia e relati*a la coltul din stanga-sus a bordurii. content-%ox - imaginea pt. bac3ground e po#itionata de la coltul stanga-sus unde incepe continutul.
bac3ground-origin e recunoscut in EUI, +ire&o$ QI, Opera, Chrome, si Sa&ari ?I. - E$emplu: st5le t5pe0te$t 4idth:1?Rp$9 height:=6Rp$9 padding:6Rp$9 border:1p$ solid blue9 bac3ground:url(Xcss1.pgX)9 bac3ground-repeat:no-repeat9
bac3ground-color:Bbc&ede9 bac3ground-origin:content-bo$9 @ Bid6 > 4idth:1?Rp$9 height:=6Rp$9 padding:6Rp$9 border:1p$ solid blue9 bac3ground:url(Xcss1.pgX)9 bac3ground-repeat:no-repeat9 bac3ground-color:Bbc&ede9 bac3ground-origin:border-bo$9 @ --;
e#ultat: o#itionea#a imaginea in bac3ground incepand de la continut o#itionare relati*a la bordura %ac*ground-clip
roprietatea bac3ground-clip specifca #ona de colorare a &undalului, e &olosita pentru a determina daca bac3ground-ul se e$tinde sau nu pana in margini. rimeste una din aceste trei *alori: •
%order-%ox - culoarea de &undal se e$tinde pana in margini.
•
padding-%ox - culoarea de &undal e f$ata la padding.
•
content-%ox - culoarea de &undal e f$ata la #ona continutului.
bac3ground-clip e recunoscut in EUI, +ire&o$ QI, Opera, si Chrome. E$emplu:
st5le t5pe0te$t 4idth:1?Rp$9 height:=6Rp$9 padding:6Rp$9 border:6p$ solid blue9 bac3ground-color:Bcd&eda9 bac3ground-clip:padding-bo$9 -4eb3it-bac3ground-clip:padding-bo$9
< Sa&ari <
@ Bid6 > 4idth:1?Rp$9 height:=6Rp$9 padding:6Rp$9 border:6p$ solid blue9 bac3ground-color:Bcd&eda9 bac3ground-clip:content-bo$9 -4eb3it-bac3ground-clip:content-bo$9
< Sa&ari <
@ --;
e#ultat: bac3ground-clip cu padding-bo$ bac3ground-clip cu content-bo$ CSS3 agini ultiple de undal
CSS1 permite aplicarea mai multor imagini de bac3ground la un element. %ceasta caracteristica e suportata in +ire&o$ 1.YI, E U, Sa&ari, si ebKit. maginile multiple pentru bac3ground se adauga in proprietatea bac)ground#image separate prin *irgula (imaginea
specifcata mai la inceput apare mai in &ata). alorile din celelalte proprietati legate de po#e pt. &undal se adauga in ordinea si numarul imaginilor din bac3ground-image, sau doar o singura *aloare pentru toate. - E$emplu: st5le t5pe0te$t 4idth:QRRp$9 height:=?Rp$9 bac3ground-image: url(XhtmlAcourse.pgX), url(Xcss1.pgX)9 bac3ground-repeat: no-repeat, repeat-$9 bac3ground-position: center top, center bottom9 @ --;
e#ultat: magini multiple de bac3ground
)utoane pentru lin*-uri olosind <<< -- nterior ----------rator -- CSS3 - )order proprietati <<<
CSS3 - )order proprietati noi •
%daugare umbre la chenare
•
CSS1 magine pentru bordura
CSS1 contine caracteristici noi care permit crearea de colturi rotunite, umbre la chenare si &olosirea unei imagini pentru aspectul bordurii. CSS3 Colturi rotunJite
roprietatea border-radius permite crearea cu usurinta a colturilor rotunite in designul elementelor, &ara a f ne*oie de imagini sau mai multe tag-uri di*;. nternet E$plorer suporta border-radius incepand cu EU, dar puteti
&olosi libraria de &unctii Na*aScript DD=roundies ca sa afsati colturi rotunite in na*igatoare 4eb care nu recunosc aceasta proprietate CSS9 *edeti tutorialul Colturi rotunite in nternet E$plorer. E$emplu: st5le t5pe0te$t 4idth:1RRp$9 height:=6Rp$9 border:6p$ solid blue9 border-radius:6Wp$9 @ --;
e#ultat: Curs CSS - 444.marplo.net Colturile rotunite pot f create si independent, &olosind cele patru proprietati indi*iduale: border-top-le&t-radius, border-top-rightradius, border-bottom-right-radius, si border-bottom-le&t-radius. E$emplu: st5le t5pe0te$t 4idth:1RRp$9 height:=6Rp$9 bac3ground-color:Bbb&eda9 border:6p$ solid blue9 border-top-le&t-radius:6Rp$9 border-bottom-right-radius:1Wp$9 @ --;
e#ultat: Curs CSS - 444.marplo.net daugare u%re la chenare
roprietatea bo$-shado4 se &oloseste pentru a adauga umbre la chenare. Este recunoscuta in EUI, +ire&o$ Q, Chrome, si Opera. bo$-shado4 are urmatoarea sinta$a: elm { box-shadow: X_offset Y_offset blur marime culoare inset; }
- elm - este elementul HT! la care se aplica aceasta proprietate. - >=o?set - este po#itia 4idth:1RRp$9 height:=6Rp$9 bac3ground-color:Bbb&eda9 bo$-shado4: ==p$ ==p$ ?p$ BVWVWda9 -4eb3it-bo$-shado4: ==p$ ==p$ ?p$ BVWVWda9
< Sa&ari si Chrome <
@ --;
e#ultat:
CSS3 agine pentru %ordura
Cu proprietatea border-image se poate &olosi o imagine pentru aspectul bordurii. %ceasta se obtine prin impartirea #onei bordurii in noua segmente, repre#entand cele patru colturi, cele patru laturi si centrul (dupa cum se *ede in imaginea de mai os). Se &oloseste un singur fsier cu imaginea, impartit similar in cele noua segmente care *or repre#enta colturile, laturile si centrul.
bo$-shado4 are urmatoarea sinta$a: elm { border-image: url_img slice width outset repeat; }
- url=img - adresa si numele imaginii &olosita pt. bordura. - slice - specifca distanta pentru #ona din imagine &olosita in cele patru margini. - @idt4 - lungimea bordurii cu imaginea. - outset - specifca distanta &ata de marginea chenarului, de unde incepe bordura cu imagine. - repeat - specifca daca partea de imagine trebuie repetata, rotunita ca incadrare, sau intinsa (poate a*ea aceste *alori: stretc4, repeat, round). border-image nu e recunoscut in nternet E$plorer. +ire&o$ &oloseste proprietatea #moz#border#image. Sa&ari si Chrome suporta #@eb)it#border#image . 2 entru a afsa cum trebuie border-image, trebuie sa specifcati si
proprietatea border-4idth.
n e$emplul urmator se &oloseste aceasta imagine: st5le t5pe0te$t 4idth:6RRp$9 height:=6Rp$9 border-4idth:=6p$9 -mo#-border-image:url(XborderAimage.pngX) 1R 1R round9
< +ire&o$ <
-4eb3it-border-image:url(XborderAimage.pngX) 1R 1R round9 < Sa&ari and Chrome < border-image:url(XborderAimage.pngX) 1R 1R round9 @ Bid6 > 4idth:6RRp$9 height:=6Rp$9 border-4idth:=?p$9 -mo#-border-image:url(XborderAimage.pngX) 1R 1R stretch9
< +ire&o$ <
-4eb3it-border-image:url(XborderAimage.pngX) 1R 1R stretch9 < Sa&ari and Chrome < border-image:url(XborderAimage.pngX) 1R 1R stretch9 @ --;
e#ultat:
CSS3 - text-shado+, +ord-+rap, texto$ero+ CSS1 introduce noi proprietati pentru e&ecte de te$t, dar multe dintre ele nu sunt inca recunoscute de principalele na*igatoare 4eb. n aceasta lectie sunt pre#entate cele care sunt mai bine acceptate: te$t-shado4, 4ord-4rap, and te$t-o*er/o4. CSS3 text-shado+
roprietatea text-shado+ introdusa in CSS1 permite adaugarea unui e&ect de umbra care sa fe aplicat la te$tul dintr-un element HT!. 7mbra apare in urul literelor. Sinta$a: text-shadow: offset_X offset_Y blur culoare;
- o?set=> - specifca po#itia umbrei pe ori#ontala. Sunt permise si *alori negati*e. - o?set=0 - specifca po#itia umbrei pe *erticala. Sunt permise si *alori negati*e. - blur - defneste distanta pentru *aloarea 0blur0 (optional). - culoare - defneste culoarea umbrei (optional). "aca nu e specifcata, se &oloseste negru. te$t-shado4 e recunoscut in principalele bro4sere, cu e$ceptia nternet E$plore. "ar incepand cu *ersiunea W a nternet E$plorer puteti &olosi o proprietate flter pentru a crea e&ecte de umbra pt.
te$t si in E. Sinta$a: filter:progid:DXImageransform!"icrosoft!#hadow$color%&al' direction%&al' strength%&al(;
- color - specifca culoarea umbrei. - direction - poate a*ea una din aceste *alori numerice: A1top, B1top rig4t, :A1rig4t, E1bottom rig4t, 2A1bottom, FF1bottom left, E1top left . - strengt4 - repre#inta cantitatea de 0blur0. E$emplu: st5le t5pe0te$t < pt. EWI < flter:progid:"DmageTrans&orm.icroso&t.Shado4(colorBaRa=&e, direction=1?, strength?)9 te$t-shado4: 6p$ 1p$ 1p$ BaRa=&e9 @ --;
e#ultat:
/ext cu text-shado+ Se pot adauga mai multe umbre la acelasi te$t, prin adaugarea mai multor liste de umbre in proprietatea te$t-shado4, separate prin *irgula. 7rmatorul cod amesteca o culoare *erde cu una albastra ca sa cree#e un e&ect de umbra cu aceste culori: st5le t5pe0te$t < pt. EWI < flter:progid:"DmageTrans&orm.icroso&t.Shado4(colorBaRaR&e, direction=1?, strength?)9 te$t-shado4: -=p$ -=p$ =p$ rgba(==R,61?,=??,R.6), 6p$ 1p$ rgba(R,R,=W=,R.6)9
@ --;
- Obser*ati ca s-a &olosit &ormula rgba7Gosu, erde, !lbastru, !lp4a8 la defnirea culorii, adaugand si transparenta (%lpha) in acelasi timp. e#ultat:
/ext cu doua culori pt< text-shado+ CSS3 +ord-+rap
Cu +ord-+rap puteti determina bro4ser-ul sa rupa cu*intele lungi, cand acestea depasesc lungimea elementului, trecand pe un rand nou. Sinta$a: word-wrap: &aloare;
0*aloare0 poate f: - normal - 8u rupe cu*intele intregi (*aloarea prestabilita). - brea)#@ord - ermite ruperea cu*intelor intregi. Cu*intele sunt rupte la ni*el de caracter, nu in silabe. E$emplu: st5le t5pe0te$t 4idth:=RRp$9 border:=p$ solid blue9 4ord-4rap:brea3-4ord9 @ --;
e#ultat: Curs CSS gratuit - 4ord-4rap unAcu*antAmaiAlung. CSS3 text-o$er o+
Cu proprietatea text-o$ero+ puteti determina ce sa se intample cu te$tul, cand acesta depaseste lungimea elementului. te$t-o*er/o4 este suportat in maoritatea na*igatoarelor 4eb, in a&ara de +ire&o$. Sinta$a: text-o&erflow: &aloare;
0*aloare0 poate f: - clip - taie te$tul (*aloarea prestabilita). - ellipsis - afsea#a trei-puncte (0[0) in locul te$tului taiat. 2 n general, proprietatea te$t-o*er/o4 se &oloseste impreuna cu +hite-space:no+rap si o$ero+:hidden. E$emplu: st5le t5pe0te$t 4idth:61Rp$9 border:=p$ solid blue9 4hite-space:no4rap9 o*er/o4:hidden9 <
< 0o*er/o40 *aloarea trebuie sa fe di&erita de 0*isible0
te$t-o*er/o4:ellipsis9 @ Bid6 > 4idth:61Rp$9 border:=p$ solid green9 4hite-space:no4rap9 o*er/o4:hidden9 te$t-o*er/o4:clip9 @ --;
e#ultat: CSS Tutorial - un te$t lung pe o singura linie, alte cu*inte. Site 4eb 444.marplo.net - alt te$t lung intr-un singur rand.
CSS3 opacit. roprietatea opacit. setea#a ni*elul de opacitate al unui element HT!, opacitH permite modifcarea transparentei elementului. EW si *ersiuni anterioare &olosesc o *arianta alternati*a, proprietatea flter. - Sinta$a: filter: alpha$opacit)%X(;
*+ pt! I, +*
opacit): X;
- D - repre#inta o *aloare intre R (complet transparent) si =.R (&ara transparenta). =) E$emplu, un di*; cu o transparenta CSS de QR: st5le t5pe0te$t bac3ground-color:blue9 4idth:6RRp$9 height:=RRp$9 flter:alpha(opacit5QR)9
< pt. E <
opacit5:R.Q9 @ --;
e#ultat: 7n continut oarecare ...
6) E$emplu, setea#a opacitate ?R la o imagine: st5le t5pe0te$t flter:alpha(opacit5?R)9 opacit5:R.?9
< pt. E <
@ --;
e#ultat:
1) E$emplu, e&ect imagine transparenta ?R, iar la mouseo*er =RR: st5le t5pe0te$t flter:alpha(opacit5?R)9
< pt. E <
opacit5:R.?9 @ Bim6:ho*er > flter:alpha(opacit5=RR)9
< pt. E <
opacit5:=9 @ --;
e#ultat ( pozitionati mouse#ul peste imaginea de mai 5os):
Q) Continut intr-un " care la mouseo*er este acoperit cu un alt di*; transparent (DI#ul transparent trebuie sa e gol, adaugat in primul, si setat cu( position(absolute;): st5le t5pe0te$t displa5:none9 position:absolute9 top:69 le&t:69 4idth:UY9 height:U?9 bac3ground-color:BRV&eRW9 flter:alpha(opacit5?R)9
< pt. E <
opacit5:R.?9 @ Bcnt > position:relati*e9 bac3ground:BeVeW&e9 4idth:1RRp$9 height:6RRp$9 border:=p$ solid blue9 padding:6Rp$9 @ Bcnt:ho*er Btrans > displa5:bloc39 @ --;
di* id0cnt0; di* id0trans0;
e#ultat: 'lasati ouse-ul peste aceasta caseta pentru a $edea
eectul de opacitate<
CSS3 transorari 20 •
CSS rotate()
•
etoda scale()
•
CSS s3e4()
Cu proprietatea CSS transor se poate modifca &orma, marimea si po#itia elementelor HT!. Se pot trans&orma elementele HT! in plan 6" sau 1". - Sinta$a: trans&orm: metoda(*alori)9
- %cest tutorial pre#inta metodele de trans&ormare in plan 6": translate>?, rotate>?, scale>?, s*e+>? . nternet E$plorer U &oloseste: -s-transor . +ire&o$ &oloseste: -o"-transor . Chrome si Sa&ari &olosesc: -+e%*it-transor . Opera &oloseste: -o-transor . Aetoda translate>?
etoda translate() muta elementul de la po#itia initiala, in &unctie de parametri dati pentru po#itionare de la Stanga (a$a-D) si de Sus (a$a-J) . - Sinta$a:
trans&orm: translate(D, J)9
E$emplu. Cand utili#atorul plasea#a cursorul mouse-ului pe un anumit "i*, ii muta po#itia cu 6R pi$eli de la stanga si =? pi$eli din partea de sus. st5le t5pe0te$t 4idth:URp$9 height:URp$9 bac3ground:BbRb=&e9 &ont-si#e:=Vp$9 @ Bid*:ho*er > trans&orm: translate(6Rp$, =?p$)9 -ms-trans&orm: translate(6Rp$, =?p$)9 < E U < -4eb3it-trans&orm: translate(6Rp$, =?p$)9 < Sa&ari si Chrome < -o-trans&orm: translate(6Rp$, =?p$)9 < Opera < -mo#-trans&orm: translate(6Rp$, =?p$)9 < +ire&o$ < @
"emo: o#itionati mouse-ul aici.
CSS rotate>?
etoda rotate() roteste elementul HT!, in sensul orelor de ceas daca *aloarea e po#iti*a, in sens in*ers orelor de ceas daca *aloarea e negati*a. - Sinta$a: trans&orm: rotate(grade)9
E$emplu. oteste element cu YR grade in sensul orelor de ceas. st5le t5pe0te$t 4idth:URp$9 height:URp$9 bac3ground:BbRb=&e9 &ont-si#e:=Vp$9 @ Bid*6:ho*er > trans&orm: rotate(YRdeg)9 -ms-trans&orm: rotate(YRdeg)9 < E U < -4eb3it-trans&orm: rotate(YRdeg)9 < Sa&ari si Chrome < -o-trans&orm: rotate(YRdeg)9 < Opera < -mo#-trans&orm: rotate(YRdeg)9 < +ire&o$ < @
"emo: o#itionati mouse-ul aici.
Aetoda scale>?
etoda scale() mareste sau micsorea#a marimea elementului HT! (inclusi* continutul din el), in &unctie de parametri pentru !ungime (a$a-D) si naltime (a$a-J). - Sinta$a: trans&orm: scale(!ungime, naltime)9
- alorile pentru !ungime si naltime sunt in procente. "e e$emplu, =.? inseamna =?R din marimea originala.
E$emplu. Trans&orma lungimea sa fe de 6 ori marimea originala, si inaltimea =.? ori inaltimea originala. st5le t5pe0te$t 4idth:URp$9 height:URp$9 bac3ground:BbRb=&e9 &ont-si#e:=Vp$9 @ Bid*1:ho*er > trans&orm: scale(6, =.?)9 -ms-trans&orm: scale(6, =.?)9 < E U < -4eb3it-trans&orm: scale(6, =.?)9 < Sa&ari si Chrome < -o-trans&orm: scale(6, =.?)9 < Opera < -mo#-trans&orm: scale(6, =.?)9 < +ire&o$ < @
"emo:
o#itionati mouse-ul aici.
CSS s*e+>?
etoda s3e4() distorsionea#a elementul HT! pe ori#ontala (a$a-D) si *erticala (a$a-J), inclu#and si continutul din el. - Sinta$a: trans&orm: s3e4(Ddeg, Jdeg)9
E$emplu. "istorsionea#a elementul 6R grade pe lungime (a$a-D) si 6? grade pe *erticala (a$a-J). st5le t5pe0te$t 4idth:=YRp$9 height:URp$9 bac3ground:Babcd&e9 &ont-si#e:=Wp$9 trans&orm: s3e4(6Rdeg, 6?deg)9 -ms-trans&orm: s3e4(6Rdeg, 6?deg)9 < E U < -4eb3it-trans&orm: s3e4(6Rdeg, 6?deg)9 < Sa&ari si Chrome < -o-trans&orm: s3e4(6Rdeg, 6?deg)9 < Opera < -mo#-trans&orm: s3e4(6Rdeg, 6?deg)9 < +ire&o$ < @
"emo:
444.courses4eb.net 2 Cele Q metode de trans&ormare pot f utili#ate si intr-o singura defnitie transor, separate prin spatiu. - Sinta$a: trans&orm: translate(D, J) rotate(grade) scale(!ungime, naltime) s3e4(Ddeg, Jdeg)9
- uteti adauga doar acele metode pe care doriti sa le &olositi in trans&ormare. E$emplu, muta elementul cu ?R pi$eli de la stanga si 6? pi$eli din partea de sus, il roteste cu 6R grade in sens in*ers orelor de ceas, trans&orma lungimea de 6 ori cea originala si inaltimea =.? ori, distorsionea#a elementul cu =? grade pe ori#ontala si 6R grade pe *erticala.
st5le t5pe0te$t 4idth:URp$9 height:URp$9 bac3ground:BRRdaR=9 &ont-si#e:=Vp$9 trans&orm: translate(?Rp$, 6?p$) rotate(-6Rdeg) scale(6, =.?) s3e4(=?deg, 6Rdeg)9 -ms-trans&orm: translate(?Rp$, 6?p$) rotate(-6Rdeg) scale(6, =.?) s3e4(=?deg, 6Rdeg)9 < E U < -4eb3it-trans&orm: translate(?Rp$, 6?p$) rotate(-6Rdeg) scale(6, =.?) s3e4(=?deg, 6Rdeg)9 < Sa&ari si Chrome < -o-trans&orm: translate(?Rp$, 6?p$) rotate(-6Rdeg) scale(6, =.?) s3e4(=?deg, 6Rdeg)9 < Opera < -mo#-trans&orm: translate(?Rp$, 6?p$) rotate(-6Rdeg) scale(6, =.?) s3e4(=?deg, 6Rdeg)9 < +ire&o$ < @
"emo: Continut oarecare...
CSS3 transition CSS1 transition poate f utili#at pentru a anima proprietatile CSS, adaugand un e&ect de animatie cand se modifca proprietatile CSS ale unui element HT!, schimband gradual de la un stil la altut. CSS1 transition are Q componente: •
•
transition-propert. - Specifca numele proprietatii (sau proprietatilor) la care transition trebuie aplicat (precum: 4idth, color, &ont-si#e, etc.). CSS1 transition poate f utili#at cu proprietatile pre#entate aici: roprietati CSS ce pot f animate transition-duration - Specifca durata tran#itiei (animatiei), in sesunde (s), milisecunde (ms), (implicit R).
•
•
transition-tiing-unction - "efneste tipul *ite#ei e&ectului in timpul trans&ormarii: ease (implicit), linear, ease-in, ease-out, ease-in-out transition-dela. - "efneste timpul de asteptare pana cand incepe e&ectul 0transition0 (implicit R)
entru a &olosi CSS1 transition, trebuie specifcate aceste doua lucruri: =. roprietatea CSS la care se aplica e&ectul ( transitionpropert5 ). 6. "urata e&ectului ( transition-duration ). - 7ltimele doua componente ( transition-timing-&unction si transitiondela5 ) sunt optionale. - nternet E$plorer recunoaste 0CSS1 transition0 incepand cu E =R. E$emplu. Cand mouse-ul e deasupra unui anumit "i*, se schimba gradual lungimea. st5le t5pe0te$t 4idth:WRp$9 height:WRp$9 bac3ground:BbWbU&e9 &ont-si#e:=Vp$9 transition-propert5: 4idth9 transition-duration: =.Qs9 < +ire&o$ Q < -mo#-transition-propert5: 4idth9 -mo#-transition-duration: =.Qs9 < Sa&ari si Chrome < -4eb3it-transition-propert5: 4idth9 -4eb3it-transition-duration: =.Qs9 < Opera < -o-transition-propert5: bac3ground-color, color9
-o-transition-duration: =.Qs9 @ Bidd*:ho*er > 4idth:6RRp$9 @
"emo (Cand cursorul mouse-ului iese din #ona elementului, re*ine gradual la stilul initial): o#itionati mouse-ul pe acest patrat.
'roprietatea transition prescurtata
Se pot adauga toate cele Q componente intr-o singura proprietate transition. Sinta$a: transition: transition-propert5 transition-duration transition-timing-&unction transition-dela59
E$emplu: Schimba gradual 0&ont-si#e0 (in R.Q secunde, cu *ite#a 0ease-out0) cand mouse-ul e deasupra unui element cu class0clse0. st5le t5pe0te$t 4idth:=?Rp$9 &ont-si#e:=1p$9 transition: &ont-si#e R.Qs ease-out9 -mo#-transition: &ont-si#e R.Qs ease-out9 < +ire&o$ Q < -4eb3it-transition: &ont-si#e R.Qs ease-out9 < Sa&ari si Chrome < -o-transition: &ont-si#e R.Qs ease-out9 < Opera < @
.clse:ho*er > &ont-si#e: =Yp$9 @
"emo >plasati cursorul deasupra fecarui lin3@: •
Curs CSS gratuit
•
Curs HT!
•
Cursuri rogramare eb
2 Se pot adauga mai multe proprietati pt e&ect 0transition0 intr-o singura defnitie, separate prin *irgula. E$emplu. %daugare e&ect la: bac3ground, opacit5 si trans&orm: st5le t5pe0te$t 4idth:==?p$9 height:=RRp$9 position:relati*e9 &ont-si#e:=Vp$9 te$t-align:center9 padding-top:=Wp$9 @
.clsd* > 4idth:=6Rp$9 height:=RRp$9 position:absolute9 top:R9 le&t:R9 bac3ground:BbWbU&e9 transition: bac3ground =.1s, opacit5 =.Ws, trans&orm =.Qs9 -mo#-transition: bac3ground =.1s, opacit5 =.Ws, -mo#-trans&orm =.Qs9 < +ire&o$ Q < -4eb3it-transition: bac3ground =.1s, opacit5 =.Ws, -4eb3it-trans&orm =.Qs9 < Sa&ari si Chrome < -o-transition: bac3ground =.1s, opacit5 =.Ws, -o-trans&orm =.Qs9 < Opera < @ .clsd*:ho*er > bac3ground: BRRdaR=9 flter:alpha(opacit5?R)9
< pt E <
opacit5:R.?9 trans&orm:rotate(=WRdeg)9 -mo#-trans&orm:rotate(=WRdeg)9 < +ire&o$ Q < -4eb3it-trans&orm:rotate(=WRdeg)9 < Sa&ari si Chrome < -o-trans&orm:rotate(=WRdeg)9 < Opera < @
"emo: uneti mouse-ul deasupra acestui dreptunghi.
