Dada

Laborator 5
Pornim definirea foilor de stil denumite CSS cu un scurt istoric al acestora. Odată cu dezvoltarea
paginilor Web și a limbajului HTML apare necesitatea introducerii de proprietăți care să permită
definirea unor aspecte de stilizare a elementelor introduse de către tag-urile HTML (de exemplu
culoare, dimensiune, etc.). Specificațiile HTML 3.2 introduceau astfel de tag-uri și atribute prin
intermediul cărora se puteau defini proprietăți pentru font, culoare, dimensiune și pentru a schimba
modul în care aceste elemente sunt afișate în cadrul paginilor Web. Noile atribute au avut un impact
pozitiv în ceea ce privește aspectul paginilor Web, însă dezvoltatorii se confruntau în această situație
cu o eficiență scăzută deoarece pentru fiecare element trebuia definit stilul în cadrul tag-ului
corespuzător chiar dacă aceasta însemna definirea acelorași atribute de mai multe ori.
Exercițiul 1
Pentru exemplificare vom considera o pagină Web care să conțină 2 titluri de nivel 1 introduse prin
tag-ul H1 și 3 paragrafe – tagul P. Salvați această pagină cu denumirea P1.html
Pentru elementele de tip paragraf din cadrul paginii realizate dorim să definim o modalitate prin care
paragrafele să utilizeze următorul stil al textului – Tip font - Arial, Dimensiune - 4, Culoarea textului –
roșie, Bold.
<!DOCTYPE HTML>
<html>
<head>
<title> Pagina exemplu 1 </title>
</head>
<body>
<h1> Titlu 1 </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1> Titlu 2 </h1>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
După adăugarea elementelor de stil al textului pagina va arăta ca în exemplul de mai jos:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h1> Titlu 1 </h1>
<p><font face="Arial" color="red" size="4"><b>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</b></font></p>
<h1> Titlu 2 </h1>
</body>
</html>
De remarcat faptul că aceleași tag-uri și atribute trebuiau introduse pentru fiecare paragraf în parte,
caz în care pentru o pagină Web cu conținut textual bogat însemna un volum mare de muncă și
eficiență redusă. Precizăm faptul că în versiunea HTML 4.01 tag-ul Fontera considerat depășit, iar în
HTML 5 el nu este acceptat.
Astfel se punea problema separării elementelor de stil de elementele HTML care introduceau
structura și găsirea unei modalități prin care aceste stiluri să fie definite o singură dată pentru un
anumit tip de element. De exemplu, definirea unui stil al textului care să fie aplicat pentru toate
paragrafele din cadrul unei pagini Web. În HTML 4.0 au fost adăugate foile de stil CSS care rezolvau
această problemă, permițând definirea stilului pentru un tag HTML o singura data, iar browser-ul
aplica stilul specificat pentru fiecare aparitie a elementului html.
De asemenea, începând cu specificațiile HTML 4.0 definirea stilului se poate realiza într-un fișier
extern, cu extensia .CSS, fapt ce asigură separarea totală între stil și structura paginii HTML.
Denumirea CSS provine de la Cascading Style Sheets
Sintaxa CSS
Sintaxa CSS este simplă și implică 2 părți:
 Un selector – care indică tag-ul sau elementul pe care va fi aplicat stilul

 și una sau mai multe declarații.
O declarație include perechea:

proprietate: valoare a proprietății
Declarațiile corespunzătoare unui selector sunt încadrate între acolade și sunt despărțite între ele de
;. Exemplu de definire a stilului pentru un paragraf – culoarea textului roșie, tipul fontului Arial,
dimensiunea fontului 14px:
P Selector
{
color:red;
font-family:Arial; Color =proprietate
font-size:14px; Red=valoarea
}
Sintaxa CSS poate fi definită pe trei nivele:
 inline - direct in sursa html a paginii web, in interiorul elementului prin intermediul
atributului style, fiecare selector fiind despărțit de prunct și virgulă
 embedded - în header-ul paginii web prin intermediul tag-ului style
 external - într-nl fișier extern atașat paginii web
