Scribd
Încărcați
308 vizualizări41 pagini

Curs CSS

Documentul prezintă noțiunile de bază ale limbajului CSS. Sunt explicate sintaxa regulilor CSS, metodele de inserare a regulilor în documentele web și tipurile de selectori CSS, cum ar fi selectorii de element, clasă și ID.

Încărcat de

bmonaanda
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
308 vizualizări41 pagini

Curs CSS

Documentul prezintă noțiunile de bază ale limbajului CSS. Sunt explicate sintaxa regulilor CSS, metodele de inserare a regulilor în documentele web și tipurile de selectori CSS, cum ar fi selectorii de element, clasă și ID.

Încărcat de

bmonaanda
Drepturi de autor
© © All Rights Reserved
Respectăm cu strictețe drepturile privind conținutul. Dacă suspectați că acesta este conținutul dumneavoastră, reclamați-l aici.
Formate disponibile
Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
Sunteți pe pagina 1/ 41

Cuprinsul lectiei

Cuvant introductiv
Notiunile de baza a CSS
o Sintaxa normelor CSS
o Metodele de inserare a normelor CSS intr-un document web
o Comentariile in fisierele css
Selectorii CSS
o Selectorii uzuali ai CSS
o Selectorii avansati ai CSS
o Gruparea selectoarelor
Rezumatul lectiei
o Sintaxa normelor CSS
o Metodele de inserare a normelor CSS intr-un document web
o Comentariile in fisierele css
o Selectorii CSS
Exercitii

1.1. - Cuvant introductiv


In cursul de HTML, am vorbit despre cum sa structuram si sa dam sens
informatiilor continutului paginilor web. In acest curs ne vom ocupa de
stilizare, de modul si locul in care sunt redate elementele HTML in pagina.
CSS - Cascading Style Sheets - este un limbaj folosit pentru controlul
asupra prezentarii elementelor unui document, care a fost scris in limbaj
cu marcatori - HTML sau XHTML. Prin CSS putem seta culoarea, marimea,
stilul fonturilor continute in diferite elemente HTML, culoarea de fundal,
marimea si pozitia pe care o vor ocupa diferitele elemente HTML, si inca
multe alte lucruri.
CSS este destinat sa ne permita sa separam continutul documentului
(scris in XHTML), de modul sau de prezentare (scris in CSS). Aceasta
separare are unele avantaje, pe care le-am descris in lectia de inceput a
cursului de HTML. Avantajele cele mai importante sunt eficientizarea
muncii de proiectare, si cresterea accesibilitatii documentelor. Putem ca
acelasi element HTML, sa arate diferit in functie de metoda de redare - de
exemplu intr-un fel pentru afisarea pe ecran si pentru printare, si in altfel
pentru cititorul de ecran.
Pana acum in cursul HTML, am folosit setarile de stilizare predefinite ale
browser-elor, care cu toate ca variaza putin de la browser la browser, au
totusi cateva caracteristici comune si anume folosesc fonturi negre pentru
text, fonturi albastre pentru link-uri, fonturi rosii pentru link-uri vizitate
deja, etc. Dupa ce vom invata CSS, veti putea sa faceti propiile voastre
stilizari in functie de propiile optiuni.

CSS se foloseste de mult timp, a fost propusa in 1994 si a fost agreata de


W3C in 1996, dar doar in ultimii ani browser-ele au suport suficient de
fiabil pentru utilizarea lui fara probleme.
Reintoarcere la cuprins

1.2. - Notiunile de baza a CSS


1.2.1. - Sintaxa normelor CSS
Sa nu pierdem timpul, si sa incepem cu sintaxa de baza a normelor CSS.
selector
{ propietate_1:valoare 1;
propietate_2:valoare 2;
....................;
propietate_n:valoare n;
}

O norma CSS se compune din:

selector - aceasta componenta, identifica elementul (sau elementele,


cum vom vedea mai tarziu) HTML, careia i se aplica norma
acoladele - definesc, mai bine zis delimiteaza, care propietati si cu ce
valori se aplica elementului HTML
propietati - sunt elementele de aspect care vrem sa le modificam;
ele sunt de o mare diversitate, pornind de la culoare, dimensiuni,
caractere.
valori ale propietatilor - sunt noile valori pe care vrem sa le atribuim
propietatii respective; fiecare propietate suporta un anumit, sau mai
precis spus, anumite tipuri de valori; de exemplu culoarea poate fi
data in trei moduri: hexazecimal - #ffaa99; prin denumire - red; cu
valori rgb - rgb(123,255,17);

Dar sa vedem si un exemplu real, ca sa intelegeti mai bine.


