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.

Titlu principal

Subtitlu 1

Paragraf 1 ..
Dr. Popescu...

Paragraf 2 ...
HTML este....

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:

Aici ar trebui sa avem un paragraf.....
care are caracterele albe pe fond albastru.

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:

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.

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 :

Sel element

Subtitlu 4

Subtitlu 5

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

Subtitlu 5

Paragraf 2 ...

...Final de paragraf

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:

Sel class

Subtitlu 1

Paragraf 1 ... ...Final de paragraf

Paragraf 2 ... ...Final de paragraf

Subtitlu 2

Paragraf 3 ... ...Final de paragraf

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:

Sel. id

Subtitlu 1

Paragraf 1 ... ...Final de paragraf

Paragraf 2 ... ...Final de paragraf

Subtitlu 2

Paragraf 3 ... ...Final de paragraf

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:

Titlu principal

Subtitlu 1

Paragraf 1 ... ...Final de paragraf

Paragraf 2 ... ...Final de paragraf

Subtitlu 2

Paragraf 3 ... ...Final de paragraf

Paragraf 4 ... ...Final de paragraf

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.

Sel atribute

Subtitlu 1

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

Subtitlu 2

Paragraf 2 .. .
. ..Final de paragraf

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:

Sel atribut cu valoare

Subtitlu 1

Paragraf 1 ..

Subtitlu 2

Paragraf 2 . ..

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:

Sel atribut cu ~

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.

Sel atribut cu |

Subtitlu1

Paragraf 1...

Paragraf 2 . ..

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.

child

Paragraf 2...

Paragraf 3...

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:

descendent

Paragraf 2 ...

Paragraf 3...

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}

Titlu

Subtitlu 2

Paragraf 3 . ..

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.

Pseudo class

Opera

Un site nevizitat

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:

Name:

Age:

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:

first-child

1. Capitolul 1
2. Capitolul 2
3. Capitolul 3

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:

Un text in limba engleza americana

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:

first-line

first-letter

Paragraf 1 ...
a doua linie a paragrafului

Paragraf 2 ..
....

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

Imagine

Continut text

Paragraf 1 ...

Paragraf 2 ...

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;}

Titlu principal

Subtitlu 1

Subtitlu 2

Paragraf 1 ...

Paragraf 2 ...

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:

unirea sel

Subtitlu 1

Paragraf 1 ....

Paragraf 2 ....

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

Aici ar trebui sa avem un paragraf.....
care are caracterele albe pe fond albastru.

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:



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.

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:

Un text in limba engleza americana

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