1290605564_5._CSS

8/22/2019 1290605564_5._CSS

1/42

Facultatea de Cibernetic, Statistic i InformaticEconomic

LIMBAJUL DE PREZENTARELIMBAJUL DE PREZENTARE

CSSCSS

Prof. univ. dr. Fl. NSTASE

Catedra de Informatic Economic

8/22/2019 1290605564_5._CSS

2/42

2

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

8/22/2019 1290605564_5._CSS

3/42

3

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

ExistExistspecificaspecificaiiile:ile:

CSS1CSS1 -- CCascadingascading SStyletyle SSheets level 1heets level 1

CSS2CSS2 -- CCascadingascading SStyletyle SSheets levelheets level 2:2: limbajlimbaj alal foilorfoilordede stilstil carecarepermitepermiteprogramatorilorprogramatorilorii utilizatorilorutilizatorilorss ataataezeeze stiluristiluri (set de(set de caracterecaractere,,pozipoziionareionare,, culoareculoare)) documentelordocumentelorstructuratestructurate, cum, cum ararfifipaginilepaginile HTMLHTMLsausau aplicaaplicaiileiile XML.XML.

CSSCSS Mobile Profile 1.0Mobile Profile 1.0 -- un subset al CSS2un subset al CSS2 adaptatadaptat necesitnecesitiloriloriirestricrestriciiloriilorimpuseimpuse dede dispozitivelordispozitivelormobile (demobile (de exempluexemplu,, telefontelefon).).

XSLXSL -- EExtensiblextensible SStyletyle LLanguageanguage:: limbajlimbajpentrupentru descriereadescrierea stiluluistilului dedepreprezentare a documentelor XMLzentare a documentelor XML ntrntr--un modun mod maimai evoluatevoluat decdect CSS.t CSS.

Foile de stil, n particular CSS - Cascading Style Sheets, descriu moduln care documentele Web sunt prezentate pe ecran, imprimant sau altemedii.

8/22/2019 1290605564_5._CSS

4/42

4

Ce sunt foile de stil ?Ce sunt foile de stil ? (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 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)

daparial

8/22/2019 1290605564_5._CSS

5/42

5

StiluriStiluri CSS2CSS2nn paginilepaginile HTMLHTML (1)(1)

Exemplu 1

