Sunteți pe pagina 1din 40

7.

Stiluri CSS
lect. univ. Tru Valentina
1

CONINUT
1.
2.
3.
4.
5.
6.
7.

Motenirea
Formatarea background-ului
Formatarea fonturilor
Formatarea textului
Formatarea tabelelor
Formatarea listelor
Blocuri CSS

1. Motenirea
Conceptul de motenire CSS este un element-cheie, este
mecanismul prin care anumite propieti ale unui element
printe se transfer i elementelor urmai.
Nu toate propietile se motenesc. De exemplu marginile i
fundalul nu are sens s fie motenite. Este puin probabil ca
urmaii unui element s aib toi nevoie de aceai margine,
sau fundal.
Mostenirea previne repetarea anumitor proprieti ntr-o
foaie de stil i permite ncrcarea rapid a paginilor web de
ctre utilizatori e.t.c.

1. Motenirea
<head>
<style>
body {color:green; }
ul li{ color:red; }
</style>
</head>
<body>
<p>Limbaje dupa paradigma programarii</p>
<ol>
<li>limbaje ezoterice (Brainfuck)</li>
<li>limbaje procedurale (C, Java, Perl)</li>
<li>limbaje functionale:(ML, Haskell)</li>
<li>limbaje pentru programarea logica (Prolog, DATALOG)</li>
<li>limbaje mixte (LISP)</li>
</ol>
<p> Limbaje dupa nivelul de abstractizare</p>
<ul>
<li>limbaje de generatia intaia (limbajele cod-masina)</li>
<li>limbaje de generatia a doua (limbajele de asamblare)</li>
<li>limbaje de generatia a treia (limbaje de nivel inalt)</li>
<li>limbaje de generatia a patra (limbajele neprocedurale)</li>
<li>limbaje de generatia a cincea(limbaje de inteligenta artificiala)</li>
</ul>
</body>

1. Motenirea
Rezultatul rulrii programului:

2. Formatarea background-ului
Daca HTML permitea configurarea unor elemente grafice de fundal
doar pentru anumite elemente, CSS permite definirea fundalului
pentru orice element din pagina web.
Proprietate
background
backgroundattachment
backgroundcolor
backgroundimage
backgroundposition
backgroundrepeat

Descriere
seteaz toate proprietile
background ntr-o singur
declaraie
stabilete dac imaginea de
fundal este fix sau defileaz
mpreun cu restul paginii
seteaz culoarea de fundal a unui
element
seteaz imaginea de fundal a
unui element

Valori
background-color, background-image,
background-repeat, backgroundattachment, background-position
scroll, fixed
color-rgb, color-hex, color-name,
transparent
url(url), none

top left, top center, top right, center left,


seteaz poziia de nceput a unei center center, center right, bottom left,
bottom center, bottom right, x% y%, xpos
imagini de fundal
ypos
stabilete dac i cum va fi
repeat, repeat-x, repeat-y, no-repeat
repetat imaginea de fundal

2. Formatarea background-ului
I) Proprietatea background-color - specific culoarea de fundal a unui element.
Culoarea de fundal pentru ntreaga pagin este definit n selectorul body ca n
exemplul urmtor:
Fisierul background.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet"
type="text/css"
href="../stiluri/stil5.css">
</head>
<body>
Continutul documentului
</body>
</html>

Fisierul stil5.css

body{
background-color:#243CED;
color:yellow;
}

2. Formatarea background-ului
Rezultat rulrii programului:

Culoarea de fundal poate fi specificat prin:


nume un nume de culoare, de exemplu "red";
RGB o valoare RGB, de exemplu "rgb(255,0,0)";
Hex o valoare hexazecimal, de exemplu "#ff0000".
8

2. Formatarea background-ului
II) Proprietatea background-image - definete imaginea folosit ca fundal pentru
un element. Implicit, imaginea se repet pe suprafaa ntregului element.
Imaginea de fundal a paginii poate fi setat ca n exemplul urmtor:
Fisierul stil5.css
body{
background-color:#243CED;
background-image:url("../images/m5.jpg");
}
Rezultatul rulrii programului:

2. Formatarea background-ului
III) Proprietatea background-repeat repet imaginea pe axa vertical i
orizontal. Poate avea 4 valori:
repeat - repet imaginea pe vertical i orizontal (valoare implicit).
repeat-x - repet imaginea pe orizontal.
repeat-y - repet imaginea pe vertical.
no-repeat - repetarea este exclus.
Fisierul stil5.css
body{
background-color:#243CED;
background-image:url("../images/m5.jpg");
background-repeat:no-repeat;
}

Rezultatul rulrii programului:

10

2. Formatarea background-ului
IV) Pentru a schimba poziia imaginii de fundal, folosii roprietatea backgroundposition ca n exemplul urmtor:
Deplasarea imaginii cu ajutorul cuvintelor cheie.
Fisierul stil5.css
body{
background-color:#243CED;
background-image:url("../images/m5.jpg");
background-repeat:no-repeat;
background-position: top right;
}
Rezultatul rulrii programului:

11

2. Formatarea background-ului
Deplasarea imaginii poate fi indicat i n procente:
Fisierul stil5.css
body{
background-color:#243CED;
background-image:url("../images/m5.jpg");
background-repeat:no-repeat;
background-position: 20% -40%;
}
Rezultatul rulrii programului:

12

2. Formatarea background-ului
V) background-attachment- indic dac imaginea de fundal se va derula
mpreun cu textul, sau va fi fixat. Aceasta poate lua dou valori:
scroll imaginea se deruleaz mpreun cu textul (valoare implicit).
fixed - imaginea de fundal este fixat n raport cu fereastra browser-ului.
Cod program:
Fisierul stil5.css
body{
background-color:#243CED;
background-image:url("../images/m5.jpg");
background-repeat:no-repeat;
background-position: 20% -40%;
background-attachment: fixed;
}

13

2. Formatarea background-ului
VI) Proprieti multiple pentru fundal se indic cu proprietatea background,
care permite scurtarea codului de program i precizarea tuturor proprietilor
ntr-o proprietate conform urmtoarei sintaxe:
background: [<background-color>||<background-image>
||<background-repeat>||<background-attachment>||
<background-position>]
Fisierul stil5.css
body{
background:#243CED url("../images/m5.jpg") no-repeat 20% -40%;
}

Rezultatul rulrii programului:


14

3. Formatarea fonturilor
n CSS exist un set de proprieti pentru fontul coninutului unui element HTML.
Acestea ne permit s schimbm fontul (caracteristicile tipului de liter) i sunt grupate n
clasa FONT. Proprietile pentru fonturi i valorile lor sunt descrise n continuare.
Proprietate
font
fontfamily
font-size

Descriere
Valori
Seteaz toate proprietile fontului font-style, font-variant, font-weight, fontntr-o singur declaraie
size, font-family
serif, sans-serif, monospace, cursive,
Specific familia de fonturi
fantasy
xx-small, x-small, small, medium, large, xSpecific dimensiunea fontului
large, xx-large, smaller, larger, length, %

font-style Specific stilul fontului


fontvariant
fontweight

normal, italic, oblique

Specific dac textul este afiat sau


normal, small-caps
nu cu majuscule mici
normal, bold, bolder, lighter, 100, 200,
Specific grosimea fontului
300, 400, 500, 600, 700, 800, 900

15

3. Formatarea fonturilor
Familiile de fonturi n CSS (font-family)
n CSS, numele unei familii de fonturi se poate defini n dou moduri:
Familie generic un grup de familii de fonturi care au un aspect similar (ca "Serif"
sau "Monospace");
Familie de fonturi o familie specific de fonturi (ca "Times New Roman" sau
"Arial").
Familia
generic

Familia specific

Descriere

Serif

Times New Roman


Georgia

Fonturile de tip serif au linii mici la sfritul unora


dintre caractere.

Sans-serif

Arial
Verdana

"Sans" nseamn fr aceste fonturi nu au linii


la sfritul caracterelor

Monospace

Courier New
Lucida Console

Toate caracterele monospace au


aceeai lime

Exemplu:

16

3. Formatarea fonturilor
Proprietate font-family ar trebui s precizeze cel puin dou familii de fonturi. Dac
browserul nu recunoate prima familie, o va ncerca pe a doua. ncepei cu fontul pe care
l dorii i terminai cu o familie generic.
Obs.: numele familiei de fonturi formate din mai multe cuvinte se scriu n ghilimele:
"Times New Roman". Dac folosii mai multe nume de fonturi, ele trebuie separate n
list prin virgul.