abbr{margin:2px 9px;
color:#095;}

Selectorul defineste ca propietetile se aplica


elementelor abbr (abreviere). Propietatile care le modifica aceasta norma
sunt marginea care va fi de 2 pixeli sus si jos si de 9 pixeli in stanga si
dreapta, iar ultima propietate va face aceste caractere sa fie verzi.
<head>
<style type='text/css'>
abbr{margin:2px 9px;
color:#095;}
</style>
</head>
<body>
<h2>Titlu principal</h2>
<h3>Subtitlu 1</h3>
<p>Paragraf 1 ..<br />
<abbr>Dr.</abbr> Popescu...
</p>
<p>Paragraf 2 ...<br />
<abbr>HTML</abbr> este....
</p>
</body>

Titlu principal
Subtitlu 1
Paragraf 1 ..
Dr. Popescu...
Paragraf 2 ...
HTML este....

Exemplul 1 - 1.
Reintoarcere la cuprins

1.2.2. - Metodele de inserare a normelor CSS


intr-un document web
Inainte de a aprofunda propietatile CSS ar trebui, dupa parerea mea, sa
stim cum se pot aplica aceste propietati documentelor HTML. In principiu
sunt trei metode de a conecta CSS cu HTML, si anume:

stilizare in linie
stilizare incorporata
stilizare externa

Am spus in principiu, deoarece in afara unor cazuri speciale, dependente


de cine stie ce conjunctura, este recomandat sa folositi ultima varianta, si
veti vedea in curand si de ce.

1.2.2.1. - Stilizarea in linie


Stilizarea in linie este foarte asemanatoare , si chiar mai greoaie as putea
spune, cu stilizarea folosind HTML. Sa vedem un exemplu:
<p style="background:#179;
color:white;
padding:10px;">
Aici ar trebui sa avem un paragraf.....<br />
care are caracterele albe pe fond albastru.
</p>

Aici ar trebui sa avem un paragraf.....


care are caracterele albe pe fond albastru.

Exemplul 1 - 2.
Retineti ca propietatile de stilizare CSS sunt introduse in elementele HTML
prin atributul style, respectand regulile sintactice definite in subcapitolul
precedent, cu deosebirea ca nu avem selector si propietatile nu se inchid
intre acolade.
Acest mod de stilizare are toate neajunsurile stilizarii cu HTML, de aceea
este bine sa-l folosim cat mai putin, preferabil de loc.

1.2.2.2. - Stilizarea incorporata


Acest mod de stilizare (embedded styles), se insereaza in elementele
HTML head sistyle cum puteti vedea in exemplul de mai jos:
<head>
<style type="text/css" media="screen">
p {background:black;
color:white;
padding:10px;
}
</style>
</head>

Avantajul stilizarii incorporate este ca nu trebuie sa inserati


atributul style in fiecare element paragraf, adica puteti sa stilizati toate
paragrafele cu o singura definitie. Asta inseamna ca daca trebuie sa
modifici aspectul paragrafelor poti face acest lucru dintr-o singura locatie.
Totusi acest avantaj este limitat doar la o singura pagina, deoarece fiecare
pagina necesita o foaie de stil.

1.2.2.3. - Stilizarea externa - style sheets


Foile de stil externe, va dau posibilitatea de a pune toate definitiile CSS
intr-un singur fisier, sa-l salvati cu extensia .css si apoi sa-l aplicati in
documentul HTML, folosind un element link in elementul head al
documentului.
<head>
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen" />
</head>

Am mai discutat despre elementul HTML link in ultimul capitol al cursului


HTML. Totusi sa ne reamintim cateva lucruri importante:

atributul rel - Specifica relatia dintre documentul apelant si


documentul legat. Are numeroase valori posibile, dar in cazul de fata
valoarea sa trebuie sa fie stylesheet.
atributul href - cum am vazut si la elementul link, specifica adresa
(URL) de unde se introduce fisierul foaie de stil.
atributul type - Specifica tipul MIME a documentului legat, adica
defineste ce fel de resursa este (extensia fisierului nu este suficienta
pentru a determina aceasta). - in cazul nostru trebuie sa aiba
valoarea text/css
atributul media - este optional, se foloseste doar cand avem mai
multe foi de stil pentru diverse tipuri media - defineste carui tip de
media i se aplica aceasta foaie de stil. Ca valori pe langa screen, in
cazul de fata, putem sa mai avem tty, tv, projection, handheld,
print, braille, aural, si all. Pentru a cunoaste la ce se refera fiecare
valoare, vedeti lectia 10.

Aceasta este metoda recomandata de a aloca stil unei pagini, deoarece


aceasta foaie de stil se poate aplica intregului site, fiind identica pentru
fiecare pagina. Asta inseamna ca modificand un singur fisier (sau cateva
daca ai mai multe foi de stil in functie de atributul media), ai modificat
stilizarea intregului site.
Reintoarcere la cuprins

1.2.3. - Comentariile in fisierele css


Ca la orice limbaj de programare, este bine sa sti cum sa inserezi
comentariile inca din faza de inceput al cursului, pentru ca sa explicitezi
instructiunile continute de program, si in acelasi timp sa structurezi

programul, pentru ca sa fie cat mai citibil. Sintaxa comentariilor in CSS


este:
/* Comentariu */

Comentariile pot fi pe o linie sau pe mai multe, tot ce este inchis


intre /* si */ nu este afisat si nici luat in considerare de browser.
Comentariile se pot insera fie intre norme fie intre propietati, fie chiar sa
includem anumite norme sau propietati in comentarii. Acest lucru ne
poate fi de ajutor atunci cand verificam functionarea unor anumite norme
sau propietati asupra paginii.
Reintoarcere la cuprins

1.3. - Selectorii CSS


1.3.1. - Selectorii uzuali ai CSS
CSS-ul are mai multe tipuri de selectori. Selectorii cei mai des folositi, prin
urmare si cei mai importanti sunt:

selector element
selector class
selector id

Sa le luam pe rand si sa vedem sintaxa si functionarea lor.

1.3.1.1. - Selectorul element


Acest selector aplica propietatile continute, tuturor elementelor de acest
tip.
h5 {color:blue;}

Toate elementele h5 din pagina vor avea culoarea albastra.


Acelasi efect il avem daca folosim urmatorul program :
<head>
<style type='text/css'>
h5{color:blue;}
</style>
</head>
<body>
<h3>Sel element</h3>
<h4>Subtitlu 4</h4>
<h5>Subtitlu 5</h5>
<p>Paragraf 1 ....
...Final de paragraf
</p>
<h5>Subtitlu 5</h2>
<p>Paragraf 2 ...

...Final de paragraf
</p>
</body>

Sel element
Subtitlu 4
Subtitlu 5

Paragraf 1 .... ...Final de paragraf


Subtitlu 5

Paragraf 2 ... ...Final de paragraf

Exemplul 1 - 3.

1.3.1.2. - Selectorul class


Acest selector aplica propietatile continute, tuturor elementelor care au
valoarea atributului class identica cu selectorul.
.nume_clasa{color:blue;}

Toate elementele HTML, indiferent de tipul lor, care au valoarea


atributuluiclass="nume_clasa", vor avea culoarea albastra. Retineti ca
selectorul class nu face distinctie fata de tipul, numele, elementului.
Daca folosim urmatorul program:
<head>
<style type='text/css'>
.ex4{color:blue;}
</style>
</head>
<body>
<h2>Sel class</h2>
<h3 class='ex4'>Subtitlu 1</h3>
<p>Paragraf 1 ...
...Final de paragraf
</p>
<p class='ex4'>Paragraf 2 ...
...Final de paragraf
</p>
<h3>Subtitlu 2</h3>
<p class='ex4'>Paragraf 3 ...
...Final de paragraf
</p>
</body>

Sel class
Subtitlu 1

Paragraf 1 ... ...Final de paragraf


Paragraf 2 ... ...Final de paragraf

Subtitlu 2
Paragraf 3 ... ...Final de paragraf

Exemplul 1 - 4.
browser-ul va afisa ceva asemanator cu ceea ce se poate vedea in
imaginea din dreapta, adica toate elementele (indiferent ca
sunt h2 sau p), care au ca atributclass='ex4', vor fi afisate cu caractere
albastre.

1.3.1.3. - Selectorul id
Acest selector aplica propietatile continute, elementului care are valoarea
atributului ididentica cu selectorul.
#nume_id {color:orange;}

Elementul care are valoarea atributului id="nume_id", va avea culoarea


portocalie. Retineti ca selectorul id nu face distinctie fata de tipul
elementului HTML si ca intr-un document HTML, poate fi doar un singur
element cu id-ul nume_id, pe pagina.
Daca folosim urmatorul program:
<head>
<style type='text/css'>
#ex5{color:green;}
</style>
</head>
<body>
<h2>Sel. id</h2>
<h3 class='ex5'>Subtitlu 1</h3>
<p>Paragraf 1 ...
...Final de paragraf
</p>
<p id='ex5'>Paragraf 2 ...
...Final de paragraf
</p>
<h3>Subtitlu 2</h3>
<p class='ex5'>Paragraf 3 ...
...Final de paragraf
</p>
</body>

Sel. id
Subtitlu 1

Paragraf 1 ... ...Final de paragraf


Paragraf 2 ... ...Final de paragraf

Subtitlu 2
Paragraf 3 ... ...Final de paragraf

Exemplul 1 - 5.
browser-ul va afisa, cum puteti vedea in imaginea din dreapta a
exemplului de mai sus, cu caractere verzi doar elementul care are ca
atribut id="ex5", nu si elementele care au ca atribut class="ex5", adica
paragraful 3 si Subtitlul1.
Reintoarcere la cuprins

1.3.2. - Selectorii avansati ai CSS


In subcapitolul precedent, v-am prezentat selectoarele de baza ale CSS,
cel pentru elemente, pentru clase si id. Cu acesti selectori de obicei se
realizeaza mare parte a stilizarii documentelor, dar uneori poate sa nu fie
suficient. De aceea CSS a introdus o serie de selectori mai speciali, si
anume:

selector universal : poate fi folosit pentru a selecta toate elementele


din pagina
selector de atribut: selecteaza elementele pe baza atributelor lor
selector child: cand vrei sa selectezi un element anumit, care este
copilul altui element specificat, se foloseste acest selector
selector descendent: daca vrei sa selectezi un anumit element, care
este descendent al unui anumit element, nu direct copil, ci mai jos pe
arborele genealogic, puteti folosii acest tip de selector
selector adjacent sibling (frate alaturat): daca vrei sa selectezi
doar un anumit element, care urmeaza altui element, foloseste acest
element
pseudo-classes: acestea va permit sa stilizati elementele pe baza a
nu ce elementele sunt, ci pe factori mai ezoterici cum ar fi starea linkului (de exemplu daca planati deasupra lui, sau a fost vizitat deja)
pseudo elemente: acestea va permit sa stilizati anumite parti al unui
element, nu intregul element (de exemplu prima litera din acel
element); de asemenea va permite sa inserati continut inainte sau
dupa acel element specificat

1.3.2.1. - Selectorul universal

Pur si simplu selectoriul universal selecteaza toate elementele paginii, ca


sa le aplice stil. De exemplu, urmatoarea norma spune ca toate
elementele din pagina vor avea un contur solid de 2px de culoare verde:
* { border: 2px solid #00ff00;}

Daca folosim urmatorul program:


<head>
<style type='text/css'>
* { color: green;}
</style>
</head>
<body>
<h1>Titlu principal</h1>
<h2 class='e'>Subtitlu 1</h2>
<p>Paragraf 1 ...
...Final de paragraf
</p>
<p id='exe'>Paragraf 2 ...
...Final de paragraf
</p>
<h2>Subtitlu 2</h2>
<p class='ex'>Paragraf 3 ...
...Final de paragraf
</p>
<p>Paragraf 4 ...
...Final de paragraf
</p>
</body>

Exemplul 1 - 6.

Browserul va afisa continutul tuturor elementelor paginii cu verde,


indiferent de atributele pe care le contin, atata timp cat nu au alte norme
definite care sa le modifice.

1.3.2.2. - Selectorul de atribute


Selectorii de atribute va permit sa selectati elementele pe baza atributelor
pe care le contin. Sintaxa acestor selectori este urmatoarea:
[nume_atribut] { border: 2px solid #00ff00; }

Retineti parantezele drepte din sintaxa.


<head>
<style type='text/css'>
[style]{color:red;}
</style>
</head>
<body>
<h2>Sel atribute</h2>
<h3 style='ex1'>Subtitlu 1</h3>
<p style='ex2'>Paragraf 1 . ...<br />
. ..Final de paragraf
</p>
<h3 class='ex1'>Subtitlu 2</h3>
<p style='e2'>Paragraf 2 .. .<br />
. ..Final de paragraf
</p>
</body>

Sel atribute
Subtitlu 1
Paragraf 1 . ...
. ..Final de paragraf

Subtitlu 2
Paragraf 2 .. .
. ..Final de paragraf

Exemplul 1 - 7.
Dar selectorii de atribute sunt cu mult mai folositori atunci cand puteti
face selectia si in functie de valoarea atributului.
[nume_atribut="valoare_atribut"] { border: 2px solid #00ff00; }

Sa vedem si un exemplu:
<head>
<style type='text/css'>
[class='ex_1']{ color:brown;}

</style>
</head>
<body>
<h2>Sel atribut cu valoare</h2>
<h3 class='ex_1'>Subtitlu 1</h3>
<p class='ex2'>Paragraf 1 ..</p>
<h3 class='ex_2'>Subtitlu 2</h3>
<p class='ex_1'>Paragraf 2 . ..</p>
</body>

Sel atribut cu valoare


Subtitlu 1
Paragraf 1 ..

Subtitlu 2
Paragraf 2 . ..

Exemplul 1 - 8.
Daca vi se pare ca este inutil acest selector, ei bine eu zic ca va inselati.
Este foarte util in timpul depanarii, deoarece da posibilitatea selectarii
doar a unei fractiuni a atributului, cea ce face selectia mai restransa sau
chiar la obiect ca si cand ar fi cu id, dar fara sa mai fie nevoie sa introduci
un atribut suplimentar.
Acest selector mai are inca doua variante, una care face selectia daca
valoarea atributului contine un cuvant:
[title~="cuvant sau propozitie"] { border: 2px solid #00ff00; }

Iar cealalta daca valoarea atributului incepe cu un grup de caractere


urmat de - (liniuta de unire (despartire)):
[lang|="en"] { border: 2px solid #00ff00; }

Sa vedem si un exemplu:
<head>
<style type='text/css'>
[alt~=din]
{width:200px;
height:156px;}
</style>
</head>
<body>
<h2>Sel atribut cu ~</h2>
<img src='camping-ok.jpg'
alt='Imagine din camping'/>
<img src='camping-ok.jpg'
alt='Imagine camping'/>
</body>

Sel atribut cu ~

Exemplul 1 - 9.
Selectorul de atribute care contine caracterul ~ este destinat mai mult
atributelor a caror valoare poate contine spatii, si acestea sunt title si alt.
<head>
<style type='text/css'>
[alt|=foto]
{width:230px;
height:170px;}
[class|=ex]
{color:blue ;}
</style>
</head>
<body>
<h2>Sel atribut cu |</h2>
<h3 class='ex-812'> Subtitlu1</h3>
<p class='ex811'>Paragraf 1...</p>
<img src='camping-ok.jpg' alt='foto'/>
<p class='ex_8'>Paragraf 2 . ..</p>
</body>

Sel atribut cu |
Subtitlu1
Paragraf 1...

Paragraf 2 . ..

Exemplul 1 - 10.
Cealalta varianta de selector de atribute, a fost gandit pentru
atributul lang="en-US", astfel incat sa permita selectarea mai multor
variante de engleza. Se poate folosii si cu alte atribute, dar valoarea
atributului dupa sirul cautat trebuie sa contina liniuta de unire -.

1.3.2.3. - Selectorul child (copil)


Acesti selectori se folosesc pentru a selecta un element care este copilul
altui element. De exemplu daca vrem sa punem contur verde de 2px unui
cuvant evidentiat cu elementul em, dar doar in cazul in care este continut
intr-un element h2 - si este descendent direct al acestuia, adica nu mai
este continut si de un alt element intermediar - atunci, trebuie sa folosim
selectorul child:
h2 > em { border: 2px solid #00ff00; }

Aceste selectoare nu sunt suportate de IE6 sau premergatoare.


<head>
<style type='text/css'>
p > b.ex91 { color:#00a; }
div > h3.ex92 { color:#0a0; }
</style>
</head>
<body>
<h1>child</h1>
<div>
<h3 class='ex92'>Subtitlu 1</h3>
<p>Paragraf 1 ...</p>
</div>
<p><b class='ex91'>Paragraf 2</b>...</p>
<p><q><b class='ex91'>Paragraf 3</b></q>...</p>
</body>

child

Subtitlu 1
Paragraf 1 ...
Paragraf 2...
Paragraf 3...

Exemplul 1 - 11.
Observati ca acest selector aplica propietatile sale, doar primei generatii.
p > b nu s-a aplicat si paragrafelor care erau copiii directi ai
elementului q, deci erau a doua generatie a elementului p.

1.3.2.4. - Selectorul descendent


Acest selector este foarte asemanator cu selectorul child. Spre deosebire
de el, acest selector aplica propietatile continute descendentilor de oricare
generatie.
div em { border: 2px solid #00ff00; }

Sa privim la un exemplu:
<head>
<style type='text/css'>
p b.ex101 { color:#00a; }
div h3.ex102 { color:#0a0; }
</style>
</head>
<body>
<h1>descendent</h1>
<div>
<h3 class='ex102'>Subtitlu 1</h3>
<p>Paragraf 1 ...</p>
</div>
<p><b class='ex101'>Paragraf 2</b> ...</p>
<p><q><b class='ex101'>Paragraf 3</b></q>...</p>
</body>

descendent
Subtitlu 1
Paragraf 1 ...
Paragraf 2 ...
Paragraf 3...

Exemplul 1 - 12.

Observam ca prima norma p b s-a aplicat atat elementelor bold de prima


generatie, cat si celor de a doua. Acest selector se aplica tuturor
generatiilor de urmasi, spre deosebire de selectorul child care se aplica,
am vazut, doar primei generatii.

1.3.2.5. - Selectorii adjacent sibling (frate alaturat)


Acesti selectori va permit sa selectati un anumit element care urmeaza
dupa un alt element specificat, de acelasi nivel in ierarhia elementelor. De
exemplu, daca vreti sa selectati toate elementele p care urmeaza imediat
dupa elementele h2, dar nu alte elemente p, puteti folosii urmatoarea
norma:
h2 + p {color:red}

<head>
<style type='text/css'>
h2 + p.ex999 {color:red}
div + h2 { color:#0a0; }
</style>
</head>
<body>
<h1>Titlu</h1>
<div>
<h2>Subtitlu 1</h2>
<p class='ex999'>Paragraf 1 .. .</p>
<p id='ex999'>Paragraf 2 .. .</p>
</div>
<h2>Subtitlu 2</h2>
<p class='exemplu1'>Paragraf 3 . ..</p>
</body>

Titlu
Subtitlu 1
Paragraf 1 .. .
Paragraf 2 .. .

Subtitlu 2
Paragraf 3 . ..

Exemplul 1 - 13.
Observati ca doar paragrafelede langa titlurile h2 au fost inrosite, si doar
subtitlul h2de langa div a fost facut verde.

1.3.2.6. - Selectorii pseudo-classes

Pseudo-classes sunt folosite sa furnizeze stil nu elementelor, ci diferitelor


stari ale elementelor. Cea mai la indemana utilizare este stilizarea starilor
link-urilor, asa ca ne vom concentra pe acestea. Urmatoarea lista va ofera
diferite pseudo-classes, si o descriere a starii link-ului in faza de selectie:

:link - starea normala, predefinita a link-ului, asa cum o gasiti doar


prima data cand vizitati pagina
:visited - link care deja a fost vizitat cu browser-ul pe care il folosesti
:focus - link care are cursorul tastaturii pe el
:hover - link asupra carora planeaza sageata mouse-lui
:active - link care tocmai a fost selectat

Sa stilizam link-urile, sau mai bine zis setarile lor, dupa cum urmeaza:

in starea normala sa fie verzi - in mod predefinit ele sunt albastre in


majoritatea browser-elor
cand planam cu mouse-ul deasupra lui vrem sa dispara sublinierea predefinit browser-ele subliniaza link-urile
acelasi efect il dorim cand este vizat cu tastatura
vrem ca link-urile vizitate sa fie portocalii
iar cand link-ul este selectat, sa fie ingrosat, pentru a sa avem un
indiciu ca a fost selectat

Iata normele pentru aceasta stilizare:


a:link {color:green;}
a:visited {color:orange;}
a:hover, a:focus {text-decoration:none;}
a:active {font-weight:bold;}

Retineti, ca ordinea in care scrieti normele este importanta. Ordinea


corecta este cea de mai sus.
<head>
<style type='text/css'>
a#ex:link {color:green;}
a#ex:visited {color:#852;}
a#ex:hover, a#ex:focus {text-decoration:none;}
a#ex:active {font-weight:bold;}
</style>
</head>
<body>
<h1>Pseudo class</h1>
<p><a id='ex' href='http://www.opera.com/'>Opera</a></p>
<p><a id='ex' href='http://www.unsiteoarecare.com/'>
Un site nevizitat</a>
</p>
</body>

Pseudo class
Opera
Un site nevizitat

Exemplul 1 - 14.
Observati ca site-urile vizitate sunt cafenii, si siteul, pe care este pointerul
mouse-ului, este nesubliniat. Site-ul nevizitat este verde. Din pacate,
vizualizarea starii :active este dificila, fiindca daca ai un browser rapid,
acea stare dureaza fractiuni de secunda, multa lume nici nu o observa.
Starea :focus a pseudo-classes, este recomandata pentru cresterea
accesibilitatii formelor. De exemplu puteti sa evidentiati caseta de intrare
care este activa, cu urmatoarea norma:
input:focus
{ border: 2px solid red;
background color: skytblue;
}

Sa vedem un exemplu si cum arata el:


<head>
<style type='text/css'>
input#ex13:focus
{border: 2px solid red;
background-color: skyblue;}
</style>
</head>
<body>
<form action='ex-01.php' method='post'>
Name: <input id='ex13' type='text' name='fname'/>
<br /><br />
Age: <input type='text' name='age' /><br />
</form>
</body>

Name:
Age:
Exemplul 1 - 15.

Arata exact cum neam propus.


pseudo clasa: first-child

- aceasta selecteaza primul articol, sau primul copil (first child) al


elementului parinte (care il contine). Ca exemplu sa luam o norma firstchild care selecteaza primul articol al unei liste neordonate (sau ordonate)
si face textul acelui articol bold:
li:first-child
{ font-weight: bold; }

Dar sa vedem un exemplu:


<head>
<style type='text/css'>
li.ex14:first-child
{font-weight: bold;
color:blue;}
</style>
</head>
<body>
<h1>first-child</h1>
<ol>
<li class='ex14'>Capitolul 1</li>
<li class='ex14'>Capitolul 2</li>
<li class='ex14'>Capitolul 3</li>
</ol>
</body>

first-child
1. Capitolul 1
2. Capitolul 2
3. Capitolul 3

Exemplul 1 - 16.
pseudo clasa: lang
- care selecteaza elementele ale caror limba vor fi setate intr-o limba
diferita de a restului paginii, utilizand atributul lang.
Sintaxa acestui selector este:
p:lang(en-US){lista propietati:valoare} }

iar elementul selectat, caruia i se aplica propietatile este:


<p lang="en-US">Un text in limba engleza americana<p>

1.3.2.7. - Selectorii pseudo elemente

Pseudo elementele au doua utilizari:


In primul rand, puteti sa le folositi ca sa selectati prima litera :firstletter sau prima linie :first-line a textului cuprins de element.
A doua utilizare a pseudo elementelor este generarea de continut prin
CSS, lucru care este mult mai complicat. Puteti folosii pseudo
elementele :before sau :after ca sa specificati continutul care va fi
inserat inainte sau dupa elementul pe care l-ati selectat. Apoi
specificati ce este ceea ce vreti sa inserati.

Sa incepem sa le detaliem.
:first-letter
Ca sa facem ca prima litera a fiecarui paragraf sa fie evidentiata, putem
scrie urmatoarea norma:
p:first-letter
{ font-weight: bold;
font-size: 200%
background-color: red;
}

Aceasta norma va face ca prima litera a paragrafelor sa fie ingrosata , mai


mare cu 200% si sa aiba fundal rosu.
:first-line
Pentru ca prima linie a paragrafelor sa fie afisata cu caractere bold, putem
scrie urmatoare norma:
p:first-line
{ font-weight: bold; }

Sa luam si un exemplu:
<head>
<style type='text/css'>
h3#ex151:first-letter
{color:green;}
p.ex152:first-line
{color:maroon;}
</style>

</head>
<body>
<h1>first-line</h1>
<h3 id='ex151'>first-letter</h3>
<p class='ex152'>Paragraf 1 ...<br />
a doua linie a paragrafului</p>
<p class='ex152'>Paragraf 2 ..<br />....</p>
</body>

first-line
first-letter
Paragraf 1 ...
a doua linie a paragrafului
Paragraf 2 ..
....

Exemplul 1 - 17.
:before si :after
Cum spuneam si mai sus aceste pseudo elemente se folosesc pentru a
insera un continut, inaintea sau dupa un element. Sintaxa ar fi
urmatoarea:
h2:after
{ content: "Text care se insereaza " );
propietate:valoare;
}

Aceasta norma insereaza textul valorii content in continuarea textului


continut de elementele h2. Pentru a da o, sau niste propietati specifice
pentru ceea ce se insereaza, se pot introduce si propietati cu valorile
corespunzatoare.
Urmatoarea norma poate sa insereze o imagine decorativa dupa fiecare
link din pagina .
a:after
{ content: " " url(flower.gif);
propietate:valoare;
}

Si la aceasta se pot adauga propietati. Sa vedem insa un exemplu


<head>
<style type='text/css'>
h1.ex16:before
{content: ' ' url(imagini/CSS/atentie.bmp);}
h3.ex16:after
{content:' - Text inserat'}
p.ex16:before
{content:'Text inserat - ';
color:blue;}
</style>
</head>
<body>
<h1 class='ex16'>Imagine</h1>
<h3 class='ex16'>Continut text</h3>
<p>Paragraf 1 ...</p>
<p class='ex16'>Paragraf 2 ...</p>
</body>

Imagine
Continut text
Paragraf 1 ...
Paragraf 2 ...

Exemplul 1 - 18.
Aceste selectoare nu sunt suportate de IE6 si premergatoarele. De
asemenea retineti ca nu se pot insera informatii importante prin CSS, sau
ca acest continut nu este disponibil tehnologiilor asistive. Regula de aur
este ca CSS este folosit pentru stilizare, iar pentru structurarea
continutului HTML.
Reintoarcere la cuprins

1.3.3. - Gruparea selectoarelor


In cazul cand avem nevoie sa aplicam aceleasi propietati pentru doua sau
chiar mai multe elemente HTML, pentru a nu scrie acelasi lucru de mai
multe ori, s-a introdus metoda gruparii selectoarelor. Deci in loc sa
scriem, de exemplu doua norme identice:
h1 {color:blue;}

h2 {color:blue;}

putem sa scriem:
h1, h2
{color:blue;}

<head>
<style type='text/css'>
h1.ex17, h2.ex17, h3.ex17 {color:blue;}
</style>
</head>
<body>
<h1 class='ex17'>Titlu principal</h1>
<h2 class='ex17'>Subtitlu 1</h2>
<h3 class='ex17'>Subtitlu 2</h3>
<p>Paragraf 1 ...</p>
<p>Paragraf 2 ...</p>
</body>

Titlu principal
Subtitlu 1
Subtitlu 2
Paragraf 1 ...
Paragraf 2 ...

Exemplul 1 - 19.
In cazul ca avem nevoie ca doar anumite elemente p care au
atributulclass="nume_clasa" sa aiba anumite propietati atunci putem
folosi asa numita unire a selectoarelor:
p.nume_clasa {color:orange;}

Iata un exemplu:
<head>
<style type='text/css'>
p.unire
{color:#f0a;}
</style>
</head>

<body>
<h2>unirea sel</h2>
<h3>Subtitlu 1</h3>
<p>Paragraf 1 ....</p>
<p class='unire'>Paragraf 2 ....</p>
</body>

unirea sel
Subtitlu 1
Paragraf 1 ....
Paragraf 2 ....

Exemplul 1 - 20.
Sa recapitulam. Prin gruparea selectoarelor propietatile normei se aplica
tuturor elementelor vizate de selectoare, pe cand unirea selectoarelor face
ca propietatile sa se aplice doar elementelor, care satisfac toate
selectoarele. Cam confuz? Cred ca cel mai bine va lamuriti studiind
exemplele.
p.atentie{}

se aplica la toate paragrafele care au atributul class="atentie".


div#examplu{}

se aplica elementului care are atributul id="examplu", dar doar daca


este div.
p.info, li.evidentiat{}

se aplica paragrafelor cu clasa info precum si listelor cu clasa evidentiat


Reintoarcere la cuprins

1.4. - Rezumatul lectiei


1.4.1. - Sintaxa normelor CSS
selector
{ propietate_1:valoare 1;
propietate_2:valoare 2;
....................;
propietate_n:valoare n;
}

O norma CSS se compune din:

selector - aceasta componenta, identifica elementul (sau elementele,


cum vom vedea mai tarziu) HTML, careia i se aplica norma
acoladele - definesc, mai bine zis delimiteaza, care propietati si cu ce
valori se aplica elementului HTML
propietati - sunt elementele de aspect care vrem sa le modificam;
ele sunt de o mare diversitate, pornind de la culoare, dimensiuni,
caractere.
valori ale propietatilor - sunt noile valori pe care vrem sa le atribuim
propietatii respective; fiecare propietate suporta un anumit, sau mai
precis spus, anumite tipuri de valori; de exemplu culoarea poate fi
data in trei moduri: hexazecimal - #ffaa99; prin denumire - red; cu
valori rgb - rgb(123,255,17);

Reintoarcere la cuprins

1.4.2. - Metodele de inserare a normelor CSS


intr-un document web
1.4.2.1. - Stilizarea in linie
<p style="background:#179;
color:white;
padding:10px;">
Aici ar trebui sa avem un paragraf.....<br />
care are caracterele albe pe fond albastru.
</p>

Aici ar trebui sa avem un paragraf.....


care are caracterele albe pe fond albastru.

Exemplul 1 - 2.
Retineti ca propietatile de stilizare CSS sunt introduse in elementele HTML
prin atributul style, respectand regulile sintactice definite in subcapitolul
precedent, cu deosebirea ca nu avem selector si propietatile nu se inchid
intre acolade.
Acest mod de stilizare are toate neajunsurile stilizarii cu HTML, de aceea
este bine sa-l folosim cat mai putin, preferabil de loc.

1.4.2.2. - Stilizarea incorporata


Acest mod de stilizare (embedded styles), se insereaza in elementele
HTML head sistyle cum puteti vedea in exemplul de mai jos:

<head>
<style type="text/css" media="screen">
p {background:black;
color:white;
padding:10px;
}
</style>
</head>

1.4.2.3. - Stilizarea externa - style sheets


Foile de stil externe, va dau posibilitatea de a pune toate definitiile CSS
intr-un singur fisier, sa-l salvati cu extensia .css si apoi sa-l aplicati in
documentul HTML, folosind un element link in elementul head al
documentului.
<head>
<link rel="stylesheet" href="styles.css" type="text/css"
media="screen" />
</head>

Reintoarcere la cuprins

1.4.3. - Comentariile in fisierele css


/* Comentariu */

Comentariile pot fi pe o linie sau pe mai multe, tot ce este inchis


intre /* si */ nu este afisat si nici luat in considerare de browser.
Comentariile se pot insera fie intre norme fie intre propietati, fie chiar sa
includem anumite norme sau propietati in comentarii. Acest lucru ne
poate fi de ajutor atunci cand verificam functionarea unor anumite norme
sau propietati asupra paginii.
Reintoarcere la cuprins

1.4.4. - Selectorii CSS

1.4.4.1. - Selectorul element


Acest selector aplica propietatile continute, tuturor elementelor de acest
tip.
h5 {color:blue;}

1.4.4.2. - Selectorul class


Acest selector aplica propietatile continute, tuturor elementelor care au
valoarea atributului class identica cu selectorul.
.nume_clasa{color:blue;}

Toate elementele HTML, indiferent de tipul lor, care au valoarea


atributuluiclass="nume_clasa", vor avea culoarea albastra. Retineti ca
selectorul class nu face distinctie fata de tipul, numele, elementului.

1.4.4.3. - Selectorul id
Acest selector aplica propietatile continute, elementului care are valoarea
atributului ididentica cu selectorul.
#nume_id {color:orange;}

Elementul care are valoarea atributului id="nume_id", va avea culoarea


portocalie. Retineti ca selectorul id nu face distinctie fata de tipul
elementului HTML si ca intr-un document HTML, poate fi doar un singur
element cu id-ul nume_id, pe pagina.

1.4.4.4. - Selectorul universal


Pur si simplu selectoriul universal selecteaza toate elementele paginii, ca
sa le aplice stil. De exemplu, urmatoarea norma spune ca toate
elementele din pagina vor avea un contur solid de 2px de culoare verde:
* { border: 2px solid #00ff00;}

1.4.4.5. - Selectorul de atribute


Selectorii de atribute va permit sa selectati elementele pe baza atributelor
pe care le contin. Sintaxa acestor selectori este urmatoarea:
[nume_atribut] { border: 2px solid #00ff00; }

Retineti parantezele drepte din sintaxa.


Dar selectorii de atribute sunt cu mult mai folositori atunci cand puteti
face selectia si in functie de valoarea atributului.
[nume_atribut="valoare_atribut"] { border: 2px solid #00ff00; }

Acest selector mai are inca doua variante, una care face selectia daca
valoarea atributului contine un cuvant:
[title~="cuvant sau propozitie"] { border: 2px solid #00ff00; }

Iar cealalta daca valoarea atributului incepe cu un grup de caractere


urmat de - (liniuta de unire (despartire)):
[lang|="en"] { border: 2px solid #00ff00; }

1.4.4.6. - Selectorul child (copil)


Acesti selectori se folosesc pentru a selecta un element care este copilul
altui element. De exemplu daca vrem sa punem contur verde de 2px unui
cuvant evidentiat cu elementul em, dar doar in cazul in care este continut
intr-un element h2 - si este descendent direct al acestuia, adica nu mai
este continut si de un alt element intermediar - atunci, trebuie sa folosim
selectorul child:
h2 > em { border: 2px solid #00ff00; }

1.4.4.7. - Selectorul descendent


Acest selector este foarte asemanator cu selectorul child. Spre deosebire
de el, acest selector aplica propietatile continute descendentilor de oricare
generatie.
div em { border: 2px solid #00ff00; }

1.4.4.8. - Selectorii adjacent sibling (frate alaturat)


Acesti selectori va permit sa selectati un anumit element care urmeaza
dupa un alt element specificat, de acelasi nivel in ierarhia elementelor. De
exemplu, daca vreti sa selectati toate elementele p care urmeaza imediat
dupa elementele h2, dar nu alte elemente p, puteti folosii urmatoarea
norma:
h2 + p {color:red}

1.4.4.9. - Selectorii pseudo-classes


Pseudo-classes sunt folosite sa furnizeze stil nu elementelor, ci diferitelor
stari ale elementelor. Cea mai la indemana utilizare este stilizarea starilor
link-urilor, asa ca ne vom concentra pe acestea. Urmatoarea lista va ofera
diferite pseudo-classes, si o descriere a starii link-ului in faza de selectie:

:link - starea normala, predefinita a link-ului, asa cum o gasiti doar


prima data cand vizitati pagina
:visited - link care deja a fost vizitat cu browser-ul pe care il folosesti
:focus - link care are cursorul tastaturii pe el
:hover - link asupra carora planeaza sageata mouse-lui

:active - link care tocmai a fost selectat

a:link {color:green;}
a:visited {color:orange;}
a:hover, a:focus {text-decoration:none;}
a:active {font-weight:bold;}

Starea :focus a pseudo-classes, este recomandata pentru cresterea


accesibilitatii formelor. De exemplu puteti sa evidentiati caseta de intrare
care este activa, cu urmatoarea norma:
input:focus
{ border: 2px solid red;
background color: skytblue;
}

pseudo clasa: first-child


- aceasta selecteaza primul articol, sau primul copil (first child) al
elementului parinte (care il contine). Ca exemplu sa luam o norma firstchild care selecteaza primul articol al unei liste neordonate (sau ordonate)
si face textul acelui articol bold:
li:first-child
{ font-weight: bold; }

pseudo clasa: lang


- care selecteaza elementele ale caror limba vor fi setate intr-o limba
diferita de a restului paginii, utilizand atributul lang.
Sintaxa acestui selector este:
p:lang(en-US){lista propietati:valoare} }

iar elementul selectat, caruia i se aplica propietatile este:


<p lang="en-US">Un text in limba engleza americana<p>

1.4.4.10. - Selectorii pseudo elemente


:first-letter
p:first-letter
{ font-weight: bold;
font-size: 200%
background-color: red;
}

Aceasta norma va face ca prima litera a paragrafelor sa fie ingrosata , mai


mare cu 200% si sa aiba fundal rosu.
:first-line
Pentru ca prima linie a paragrafelor sa fie afisata cu caractere bold, putem
scrie urmatoare norma:
p:first-line
{ font-weight: bold; }

:before si :after
Cum spuneam si mai sus aceste pseudo elemente se folosesc pentru a
insera un continut, inaintea sau dupa un element. Sintaxa ar fi
urmatoarea:
h2:after
{ content: "Text care se insereaza " );
propietate:valoare;
}

Aceasta norma insereaza textul valorii content in continuarea textului


continut de elementele h2. Pentru a da o, sau niste propietati specifice
pentru ceea ce se insereaza, se pot introduce si propietati cu valorile
corespunzatoare.

Urmatoarea norma poate sa insereze o imagine decorativa dupa fiecare


link din pagina .
a:after
{ content: " " url(flower.gif);
propietate:valoare;
}

1.4.4.11. - Gruparea selectoarelor


In cazul cand avem nevoie sa aplicam aceleasi propietati pentru doua sau
chiar mai multe elemente HTML, pentru a nu scrie acelasi lucru de mai
multe ori, s-a introdus metoda gruparii selectoarelor. Deci in loc sa
scriem, de exemplu doua norme identice:
h1, h2
{color:blue;}

In cazul ca avem nevoie ca doar anumite elemente p care au


atributulclass="nume_clasa" sa aiba anumite propietati atunci putem
folosi asa numita unire a selectoarelor:
p.nume_clasa {color:orange;}

Reintoarcere la cuprins

1.5. - Exercitii

Exercitiul 1 - Sintaxa normelor CSS

Exercitiul 2 - Stilizarea in linie cu CSS

Exercitiul 3 - Selectorul element

Exercitiul 4 - Selectorul class

Exercitiul 5 - Selectorul id

Exercitiul 6 - Selectorul universal

Exercitiul 7 - Selectorul atribut

Exercitiul 8 - Selectorul atribut si valoare

Exercitiul 9 - Selectorul atribut si valoare variante

Exercitiul 10 - Selectorul atribut si valoare variante

Exercitiul 11 - Selectorul child

Exercitiul 12 - Selectorul descendent

Exercitiul 13 - Stilizarea starii link-urilor cu pseudo-classes

Exercitiul 14 - Stilizarea formelor cu pseudo-classes

Exercitiul 15 - pseudo_classes :first-child

Exercitiul 16 - Pseudo elementele :first-letter si :first-line

Exercitiul 17 - Pseudo elementele :before si :af ter

Exercitiul 18 - Gruparea selectoarelor

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