INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti.

Presentazione sul tema: "INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti."— Transcript della presentazione:

1

2 INFORMAZIONE E PRESENTAZIONE Lo scopo di una pagina web è, essenzialmente la trasmissione di una informazione. L’informazione è costituita da due aspetti essenziali: –I contenuti –La formattazione dei contenuti I contenuti sono forniti attraverso linguaggi di marcatura (html) La formattazione/visual è determinata dall’interpretazione da parte del browser degli stili (CSS) PRIMA PARTE: INTRODUZIONE

3 I FOGLI DI STILE A CASCATA (CSS) Compito dei CSS (Cascading Style Sheets: Fogli di Stile a Cascata) è separare i contenuti dal visual. I CSS non definiscono direttamente l’aspetto del documento ma stabiliscono il modo in cui il browser rappresenta i vari oggetti definiti dal linguaggio di marcatura utilizzato. PRIMA PARTE: INTRODUZIONE

4 UN DIVERSO APPROCCIO è necessario organizzare i contenuti in modo logico, raggrupparli e, se necessario, identificarli in modo univoco o associarli a classi specifiche (vedi meccanismo dei div con id) Per rendere i contenuti meglio fruibili con qualsiasi dispositivo, è bene organizzarli in modo che siano letti nell’ordine ideale (solitamente con flusso dall’alto al basso) PRIMA PARTE: XHTML

5 STRUTTURA DI UN FOGLIO DI STILE Un foglio di stile è un documento che raccoglie un insieme di regole di rappresentazione dei contenuti della pagina a cui il foglio è associato Di seguito è rappresentata la struttura di una regola: PRIMA PARTE: STRUTTURA DI UN FOGLIO DI STILE h1 { font-size : 2em; font-weight : bold; } DICHIARAZIONE PROPRIETÀ SELETTORE VALORE REGOLA

