Tehnologii Web, laborator 2010

LABORATOR 4. CSS
Foi de stil

1. Consultati tutorialul on-line de la adresa: http://www.w3schools.com/css/default.asp.

2. Creati un document HTML care contine urmatoarele stiluri inline (definite la nivel de tag)
pentru:
a. Tagul body : imagine pe fundal, care se repeta
b. Tagul p: font arial, 18pt, culoare rosu, subliniat,chenar punctat
c. Tagul H1 : font Couerier New, 26 pt, italic, bold
d. Tagul ul: stil patrat (square).
3. Creati un document HTML care contine definirea stilurilor de la exercitiul anterior in antetul sau.
4. Creati un fisier .css cu definitiile de stil de la Exercitiul 2 si un document HTML care utilizeaza
aceste definitii.
5. Creati un document HTML in care tag-ul p are urmatoarele proprietati (definite in antet):
dimensiune text 14 pt, culoare rosie, aliniat la stanga, prima linie identata 15 pt la stanga, prima
linie de culoare albastra si scrisa cu majuscule.
6. Creati un document HTML care contine legaturi ce se afiseaza se fundal diferit astfel:
a. Vizitate: gri
b. Active: rosu
c. Nevizitate: alb
d. Cu focus (hover): galben
7. Creati o clasa de stil cu urmatoarele proprietati:
a. culoare text rosu, bold, “Monotype Corsiva”, text de 18pt cu caractere suprapuse cu 5
px, subliniat, aliniat la stanga, chenar diferit pentru fiecare latura.
b. culoare text albastru, bold, “Monotype Corsiva”, text de 24pt cu cuvinte distantate la
0.3cm, clipitor, aliniat la centru, chenar cu linie dubla.
Puneti in evidenta clasele de stil.
8. Creati un document HTML in care creati 3 clase de stil pentru tag-ul p:
a. Prima clasa: text culoare albastra, aliniere la centru, Monotype Corsiva 14 pt, chenar tip
groove de culoare rosie.
b. A doua clasa: text aliniat la stanga, Courier New 16 pt, chenar linie dubla, linia inferioara
a chenarului de latime 10 pt.
c. A treia clasa: text aliniat la dreapta, 12 pt, culoare albastra, chenar tip solid cu linia de
sus de culoare rosie, cea din stanga de culoare verde, cea din dreapta de culoare
albastra, iar cea de jos de culoare portocalie.
Introduceti un text si puneti in evidenta cele trei clase de stil.

9. Creati definitiile de stil necesare paginii universitatii Ovidius Constanta (www.univ-ovidius.ro)

10. Testati-va cunostintele: http://www.w3schools.com/css/css_quiz.asp .
11. Testati-va cunostintele: http://www.w3schools.com/html/html_quiz.asp .

Ozten Chelai, Laborator 4 TW pag. 1 3/9/2010