Fisierul font.html

Fisierul stil6.css

<head>
<link rel="stylesheet" type="text/css"
href="../stiluri/stil6.css">
</head>
<body>

.serif { font-family:"Times New


Roman", Times, Serif; }

<h1> familia de fonturi in CSS</h1>


<p class="serif"> Acesta este un paragraf
- fontul Times New Roman</p>
<p class="sansserif"> Acesta este un
paragraf - fontul Arial</p>
</body>

.sansserif { font-family:Arial,
Helvetica, Sans-Serif; }
17

3. Formatarea fonturilor
Rezultatul rulrii programului:

18

3. Formatarea fonturilor
Fonturi standarde pentru proprietate font-family :
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

19

3. Formatarea fonturilor
Font-style - specific stilul fontului: normal (implicit), oblique
(nclinat), italic (cursiv):
#id1{ font-style:normal; }
#id2{ font-style:oblique; }
#id3{ font-style:italic; }
Font-variant dou variante ortografice: normal (implicit) i
small-caps (cu litere mici).
#id3{
font-style:italic;
font-variant:small-caps;}

20

3. Formatarea fonturilor
Font-weight - specific grosimea caracterelor de font.
Valori: 100, 200, 300, 400, 500, 600, 700, 800 i 900. Cuvinte
cheie: normal (normal), bold (caractere aldine), bolder (ngroat)
lightere.

#id1{font-weight:bold; }
#id2{ font-weight:lighter; }
#id3{ font-weight:900; }
21

3. Formatarea fonturilor
Font-size - seteaz mrimea fontului.
Dimensiunile pot fi setate n trei moduri:
1. folosind cuvinte cheie (xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, large);
2. utiliznd uniti relative (%, em, px,);
3. Utiliznd uniti de msur de lungime (in, pt, px, mm, sm).
#id1{ font-size:1.2em; }
#id2{ font-size:16px; }
#id3{ font-size:xx-small; }
22

3. Formatarea fonturilor
Proprietile multiple pentru font pot fi setate prin spaiu conform
urmtoarei sintaxe:
font:[<font-style>||<font-variant>||<font-weight>]?<font-size> <font-family>
Obs.: Oricare dintre proprietile enumerate pot fi omise, cu excepia
proprietilor: font-size i font-family.
Exemplu:
.new{
font-style:italic;
font-weight:bold;
font-size:16px;
font-family:Tahoma;
}

.new{
font:italic bold 16px Tahoma;
}
23

4. Formatarea textului
Proprietile de text permit setarea parametrilor pentru cuvinte i fraze,
precum i poziia lor relativ n pagina web.
Propietate
text-align
textdecoration
text-indent

Descriere
alinierea pe orizontala a textului

aplicarea unor linii pe text


aliniatul tradiional pentru text

text-transform caractere majuscule sau litere mici


adaug umbr unui text:
<x> < y> <neclaritate> <culoare>
color
culoarea textului
direction
sensul afirii textului
line-height
spaiul dintre linii
letter-spacing spaiul dintre caracterele cuvintelor
text-shadow

vertical-align

alinierea verticala a textului

word-spacing spatiul dintre cuvintele textului

Valori
left, right, center, justify
none, underline, overline, linethrough, blink
length, %
none, capitalize, uppercase,
lowercase
none, length, color
culoare
ltr, rtl
normal, length, %
normal, length
baseline, sub, super
top, text-top, iddle, bottom, textbottom, length, %
normal, pre, nowrap

24

4. Formatarea textului
Exemple de formatare a textului:
p{color:purple; text-align:right;
text-transform: uppercase; font-size:14px;
text-indent: 50px; letter-spacing: 4px;
line-height: 90%; text-shadow: 1px 1px #222222;
}

25

5. Formatarea listelor
Proprietile CSS pentru liste v permit s:
1. setai diferii marcatori pentru itemii dintr-o list ordonat sau
neordonat cu proprietatea list-style-type
2. setai o imagine ca marcator pentru itemii unei liste neordonate cu
proprietatea list-style-image
3. poziionai marcatorii cu proprietatea list-style-position
4. scriei forma prescurtat:

