www.cartiaz.

ro – Carti si articole online gratuite de la A la Z CSS (Cascade Style Sheet) Laborator 1 CSS este utilizat pentru îmbunătăţirea prezentării unei pagini Web. CSS permite stabilirea de proprietăţi pentru elementele HTML utilizând o gamă largă de valori. CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina, cum ar fi: textul, imaginile, fondul, culorile si asezarea acestora in cadrul ferestrei paginii. CSS foloseste stiluri, acestea inglobeaza, sub un anumit nume, atribute de formatare care se aplica asupra unui element individual din pagina, asupra unui grup de elemente sau la nivelul intregului document. CSS functioneaza cu HTML, insa nu este HTML. El extinde functionalitatile HTML, permitand redefinirea etichetelor HTML existente. Sintaxa CSS O foaie de stil este un set de reguli. O regulă are două părţi: un selector şi o declaraţie. Sintaxa este: nume_proprietate: valoare_proprietate

Exemplu: p {color:blue;text-align:center;} Exemplu complet <html> <head> <style type="text/css"> p { color:blue; text-align:center; } </style> </head> <body> <p>Curs CSS</p> <p>Acest paragraf este afisat cu CSS</p>

www.cartiaz.ro – Carti si articole online gratuite de la A la Z </body> </html> Exerciţiu Să se scrie toate tagurile HTML care se referă la text utilizând proprietăţi CSS. a) b) c) d) h1, h2, h3, h4, h5, h6 p blockquote liste neordonate

Se vor utiliza proprietăţile: color cu valorile: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow font-size – dimensiunea fontului line-height (distanţa dintre linii) cu valorile: se specifică valori numerice p { line-height:normal; } p { line-height:125%; } text-align (aliniere text) cu valorile: left right center justify text-ident identează prima linie a paragrafului text-ident: 20px

Exista mai multe metode de reprezentare a cunostintelor..1752/2005 si normelor emise în acest sens de Ministerul Finantelor Publice. Pentru paragraf p se vor utiliza proprietăţile asupra următorului text: color. bunurile se evalueaza si se înregistreaza în contabilitate la valoarea de intrare.. lowercase. Acest proces presupune foarte multe iteratii si teste în cursul carora însasi expertul uman poate fi pus în dificultate pentru argumentarea unor optiuni. este destul de laborios si necesita o conlucrare permanenta între cognitician si expert. Evenimentele ulterioare datei bilantului (h6) Evenimentele ulterioare datei bilantului sunt acele evenimente.cartiaz. Privite în mod general. text-ident. 2. text-align. modelarea de catre cognitician în conformitate cu cerintele metodei de reprezentare. capitalize 1. preluate de cognitician de la expertul uman. font-size Reguli generale de evaluare conform ordinului 1752/2005 (h1) Evaluarea la data intrarii în entitate (h2) La data intrarii în entitate. line-height Baza de cunostinte contine ansamblul de cunostinte specializate într-un anumit domeniu. text-transform.h6 se vor utiliza asupra următorului text proprietăţile: color. pusa de acord cu rezultatele inventarierii Evaluarea la data iesirii din entitate (h5) La data iesirii din entitate sau la darea în consum. introducerea în baza si validare. dintre care cele mai importante sunt: retelele semantice. text-transform. regulile de produc¬tie si cadrele. (p) Baza de fapte contine datele unei probleme concrete care urmeaza sa fie rezolvata (formularea problemei) precum si faptele-rezultate în urma rationamentelor efectuate .www. text-align. Evaluarea la încheierea exercitiului financiar (h4) La încheierea exercitiului financiar. care consta în preluarea acestora de la expertul uman. favorabile sau nefavorabile. Evaluarea cu ocazia inventarierii (h3) Evaluarea elementelor de activ si de pasiv cu ocazia inventarierii se face potrivit reglementarilor ord. care au loc între data bilantului si data la care situatiile financiare anuale sunt autorizate pentru publicare. cunostintele reflecta "obiectele" lumii reale si relatiile dintre ele. elementele de activ si de pasiv de natura datoriilor se evalueaza si se reflecta în situatiile financiare anuale la valoarea de intrare. Procesul de creare a bazei de cunostinte. bunurile se evalueaza si se scad din gestiune la valoarea lor de intrare.ro – Carti si articole online gratuite de la A la Z text-transform Transformă textul din litere mari în litere mici şi invers uppercase. Pentru h1.

