CONTRIBUII LA DEZVOLTAREA PORTALURILOR
Grafic
Cursul 3. CSS (Cascading Style Sheets)
Lect.univ.dr. Daniel [email protected]
(Cascading Style Sheets)CSS este un standard W3C pentru definirea
prezentrii documentelor scrise n HTMLCSS definete cum vor fi afiate
elemente HTMLCSS este un limbaj separat cu propria sintaxStilurile,
n mod normal, trebuie salvate n fiiere CSS externeFoile de stil
externe permit schimbarea aranjrii i aspectului tuturor paginilor
dintr-un site Web, doar prin simpla editaree a unui singur fiier
CSSStilurile CSS au rezolvat o mare problem i salveaz o mulime de
timp n activitile de dezvoltare a site-urilor webCSS funcioneaz
prin asocierea unor reguli elementelor HTML
Reguli CSS O regul CSS conine dou pri: un selector i o
declaraie. Declaraie
selector { proprietate: valoare; }Selectorii indic crui element
i se aplic regula.
Declaraiile indic cum ar trebui s fie stilizate elementele
menionate prin intermediul selectorului.
Proprietile indic aspectele elementului pe care dorim s le
modificm.
Valorile specific setrile pe care dorim s le utilizm pentru
proprietile alese. Bloc de declaraii CSSselector { proprietate1:
valoare1; proprietate2: valoare2; bloc de declaraiiproprietate3:
valoare3; }Inserarea declaraiilor CSS n paginile HTML Inserarea
declaraiilor CSS n cadrul paginilor HTML se realizeaz in trei
moduri:
Foaie de stil extern (declarat ntr-un fisier CSS extern)Foaie de
stil intern (declarata n seciunea de head a documentului HTML)
Stilul declarat inline (declarat n interiorul unui element
HTML)
Adugarea declaraiilor CSS n foile de stil externe
Fiierul stiluri.css conine urmtorul cod CSS:
h1 { color: red; }p { color: blue; }Adugarea declaraiilor CSS n
foaia de stil intern
h1 { color: red; }p { color: blue; }
Adugarea declaraiilor CSS inline Titlu
Paragraf Selectorii CSSSelectorul universal - se aplic la toate
elementele din document * {}Se aplic tuturor elementelor de pe
pagin
Selectorul de tip - se aplic numelor de elemente h1, h2, h3 {}Se
aplic elementelor , i Selectorul de clas - se aplic unui element al
crui atribut clas are o valoare care se potrivete cu cel specificat
dup simbolul . (punct).azorel {}Se aplic tuturor elementelor care
au atributul class egal cu azorel
p.azorel {}Se aplic doar elementelor al cror atribut class este
egal cu azorelSelectorii CSSSelectorul ID - se aplic unui element
al crui atribut id-ul are o valoare care se potrivete cu cel
specificat dup simbolul # (diez) #cnp {}Se aplic elementului a crui
atribut id este egal cu cnp
Selectorii grupai- se aplic numelor de elemente specificateh1,
p, em, img {}Se aplic elementelor , , i
Selectorii CSSSelectorul copil - se aplic unui element care este
un copil direct al unui alt elementli>a {}Se aplic elementelor
care sunt coninute n cadrul unui element
Selectorul descendent - se aplic unui element care este un
descendent din cadrul unui alt element specificat (nu doar unui
copil direct al acestui element)p a {}Se aplic elementelor care
sunt coninute n cadrul unui element , chiar dac exist i alte
elemente imbricate ntre eleAgregarea n cascad a stilurilorAgregarea
se face respectnd urmtoarea ordine, innd cont c declaraiile inline
au cea mai mare prioritate:
Foaia de stil implicit a browser-ului Foaie de stil extern
(declarat ntr-un fiier CSS extern)Foaie de stil intern (declarat n
seciunea de head a documentului HTML) Stilul declarat inline
(declarat n interiorul unui element HTML)
Exemplu de agregare in cascada a stilurilorh1{color:
red;}p{color: blue;}
TitluParagraf
Codului CSS coninut n cadrul fiierului stilulmeu.css:
h1{color: green;}p{color: orange;}
Exemplu de specificitate si prioritate* { color: blue; }h1 {
color: purple; }p b { color: violet; }b { color: orange; }b {
color: red; }p { color: chocolate; }p#abstract{ color: green; }
TitluAcesta este un abstractAcesta este un text dintr-un
paragrafAcesta e un text oarecare
Motenirea in CSSMotenirea se poate folosi pentru a crea un
avantaj atunci cnd scriem foile de stil.De exemplu, dac dorim ca
toate elementele de tip text s fie formatate cu fontul Verdana avem
dou opiuni:
Am putea scrie declaraii pentru fiecare element din cadrul
documentului HTML i s setm proprietatea font-face astfel nct textul
s fie formatat cu Verdanas scriem o singur regul de stil prin care
s se aplice proprietatea font-face la elementul , iar toate
elementele de tip text incluse n elementul s moteneasc acel
stil
Exemplu de mostenirebody {font-family: Arial, Verdana,
sans-serif;font-weight: bold;color: blue;background-color: yellow;
}.cutie {color: white;background-color: green;border: 1px solid
red; }.cutiutza {color: gold; }
Mostenesc de la body fontul, proprietatea bold si culoarea
albastra
Mostenesc de la body fontul si proprietatea bold. Dar am
culoarea alba, culoarea de fundal verde si bordura rosie.Mostenesc
de la body fontul si proprietatea bold. Am culoarea aurita, dar
mostenesc culoarea de fundal verde de la cutie. Bordura nu se
mosteneste.