@import url(http://style.com/basic);

H1 { color: blue }

Titlul este albastru

Acest paragraf este rou

Exemplul 1. Stiluri n pagina HTML
http://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex1_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex1_css.htm

8/22/2019 1290605564_5._CSS

6/42

6


Exist patru moduri pentru combinarea foilor de stil cu paginileHTML:

utilizarea elementului 'LINK' pentru a face legtura ctre o foaie destil 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').

8/22/2019 1290605564_5._CSS

7/42

7


Identificarea limbajului foilor de stil se obine din informaia asociatn antetul documentului HTML. Se poate utiliza elementul META

pentru a seta limbajul implicit al foii de stil pentru un document

HTML.

8/22/2019 1290605564_5._CSS

8/42

8

StructuraStructura uneiunei foifoi dede stilstil ((11))

EExemplulxemplul 22.. Document HTMLDocument HTML frfr stilstiluri asociateuri asociate

Pagina de primire

Exemplu

CSS-2 pentru HTML

Pentru a specifica o anumit culoare textului delimitat de marcatorul H1, deexemplu rou, trebuie scris urmtoarea regul de stil CSS:

H1 { color: red }
http://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex2_css.htm

8/22/2019 1290605564_5._CSS

9/42

9

StructuraStructura uneiunei foifoi dede stilstil (2)(2)

OO foaiefoaie dede stilstil conconineine un set deun set de regulireguli i, opi, opional,ional, comentariicomentarii..

Fiecare regul de stilCSS 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.

8/22/2019 1290605564_5._CSS

10/42

10


Regulile urmtoare:

H1 { font-weight: bold }

H1 { font-size: 12pt }H1 { line-height: 14pt }

H1 { font-family: Helvetica }

H1 { font-variant: normal }

H1 { font-style: normal }

Sunt echivalente cu:

H1 {

font-weight: bold;

font-size: 12pt;line-height: 14pt;

font-family: Helvetica;

font-variant: normal;

font-style: normal

}

8/22/2019 1290605564_5._CSS

11/42

11


Comentariile CSS furnizeaz unele informaii celor care studiaz codulsurs i sunt ignorate de navigator. Un comentariu CSS ncepe cu "/*" ise ncheie cu "*/".

P

{

/* Acest paragraf este centrat */

text-align: center;

/* Culoarea utilizat pentru text este rou */

color: red;

}

8/22/2019 1290605564_5._CSS

12/42

12

UtilizareaUtilizarea elementuluielementului STYLESTYLE(1)(1)

Pagina de primire

H1 { color: red }

Exemplu

Utilizare CSS-2 in pagina HTML

Exemplu 3 Utilizarea elementului STYLE

8/22/2019 1290605564_5._CSS

13/42

13

UtilizareaUtilizarea elementuluielementului STYLESTYLE (2)(2)

type = tip_coninut specific limbajul foii de stil (deexemplu, "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 separatprin virgul. Valoarea implicitpentruacest atribut este "screen". Numele ales pentru descriptor-

media corespunde dispozitivului int pentru care proprietileprezentate au sens: all corespunde pentru toate dispozitivele,print dispozitivul imprimant, aural sintetizor vocal,braille terminal Braille etc.

Atributele elementului STYLE sunt:

8/22/2019 1290605564_5._CSS

14/42

14

UtilizareaUtilizarea atributuluiatributului stylestyle

Numaiacestui text se adreseaz informaia de stil

8/22/2019 1290605564_5._CSS

15/42

15

ElementulElementul LINKLINK (1)(1)

Pagina de primire

Exemplu

Utilizare CSS-2 n pagina HTML

Exemplu 4 Utilizarea elementului LINK:

8/22/2019 1290605564_5._CSS

16/42

16


O foaie de stil externpoate fi scris cu orice editor detexte, nu va include nici un tag HTML i va fi salvat cuextensia .css. Coninutul fiierului ex4.css este:

BODY { color: red }

H1 { color: blue }

8/22/2019 1290605564_5._CSS

17/42

17


Specificaiile oferite prin elementul LINK sunt:

tipul legturii: ctre un "stylesheet";

identificarea fiierului care include regulile de stil, prinatributul "href".

tipul MIME (Multipurpose Internet Mail Extension) al

foii de stil care va fi asociat: "text/css".

8/22/2019 1290605564_5._CSS

18/42

18

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 unuielement de tip E

E:first-child Selecteaz elementul de tip E dac acesta este primul fiual printelui su

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

8/22/2019 1290605564_5._CSS

19/42

19

ClasaClasa ca selectorca selector (1)(1)

Exemplu 5. Utilizarea atributului class

Exemplu 2

H1.ex1 { color: #00FF00 }

Aici s-a utilizat atributul'CLASS'

Aici nu s-a utilizat atributul 'CLASS'
http://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex4.htmhttp://i/master_eb_08_cursuri/cap3_css/exempleCSS/ex4.htm

8/22/2019 1290605564_5._CSS

20/42

20


Pseudo-clasele sunt utilizate n CSS pentru a aduga diferite efecte unorselectori sau unei pri dintre acetia. Sintaxa pentru o pseudo-claseste:

selector:pseudo-clas {proprietate: valoare}

Clasele CSS pot fi utilizate n combinaie cu pseudo-clase:

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

8/22/2019 1290605564_5._CSS

21/42

21


Exemplul 6: Utilizarea pseudo-clasei

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

Text de legtur

8/22/2019 1290605564_5._CSS

22/42

22

ClasaClasa ca selectorca selector ((44))

Exemplul 7: Utilizarea claselori pseudo-claselor

a.bb:link {color: #ff0000}a.bb:visited {color: #0000ff}a.bb:hover {font-size: 150%}

.

Dac se trece cu mouse-ul pe deasupra legturilor se pot

vedea schimbrile.

8/22/2019 1290605564_5._CSS

23/42

23

ClasaClasa ca selectorca selector ((55))

8/22/2019 1290605564_5._CSS

24/42

24

PseudoPseudo--elementeleelementele (1)(1)

Pseudo-elementele sunt utilizate n CSS pentru a aduga diferiteefecte 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).

8/22/2019 1290605564_5._CSS

25/42

25

PseudoPseudo--elementeleelementele (2)(2)

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 }

Foile de stil reprezint un cstig major al proiectanilor de pagini Web, extinzndposibilitile de prezentare a propriilor pagini.

Exemplu 8. Utilizarea pseudo-elementelor

8/22/2019 1290605564_5._CSS

26/42

26

ID ca selectorID ca selector

HTML introduce atributul 'ID' care trebuie s aib o valoare unicntr-un document. El poate fi utilizat ca selector ntr-o foaie de stil iva fi adresat, fiind precedat de simbolul '#'.

Exemplul 9. Utilizarea ID ca selector

ID ca selector exemplul 1

*#z98y { letter-spacing: 0.3em }

Acest text

8/22/2019 1290605564_5._CSS

27/42

27

ModelulModelul casetelorcasetelor (1)(1)

Aranjarea n pagin a tuturor elementelor este definit dup modelulcasetelor, fiecrui element din structura arborescent a documentului ise asociaz o caset .

8/22/2019 1290605564_5._CSS

28/42

28

ExempleExemple

Margini, completare si chenar

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

}

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

8/22/2019 1290605564_5._CSS

29/42

29

ExempleExemple

LI.margine {color: red;

background:6633ff;

border-style: dashed;

border-width: medium;/* chenar pentru toate partile */

border-color: black;

}

Primul element al listei

Al doilea element din lista

Exemplul 10. Margini, completare i chenare (continuare)

8/22/2019 1290605564_5._CSS

30/42

30

ExempleExemple

-- Proprieti pentrubackground

Exemplul 11. Proprietatea background-attachment (imaginea

rmne fix n timp ce textul poate defila)

body {

background-image:url("imagini/fig4.gif");background-repeat: no-repeat;

background-attachment: fixed

}

Imaginea rmne pe aceei poziie




....................

8/22/2019 1290605564_5._CSS

31/42

31

ExempleExemple -- Proprieti pentrubackground

8/22/2019 1290605564_5._CSS

32/42

32


Exemplul 12. Proprietatea background-color

body {background-color:green}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

Acest text este H1

Acest text este H2

Acest text este un paragraf

8/22/2019 1290605564_5._CSS

33/42

33


Exemplul 13. Proprietile: background-image, background-

repeat i background-position Pagina de primire

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 }