mai putin baza de cunostinte. utilizând cunostintele din domeniul respectiv. operatie cunoscuta sub numele de instantierea unui sistem esential. acesta construieste un plan de rezolvare în functie de specificul problemei. Deasemenea. Acest sistem permite dezvoltarea rapida de sisteme expert prin crearea unor noi baze de cunostinte. într-un anumit context baza de cunostinte îmbogateste fie prin adaugarea unor elemente noi. (p) Toate elementele componente ale unui SE. formeaza asa numitul sistem esential. line-height Sistemele expert (SE) sunt sisteme de programe bazate pe tehnicile inteligentei artificiale (IA). Rolul in¬ginerului de cunostinte în realizarea unui SE este similar rolului analistului pentru realizarea unui sistem informatic. dar care este independent de baza de cunostinte. baza de fapte este inclusa în baza de cunos tinte. calculatoarele din generatia a cincea vor permite achizitia de cunostinte în limbaj natural. În ultima instanta. Totusi trebuie facuta distinctie între cunostinte. fie prin modificarea celor existente.ro – Carti si articole online gratuite de la A la Z de motorul de inferenta asupra bazei de cunostinte. deoarece algoritmii de rationament im¬plementati în motorul de inferenta sunt în general aceiasi. care descriu rezol¬varea unei clase de probleme si fapte care descriu asertiuni de instantiere a unei probleme din clasa respectiva. Pentru blockquote se vor utiliza proprietăţile asupra următorului text: color. ceea ce va duce la o dezvoltare rapida a SE. indiferent de SE pe care dorim sa-1 dezvoltam. construind astfel rationamente care conduc la fapte noi(de iesire). acest modul este util si expertului uman pentru verificarea coerentei bazei de cunostinte. În unele publicatii. Este posibil acest lucru. (p) Modulul explicativ are rolul de a prezenta într-o forma larg accesibila (limbaj natural) justificarea rationamentelor efectuate de motorul de inferenta si totodata întrebarile la care trebuie sa raspunda utilizatorul. Altfel spus. Pe viitor. care pornind de la fapte (datele de intrare ale problemei) activeaza cunostintele corespunzatoare din baza de cunostinte. motorul de inferenta este un program care implementeaza algoritmii de rationament de¬ductiv. Totodata acest modul asigura si interfata de comunicare cu baza de date sau alte sisteme. Elementele principale ale unui SE sunt: . (p) În urma actiunii motorului de inferenta.www. inductiv si mixt. (p) Motorul de inferenta este elementul efectiv de prelucrare în SE.cartiaz. (p) 3. Cu toate acestea nu se poate construi un mecanism universal de inferenta pentru toate domeniile de expertiza. care înmagazineaza cunostintele expertilor umani dintr-un domeniu bine definit si apoi le folosesc pentru rezolvarea problemelor dificile din acest domeniu. text-align. (p) Modulul de achizitie a cunostintelor are rolul de-a transforma cunostintele din forma în care le exprima cogniticianul (inginerul de cunostinte) în forma interna de memorare pe suport.

