Stiluri CSS (II) - Clase de Proprietati

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
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;
}
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
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-image:url("../images/m5.jpg");
}
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-repeat:no-repeat;
}
10
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-position: top right;
}
11
Deplasarea imaginii poate fi indicat i n procente:
Fisierul stil5.css
body{
background-position: 20% -40%;
}
12
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-position: 20% -40%;
background-attachment: fixed;
}
13
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%;
}

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
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
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
18
Fonturi standarde pentru proprietate font-family :
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
19
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
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
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
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
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
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
Cod program:
ol{ list-style-type:upper-roman; }
ul{list-style-type:square;}
29
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"); }
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

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

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

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

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

Stiluri CSS (II) - Clase de Proprietati

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Stiluri CSS (II) - Clase de Proprietati

Încărcat de

Drepturi de autor:

Formate disponibile

7.

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

Culoarea de fundal poate fi specificat prin:

Rezultatul rulrii programului:

Rezultatul rulrii programului:

font-style Specific stilul fontului

normal, italic, oblique

Specific dac textul este afiat sau

Times New Roman

Fonturile de tip serif au linii mici la sfritul unora

"Sans" nseamn fr aceste fonturi nu au linii

Toate caracterele monospace au

.serif { font-family:"Times New

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

aplicarea unor linii pe text

text-transform caractere majuscule sau litere mici

alinierea verticala a textului

word-spacing spatiul dintre cuvintele textului

none; disc; circle; square;

Rezultatul rulrii programului:

Rezultatul rulrii programului:

Rezultatul rulri rpogramului:

6. Blocuri CSS (Border)

6. Blocuri CSS (Border)

6. Blocuri CSS (Border)

6. Blocuri CSS (Margin)

6. Blocuri CSS (Margin)

6. Blocuri CSS (Margin)

6. Blocuri CSS (Padding)

6. Blocuri CSS (Padding)

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

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