list-style:[<list-style-type>||<list-style-position>||<list-style-image>]
26

5. Formatarea listelor
Propietate
list-style
list-style-image
list-style-position

list-style-type

Descriere
seteaz toate proprietile
pentru o list
specific o imagine ce va marca
fiecare element din list
indic dac marcatorii
elementelor din list apar n
interiorul sau n exteriorul listei

Valori
list-style-type; list-styleposition; list-style-image
none; url
inside; outside

none; disc; circle; square;


decimal decimal-leading-zero;
lower-roman upper-roman;
lower-alpha; upper-alpha lowerindic tipul de marcator folosit greek; lower-latin; upperpentru elementele din list
latin;hebrew armenian;
georgian; cjk-ideographic
hiragana; katakana; hiraganairoha

27

5. Formatarea listelor
Lista valorilor pentru proprietatea list-style-type :
Valoare
Descriere
Valorile proprietii pentru liste neordonate
none
fr marcator
disk
implicit (cerc)
circle
cerc gol
square
ptrat
Valorile proprietii pentru liste ordonate
armenian
numr tradiional armenesc
decimal
numr n baza zece
decimal-leading-zero numr precedat de zero (01, 02, 03, etc.)
georgian
numr tradiional georgian (an, ban, gan, etc.)
lower-alpha
litera mica (a, b, c, d, e, etc.)
lower-greek
liter mic greceasc (alpha, beta, gamma, etc.)
lower-roman
numr roman mic (i, ii, iii, iv, v, etc.)
upper-roman
numr roman mare (i, ii, iii, iv, v, etc.)

28

5. Formatarea listelor
Cod program:
ol{ list-style-type:upper-roman; }
ul{list-style-type:square;}

Rezultatul rulrii programului:

29

5. Formatarea listelor
Cod program:
ol{ list-style-type:upper-roman; color:green;}
ul{list-style-image:square; color:blue;}
#selectat{ list-style-image:url("../images/arrow.png"); }

Rezultatul rulrii programului:

30

6. Blocuri CSS
Dac n HTML toate elementele pot fi mprite n dou tipuri: bloc
i linie. Modelul documentului CSS se prezint ca un bloc: fiecare
element din document este o unitate independent. Mai mult dect
att, exist blocuri, structural separat de celelalte i blocuri plasate,
care pot fi n interiorul unitilor structurale.
Blocul are o form dreptunghiular:

31

6. Blocuri CSS
Cod program:

Rezultatul rulri rpogramului:

p{
border: 1px solid blue;
padding:10px;
margin:50px;
width:100px;
height:50px;
}

32

6. Blocuri CSS (Border)


Chenare
Proprietatea CSS border definete chenarul din jurul unui element. Putei specifica
grosimea, stilul (border-style) i culoarea chenarului pentru un anumit element.
Proprietile multiple pentru border pot fi setate prin spaiu conform urmtoarei
sintaxe:
border:[<border-width>||<border-style>||<border-color>]
Obs: Nici-una din celelalte proprieti ale chenarului nu va avea efect, dac
proprietatea border-style nu este setat.
Propietate
border
border-style
border-color
border-width
border-bottom
border-top
border-right
border-left

Descriere
Valori
seteaz toate proprietile ntr- border-width, border-style,
o singur declaraie
border-color
none, dotted, solid, double, dashed,
stilul chenarului
groove, ridge, inset, outset, hiden
color_name, hex_number,
culoarea chenarului
rgb_number, transparent
grosimea chenarului
thin, medium, thick, length
seteaz toate proprietile laturii de jos
seteaz toate proprietile laturii de sus
seteaz toate proprietile laturii din dreapta
seteaz toate proprietile laturii din stnga

33

6. Blocuri CSS (Border)