Adăugarea unui comentariu in CSS se realizează prin /*- început de comentariu și */ - final de
comentariu.
/*Acesta este un comentariu*/
Adăugarea stilului CSS în zona de antet (header) a unei pagini Web - Embedded.
Din considerente didactice pornim exemplificarea cu nivelul Embedded.
În cadrul unei pagini Web stilul CSS poate fi introdus în cadrul zonei de antet prin intermediul tagului
Style și a atributului Type =text/css.
Exercițiul 2
Realizați o pagină Web asemănătoare cu cea creată la exercițiul 1 – 2 titluri, 3 paragrafe. Salvați
pagina cu denumirea P2.html. Pentru elementele de tip paragraf din cadrul paginii realizate dorim să
definim o modalitate prin care paragrafele să utilizeze următorul stil al textului – Tip font - Arial,
Dimensiune – 14px, Culoarea textului – roșie.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
P
{
color:red;
font-family:Arial;
font-size:14px;
}
</style>
</head>
<body>
<h1> Titlu 1 </h1>
aliqua.
aliqua.
<h1> Titlu </h1>
aliqua.
</body>
</html>
Exercițiul 3
Pentru elementele de tip titlu de nivel 1 definiți următorul stil: Culoarea fundalului – Albastru, Culoarea Textului – Alb, Tipul
fontului – Verdana Dimensiunea fontului - 18px, Bold
Tagul Style va conține în acest sens următoarele definiții:
P
{
color:red;
font-family:Arial;
font-size:14px;
}
h1
{
background-color:blue;
color:white;
font-family:Verdana;
font-size:18px;
font-weight:bold;
}
</style>
Se poate observa faptul că introducerea unor astfel de definiții de stil o singură dată în cadrul zonei de antet afectează toate
elementele de structură P și H1.
Adăugarea stilului CSS într-un fișier extern paginii Web - External.
Necesitatea aplicării aceluiașă stil pe mai multe pagini Web a condus la apariția fișierelor externe de stil. În acest caz
stilurile sunt definite în cadrul unui fișier cu extensia .css și atașate prin intermediul tagu-ului LINK în zona de header.
Exercițiul 4
Realizați o pagină Web asemănătoare cu cea creată la exercițiul 2 – 2 titluri, 3 paragrafe. Salvați
pagina cu denumirea P3.html. Definiți stilurile discutate la exercițiile 3 și 4 în cadrul unui fișier extern
și atașați acest fișier paginii Wen P3.html.
Conținut fișier de stil – stil.css
P
{
color:red;
font-family:Arial;
font-size:14px;
}
h1
{
background-color:blue;
color:white;
font-familyVerdana;
font-size:18px;
font-weight:bold;
}
Conținut pagina P3.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<h1> Titlu 1 </h1>
<h1> Titlu </h1>
</body>
</html>
Exercițiul 5
Atașați acest fișier de stil unei pagini Web nou realizate.
Adăugarea stilurilor inline
Un stil CSS poate fi definit și pentru un element aparte în cadrul unei pagini web prin intermediul
atributului Style atașat elementului de structură corespunzător.
Exemplu
<p style="color:red; font-family:Arial; font-size:14px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
Ordinea de prioritate a definițiilor CSS

În cazul în care există mai multe definiții de stil atașate aceluiașă element de structură, conform
W3Schools ordinea de prioritate este următoarea:
 stilul inline
 stilul embendded – definit in header
 stilul definit într-un fișier extern
 stilul browser default
Selectorul Class
Selectorul Class este utilizat pentru a specifica stilul unui grup de elemente. Astfel poate fi stabilit
stilul pentru mai multe elemente HTML care fac parte din aceeași clasă.
Selectorul Class este definit prin . și numele clasei și este atașat unui element HTML prin intermediul
atributului Class.
Exercițiul 6
Realizați o pagină Web P4.html care să conțină 3 titluri de nivel 1 și 3 paragrafe. Atașați următorul stil
primului titlu de nivel 1 și primului paragraf: tip font – Verdana, dimensiune 14px, culoarea fontului –
verde.
Se observă faptul că același stil ar trebui atașat unor elemente definite prin tag-uri diferite. În acest
caz definim inițial o clasă denumită – format1 și o atașăm elementelor precizate. Codul va avea
următoarea structură:
<!DOCTYPE HTML>
<html>
<head>
.format1
{
font-size:14px;
color:green;
}
</style>
</head>
<body>
<h1 class="format1"> Titlu 1 </h1>
<p class="format1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
<h1> Titlu 2 </h1>
aliqua.
<h1> Titlu 3 </h1>
aliqua.
</body>
</html>
Modificați conținutul tag-ului style cu următoarea structură și observați ordinea de prioritate intre un
stil definit în general și un selector de clasă:
.format1
{
font-size:14px;
color:green;
}
p
{
color:blue;
}
</style>
În cazul în care același stil se aplică pe o clasă de elemente de același fel – de exemplu o serie de
paragrafe din text, dar nu pe toate paragrafele, se poate utiliza următoarea definiție:
Exercițiul 7
Creați o pagină nouă P5.html care să conțină 5 paragrafe. Atașați următorul stil doar pe paragrafele
impare – 1,3,5 - tip font – Verdana, dimensiune 14px, culoarea fontului – verde.
Pagina va avea următoarea structură:

<!DOCTYPE HTML>
<html>
<head>
p.stilpimpar
{
font-size:14px;
color:green;
}
</style>
</head>
<body>
<p class="stilpimpar">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
</body>
</html>
Selectorul ID
Selectorul ID se utilizează pentru a specifica un stil pentru un element unic. Avantajul utilizării unui
astfel de stil diferă față de atașarea inline prin faptul că acel element primește un ID unic, care poate
fi utilizat în refențierea stilurilor elementelor de structură cuprinse în acel tag.
Selectorul ID se definește prin #numeselector și este atașat elementului de structură HTML prin
intermediul atributului ID.
Exercițiul 8
În cadrul paginii P5.html atașați următorul stil pentru paragraful 2 - tip font – Arial, dimensiune 18px,
culoarea fontului – roșie.
<!DOCTYPE HTML>
<html>
<head>
p.stilpimpar
{
font-size:14px;
color:green;
}
#exemplu
{
font-family:Arial;
font-size:18px;
color:red;
}
</style>
</head>
<body>
<p id="exemplu">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
</body>
</html>

Dada

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Dada

Încărcat de

Drepturi de autor:

Formate disponibile

Laborator 5

Denumirea CSS provine de la Cascading Style Sheets

Sintaxa CSS este simplă și implică 2 părți:

 Un selector – care indică tag-ul sau elementul pe care va fi aplicat stilul

O declarație include perechea:

Sintaxa CSS poate fi definită pe trei nivele:

/Acesta este un comentariu/

Din considerente didactice pornim exemplificarea cu nivelul Embedded.

Tagul Style va conține în acest sens următoarele definiții:

Conținut fișier de stil – stil.css

Conținut pagina P3.html

Adăugarea stilurilor inline

Ordinea de prioritate a definițiilor CSS

Pagina va avea următoarea structură:

S-ar putea să vă placă și