Tehnologii Web

Tehnologii Web 2007/2008 

Tehnologii Web 

Dr. Sabin-Corneliu Buraga 

Facultatea de Informatica 

Universitatea “A.I.Cuza” – Iasi, Romania 

http://www.infoiasi.ro/~busaco/ 

Dr. Sabin Buraga http://www.infoiasi.ro/~busaco/ 

 

 

1


Foi de stiluri in cascada 

Prezentare generala 


 

 

Detalii in [PSW, 163-196 + CD] 

[NW, 105-125] 

2


cuprins 

• Caracteristici generale 

• CSS – nivelul 1 


• Resurse 


 

 

3


css | caracteristici 


 

 

• Foi de stiluri: grupuri de proprietati 

definind modul de aparitie a elementelor 

unor limbaje de marcare (HTML, XML,…) 

• Cascading Style Sheets – nivelul 1 

(dec. 1996) 


(mai 1998) 


(in curs de standardizare) 

4


css | formatare 

• Model orientat boxa 

margine, bordura, padding, continut 


 

 

5


css | terminologie 

h1 { color: #CCC; font-size: 16pt;} 

Selector 

Proprietate 

Valoare 

Declaratie Declaratie 


 

 

6


css | moduri de utilizare 


 

 

• Local, la nivelul unui marcator – atributul style: 

… 

• Gruparea definitiilor CSS in antetul documentului 

–elementul: 

 

h3 { color: #C60; margin: 1em } 

 

• Extern, definitiile de stiluri fiind stocate 

intr-un fisier .css: 

 

7


css | clase 


 

 

• Definirea de proprietati pentru o clasa 

(grup) de elemente: .nume_de_clasa 

.intens { font-weight: bolder; color: green } 

• Utilizare prin intermediul atributului class: 

Paragraf ingrosat si verde. 

Titlu ingrosat si verde 

• Alternativa – via identificator #identificator 

#intens { font-weight: bolder; color: green } 

Paragraf ingrosat si verde. 

8


css | stiluri 


 

 

• Stiluri aplicate in functie de context: 

p em { color: blue } 

Un paragraf albastru doar aici… 

Acesta este italic si atit! 

• Grupare de stiluri: 

h1, h2, a, td { font-family: Arial; font-size: 16pt } 

h2 { font-style: italic } 

9


css | pseudo 

• Pseudo-clase: a:link, a:visited, a:active 

a:link { color: red } 

a:visited img { color: yellow; border: solid } 

a:active { background-color: blue } 

• Pseudo-elemente: first-line, first-letter 

p:first-line { text-indent: 5% } 

p:first-letter { font-size: 200%; float: left } 


 

 

10


css | exemple 


 

 

• Foile de stiluri folosite in cadrul paginilor 

Web ale cursului: 

– http://www.infoiasi.ro/~busaco/teach/courses/web/web.css 

• Foile de stiluri utilizate de situl Web al 

Facultatii de Informatica – consultati 

codul-sursa XHTML al paginii principale: 

– http://www.infoiasi.ro/ 

11


css | proprietati | fonturi 


 

 

• font-family: serif (Amherst), 

sans-serif (Arial), cursive (Nuptial), 

fantasy (STOP), monospace (Courier) 

• font-style: normal, italic, oblique 

• font-weight: normal, bold, lighter, 100..900 

• font-size: x-small, medium, large, 10pt, 

16pt, larger, smaller, -10%, +50% 

p { font-size: 12pt; font-family: Arial, sans-serif } 

h4 { font-style: italic; font-weight: bold; font-size: -25% } 

12


css | proprietati | culori 


 

 

• color: denumire_culoare | rgb(N,N,N) 

• background-color: denumire_culoare | rgb(N,N,N) 

• background-image: url (URL) 

• background-repeat: repeat-x, repeat-y, no-repeat 

• background-position: vertical orizontal 

h2 { color: navy; background-image: url(web-bg.png) } 

body { background-image: 

url(http://www.infoiasi.ro/~busaco/csb-myself2); 

background-repeat: no-repeat; 

background-position: top right; 

} 

13


css | proprietati | text 


 

 

• letter-spacing: numar 

• text-decoration: none, underline, overline, 

line-through, blink 

• vertical-align: top, middle, bottom 

• text-transform: capitalize, uppercase, lowercase 

• text-align: left, center, right, justify 

• text-indent: numar 

• line-height: numar 

a { text-decoration: none; text-transform: uppercase } 

p.aliniat { text-indent: 2cm; line-height: 1.2; text-align: justify } 

14


css | proprietati | clasif. 

clasif 


 

 

• white-space: normal, pre, nowrap 

• list-style-type: disc, circle, square, decimal, 

lower-roman, upper-roman, none, … 

• list-style-image: url (URL) 

• list-style-position: inside, outside 

pre { white-space: pre; margin-left: 10px } 

li { 

list-style-image: url(web-bullet.png); 

list-style-type: disc 

} 

15


css | nivelul 2 


 

 

• Selectorii permit descendenti (first-child) 

• Mecanism complex de selectare a elementelor 

• Dependenta de medii de comunicare 

(@media) – ecran, hirtie, audio,… 

• Stiluri pentru tabele 

• Stiluri aurale 

(volume, speak, pause, cue, azimuth, elevation) 

• Suport pentru alfabete 

• Pozitionare absoluta/relativa a continutului 

(top, left, z-index, position) 

• Suport pentru redare 

(visibility, clip, overflow, width, height) 

16




 

 

• Mecanismul de selectare 

» Aparitii contextuale 

ul li { font-size: 10pt; width: 50% } 

» Descendenti ai altor elemente 

ol > li { background: rgb(127,200,0) } 

» Elemente care urmeaza imediat dupa altele 

h1 + h2 { margin-top: -5mm } 

» Elemente cu atribute avind diverse valori 

a[href=“http://www.infoiasi.ro”] { border: solid thin } 

*[lang=“en”] { display: none } 

» Elemente avind ID setat cu o anumita valoare 

h1#capitolul1 { letter-spacing: 0.3em } 

17



• Medii 

» Tipuri: aural, braille, handheld, print, 

projection, screen, tty, tv 

» Clasificare: 

–continue (continuous) | paginate (paged) 

–vizuale (visual) | sonore (aural) | 

tactile (tactile) 

–interactive | statice 

@media print { body { font-size: 12pt } } 

@media screen 

{ body { font-size: 10pt; background-color: #CCC } } 


 

 

18


instrumente 

• CSS Validator: 

http://jigsaw.w3.org/css-validator/ 

• Extensia Web Developer pentru 


 

 

Firefox: http://addons.mozilla.org/addon/60 

• Extensia Firebug pentru Firefox: 

getfirebug.com 

19


resurse 

• CSS – level 1 (recomandare W3C): 

www.w3.org/TR/REC-CSS1 


 

 

• CSS – level 2, revision 1 (recomandare W3C): 

www.w3.org/TR/REC-CSS21 

• Learning CSS: www.w3.org/Style/CSS/learning 

• CSS Zen Garden: www.csszengarden.com/ 

• CSS/Edge: www.meyerweb.com/eric/css/edge/ 

• Quirks Mode: www.quirksmode.org/ 

20


rezumat 

• Caracteristici generale 



• Resurse 


 

 

21


Intrebari…? 


 

 

22

Tehnologii Web

Create successful ePaper yourself

Delete template?

Save as template?