Sunteți pe pagina 1din 42
Facultatea de Cibernetic ă , Statistic ă ş i Informatic ă Economic ă Catedra de
Facultatea de Cibernetic ă , Statistic ă ş i Informatic ă Economic ă Catedra de
Facultatea de Cibernetic ă , Statistic ă ş i Informatic ă Economic ă Catedra de
Facultatea de Cibernetic ă , Statistic ă ş i Informatic ă Economic ă Catedra de

Facultatea de Cibernetică, Statistică şi Informatică Economică

Catedra de Informatică Economică

LIMBAJULLIMBAJUL DEDE PREZENTAREPREZENTARE CSSCSS

Prof. univ. dr. Fl. NĂSTASE

Cuprins Cuprins 1. Ce sunt foile de stil? 2. Stiluri CSS2 în paginile HTML 3.
Cuprins Cuprins 1. Ce sunt foile de stil? 2. Stiluri CSS2 în paginile HTML 3.
Cuprins Cuprins 1. Ce sunt foile de stil? 2. Stiluri CSS2 în paginile HTML 3.
Cuprins Cuprins 1. Ce sunt foile de stil? 2. Stiluri CSS2 în paginile HTML 3.

CuprinsCuprins

1. Ce sunt foile de stil?

2. Stiluri CSS2 în paginile HTML

3. Structura unei foi de stil

4. Utilizarea elementului STYLE

5. Utilizarea atributului style

6. Utilizarea elementului LINK

7. Selectorul

8. Clasa ca selector

9. ID ca selector

10. Modelul casetelor

Ce Ce sunt sunt foile foile de de stil stil ? ? (1) (1) Foile
Ce Ce sunt sunt foile foile de de stil stil ? ? (1) (1) Foile
Ce Ce sunt sunt foile foile de de stil stil ? ? (1) (1) Foile
Ce Ce sunt sunt foile foile de de stil stil ? ? (1) (1) Foile

CeCe suntsunt foilefoile dede stilstil ?? (1)(1)

Foile de stil, în particular CSS - Cascading Style Sheets, descriu modul în care documentele Web sunt prezentate pe ecran, imprimantă sau alte medii.

ExistExistăă specificaspecificaţţiiile:ile:

CSS1CSS1 -- CCascadingascading SStyletyle SSheetsheets levellevel 11

CSS2CSS2 -- CCascadingascading SStyletyle SSheetsheets levellevel 2:2: limbajlimbaj alal foilorfoilor dede stilstil carecare permitepermite programatorilorprogramatorilor şşii utilizatorilorutilizatorilor ssăă ataataşşezeeze stiluristiluri (set(set dede caracterecaractere,, pozipoziţţionareionare,, culoareculoare)) documentelordocumentelor structuratestructurate,, cumcum arar fifi paginilepaginile HTMLHTML sausau aplicaaplicaţţiileiile XML.XML.

CSSCSS MobileMobile ProfileProfile 1.01.0 -- unun subsetsubset alal CSS2CSS2 adaptatadaptat necesitnecesităăţţilorilor şşii restricrestricţţiiloriilor impuseimpuse dede dispozitivelordispozitivelor mobilemobile (de(de exempluexemplu,, telefontelefon).).

XSLXSL -- EExtensiblextensible SStyletyle LLanguageanguage:: limbajlimbaj pentrupentru descriereadescrierea stiluluistilului dede preprezentarezentare aa documentelordocumentelor XMLXML îîntrntr--unun modmod maimai evoluatevoluat decdecâtât CSS.CSS.

3

Ce Ce sunt sunt foile foile de de stil stil ? ? (2) (2) Criteriul
Ce Ce sunt sunt foile foile de de stil stil ? ? (2) (2) Criteriul