elementele de activ si de pasiv de natura datoriilor se evalueaza si se reflecta în situatiile financiare anuale la valoarea de intrare.pentru bunurile reprezentând aport la capitalul social. regulile de produc¬tie si cadrele. (li) la cost de productie . dintre care cele mai importante sunt: retelele semantice. Baza de cunostinte contine ansamblul de cunostinte specializate într-un anumit domeniu. text-transform Se vor utiliza şi celelalte elemente CSS definite anterior Evaluarea la data intrarii în entitate (h3) La data intrarii în entitate. stabilita în urma evaluarii . este destul de laborios si necesita o conlucrare permanenta între cognitician si expert. Exista mai multe metode de reprezentare a cunostintelor.pentru bunurile obtinute cu titlu gratuit. modelarea de catre cognitician în conformitate cu cerintele metodei de reprezentare. modulul de achizitie a cunostintelor.ro – Carti si articole online gratuite de la A la Z - baza de cunostinte. introducerea în baza si validare. Pentru liste se vor utiliza proprietăţile asupra următorului text: color. care se stabileste astfel: (p) la cost de achizitie . (p) La fiecare data a bilantului: . Procesul de creare a bazei de cunostinte. baza de fapte. Acest proces presupune foarte multe iteratii si teste în cursul carora însasi expertul uman poate fi pus în dificultate pentru argumentarea unor optiuni.pentru bunurile procurate cu titlu oneros. motorul de inferenta.cartiaz. pusa de acord cu rezultatele inventarierii. (li) la valoarea de aport. preluate de cognitician de la expertul uman.pentru bunurile produse în entitate.www. cunostintele reflecta "obiectele" lumii reale si relatiile dintre ele. Privite în mod general. (li) la valoarea justa . line-height. (li) La încheierea exercitiului financiar. care consta în preluarea acestora de la expertul uman. bunurile se evalueaza si se înregistreaza în contabilitate la valoarea de intrare. modulul explicativ.

a).ro – Carti si articole online gratuite de la A la Z elementele monetare exprimate în valuta (disponibilitati si alte elemente asimilate. (li) . a caror decontare se face în functie de cursul unei valute. (li) elementele nemonetare achizitionate cu plata în valuta si înregistrate la cost istoric (imobilizari. între cursul de la data înregistrarii creantelor sau datoriilor în valuta sau cursul la care au fost raportate în situatiile financiare anterioare si cursul de schimb de la data încheierii exercitiului financiar. Diferentele de curs valutar. exprimate în lei. eventualele diferente favorabile sau nefavorabile. dupa caz. Determinarea diferentelor de valoare se efectueaza similar prevederilor lit. (li) pentru creantele si datoriile. dupa caz. (li) elementele nemonetare achizitionate cu plata în valuta si înregistrate la valoarea justa trebuie raportate utilizând cursul de schimb existent la data determinarii valorilor respective.cartiaz. se înregistreaza. care rezulta din evaluarea acestora se înregistreaza la venituri sau cheltuieli financiare. stocuri) trebuie raportate utilizând cursul de schimb de la data efectuarii tranzactiei. favorabile sau nefavorabile. la venituri sau cheltuieli financiare.www. cum sunt acreditivele si depozitele bancare. creante si datorii în valuta) trebuie evaluate si raportate utilizând cursul de schimb comunicat de Banca Nationala a României si valabil la data încheierii exercitiului financiar.

