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

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

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

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
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
background
31
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
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

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

<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

Limbaj CSS

Încărcat de

Informații document

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

Limbaj CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Facultatea de Cibernetic, Statistic i Informatic Economic

Catedra de Informatic Economic

LIMBAJUL DE PREZENTARE CSS

Ce sunt foile de stil ? (1)

Ce sunt foile de stil ? (2)

Stiluri CSS2 n paginile HTML (1)

Stiluri CSS2 n paginile HTML (2)

Stiluri CSS2 n paginile HTML (3)

<META http-equiv="Content-Style-Type content="text/css">

Structura unei foi de stil (1)

Structura unei foi de stil (2)

Structura unei foi de stil (3)

Structura unei foi de stil (4)

Utilizarea elementului STYLE(1)

Utilizarea elementului STYLE (2)

Utilizarea atributului style

Elementul LINK (1)

Elementul LINK (2)

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

Elementul LINK (3)

Clasa ca selector (1)

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

Clasa ca selector (2)

Clasa ca selector (3)

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

Clasa ca selector (4)

Clasa ca selector (5)

Modelul casetelor (1)

Exemple - Proprieti pentru

Exemple - Proprieti pentru

Exemple - Proprieti pentru

Exemplul 12. Proprietatea background-color

Exemple - Proprieti pentru

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

Exemple - Proprieti asociate textului

Exemple - Proprieti asociate textului

Exemple - Proprieti asociate textului

Exemple Proprieti ale setului de caractere

Exemple - Proprieti pentru liste

Exemple - Proprieti pentru liste

Exemple - Proprieti pentru liste

Exemple - Proprietatea cursor

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

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