5 CSS

Facultatea de Cibernetic, Statistic i Informatic
Economic
Catedra de Informatic Economic
LIMBAJUL DE PREZENTARE
CSS
Prof. univ. dr. Fl. NSTASE
Cuprins
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Ce sunt foile de stil?

Stiluri CSS2 n paginile HTML
Structura unei foi de stil
Utilizarea elementului STYLE
Utilizarea atributului style
Utilizarea elementului LINK
Selectorul
Clasa ca selector
ID ca selector
Modelul casetelor
Ce sunt foile de stil ? (1)
Foile de stil, n particular CSS - Cascading Style Sheets, descriu modul

n care documentele Web sunt prezentate pe ecran, imprimant sau alte
medii.
Exist specificaiile:
CSS1 - Cascading Style Sheets level 1
CSS2 - Cascading Style Sheets level 2: limbaj al foilor de stil care permite
programatorilor i utilizatorilor s ataeze stiluri (set de caractere,
poziionare, culoare) documentelor structurate, cum ar fi paginile HTML
sau aplicaiile XML.
CSS Mobile Profile 1.0 - un subset al CSS2 adaptat necesitilor i

restriciilor impuse de dispozitivelor mobile (de exemplu, telefon).
XSL - Extensible Style Language: limbaj pentru descrierea stilului de

prezentare a documentelor XML ntr-un mod mai evoluat dect CSS.
Ce sunt foile de stil ? (2)
Criteriul
CSS2
XSL
Posibilitatea de utilizare cu HTML
da
nu
Posibilitatea de utilizare cu XML
da
da
Utilizarea sintaxei XML
nu
da
Transformarea structurii documentelor XML
nu
da
Transformarea coninutului documentelor XML
nu
da
Sortarea, cutarea, filtrarea datelor XML
nu
da
Suportat de navigatoarele obinuite (Internet

Explorer 5.0 i Netscape Navigator 6.0)
da
parial
4
Stiluri CSS2 n paginile HTML (1)

Exemplul 1. Stiluri n pagina HTML
<HTML>
<HEAD>
<TITLE>Exemplu 1</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Titlul este albastru</H1>
<P STYLE="color: red">Acest paragraf este rou
</BODY>
</HTML>

Exist patru moduri pentru combinarea foilor de stil cu paginile
HTML:
utilizarea elementului 'LINK' pentru a face legtura ctre o foaie de

stil extern;
declararea elementului 'STYLE' n cadrul tag-ului 'HEAD';
importul unei foi de stil utiliznd comanda CSS '@import';
asocierea atributului 'STYLE' unui element din corpul documentului

('BODY').
Identificarea limbajului foilor de stil se obine din informaia asociat

n antetul documentului HTML. Se poate utiliza elementul META
pentru a seta limbajul implicit al foii de stil pentru un document
HTML.
<META http-equiv="Content-Style-Type
content="text/css">
Structura unei foi de stil (1)

Exemplul 2. Document HTML fr stiluri asociate
<HTML> <HEAD> <TITLE>Pagina de primire</TITLE> </HEAD>
<BODY>
<H1>Exemplu</H1>
<P>CSS-2 pentru HTML
</BODY>
</HTML>
Pentru a specifica o anumit culoare textului delimitat de marcatorul H1, de

exemplu rou, trebuie scris urmtoarea regul de stil CSS:
H1 { color: red }
O foaie de stil conine un set de reguli i, opional, comentarii.

Fiecare regul de stil CSS este compus din:
selector (n exemplul anterior: 'H1') care indic elementul sau

elementele asupra crora acioneaz regula;
blocul declarailor ('color: red') care descrie condiiile de redare fizic

a elementului specificat, fiind limitat de acolade.
Sunt echivalente cu:

Regulile urmtoare:
H1
H1
H1
H1
H1
H1
{
{
{
{
{
{
H1 {
font-weight: bold;
font-weight: bold }
font-size: 12pt }
line-height: 14pt }
font-family: Helvetica }
font-variant: normal }
font-style: normal }
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
font-variant: normal;
font-style: normal
}
10
Comentariile CSS furnizeaz unele informaii celor care studiaz codul