padding-right: 0. padding-bottom: 3cm. padding-right: 20px.} blockquote { padding-top: 1cm. Padding-ul este distanta dintre bordura unui element (X)HTML si continutul lui. Caracteristica care se stabileşte pentru elementul padding este size. padding-left: 40px.5cm.Laborator 2 Casete în CSS In CSS fiecărui element HTML îi poate fi asociată o casetă. Caseta are 4 părţi: content – conţinutul propriu-zis al elementului    padding – zona dintre conţinut şi bordură. padding-left: 40px. padding-bottom: 30px.} </style> . background: gray. background: red. border – marginea documentului margin – zona dintre element şi elementele similare adiacente Spaţiul liber Spaţiul liber este zona dintre conţinut şi bordură. Există următoarele proprietăţi de lăţime:  padding-top  padding-right  padding-bottom  padding-left  padding – corespunde ariei totale a spaţiului liber Exemplu de utilizare 1 <html> <head> <style> p {padding-top: 10px.

curent</td> . <caseta_interioara>Un alt sistem de cifrare larg răspândit este sistemul de criptare cu cheie publică. </p> <table> <tr> <td> Nr. background: cyan. CSS permite stabilirea de proprietati pentru elementele HTML utilizand o gamă larga de valori. oricine doreşte să transmită un mesaj. Aceste seturi de instructiuni se numesc programe sau aplicatii. Problema securităţii datelor se rezumă la asigurarea securităţii cheii de criptare. Aceasta trebuie păstrată în condiţii de siguranţă. Cheia privată va fi reprezentată de o pereche de numere prime foarte mari. background: red. fondul.} ul {padding: 1mm 2mm 3mm 4mm.} td {padding: 5 px. </blockquote> </body> </html> Exemplu de utilizare 2 <html> <head> <style> p {padding-top: 50px. Astfel. imaginile. putându-se recurge chiar la utilizarea poştei sau a mesagerilor. iar în cazul transmiterii ei pentru a fi utilizată la decriptare trebuie utilizate linii speciale. Calculatoarele proceseaza (prelucreaza) date prin intermediul unor seturi de comenzi. instructiuni. CSS se ocupa in general cu aspectul si controlul grafic al elementelor din pagina. Aceasta presupune ca pentru fiecare utilizator să fie stabilită o cheie privată şi o cheie publică. caracterele sunt substituite şi rearanjate corespunzător valorii cheii. va folosi cheia publică a utilizatorului căruia îi este adresat mesajul. background: yellow. de a efectua calcule complexe si de a furniza rezultate utilizatorului uman într-un timp foarte scurt. În cadrul unui bloc. culorile si asezarea acestora in cadrul ferestrei paginii.<body> <p> CSS este utilizat pentru imbunatatirea prezentarii unei pagini Web. </caseta_interioara> Transformarea textului iniţial în text cifrat va fi realizată pe baza cheii publice. furnizând ca rezultat un bloc de 64 biţi text cifrat.} caseta_interioara{padding: 10px 20 px 30 px 20 px. produsul acestora formând cheia publică. background: magenta. cum ar fi: textul. </p> <blockquote> Un calculator este un echipament electronic capabil de a procesa informatii.) </style> </head> <body> <p> Algoritmul DES foloseşte o cheie pe 64 biţi pentru un bloc de 64 biţi de text iniţial.

margin-bottom: 3 px. sa câstige 80% din piata browser-elor in numai câteva luni. margin-right: 2cm. dar multe dintre aceste modele nu sunt noi. margin-right: 2px. margin-left: -30px. background: red} blockquote {margin-top: 10%. Netscape Navigator.precizează o lăţime fixă <percentage> . il pot folosi pentru o perioada limitata de timp. Există 5 proprietăţi de lăţime:  margin-top  margin-right  margin-bottom  margin-left  margin Valori posibile pentru aceste proprietăţi: <length> . Clientii. aplicata de compania Netscape intre anii 1994 si 1995. margin-bottom: 3cm. margin-right: 20%.<td> Nume</td> </tr> <tr> <td>1</td> <td>Ionescu</td> </tr> </table> </html> Marginea Singura caracteristică pentru elementul margine este dimensiunea. background: yellow} bloc_special { margin-top: 1cm. Aceasta strategie. dupa care. il cumpara. margin-left: 2cm. Modelul este folosit si pentru vânzarea de masini. dar cu un succes mai modest.precizează o lăţime relativ la elementul părinte Exemplu de utilizare 1 <html> <head> <style> p {margin-top: 1px. o mare parte a aplicatiilor software de astazi sunt furnizate in variante de test pe Internet. De exemplu. dupa ce fac un download al unui program de pe site-ul companiei. margin-left: 4px. margin-bottom: 30%. a facut ca browser-ul companiei. Modelele de afaceri folosite pentru . daca respectivul program vine in intâmpinarea cerintelor lor. background: magenta} </style> </head> <body> <p> Comertul electronic foloseste diverse modele pentru desfasurarea on-line a afacerilor. </p> <blockquote> Modelele de afaceri on-line difera in functie de produsul care este vândut si de entitatile care intervin in cadrul unei tranzactii. fiind folosite si in alte contexte.

margin-left: -3cm. precum informatii sau acces la baze de date difera considerabil de cele folosite pentru vânzarea de bunuri fizice. fenomenele tind şi spre integrare. background: magenta} bloc_special1 { margin: 50pt. din ce în ce mai complexe. <bloc_special1> .vânzarea on-line de bunuri. banca. orice sistem fiind un subsistem al unuia mai mare. Rolul de factor coercitiv poate fi jucat de legi. la rândul lor. este că pe lângă organizare. background: olive} blockquote {margin-top: 1cm. Integrare prin forţă. etc. background: silver} </style> </head> <body> <bloc_special> Principilu integrării derivă din principiul ordinii şi organizării conform căruia diferitele elemente au tendinţa de a se organiza în sisteme. margin-right: 2cm. acte normative. transportator. Elementele unui sistem fac parte din acesta pentru că au apărut sau au luat naştere în acel sistem Integrarea prin constrângere. au tendinţa de a se organiza în alte sisteme. Şi invers: fiecare sistem de pe un anumit sistem de organizare a materiei este format dintr-o reuniune de subsisteme de ordin inferior. Ca urmare lumea devine o ierahie de integrări şi în univers nu există sisteme închise sau sisteme izolate. fără a mai utiliza suportul hîrtie (imprimanta sau fax). elementele sistemului fiind obligate să funcţioneze într-un anumit cadru organizatoric. Dacă organizarea duce la integrare şi integrarea duce la creşterea complexităţii. iar sistemele. </bloc_special> </body> </html> Exemplu de utilizare 2 <html> <head> <style> bloc_special {margin: 50pt. regulamente de organizare şi funcţionare. aceasta la rândul ei determină diversificare. </blockquote> <bloc_special> Comerţul electronic se referă la desfaşurarea activităţilor specifice mediului de afaceri utilizînd în special mijloace electronice (reţele de calculatoare) într-un sistem automatizat integrat pentru schimbul de informaţii de afaceri. cumpărător. În comerţul electronic informaţia circulă direct între agenţii implicaţi în afacere (vînzător. margin-bottom: 3cm. </bloc_special> <blockquote> Integrarea genetică. agent de service). Principiul integrării care rezultă din cele de mai sus.

ridge.Integrarea prin dependenţă. dashed. medium. </blockquote> </body> </html> Borduri Pentru elementul bordură se stabilesc trei caracteristici:  width  color  style Valori posibile pentru width sunt  lăţime – precizează o lăţime fixă  thin. aqua. dotted. Pentru aceasta sistemele trebuie să aibă posibilitatea de a alege şi capacitatea de a prelucra informaţiile care ar putea genera criterii de alegere. inset. solid. thick  inherit Valori posibile pentru style sunt:  none. solid. dashed. groove. Apartanenţa unui sistem la un sistem sau altul este rezultatul unei întâmplări. dotted. Integrarea întâmplătoare. outset  inherit width border-topwidth border-rightwidth borderbottom-width border-leftwidth border-width color border-topcolor border-rightcolor borderbottom-color border-leftcolor border-color style border-topstyle border-rightstyle borderbottom-style border-leftstyle border-style border-top border-right border-bottom border-left border Să se creeze exemple pentru toate tipurile de borduri astfel: a) exemplu pentru culori – yellow. Elementele unui sistem continuă să rămână în cadrul lui pentru că depind într-un fel sau altul de alte elemente (exemplu. groove. white. double. outset c) exemplu pentru lăţimea bordurii – nr-pixeli. thick d) exemplu pentru laturile bordurii cu diferite combinaţii de culori şi grosimi ale bordurii Se va completa un tabel de forma: . purple b) exemplu pentru stil de bordură – hidden. lime. medium. hidden. double. silver. thin. ridge. inset. Se referă la posibilitatea unor sisteme de a-şi alege sistemul căruia să-i aparţină. sistemul producţie este dependent de cel financiar sau ciclul bani-marfă-bani) </bloc_special1> Integrarea la alegere.