CeCe suntsunt foilefoile dede stilstil ?? (2)(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 conţinutului documentelor XML

nu

da

Sortarea, căutarea, filtrarea datelor XML

nu

da

Suportat de navigatoarele obişnuite (Internet Explorer 5.0 şi Netscape Navigator 6.0)

da

parţial

Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (1) (1) Exemplul
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (1) (1) Exemplul
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (1) (1) Exemplul
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (1) (1) Exemplul

StiluriStiluri CSS2CSS2 îînn paginilepaginile HTMLHTML (1)(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 roşu </BODY> </HTML>

Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (2) (2) Exist
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (2) (2) Exist
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (2) (2) Exist
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (2) (2) Exist

StiluriStiluri CSS2CSS2 îînn paginilepaginile HTMLHTML (2)(2)

Există patru moduri pentru combinarea HTML:

foilor

de stil cu paginile

• utilizarea elementului stil externă;

'LINK' pentru a face legătura către o foaie de

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

• importul unei foi de stil utilizând comanda CSS '@import';

• asocierea atributului 'STYLE' unui element din corpul documentului ('BODY').

Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (3) (3) Identificarea
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (3) (3) Identificarea
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (3) (3) Identificarea
Stiluri Stiluri CSS2 CSS2 î î n n paginile paginile HTML HTML (3) (3) Identificarea

StiluriStiluri CSS2CSS2 îînn paginilepaginile HTMLHTML (3)(3)

Identificarea limbajului foilor de stil se obţine din informaţia 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 Structura unei unei foi foi de de stil stil ( ( 1 1 )

StructuraStructura uneiunei foifoi dede stilstil ((11))

EExemplulxemplul 22 DocumentDocument HTMLHTML ffăărrăă stilstiluriuri asociateasociate

<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 roşu, trebuie scrisă următoarea regulă de stil CSS:

H1 { color: red }

8

Structura Structura unei unei foi foi de de stil stil (2) (2) O O foaie
Structura Structura unei unei foi foi de de stil stil (2) (2) O O foaie

StructuraStructura uneiunei foifoi dede stilstil (2)(2)

OO foaiefoaie dede stilstil conconţţineine unun setset dede regulireguli şşi,i, opopţţional,ional, comentariicomentarii Fiecare regulă de stil CSS este compusă din:

selector (în exemplul anterior: 'H1') care indică elementul sau elementele asupra cărora acţionează regula;

blocul declaraţilor ('color: red') care descrie condiţiile de redare fizică a elementului specificat, fiind limitat de acolade.

red') care descrie condi ţ iile de redare fizic ă a elementului specificat, fiind limitat de
Structura Structura unei unei foi foi de de stil stil (3) (3) Sunt echivalente cu:
Structura Structura unei unei foi foi de de stil stil (3) (3) Sunt echivalente cu:
Structura Structura unei unei foi foi de de stil stil (3) (3) Sunt echivalente cu:
Structura Structura unei unei foi foi de de stil stil (3) (3) Sunt echivalente cu:

StructuraStructura uneiunei foifoi dede stilstil (3)(3)

Sunt echivalente cu:

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal

}

Regulile următoare:

H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal }

Structura Structura unei unei foi foi de de stil stil (4) (4) Comentariile CSS furnizeaz
Structura Structura unei unei foi foi de de stil stil (4) (4) Comentariile CSS furnizeaz

StructuraStructura uneiunei foifoi dede stilstil (4)(4)

Comentariile CSS furnizează unele informaţii 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 roşu */ color: red;

}

Utilizarea Utilizarea elementului elementului STYLE STYLE (1) (1) Exemplu 3 Utilizarea elementului STYLE
Utilizarea Utilizarea elementului elementului STYLE STYLE (1) (1) Exemplu 3 Utilizarea elementului STYLE
Utilizarea Utilizarea elementului elementului STYLE STYLE (1) (1) Exemplu 3 Utilizarea elementului STYLE
Utilizarea Utilizarea elementului elementului STYLE STYLE (1) (1) Exemplu 3 Utilizarea elementului STYLE