surs i sunt ignorate de navigator. Un comentariu CSS ncepe cu "/*" i
se ncheie cu "*/".
P
{
/* Acest paragraf este centrat */
text-align: center;
/* Culoarea utilizat pentru text este rou */
color: red;
}
11
Utilizarea elementului STYLE(1)

Exemplu 3 Utilizarea elementului STYLE
<HTML>
<HEAD>
<TITLE>Pagina de primire</TITLE>
<STYLE type="text/css">
H1 { color: red }
</STYLE>
</HEAD>
<BODY>
<H1>Exemplu</H1>
<P>Utilizare CSS-2 in pagina HTML
</BODY>
</HTML>
12
Utilizarea elementului STYLE (2)

Atributele elementului STYLE sunt:
type = tip_coninut specific limbajul foii de stil (de
exemplu, "text/css") i este obligatoriu, nu este o valoare
implicit.
media = descriptor-media specific mediul destinaie avut
n vedere prin informaia de stil. Poate fi un singur dispozitiv de
prezentare sau o list separat prin virgul. Valoarea implicit pentru
acest atribut este "screen". Numele ales pentru descriptormedia corespunde dispozitivului int pentru care proprietile
prezentate au sens: all corespunde pentru toate dispozitivele,
print dispozitivul imprimant, aural sintetizor vocal,
braille terminal Braille etc.
13
Utilizarea atributului style
<P
style="font-size:
12pt;
color:
red">Numai
acestui text se adreseaz informaia de stil
14
Elementul LINK (1)

Exemplu 4 Utilizarea elementului LINK:
<HTML>
<HEAD>
<TITLE>Pagina de primire</TITLE>
<LINK rel="stylesheet" href="ex4.css" type="text/css">
</HEAD>
<BODY>
<H1> Exemplu </H1>
<P>Utilizare CSS-2 n pagina HTML
</BODY>
</HTML>
15
Elementul LINK (2)

O foaie de stil extern poate fi scris cu orice editor de
texte, nu va include nici un tag HTML i va fi salvat cu
extensia .css. Coninutul fiierului ex4.css este:
BODY { color: red }

H1 { color: blue }
16
Elementul LINK (3)

Specificaiile oferite prin elementul LINK sunt:
tipul legturii: ctre un "stylesheet";
identificarea fiierului care include regulile de stil, prin

atributul "href".
tipul MIME (Multipurpose Internet Mail Extension) al

foii de stil care va fi asociat: "text/css".
17
Selectorul
Selector
Descrierea
Selecteaz toate elementele documentului
Selecteaz toate elementele de tip E
E F
Selecteaz toate elementele de tip F care sunt descendente

ale unui element de tip E
E > F
Selecteaz toate elementele de tip F care sunt fii ai unui

element de tip E
E:first-child
Selecteaz elementul de tip E dac acesta este primul fiu

al printelui su
E#myid
Selecteaz elementul de tip E al crui ID este "myid".
18
Clasa ca selector (1)

