Sunteți pe pagina 1din 16

Grafic

Cursul 3. CSS (Cascading Style


Sheets)

Lect.univ.dr. Daniel MICAN


daniel.mican@econ.ubbcluj.ro

CSS (Cascading Style Sheets)

CSS este un standard W3C pentru definirea prezentrii


documentelor scrise n HTML
CSS definete cum vor fi afiate elemente HTML
CSS este un limbaj separat cu propria sintax
Stilurile, n mod normal, trebuie salvate n fiiere CSS
externe
Foile de stil externe permit schimbarea aranjrii i
aspectului tuturor paginilor dintr-un site Web, doar prin
simpla editaree a unui singur fiier CSS
Stilurile CSS au rezolvat o mare problem i salveaz o
mulime de timp n activitile de dezvoltare a site-urilor
web
CSS 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 CSS

selector {
proprietate1: valoare1;
proprietate2: valoare2; bloc de declaraii
proprietate3: 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

ead>
nk rel="stylesheet" type="text/css" href="stiluri.css">
ead>

Fiierul stiluri.css conine urmtorul cod CSS:


h1 { color: red; }
p { color: blue; }

Adugarea declaraiilor CSS n foaia de


stil intern

<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>

Adugarea declaraiilor CSS inline

<h1 style = "color: red"> Titlu </h1>

<p style = "color: blue"> Paragraf </p>

Selectorii CSS
Selectorul 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 <h1>, <h2> i <h3>
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 <p> al cror atribut class
este egal cu azorel

Selectorii CSS

Selectorul 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 specificate
h1, p, em, img {}
Se aplic elementelor <h1>, <p>, <em> i <img>

Selectorii CSS
Selectorul copil - se aplic unui element care este un copil
direct al unui alt element
li>a {}
Se aplic elementelor <a> care sunt coninute n cadrul unui
element <li>
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 <a> care sunt coninute n cadrul unui
element <p>, chiar dac exist i alte elemente imbricate
ntre ele

Agregarea n cascad a stilurilor


Agregarea 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)

<html>
<head>
<title>Exemplu de agregare in cascada a stilurilor</title>
<link rel="stylesheet" type="text/css" href="stilulmeu.css">
<style>
h1{color: red;}
p{color: blue;}
</style>
</head>
<body>
<h1 style="color: indigo">Titlu</h1>
<p style="color: violet">Paragraf</p>
<body>
</html>
Codului CSS coninut n cadrul fiierului stilulmeu.css:
h1{color: green;}
p{color: orange;}

<html>
<head>
<title>Exemplu de specificitate si prioritate</title>
<style>
* { color: blue; }
h1 { color: purple; }
p b { color: violet; }
b { color: orange; }
b { color: red; }
p { color: chocolate; }
p#abstract{ color: green; }
</style>
</head>
<body>
<h1>Titlu</h1>
<p id="abstract">Acesta este un <b>abstract</b></p>
<p>Acesta este un text dintr-un paragraf</p>
Acesta e un text <b>oarecare</b>
<body>
</html>

Motenirea in CSS

Motenirea 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 fontface astfel nct textul s fie formatat cu Verdana
s scriem o singur regul de stil prin care s se aplice
proprietatea font-face la elementul <body>, iar toate
elementele de tip text incluse n elementul <body> s
moteneasc acel stil

<html>
<head>
<title>Exemplu de mostenire</title>
<style>
body {
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; }
</style>
</head>
<body>
<div>
<p>Mostenesc de la body fontul, proprietatea bold si culoarea albastra</p>
</div>
<div class="cutie">
<p>Mostenesc de la body fontul si proprietatea bold. Dar am culoarea alba,
culoarea de fundal verde si bordura rosie.</p>
<div class="cutiutza">
<p>Mostenesc de la body fontul si proprietatea bold. Am culoarea aurita, dar
mostenesc culoarea de fundal verde de la cutie. Bordura nu se mosteneste.</p>
</div>
</div>
<body>
</html>