fiierul chenare.html
<!DOCTYPE HTML5>
<head>
<link href="../stiluri/stil7.css" type="text/css"
rel="stylesheet">
</head>
<body>
<p id="none">Chenar fara latura de jos</p>
<p id="dotted">Chenar cu latura de jos punctata</p>
<p id="dashed">Chenar cu latura de jos
intrerupta</p>
<p id="solid">Chenar cu latura de jos plina</p>
<p id="double">Chenar cu latura de jos dubla</p>
<p id="groove">Chenar cu latura de jos groove</p>
<p id="ridge">Chenar cu latura de jos ridge</p>
<p id="inset">Chenar cu latura de jos inset</p>
<p id="outset">Chenar cu latura de jos outset</p>
</body>

fiierul stil7.css
p{
border-style:solid}
#none{
border-bottom-style:none;}
#dotted{
border-bottom-style:dotted;}
#dashed{
border-bottom-style:dashed;}
#solid{
border-bottom-style:solid;}
#double{
border-bottom-style:double;}
#groove{
border-bottom-style:groove;}
#ridge{
border-bottom-style:ridge;}
#inset{
border-bottom-style:inset;}
#outset{
border-bottom-style:outset;}

34

6. Blocuri CSS (Border)


Rezultatul rulrii programului:

35

6. Blocuri CSS (Margin)


Proprietatea CSS margin definete spaiul din jurul unui element (n afara
chenarului). Marginea nu are culoare de fundal i este complet transparent.
Cele patru margini ale elementului pot fi modificate n mod independent,
folosind proprieti separate. O proprietate scurt poate fi, de asemenea,
folosit pentru a schimba toate cele patru margini simultan.
Valori posibile:
Propietate

Descriere
Valori
proprietate
auto - marginile sunt stabilite de ctre browser;
prescurtat pentru length - definete o margine fix (px, pt, em, etc.)
margin
a seta simultan
% - definete o margine n procente fa de
toate marginile
elementul coninut
margin-top
stabilete marginea de sus
margin-right stabilete marginea din dreapta
marginstabilete marginea de jos
bottom
margin-left
stabilete marginea din stnga

36

6. Blocuri CSS (Margin)


Obs. :Proprietatea margin poate avea ntre una i patru valori.
Ex.: margin:25px 50px 75px 100px;
marginea de sus este 25px
marginea dreapt este 50px
marginea de jos este 75px
marginea stng este 100px
.ex1{margin-top:2cm;}
.ex2{margin-top:25%;}
.ex3{margin-top:50px;}
37

6. Blocuri CSS (Margin)


fiierul marhin.html

fiierul stil7.css

<!DOCTYPE HTML5>
<head>
<link href="../stiluri/stil7.css"
type="text/css" rel="stylesheet">
</head>
<body>
<p id="unu">text - unu</p>
<div id="patru">
<p id="doi">text - doi</p>
<p id="trei">text - trei</p>
text - patru
</div>
</body>

#unu{border-style:double;
border-color:blue; margin-top:2cm;}
#doi{border-style:solid;
border-color:yellow; margin-bottom:2cm;}
#trei{border-style:dotted;
border-color:green; margin-left:25%;}
#patru{border-style:dashed;
border-color:red; text-align:right;}

38

6. Blocuri CSS (Padding)


Proprietatea CSS padding definete spaiul dintre chenar i coninut. Acest
spaiu este afectat de culoarea de fundal a elementului.
Valori posibile:
Propietate

Descriere
Valori
proprietatea scurt
length - definete o margine fix
pentru a stabili toate
(px, pt, em, etc.)
padding
spaiile cu o singur
% - definete o margine n procente
declaraie
fa de elementul coninut
padding-top
Stabilete spaiul de sus
padding-right
stabilete spaiul din dreapta
padding-bottom stabilete spaiul de jos
padding-left
stabilete spaiul din stnga

39

6. Blocuri CSS (Padding)


fiierul marhin.html

fiierul stil7.css

<!DOCTYPE HTML5>
<head>
<link href="../stiluri/stil7.css"
type="text/css" rel="stylesheet">
</head>
<body>
<p id="unu">text - unu</p>
<div id="patru">
<p id="doi">text - doi</p>
<p id="trei">text - trei</p>
text - patru
</div>
</body>

#unu{border-style:double; bordercolor:blue; padding-bottom:0.5cm;}


#doi{border-style:solid; bordercolor:yellow; padding-bottom:2cm;}
#trei{border-style:dotted;bordercolor:green; padding-bottom:5%;}

40