Exemplu 5. Utilizarea atributului class
<HTML><HEAD><TITLE>Exemplu 2</TITLE>
<STYLE TYPE="text/css">
H1.ex1 { color: #00FF00 }
</STYLE>
</HEAD>
<BODY>
<H1
CLASS=ex1>Aici
'CLASS'</H1>
s-a
utilizat
atributul
<H1>Aici nu s-a utilizat atributul 'CLASS'</H1>

</BODY></HTML>
19

Pseudo-clasele sunt utilizate n CSS pentru a aduga diferite efecte unor
selectori sau unei pri dintre acetia. Sintaxa pentru o pseudo-clas
este:
selector:pseudo-clas {proprietate: valoare}
Clasele CSS pot fi utilizate n combinaie cu pseudo-clase:
selector.clas:pseudo-clas {proprietate: valoare}
20

Exemplul 6: Utilizarea pseudo-clasei
<html><head>
<style type="text/css">
a:active {color: #0000FF}
/* legtur selectat */
a:visited {color: #00FF00}
/* legtur vizitat */
a:link {color: #FF0000}
/* legtur nevizitat */
a:hover {color: #FF00FF}
/* mouse deasupra legturii */
</style> </head>
<body>
<p><b><a href="#">Text de legtur</a></b></p>
</body></html>
21

Exemplul 7: Utilizarea claselor i pseudo-claselor
<html><head>
a.bb:link {color: #ff0000}

a.bb:visited {color: #0000ff}
a.bb:hover {font-size: 150%}
.
</style> </head>
<body>
<p>Dac se trece cu mouse-ul pe deasupra legturilor se pot
vedea schimbrile.</p>
<p><b><a class=bb" href="#"> Legtura schimb marimea </a>
</b></p></body></html>
22
23
Pseudo-elementele (1)
Pseudo-elementele sunt utilizate n CSS pentru a aduga diferite
efecte unor selectori. Sintaxa unui pseudo-element este:
selector:pseudo-element {proprietate: valoare}
Pseudo-elementele utilizate sunt:
first-letter - stabilete un stil special primei litere a unui text;
first-line - adaug un stil special primei linii a unui text;
:before - insereaz un anumit coninut naintea unui element (CSS2);
:after - insereaz un anumit coninut dup un element (CSS2).

24
Pseudo-elementele (2)
Exemplu 8. Utilizarea pseudo-elementelor
<html><head>
P { color: red; font-size: 12pt }
P:first-letter { color: green;
font-size: 300%;
font-style: italic }
P:first-line
{ color: blue;
font-variant: small-caps }
</style></head>
<body>
<p>Foile de stil reprezint un cstig major al proiectanilor de pagini Web, extinznd
posibilitile de prezentare a propriilor pagini.
</p></body></html>
25
ID ca selector
HTML introduce atributul 'ID' care trebuie s aib o valoare unic
ntr-un document. El poate fi utilizat ca selector ntr-o foaie de stil i
va fi adresat, fiind precedat de simbolul '#'.
Exemplul 9. Utilizarea ID ca selector
<HEAD><TITLE>ID ca selector exemplul 1</TITLE>
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Acest text</P></BODY>
26
Modelul casetelor (1)

Aranjarea n pagin a tuturor elementelor este definit dup modelul
casetelor, fiecrui element din structura arborescent a documentului i
se asociaz o caset .
27
Exemple
Exemplul 10. Margini, completare i chenare (margin, padding, border)
<HTML><HEAD><TITLE>Margini, completare si chenar </TITLE>
UL {
background: green;
margin: 12px 12px 12px 12px;
padding: 3px 3px 3px 3px;
/* Nu are chenar */
}
LI {
color: black;
/* culoarea textului este negru */
background: gray;
/* Continut, completare va fi gri */
margin: 12px 12px 12px 12px;
padding: 12px 0px 12px 12px; /* Completare pe dreapta 0px */
list-style: disc
/* include un simbol n fata obiectului din lista*/
/* Nu are chenar */
}
28
Exemple
Exemplul 10. Margini, completare i chenare (continuare)
LI.margine {
color: red;
background:6633ff;
border-style: dashed;
border-width: medium;/* chenar pentru toate partile */
border-color: black;
}
</STYLE></HEAD>
<BODY>
<UL>
<LI>Primul element al listei
<LI class="margine">Al doilea element din lista
</UL>
</BODY></HTML>
29
Exemple - Proprieti pentru
background
Exemplul 11. Proprietatea background-attachment (imaginea

rmne fix n timp ce textul poate defila)
<html><head>
body {
background-image:url("imagini/fig4.gif");
background-repeat: no-repeat;
background-attachment: fixed
}
</style></head>
<body>
<br>
<p>Imaginea rmne pe aceei poziie</p>
....................
</body></html>
30
background
31
background
Exemplul 12. Proprietatea background-color

<html><head>
body {background-color:green}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>Acest text este H1</h1>
<h2>Acest text este H2</h2>
<p>Acest text este un paragraf</p>
</body></html>
32
background
Exemplul 13. Proprietile: background-image, backgroundrepeat i background-position

<HTML> <HEAD> <TITLE>Pagina de primire</TITLE>
BODY {
color: red;
font-family: Times New Roman CE;
background-image: url(imagini/fig4.gif);
background-repeat: no-repeat;
background-position: top right
}
H1 { color: blue }
I
{ color: blue }
</STYLE></HEAD>
<BODY>
<H1>Bibliografie</H1>
<UL>
<LI><H2>Andrew Tanenbaum, <I>Reele de calculatoare,</I>
<LI><H2> .....</H2></UL>
</BODY></HTML>
Agora, 1997</H2>
33
Exemple - Proprieti asociate textului

Exemplul 14.
<html><head>
h1 {color:red;
letter-spacing: -3px;
text-align: center;
text-decoration: line-through}
h2 { color:black;
text-align: left;
text-decoration: overline}}
h3 {color:green;
letter-spacing: 0.5cm;
text-align: right;
text-decoration: underline}
p {text-indent: 1cm}
p.aaa {text-transform: uppercase}
p.bbb {text-transform: lowercase}
p.ccc {text-transform: capitalize}
</style></head>
34

Exemplul 14 (continuare).
<body>
<h1><B> letter-spacing:</B> stabilete spaiul dintre caractere </h1>
<h2><B>text-align:</B> alinierea textului </h2>
<h3><B>text-decoration:</B> stabilete decorul </h3>
<P>CSS2 este limbajul care permite programatorilor i utilizatorilor
s ataeze stiluri documentelor structurate, cum ar fi paginile HTML
sau XML. Prin separarea stilului de prezentare a documentului
.........
<P class="aaa">
Foile de stil descriu modul de prezentare a documentelor. </p>
<p class="bbb">
FOILE DE STIL DESCRIU MODUL DE PREZENTARE A DOCUMENTELOR. </p>
<p class="ccc">
Foile de stil descriu modul de prezentare a documentelor. </p>
</body></html>
35

36
Exemple Proprieti ale setului de caractere

Exemplul 15.
<html><head>
h3 {font-family: times;
font-size: 200%;
font-style: italic}
p
{font-family: courier;
font-size: 150%;
font-style: normal;
font-variant: normal}
p.aaa {font-family: "sans-serif";
font-size: 350%;
font-style: oblique;
font-variant: small-caps;
font-weight: 900}
</style></head>
<body><h3>Acest text este H3</h3>
<p>Acest text este un paragraf</p>
<p class="aaa"> Acest text este un alt paragraf</p>
</body></html>
37
Exemple - Proprieti pentru liste

Exemplul 16.
<HTML><HEAD>
UL.aaa { list-style-type: disc;
list-style-position: inside}
UL.bbb { list-style-type: circle;
list-style-position: outside}
UL.ccc {list-style-image: url("imagini/fig1.gif")}
</STYLE>
</HEAD>
<BODY> <P>Aceast list are valoarea "inside" pentru proprietatea
"list-style-position"</P>
<UL class="aaa">
<LI>Windows</LI>
<LI>NetWare</LI>
<LI>Solaris</LI>
</UL>
38

<p>Aceast list are valoarea "outside" pentru proprietatea
"list-style-position"</P>
<UL class="bbb">
<LI>Windows</LI>
<LI>NetWare</LI>
<LI>Solaris</LI>
</UL>
<p>Lista are asociat proprietatea "list-style-image"</P>
<UL class="ccc">
<LI>Windows</LI>
<LI>NetWare</LI>
<LI>Solaris</LI>
</UL>
</body>
</html>
39

40
Exemple - Proprietatea cursor

Exemplul 17.
<HTML><BODY>
<P>Dac se trece cu mouse-ul pe deasupra cuvintelor se
observ cum se schimb formatul cursorului. </P>
<SPAN style="cursor:auto">Auto</SPAN><BR>
<SPAN style="cursor:crosshair">Crosshair</SPAN><BR>
<SPAN style="cursor:default">Default</SPAN><BR>
<SPAN style="cursor:hand">Hand</SPAN><BR>
<SPAN style="cursor:move">Move</SPAN><BR>
<SPAN style="cursor:e-resize">e-resize</SPAN><BR>
<SPAN style="cursor:ne-resize">ne-resize</SPAN><BR>
<SPAN style="cursor:nw-resize">nw-resize</SPAN><BR>
<SPAN style="cursor:wait">wait</SPAN><BR>
<SPAN style="cursor:help">HELP</SPAN>
</BODY></HTML>
41
Bibliografie
http://www.w3.org/TR/1998/REC-CSS2-19980512
Nstase Fl., Nstase P., Tehnologia aplicaiilor Web, Ed. Economic,

2002
42

5 CSS

Î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

5 CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Facultatea de Cibernetic, Statistic i Informatic

Catedra de Informatic Economic

Ce sunt foile de stil?

Ce sunt foile de stil ? (1)

Foile de stil, n particular CSS - Cascading Style Sheets, descriu modul

CSS Mobile Profile 1.0 - un subset al CSS2 adaptat necesitilor i

XSL - Extensible Style Language: limbaj pentru descrierea stilului de

Ce sunt foile de stil ? (2)

Posibilitatea de utilizare cu HTML

Posibilitatea de utilizare cu XML

Utilizarea sintaxei XML

Transformarea structurii documentelor XML

Transformarea coninutului documentelor XML

Sortarea, cutarea, filtrarea datelor XML

Suportat de navigatoarele obinuite (Internet

Stiluri CSS2 n paginile HTML (1)

Stiluri CSS2 n paginile HTML (2)

utilizarea elementului 'LINK' pentru a face legtura ctre o foaie de

declararea elementului 'STYLE' n cadrul tag-ului 'HEAD';

importul unei foi de stil utiliznd comanda CSS '@import';

asocierea atributului 'STYLE' unui element din corpul documentului

Stiluri CSS2 n paginile HTML (3)

Identificarea limbajului foilor de stil se obine din informaia asociat

Structura unei foi de stil (1)

Pentru a specifica o anumit culoare textului delimitat de marcatorul H1, de

Structura unei foi de stil (2)

O foaie de stil conine un set de reguli i, opional, comentarii.

selector (n exemplul anterior: 'H1') care indic elementul sau

blocul declarailor ('color: red') care descrie condiiile de redare fizic

Structura unei foi de stil (3)

Sunt echivalente cu:

Structura unei foi de stil (4)

Comentariile CSS furnizeaz unele informaii celor care studiaz codul

Utilizarea elementului STYLE(1)

Utilizarea elementului STYLE (2)

Utilizarea atributului style

Elementul LINK (1)

Elementul LINK (2)

BODY { color: red }

Elementul LINK (3)

tipul legturii: ctre un "stylesheet";

identificarea fiierului care include regulile de stil, prin

tipul MIME (Multipurpose Internet Mail Extension) al

Selecteaz toate elementele documentului

Selecteaz toate elementele de tip E

Selecteaz toate elementele de tip F care sunt descendente

Selecteaz toate elementele de tip F care sunt fii ai unui

Selecteaz elementul de tip E dac acesta este primul fiu

Selecteaz elementul de tip E al crui ID este "myid".

Clasa ca selector (1)

<H1>Aici nu s-a utilizat atributul 'CLASS'</H1>

Clasa ca selector (2)

Clasa ca selector (3)

a:visited {color: #00FF00}

a:link {color: #FF0000}

a:hover {color: #FF00FF}

/* mouse deasupra legturii */

Clasa ca selector (4)

a.bb:link {color: #ff0000}

Clasa ca selector (5)

first-letter - stabilete un stil special primei litere a unui text;

first-line - adaug un stil special primei linii a unui text;

:before - insereaz un anumit coninut naintea unui element (CSS2);