Bibliografie

Andrew Tanenbaum, Reele de calculatoare, Agora, 1997

.....

8/22/2019 1290605564_5._CSS

34/42

34

ExempleExemple -- Proprieti asociate textului

Exemplul 14.

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}

8/22/2019 1290605564_5._CSS

35/42

35


Exemplul 14 (continuare).

letter-spacing: stabilete spaiul dintre caractere

text-align: alinierea textului

text-decoration: stabilete decorul

CSS2 este limbajul care permite programatorilor i utilizatorilor

s ataeze stiluri documentelor structurate, cum ar fi paginile HTMLsau XML. Prin separarea stilului de prezentare a documentului.........

Foile de stil descriu modul de prezentare a documentelor.

FOILE DE STIL DESCRIU MODUL DE PREZENTARE A DOCUMENTELOR.

Foile de stil descriu modul de prezentare a documentelor.

8/22/2019 1290605564_5._CSS

36/42

36



8/22/2019 1290605564_5._CSS

37/42

37

ExempleExemple Proprieti ale setului de caractere

Exemplul 15.

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}

Acest text este H3

Acest text este un paragraf

Acest text este un alt paragraf

8/22/2019 1290605564_5._CSS

38/42

38

ExempleExemple -- Proprieti pentru liste

Exemplul 16.

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")}

Aceast list are valoarea "inside" pentru proprietatea

"list-style-position"

Windows

NetWare

Solaris

8/22/2019 1290605564_5._CSS

39/42

39



Aceast list are valoarea "outside" pentru proprietatea

"list-style-position"

Windows

NetWareSolaris

Lista are asociat proprietatea "list-style-image"

Windows

NetWare

Solaris

8/22/2019 1290605564_5._CSS

40/42

40



8/22/2019 1290605564_5._CSS

41/42

41

ExempleExemple -- Proprietatea cursor

Exemplul 17.

Dac se trece cu mouse-ul pe deasupra cuvintelor seobserv cum se schimb formatul cursorului.

Auto

Crosshair

Default

Hand

Move
e-resize

ne-resize

nw-resize

wait

HELP

8/22/2019 1290605564_5._CSS

42/42

42

BibliografieBibliografie

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

Nstase Fl., Nstase P., Tehnologia aplicaiilor Web, Ed. Economic,2002

Date post:	08-Aug-2018
Category:	Documents
Upload:	anonymous-vss2gvaa
View:	216 times
Download:	0 times

1290605564_5._CSS

Documents