6 La sintassi di base dei CSS selettore{ proprietà: valore; } Diciamo che vogliamo ad esempio un colore rosso come sfondo della pagina web: con i CSS si ottiene così: body { background-color: #FF0000; }

7 Attraverso i selettori vengono associate le regole agli elementi del documento HTML (o XML). Selettore fa match con gli elementi E BODY { font-family: Arial; font- size: 12 pt; } H1 { font-size: 18 pt; } P { font-size: 10 pt; }

8

9 Tutti i selettori e proprietà http://www.w3schools.com/css/css_examples.a sp

10 I SELETTORI I selettori indicano al browser a quali elementi della pagina si dovranno applicare le dichiarazioni della regola I selettori possono essere essenzialmente di tre tipi: PRIMA PARTE: I SELETTORI h1, h2, p {... } #identificatore {... }.classe {... } 1: TAG XHTML 3: IDENTIFICATORI 2: CLASSI

11 TIPI DI SELETTORI I selettori più generici sono i selettori di tipo (o di tag) i quali specificano che la regola deve essere applicata a tutti gli elementi del tipo indicato. Ad esempio, sono selettori di tipo: p {…} a {…} div {…} strong {…} * {…} PRIMA PARTE: I SELETTORI

12 LE CLASSI Le ‘classi’ servono a caratterizzare un insieme di oggetti omogenei. Per associare un oggetto ad una classe è sufficiente specificarne il nome attraverso l’attributo class : Titolo Testo … Titolo Testo … Il selettore si indica riportando il valore assegnato all’attributo class, preceduto da un punto ‘. ’.notizia {…} È possibile combinare fra loro più classi: ….classe1.classe2 {…} Il selettore può anche specificare a quale elemento la classe deve essere associata: p.classe {…} h1.classe {…} PRIMA PARTE: I SELETTORI

13 IDENTIFICATORI Gli ‘identificatori’ selezionano invece un oggetto unico all’interno della pagina. L’associazione avviene tramite l’attributo id : Titolo Testo... ATTENZIONE: è errato associare lo stesso identificatore a due o più oggetti nella stessa pagina. Il selettore si indica riportando il valore assegnato all’attributo id, preceduto dal simbolo cancelletto ‘ # ’ #testata {…} Il selettore può anche specificare a quale elemento l’identificatore deve essere associato: p#testata {…} h1#testata {…} Classi e identificatori possono essere usati contemporaneamente: #idval.classval {…} PRIMA PARTE: I SELETTORI

14 COLLEGARE I CSS A UN DOCUMENTO XHTML Esistono diversi modi di collegare un foglio di stile ad un documento XHTML –Fogli di stile incorporati –Fogli di stile esterni –Fogli di stile importati –Attributo style : La priorità della regola è massima, indipendentemente dal peso dei selettori Questo metodo è sconsigliabile PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

15 FOGLI DI STILE INCORPORATI Si specificano gli stili direttamente nel codice XHTML attraverso il tag da inserire nel tag : /*<![CDATA[*/ … /*]]>*/ Le stringhe /* */ servono a rispettare le regole dell’XML Questo metodo è adatto per pagine singole in cui è necessario specificare stili particolari PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

16 FOGLI DI STILE ESTERNI I fogli di stile esterni sono richiamati attraverso il tag da inserire nel tag : Attraverso il tag è possibile associare diversi fogli di stile contemporaneamente PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

17 FOGLI DI STILE IMPORTATI Attraverso la regola @import è possibile includere un foglio di stile esterno all’interno di un insieme di regole Se presenti, le regole @import devono essere inserite prima delle normali regole per gli stili: @import "file1.css"; @import "file2.css"; body {…} Il percorso si riferisce alla medesima cartella in cui è contenuto il foglio di stile contenente le regole @import Le regole @import possono comparire anche negli stili incorporati PRIMA PARTE: COLLEGARE I CSS A UN DOCUMENTO XHTML

18 Noi useremo sempre i figli di stile esterni associati direttamente alle pagine XHMTL

19 LUNGHEZZE Unità di misura relative (stadard di fatto, le piu usate) – em : pari alla dimensione dei caratteri – ex : pari alla dimensione del carattere ‘x’ (rara) – px : pixel, la loro dimensione dipende dallo schermo PRIMA PARTE: I VALORI

20 COLORI Nomi predefiniti: black, green, navy Valori RGB – #rrggbb (r,g,b = { 0 ÷ F }) – #rgb (r,g,b = { 0 ÷ F }) corrisponde a #rrggbb – rgb(r,g,b) (r,g,b = { 0 ÷ 255 }) – rgb(r%,g%,b%) (r,g,b = { 0.0 ÷ 100.0 }) Per esempio, i valori aqua, #00FFFF, #0FF, rgb(0,255,255) e rgb(0,100%,100%) si riferiscono tutti al medesimo colore verde acqua. PRIMA PARTE: I VALORI

21 COLORE IN PRIMO PIANO (TESTO E BORDI) Il colore del testo e dei bordi è definito tramite la proprietà color Il valore predefinito è quello ereditato dal testo del blocco padre Se non diversamente specificato, il colore per (o meglio ancora ) è quello assegnato per il testo dalle impostazioni del sistema operativo o del browser, e non è necessariamente nero

22 SFONDI Lo sfondo può essere –Trasparente –Caratterizzato da una tinta piatta –Riempito del tutto o in parte da una immagine Lo sfondo può essere gestito attraverso le seguenti proprietà: – background-color – background-image – background-repeat – background-position – background-attachment – background (riassume le diverse proprietà) PRIMA PARTE: COLORI E SFONDI

23 COLORE DELLO SFONDO La proprietà background-color può assumere i seguenti valori: – transparent – Il valore predefinito è transparent A differenza di color, il valore per la proprietà background-color non è ereditato Se non diversamente specificato, lo sfondo della pagina è stabilito dalle impostazioni del sistema operativo o del browser e non è necessariamente bianco PRIMA PARTE: COLORI E SFONDI

24 BACKGROUND-IMAGE Per inserire un’immagine di sfondo è sufficiente specificarne l’ url tramite la proprietà background-image : background- image:url(/im/sfondo.png); L’immagine sarà posizionata in alto a destra e sarà ripetuta verticalmente e orizzontalmente L’immagine scorrerà assieme al testo Per specificare che non dovrà essere usata nessuna immagine si utilizza il valore none (che è il valore predefinito): background-image:none; PRIMA PARTE: COLORI E SFONDI

25 BACKGROUND-REPEAT Tramite background-repeat è possibile stabilire se e come l’immagine sarà ripetuta background-repeat:repeat indica che l’immagine sarà ripetuta orizzontalmente e verticalmente (valore predefinito) background-repeat:repeat-x indica che l’immagine sarà ripetuta solo orizzontalmente background-repeat:repeat-y indica che l’immagine sarà ripetuta solo verticalmente background-repeat:no-repeat indica che comparirà una sola occorrenza dell’immagine PRIMA PARTE: COLORI E SFONDI

26 BACKGROUND-ATTACHEMENT Tramite background-attachment è possibile stabilire se l’immagine di sfondo sarà fissa ovvero scorrerà con la pagina background-attachment:scroll indica che l’immagine scorrerà assieme alla pagina (valore predefinito) background-attachment:fixed indica che l’immagine sarà fissata nella sua posizione iniziale indipendentemente dallo scorrimento della pagina (il funzionamento è garantito solo con ) PRIMA PARTE: COLORI E SFONDI

27 BACKGROUND-POSITION Tramite background-position è possibile stabilire la posizione iniziale dell’immagine. I valori ammessi sono: –Unità di lunghezza –Unità percentuali –Parole chiave: left | center | right per il posizionamento orizzontale top | center | bottom per il posizionamento verticale I valori vanno espressi in coppia e indicano rispettivamente il posizionamento orizzontale e verticale PRIMA PARTE: COLORI E SFONDI

28 BACKGROUND-POSITION Quando sono usate le unità di lunghezza, l’angolo superiore sinistro dell’immagine è posizionato relativamente all’angolo superiore sinistro dell’area del padding Quando sono utilizzate le unità percentuali si ha il seguente comportamento: –Sia X% il valore percentuale per la posizione orizzontale –Sia Y% il valore percentuale per la posizione verticale –Il punto dell’immagine che si trova alle coordinate X%, Y% sarà posto in posizione X%, Y% dell’area del padding PRIMA PARTE: COLORI E SFONDI

29 BACKGROUND La proprietà background permette di definire con un’unica dichiarazione tutte le varie proprietà contemporaneamente Se non sono specificati alcuni valori, allora vengono implicitamente assegnati quelli predefiniti: body { background: #fff url(img.jpg) 100% 0 no-repeat fixed; } PRIMA PARTE: COLORI E SFONDI