Sunteți pe pagina 1din 42

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 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 Explorer 5.0 i Netscape Navigator 6.0)

CSS2 da da nu nu nu nu da

XSL nu da da da da 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>

Stiluri CSS2 n paginile HTML (2)


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').

Stiluri CSS2 n paginile HTML (3)

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 }
8

Structura unei foi de stil (2)

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.

Structura unei foi de stil (3)

Sunt echivalente cu: Regulile urmtoare: H1 H1 H1 H1 H1 H1 { { { { { { font-weight: bold } font-size: 12pt } line-height: 14pt } font-family: Helvetica } font-variant: normal } font-style: normal }
} H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal

10

Structura unei foi de stil (4)

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
* E E F E > F E:first-child E#myid

Descrierea
Selecteaz toate elementele documentului Selecteaz toate elementele de tip E Selecteaz toate elementele de tip F care sunt descendente ale unui element de tip E Selecteaz toate elementele de tip F care sunt fii ai unui element de tip E Selecteaz elementul de tip E dac acesta este primul fiu al printelui su 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> </BODY></HTML> s-a utilizat atributul

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


19

Clasa ca selector (2)


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

Clasa ca selector (3)


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

/* legtur selectat */ /* legtur vizitat */ /* legtur nevizitat */ /* mouse deasupra legturii */

Clasa ca selector (4)


Exemplul 7: Utilizarea claselor i pseudo-claselor
<html><head> <style type="text/css"> 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

Clasa ca selector (5)

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> <style type="text/css"> 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> <STYLE type="text/css"> *#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> <STYLE type="text/css"> 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> <style type="text/css"> 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> <p>Imaginea rmne pe aceei poziie</p> <p>Imaginea rmne pe aceei poziie</p> <p>Imaginea rmne pe aceei poziie</p> .................... </body></html>

30

Exemple - Proprieti pentru

background

31

Exemple - Proprieti pentru

background

Exemplul 12. Proprietatea background-color


<html><head> <style type="text/css"> 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

Exemple - Proprieti pentru

background

Exemplul 13. Proprietile: background-image, backgroundrepeat i background-position


<HTML> <HEAD> <TITLE>Pagina de primire</TITLE> <STYLE type="text/css"> 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> <style type="text/css"> 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

Exemple - Proprieti asociate textului


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

Exemple - Proprieti asociate textului


Exemplul 14 (continuare).

36

Exemple Proprieti ale setului de caractere


Exemplul 15.
<html><head> <style type="text/css"> 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> <STYLE type="text/css"> 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

Exemple - Proprieti pentru liste


Exemplul 16 (continuare).
<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

Exemple - Proprieti pentru liste


Exemplul 16 (continuare).

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