border-style: inset. border-top-color: red. }</style> Exemplu . border-bottom-color: green.Nr. border-width: thick. background: silver. crt 1 Efect <style> stil1 {color: white.

O regulă are două părţi: un selector şi o declaraţie. Stiluri in-line Se pot adăuga atribute style aproape la orice element HTML Exemple: <html> <body> <p style=”color:blue.>Acest paragraf este afisat cu CSS</p> . dir – defineşte direcţia de afişare a conţinutului elementului.Laborator 3 CSS. Exemple: {font-size: 10pt. Noţiuni teoretice Declaraţii O foaie de stil este un set de reguli.} {color: red. Valorile posibile sunt identificatori de limbă plasaţi între ghilimele. Valorile posibile sunt “ltr” (de la stânga la dreapta) sau “rtl” (de la dreapta la stânga). text-transform: uppercase.} Atribute universale pentru elementele HTML Acestea sunt: id – ataşează un identificator unic elementului class – ataşează o clasă elementului. Valorile posibile sunt liste de identificatori separaţi prin spaţii style – atribuie un stil elementului. Sintaxa este: nume_proprietate: valoare_proprietate Blocuri de declaraţii Un bloc de declaraţii este o listă de declaraţii separate cu semnul “. font-style: italic. text-align:center. Valorile posibile sunt cuprinse între ghilimele.”. lang – defineşte limba conţinutului elementului. Valorile posibile sunt secvenţe de declaraţii de stiluri title – atribuie un titlu elementului.

Un atribut obligatoriu al elementului <style> este type. </head>. </style>.css) . Exemplu de utilizare <html> <head> <style type="text/css"> p { color:blue. text-align:center..  href care are ca valoare adresa URL a fişierului foaie de stil extern (fişierul . Un fişier foaie de stil este de fapt un fişier text cu toate regulile definite. Secţiunea de stiluri se se inserează în interiorul <head> .. se plasează un element <link> în interiorul elementului <head> . Sunt necesare (şi obligatorii) trei atribute ale elementului <link>:  type cu valoarea “text/css”  rel cu valoarea “stylesheet”. } </style> </head> <body> <p>Curs CSS</p> <p>Acest paragraf este afisat cu CSS</p> </body> </html> Foi de stil în fişiere externe Se poate defini o foaie de stil într-un fişier extern şi apoi se poate lega la orice pagină Web care dorim să aibă acelaşi aspect.. Acesta va avea extensia . Modificările efectuate într-o pagină de stil vor afecta toate paginile Web legate la respectiva foaie. Pentru a crea o legătură între o pagină Web şi un fişier foaie de stil extern. </head> al respectivei pagini Web. Atributul rel este utilizat pentru a defini relaţia dintre fişierul cu stil şi documentul HTML.</body> </html> Foi de stil definite în interiorul documentului O foaie de stil poate fi plasată în interiorul documentului utilizând elementele <style> .. REL=StyleSheet specifică un stil preferat în timp ce REL="Alternate StyleSheet" defineşte o optiune pentru un alt stil... Pentru acest atribut se precizează valoarea “text/css”.css.

Dacă pentru respectivul element nu există nici un stil definit în foi externe. sunt aplicate stilurile HTML prestabilite. Dacă pentru respectivul element nu există nici un stil definit în interiorul documentului sunt aplicate stilurile în foi externe. CSS defineşte o precedenţă a stilurilor care determină ce stiluri se aplică asupra unui element: 1. 4. curent</td> <td> Nume</td> </tr> <tr> <td>1</td> <td>Ionescu</td> </tr> </table> <p> Scriere italic <bloc> cursorul pentru acest bloc este “crosshair”</bloc> </body> </html> Conţinutul fişierului css h3 {text-transform: uppercase} table {background: yellow. Selectorul universal Selectorul universal corespunde oricărui element şi este indicat de simbolul * Exemplu de utilizare . Dacă pentru respectivul element nu există un stil in-line atunci sunt aplicate stilurile definite în interiorul documentului. color: red} p {font-style: italic} bloc{cursor: crosshair} Stiluri în cascadă Asupra unui element pot fi aplicate simultan mai multe stiluri. 3. Dacă pentru respectivul element există un stil in-line atunci acesta este aplicat 2.Exemplu de utilizare <html> <head> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <h3> litere mari </h3> <table border=2> <tr> <td> Nr. Selectori.

</p> <p class="primul">Paragraf care utilizeaza p. bunurile se evalueaza si se înregistreaza în contabilitate la valoarea de intrare. <li> la cost de productie . <li> la valoarea justa . font-style: italic. stabilita în urma evaluarii pentru bunurile reprezentând aport la capitalul social. background: yellow} </style> </head> <body> <p>La data intrarii în entitate. <li> la valoarea de aport. </ul> </body> </html> Selectori.. Selectorul class Aproape orice element HTML poate accepta atributul class.aldoilea </p> .primul </p> <p class="aldoilea"> Paragraf care utilizeaza p.pentru bunurile procurate cu titlu oneros.primul {color: red} p.<html> <head> <style type="text/css"> * {color: red. De exemplu. Cu ajutorul atributului class se pot asocia elementelor HTML diferite formate... care se stabileste astfel: <ul> <li> la cost de achizitie .pentru bunurile produse în entitate.pentru bunurile obtinute cu titlu gratuit. Exemplu de utilizare Declaraţii CSS p.aldoilea {color: blue} Cod HTML <html> <body> <p>This is a normal paragraph. într-o situaţie un text poate avea o culoare rosie şi în altă situaţie el poate avea o culoare verde. .

font-color: olive. font-color: yellow. font-color: Helvetica. double. font-size: 16px} p.</p> <p class="primul">Paragraf care utilizeaza p.O declaraţie CSS de tip class va înlocui orice altă declaraţie CSS asupra aceluiaşi element.aldoilea </p> Exerciţii 1. groove.. aqua. Cod CSS p {color: green. font-size: 12 px h cu selectorul sase : font-family Garamond. font-size: 20 px h cu selectorul doi : font-family Verdana.. solid. Să se scrie un cod CSS utilizând selectorul class pentru a crea un format p astfel: p cu selectorul dreapta – paragraf aliniat la dreapta p cu selectorul stanga – paragraf aliniat la stanga p cu selectorul centru – paragraf aliniat la centru p cu selectorul stanga_dreapta – paragraf aliniat la ambele capete p cu selectorul un_rand_jumatate – paragraf scris la un rand jumatate (line-height) p cu selectorul doua_randuri – paragraf scris la doua randuri (line-height) p cu selectorul bordura_yellow– paragraf înconjurat de o bordură yellow p cu selectorul bordura_purple ..aldoilea {color: blue} Cod HTML <html> <body> <p>This is a normal paragraph.. font-size: 14 px h cu selectorul cinci: font-family Tahoma. white. font-color: red. . font-size: 10 px 2. inset.. dashed. font-color: blue. font-size: 16 px h cu selectorul patru : font-family Times New Roman.primul {color: red} p.paragraf înconjurat de o bordură purple .silver. Să se scrie un cod CSS utilizând selectorul class pentru a crea un format h astfel: h cu selectorul unu : font-family Courier New. dotted. ridge. font-size: 18 px h cu selectorul trei : font-family Arial. outset p cu selectorul bordura_latime_medie– paragraf înconjurat de o bordură cu grosimea medium p cu selectorul bordura_latime_mare– paragraf înconjurat de o bordură cu grosimea thick p cu selectorul bordura_latime_mica– paragraf înconjurat de o bordură cu grosimea thin . lime p cu selectorul bordura_hidden– paragraf înconjurat de o bordură de tip hidden.primul </p> <p class="aldoilea"> Paragraf care utilizeaza p. font-color: green.

color: red.Laborator 4 CSS. Casete în CSS . height: 100px.ascuns{border: 1px solid blue. putand gazdui comenzi CSS aplicabile la un bloc sau mai multe din continutul paginii. overflow: hidden.} </style> </head> <body> <p> <div class="ascuns"> Acest bloc are atributul hidden</div> <p> <div class="vizibil"> Acest bloc are atributul visible</div> <p> <div class="scrol"> Acest bloc are atributul scroll <img src="flori. Valori posibile pentru overflow sunt:  visible – conţinutul nu este decupat şi va fi afişat în afara elementului casetă  hidden – conţinutul este decupat şi nu poate fi derulat  scroll .} div. height: 50px. height: 50px. width: 100px.vizibil{border: 1px solid red. width: 100px.scrol{border: 1px solid black. color: olive.} div. color: blue. Valorile posibile sunt: rect (top right bottom left) .conţinutul este decupat dar poate fi derulat Eticheta <div> functioneaza asemanator cu eticheta <p>. overflow: scroll.continuare Proprietatea overflow Proprietatea overflow stabileşte cum este afectat conţinutul unui element de nivel bloc atunci când acesta nu încape în spaţiul alocat elementului. width: 300px. overflow: visible.jpg" > </div> </body> </html> Decuparea Proprietatea clip permite să se facă vizibilă doar o porţiune din caseta ataşată unor elemente poziţionate. Exemplu de utilizare <html> <head> <style> div.

jpg"> </body> </html> Proprietatea background-color Proprietatea background-color permite stabilirea culorii de fundal a casetei. 200px. clip:rect(10px.200. Codurile de culoare se găsesc la adresa http://www. Valori posibile sunt specificaţii de culori CSS valide.  top şi bottom reprezintă numere întregi care sunt distanţe în pixeli faţă de marginea de sus a casetei right şi left numere întregi reprezentând distanţe în pixeli faţă de marginea din stânga a casetei top left bottom right <html> <head> </head> <body> Imaginea normala : <img src="flori.com/p142. 400px. 10px)" src="flori.php Exemple:  blue  rgb(100.0)  “#0000ff” Exemplu de utilizare <html> <head> </head> <body style=”background-color: yellow”> Text 1 pe fundal galben <i style=”background-color: lightgreen”> Text scris cu italic pe fond verde</i> <h3 style=”background-color: red”> Text scris cu heading 3 pe fond rosu</h3> <table border style=”background-color: lightblue”> <tr> <td>tabel pe fond albastru deschis</td> <td>c12</td> </tr> <tr style=”background-color: green”> .jpg" ><br> Imaginea sectionata: <img style="position: absolute.somacon.