UtilizareaUtilizarea elementuluielementului STYLESTYLE(1)(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 Utilizarea elementului elementului STYLE STYLE (2) (2) Atributele elementului STYLE sunt: • type =
Utilizarea Utilizarea elementului elementului STYLE STYLE (2) (2) Atributele elementului STYLE sunt: • type =
Utilizarea Utilizarea elementului elementului STYLE STYLE (2) (2) Atributele elementului STYLE sunt: • type =
Utilizarea Utilizarea elementului elementului STYLE STYLE (2) (2) Atributele elementului STYLE sunt: • type =

UtilizareaUtilizarea elementuluielementului STYLESTYLE (2)(2)

Atributele elementului STYLE sunt:

type = exemplu, implicită.

media = descriptor-media specifică mediul destinaţie avut în vedere prin informaţia 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 descriptor- media corespunde dispozitivului ţintă pentru care proprietăţile prezentate au sens: all – corespunde pentru toate dispozitivele, print dispozitivul imprimantă, aural– sintetizor vocal, braille – terminal Braille etc.

(de

şi este obligatoriu, nu este o valoare

tip_conţinut

"text/css")

specifică

limbajul

foii

de

stil

Utilizarea Utilizarea atributului atributului style style <P style="font-size: 12pt; color: red" >Numai
Utilizarea Utilizarea atributului atributului style style <P style="font-size: 12pt; color: red" >Numai
Utilizarea Utilizarea atributului atributului style style <P style="font-size: 12pt; color: red" >Numai
Utilizarea Utilizarea atributului atributului style style <P style="font-size: 12pt; color: red" >Numai

UtilizareaUtilizarea atributuluiatributului stylestyle

<P style="font-size: 12pt; color: red">Numai acestui text se adresează informaţia de stil

Elementul Elementul LINK LINK (1) (1) Exemplu 4 Utilizarea elementului LINK: <HTML> <HEAD>
Elementul Elementul LINK LINK (1) (1) Exemplu 4 Utilizarea elementului LINK: <HTML> <HEAD>

ElementulElementul LINKLINK (1)(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>

Elementul Elementul LINK LINK (2) (2) O foaie de stil extern ă poate fi scris
Elementul Elementul LINK LINK (2) (2) O foaie de stil extern ă poate fi scris
Elementul Elementul LINK LINK (2) (2) O foaie de stil extern ă poate fi scris
Elementul Elementul LINK LINK (2) (2) O foaie de stil extern ă poate fi scris

ElementulElementul LINKLINK (2)(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. Conţinutul fişierului ex4.css este:

BODY { color: red } H1 { color: blue }

Elementul Elementul LINK LINK (3) (3) Specifica ţ iile oferite prin elementul LINK sunt: •
Elementul Elementul LINK LINK (3) (3) Specifica ţ iile oferite prin elementul LINK sunt: •
Elementul Elementul LINK LINK (3) (3) Specifica ţ iile oferite prin elementul LINK sunt: •
Elementul Elementul LINK LINK (3) (3) Specifica ţ iile oferite prin elementul LINK sunt: •

ElementulElementul LINKLINK (3)(3)

Specificaţiile oferite prin elementul LINK sunt:

• tipul legăturii: către un "stylesheet";

• identificarea fişierului care include regulile de stil, prin atributul "href".

• tipul MIME (Multipurpose Internet Mail Extension) al foii de stil care va fi asociat: "text/css".

Selectorul Selectorul   Selector Descrierea * Selecteaz ă toate elementele documentului E
Selectorul Selectorul   Selector Descrierea * Selecteaz ă toate elementele documentului E
Selectorul Selectorul   Selector Descrierea * Selecteaz ă toate elementele documentului E
Selectorul Selectorul   Selector Descrierea * Selecteaz ă toate elementele documentului E

SelectorulSelectorul

 

Selector

Descrierea

*

Selectează toate elementele documentului

E

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 părintelui său

E#myid

Selectează elementul de tip E al cărui ID este "myid".

Clasa Clasa ca ca selector selector (1) (1) Exemplu 5 . Utilizarea atributului class
Clasa Clasa ca ca selector selector (1) (1) Exemplu 5 . Utilizarea atributului class

ClasaClasa caca selectorselector (1)(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

Clasa Clasa ca ca selector selector (2) (2) Pseudo-clasele sunt utilizate în CSS pentru a
Clasa Clasa ca ca selector selector (2) (2) Pseudo-clasele sunt utilizate în CSS pentru a
Clasa Clasa ca ca selector selector (2) (2) Pseudo-clasele sunt utilizate în CSS pentru a
Clasa Clasa ca ca selector selector (2) (2) Pseudo-clasele sunt utilizate în CSS pentru a

ClasaClasa caca selectorselector (2)(2)

Pseudo-clasele sunt utilizate în CSS pentru a adăuga diferite efecte unor selectori sau unei părţi dintre aceştia. Sintaxa pentru o pseudo-clasă este:

selector:pseudo-clasă {proprietate: valoare}

Clasele CSS pot fi utilizate în combinaţie cu pseudo-clase:

selector.clasă:pseudo-clasă {proprietate: valoare}

Clasa Clasa ca ca selector selector (3) (3) Exemplul 6 : Utilizarea pseudo-clasei <html><head>
Clasa Clasa ca ca selector selector (3) (3) Exemplul 6 : Utilizarea pseudo-clasei <html><head>

ClasaClasa caca selectorselector (3)(3)

Exemplul 6: Utilizarea pseudo-clasei

<html><head> <style type="text/css"> a:active {color: #0000FF}

a:visited {color: #00FF00} /* legătură vizitată */

a:link {color: #FF0000} a:hover {color: #FF00FF}

</style> </head> <body> <p><b><a href="#">Text de legătură</a></b></p>

</body></html>

/* legătură selectată */

/* legătură nevizitată */ /* mouse deasupra legăturii */

Clasa Clasa ca ca selector selector ( ( 4 4 ) ) Exemplul 7 :
Clasa Clasa ca ca selector selector ( ( 4 4 ) ) Exemplul 7 :
Clasa Clasa ca ca selector selector ( ( 4 4 ) ) Exemplul 7 :
Clasa Clasa ca ca selector selector ( ( 4 4 ) ) Exemplul 7 :

ClasaClasa caca selectorselector ((44))

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 legãturilor se pot vedea schimbãrile.</p>…… <p><b><a class=“bb" href="#"> Legãtura schimbã marimea… </a> …

</b></p></body></html>

Clasa Clasa ca ca selector selector ( ( 5 5 ) ) 23
Clasa Clasa ca ca selector selector ( ( 5 5 ) ) 23
Clasa Clasa ca ca selector selector ( ( 5 5 ) ) 23
Clasa Clasa ca ca selector selector ( ( 5 5 ) ) 23

ClasaClasa caca selectorselector ((55))

Clasa Clasa ca ca selector selector ( ( 5 5 ) ) 23
Pseudo Pseudo - - elementele elementele (1) (1) Pseudo-elementele sunt utilizate în CSS pentru a
Pseudo Pseudo - - elementele elementele (1) (1) Pseudo-elementele sunt utilizate în CSS pentru a
Pseudo Pseudo - - elementele elementele (1) (1) Pseudo-elementele sunt utilizate în CSS pentru a
Pseudo Pseudo - - elementele elementele (1) (1) Pseudo-elementele sunt utilizate în CSS pentru a

PseudoPseudo--elementeleelementele (1)(1)

Pseudo-elementele sunt utilizate în CSS pentru a adăuga diferite efecte unor selectori. Sintaxa unui pseudo-element este:

selector:pseudo-element {proprietate: valoare}

Pseudo-elementele utilizate sunt:

first-letter - stabileşte un stil special primei litere a unui text;

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

:before - inserează un anumit conţinut înaintea unui element (CSS2);

:after - inserează un anumit conţinut după un element (CSS2).

Pseudo Pseudo - - elementele elementele (2) (2) Exemplu 8 . Utilizarea pseudo-elementelor <html><head>
Pseudo Pseudo - - elementele elementele (2) (2) Exemplu 8 . Utilizarea pseudo-elementelor <html><head>

PseudoPseudo--elementeleelementele (2)(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 câstig major al proiectanţilor de pagini Web, extinzând posibilităţile de prezentare a propriilor pagini. </p></body></html>

ID ID ca ca selector selector HTML introduce atributul 'ID' care trebuie s ă aib
ID ID ca ca selector selector HTML introduce atributul 'ID' care trebuie s ă aib

IDID caca selectorselector

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>

Modelul Modelul casetelor casetelor (1) (1) Aranjarea în pagin ă a tuturor elementelor este definit

ModelulModelul casetelorcasetelor (1)(1)

Aranjarea în pagină a tuturor elementelor este definită după modelul casetelor, fiecărui element din structura arborescentă a documentului i se asociază o casetă .

modelul casetelor, fiec ă rui element din structura arborescent ă a documentului i se asociaz ă

27

Exemple Exemple Exemplul 10 . Margini, completare ş i chenare ( margin, padding, border )
Exemple Exemple Exemplul 10 . Margini, completare ş i chenare ( margin, padding, border )

ExempleExemple

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; background: gray;

/* culoarea textului este negru */

/* 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 */

Exemple Exemple Exemplul 10 . Margini, completare ş i chenare (continuare) LI.margine { color: red;
Exemple Exemple Exemplul 10 . Margini, completare ş i chenare (continuare) LI.margine { color: red;
Exemple Exemple Exemplul 10 . Margini, completare ş i chenare (continuare) LI.margine { color: red;
Exemple Exemple Exemplul 10 . Margini, completare ş i chenare (continuare) LI.margine { color: red;
Exemple Exemple Exemplul 10 . Margini, completare ş i chenare (continuare) LI.margine { color: red;

ExempleExemple

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>

Exemple Exemple - - Propriet ăţ i pentru background Exemplul 11 . Proprietatea background-attachment (imaginea
Exemple Exemple - - Propriet ăţ i pentru background Exemplul 11 . Proprietatea background-attachment (imaginea

ExempleExemple -- Proprietăţi pentru background

Exemplul 11. Proprietatea background-attachment (imaginea rămâne 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 rămâne pe aceeşi poziţie</p> <p>Imaginea rămâne pe aceeşi poziţie</p> <p>Imaginea rămâne pe aceeşi poziţie</p> <p>Imaginea rămâne pe aceeşi poziţie</p>

</body></html>

Exemple Exemple - - Propriet ăţ i pentru background 31
Exemple Exemple - - Propriet ăţ i pentru background 31

ExempleExemple -- Proprietăţi pentru background

Exemple Exemple - - Propriet ăţ i pentru background 31
Exemple Exemple - - Propriet ăţ i pentru background 31

31

Exemple Exemple - - Propriet ăţ i pentru background Exemplul 12 . Proprietatea background-color
Exemple Exemple - - Propriet ăţ i pentru background Exemplul 12 . Proprietatea background-color

ExempleExemple -- Proprietăţi 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>

Exemple Exemple - - Propriet ăţ i pentru background Exemplul 13 . Propriet ăţ ile:
Exemple Exemple - - Propriet ăţ i pentru background Exemplul 13 . Propriet ăţ ile:
Exemple Exemple - - Propriet ăţ i pentru background Exemplul 13 . Propriet ăţ ile:
Exemple Exemple - - Propriet ăţ i pentru background Exemplul 13 . Propriet ăţ ile:

ExempleExemple -- Proprietăţi pentru background

Exemplul 13. Proprietăţile: background-image, background- repeat ş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>Reţele de calculatoare,</I> Agora, 1997</H2>

<LI><H2>

</BODY></HTML>

</H2></UL>

33

Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 . <html><head> <style
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 . <html><head> <style
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 . <html><head> <style
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 . <html><head> <style

ExempleExemple -- Proprietăţi 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>

Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). <body> <h1><B>
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). <body> <h1><B>

ExempleExemple -- Proprietăţi asociate textului

Exemplul 14 (continuare).

<body> <h1><B> letter-spacing:</B> stabileşte spaţiul dintre caractere </h1> <h2><B>text-align:</B> alinierea textului </h2> <h3><B>text-decoration:</B> stabileşte decorul </h3> <P>CSS2 este limbajul care permite programatorilor şi utilizatorilor să ataşeze 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 Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). 36
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). 36
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). 36
Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). 36

ExempleExemple -- Proprietăţi asociate textului

Exemplul 14 (continuare).

Exemple Exemple - - Propriet ăţ i asociate textului Exemplul 14 (continuare). 36
Exemple Exemple – – Propriet ăţ i ale setului de caractere Exemplul 15 . <html><head>
Exemple Exemple – – Propriet ăţ i ale setului de caractere Exemplul 15 . <html><head>
Exemple Exemple – – Propriet ăţ i ale setului de caractere Exemplul 15 . <html><head>
Exemple Exemple – – Propriet ăţ i ale setului de caractere Exemplul 15 . <html><head>

ExempleExemple Proprietăţi 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 Exemple - - Propriet ăţ i pentru liste Exemplul 16 . <HTML><HEAD> <STYLE
Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 . <HTML><HEAD> <STYLE
Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 . <HTML><HEAD> <STYLE
Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 . <HTML><HEAD> <STYLE

ExempleExemple -- Proprietăţi 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 Exemple - - Propriet ăţ i pentru liste Exemplul 16 (continuare). <p>Aceast ă list
Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 (continuare). <p>Aceast ă list

ExempleExemple -- Proprietăţi 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>

Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 (continuare). 40
Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 (continuare). 40

ExempleExemple -- Proprietăţi pentru liste

Exemplul 16 (continuare).

Exemple Exemple - - Propriet ăţ i pentru liste Exemplul 16 (continuare). 40

40

Exemple Exemple - - Proprietatea cursor Exemplul 17 . <HTML><BODY> <P>Dac ă se trece cu
Exemple Exemple - - Proprietatea cursor Exemplul 17 . <HTML><BODY> <P>Dac ă se trece cu

ExempleExemple -- 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>

Bibliografie Bibliografie • http://www.w3.org/TR/1998/REC-CSS2-19980512 • N ă stase Fl., N ă stase P., Tehnologia
Bibliografie Bibliografie • http://www.w3.org/TR/1998/REC-CSS2-19980512 • N ă stase Fl., N ă stase P., Tehnologia
Bibliografie Bibliografie • http://www.w3.org/TR/1998/REC-CSS2-19980512 • N ă stase Fl., N ă stase P., Tehnologia
Bibliografie Bibliografie • http://www.w3.org/TR/1998/REC-CSS2-19980512 • N ă stase Fl., N ă stase P., Tehnologia

BibliografieBibliografie

• http://www.w3.org/TR/1998/REC-CSS2-19980512

• Năstase Fl., Năstase P., Tehnologia aplicaţiilor Web, Ed. Economică,

2002