CURS Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Universitatea Tehnică din Cluj-Napoca
Facultatea de Inginerie Electrică
CURS Master
Tehnologii moderne de proiectare
a aplicatiilor multimedia
2
Curs: TEHNOLOGII MODERNE DE PROIECTARE A APLICATIILOR MULTIMEDIA
CAP.5. LIMBAJUL CSS
CUPRINS
5.1. Introducere
5.2. Exemple utilizare CSS
5.3. Sintaxa CSS
5.4. Selectori CSS
5.5. Formatari in CSS
1
3
5.1. Introducere
CSS (Cascading Style Sheets) : limbaj care descrie stilul

documentelor HTML
Scop utilizare CSS:

 Personalizare website prin creare de layout personalizat
pentru afisarea pe dispozitive diferite (monitoare,
dispozitive mobile).
 stabilire automata a culorii, marimii si fonturilor pentru text,
link-uri , tabele, etc.
4
5.2. Exemple utilizare CSS: Stylesheet 1
2
5
6
3
7
8
5.2. Exemple utilizare CSS: NoStylesheet
4
9
5.3. Sintaxa CSS
Selector: pot fi elemente HTML – nume element , id, class,

attribute,etc.
Selectori CSS: nume
Exemplu: nume element = p (paragraf)
10
Exemplu : selector CSS nume
5
11
5.4. Selectori CSS: id (#)
12
Selectori CSS: class (.)
6
13
Gruparea selectorilor CSS
14
Utilizare CSS in site-uri web

Modalitati de utilizare CSS:
a) Fisier extern: permite schimbarea layout-ului unui intreg
site prin modificarea fisierului extern
b) Stil intern: permite schimbarea layout-ului unei singure
pagini dintr-un site web
c) Inline: permite schimbarea atributului pentru un singur
element
Ordinea de preluare a stilurilor CSS: pentru elemente care au
specificate mai multe stiluri simultan (extern, intern , inline):
 Inline :pentru un element HTML
 fisier extern si /sau stiluri interne In sectiunea <head>
 conform setarilor Browser-ului
7
15
a) Fisier extern CSS

Se introduce in fiecare pagina web a site-ului, in sectiunea
<head> un tag <link> cu referinta la numele fisierului CSS extern:
Fisierul mystyle.css ar putea include :
16
Exemplu : fisier extern CSS
Pagina sursa si pagina web afisata:
8
17
b) Stil intern CSS

Se utilizeaza pentru a stabili layout-ul unei singure pagini web care
este diferita de celelalte din intregul site. Se defineste prin <style>
in sectiunea <head> a paginii HTML:
18
c)Inline CSS
Se utilizeaza pentru a aplica un atribut unui singur element HTML:
9
19
5.5 Formatari in CSS

Culori in CSS
Se pot specifica in 3 moduri:
 Nume valid de culoare – Ex. "red"
 O valoare RGB – Ex. "rgb(255, 0, 0)"
 O valoare hexa – Ex. "#ff0000"
20
5.5 Formatari in CSS

Background in CSS
10
21
Borders in CSS
22
Inaltimea si latimea obiectelor in CSS
b)
a)
a) Are lungimea fixa in timp ce b) se ajusteaza pe ecrane diferite (mobile)
11
23
24
12
25
Modelul Box in CSS: div
26
Modelul Box in CSS
13
27
Formatare text in CSS

Culoare text
28
Formatare text in CSS

Aliniere text. Decorare text (subliniere, etc)
14
29
Formatare text in CSS - Alte atribute
30
Fonturi in CSS
Familii de fonturi
Stiluri de fonturi
15
31
Fonturi in CSS
Dimensiune fonturi. Grosime Fonturi
32
Fonturi in CSS
Uppercase, lowercase, capitalize
16
33
Fonturi in CSS
Test-indent
34
Link-uri in CSS
17
35
Link-uri nesubliniate in CSS
36
Liste in CSS
 Liste neordonate (<ul>) – cu bullets
 Liste ordonate (<ol>) – cu cifre sau litere
18
37
Liste formatate in CSS
38
Tabele in CSS
Linii tabel: se definesc cu tagul <tr>
Header tabel: se defineste cu <th> tag. Implicit, header =bold,center.
Celula tabel: se defineste cu <td>
19
39
Tabele in CSS: alte atribute
40
Link-uri pe box in CSS
20
41
Imagini opace in CSS
42
Box transparent cu text pe background imagine
21
43
Meniuri in CSS
44
Meniuri in CSS
22
45
Tooltip in CSS
46
Galerie imagini in CSS
23
47
Butoane in CSS
48
Chenar din imagini pentru text in CSS
24
49
Background gradient in CSS
50
Umbra text in CSS
25
51
5.3. Instrumente editare si validare CSS
Editoare:
 TopStyle Lite/Professional
 Notepad , Notepad++
Validatoare:
 W3C CSS Validator: http://jigsaw.w3.org/css-validator/
 Firebug – Plug-ing pentru Firefox
52
5.3. Instrumente editare si validare HTML,CSS
Validatoare:
26
53
Exemplu utilizare CSS- visual

http://www.saleie.co.uk/SSSH/index.php
27

CURS Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Încărcat de

Informații document

Titlu original

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

CURS Master: Tehnologii Moderne de Proiectare A Aplicatiilor Multimedia

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Tehnică din Cluj-Napoca

Facultatea de Inginerie Electrică

CAP.5. LIMBAJUL CSS

5.2. Exemple utilizare CSS

5.3. Sintaxa CSS

5.4. Selectori CSS

5.5. Formatari in CSS

CSS (Cascading Style Sheets) : limbaj care descrie stilul

Scop utilizare CSS:

5.2. Exemple utilizare CSS: Stylesheet 1

5.2. Exemple utilizare CSS: Stylesheet 2

5.2. Exemple utilizare CSS: Stylesheet 3

5.2. Exemple utilizare CSS: Stylesheet 4

5.2. Exemple utilizare CSS: NoStylesheet

5.3. Sintaxa CSS

Selector: pot fi elemente HTML – nume element , id, class,

Exemplu : selector CSS nume

5.4. Selectori CSS: id (#)

Selectori CSS: class (.)

Gruparea selectorilor CSS

Utilizare CSS in site-uri web

a) Fisier extern CSS

Fisierul mystyle.css ar putea include :

Exemplu : fisier extern CSS

Pagina sursa si pagina web afisata:

b) Stil intern CSS

Se utilizeaza pentru a aplica un atribut unui singur element HTML:

5.5 Formatari in CSS

5.5 Formatari in CSS

Inaltimea si latimea obiectelor in CSS

a) Are lungimea fixa in timp ce b) se ajusteaza pe ecrane diferite (mobile)

Inaltimea si latimea obiectelor in CSS

Inaltimea si latimea obiectelor in CSS

Modelul Box in CSS: div

Modelul Box in CSS

Formatare text in CSS

Formatare text in CSS

Formatare text in CSS - Alte atribute

Link-uri nesubliniate in CSS

 Liste neordonate (<ul>) – cu bullets

 Liste ordonate (<ol>) – cu cifre sau litere

Liste formatate in CSS

Tabele in CSS: alte atribute

Link-uri pe box in CSS

Imagini opace in CSS

Box transparent cu text pe background imagine

Galerie imagini in CSS

Chenar din imagini pentru text in CSS

Background gradient in CSS

Umbra text in CSS

5.3. Instrumente editare si validare CSS

5.3. Instrumente editare si validare HTML,CSS

Exemplu utilizare CSS- visual

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