jpeg.png”). Proprietatea background-image Proprietatea background-image permite să se stabilească imaginea de fundal a casetei. Se vor utiliza imaginile din folderul background.Repeat Horizontally sau Vertically Implicit proprietatea background-image repeată o imagine atât orizontal cât şi vertical.site_imagini. <html> <head> <style type="text/css"> body { background-image:url(“gradient. Situaţia când nu se foloseşte repeat.jpg) Exerciţiu Să se modifice exemplul precedent astfel încât în loc de background-color să se utilizeze background-image.jpg)  url(http://www. Background Image . png) Exemplu  url(imagine. Totuşi unele imagini ar trebui repetate numai orizontal sau vertical.ro/floare. Valorile posibile sunt adrese URL care indică fişiere valide (gif.<td> rand pe fond verde</td> <td style=”background-color: magenta”>celula pe fond magenta</td> </tr> </table> <ul style=”background-color: #f0f0f0”>lista pe fond f0f0f0 <li>element 1 <li style=”background-color: lightgreen”>element pe fundal verde deschis </ul> </body> </html> Exerciţiu Să se modifice exemplul precedent astfel încât în loc de stilul inline utilizat să se folosească elemente class. } </style> </head> <body> <h1>Buna ziua!</h1> </body> .

jpg'). background-repeat:no-repeat.</html> Imaginea este repetată orizontal. } Imaginea nu este repetată body { background-image:url('flori. body { background-image:url('gradient.png) şi imagine care nu se repetă (fişierul flori. } Să se scrie exemple cu situaţiile imagine repetată orizontal (fişierul gradient.png'). background-repeat:repeat-x.jpg) .