La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

CSS Cascading Style Sheet M.L Alessandroni. Introduzione 1  Il CSS è un linguaggio creato per ottenere un maggior controllo sulla rappresentazione grafica.

Presentazioni simili


Presentazione sul tema: "CSS Cascading Style Sheet M.L Alessandroni. Introduzione 1  Il CSS è un linguaggio creato per ottenere un maggior controllo sulla rappresentazione grafica."— Transcript della presentazione:

1 CSS Cascading Style Sheet M.L Alessandroni

2 Introduzione 1  Il CSS è un linguaggio creato per ottenere un maggior controllo sulla rappresentazione grafica di una pagina HTML

3 Introduzione 2  I CSS (come vengono chiamati comunemente) permettono di attribuire ai documenti html, formattazioni più raffinate rispetto al semplice html

4 Introduzione 3  I CSS permettono di costruire il contenuto e successivamente applicarvi uno stile semplicemente variando la pagina dello stile (uso più frequente)

5 Vantaggi dei CSS  Permettono di separare la struttura e il contenuto della pagina html dalla sua rappresentazione (visualizzazione)  Permettono di avere un maggiore controllo sulla rappresentazione della pagina e sulla omogeneità visiva di pagine differenti di uno stesso sito  Permettono di associare uno stile per ogni dispositivo che richieda la pagina (ad esempio per browser differenti)

6 Come lavorare con i CSS  Esistono 3 metodi per utilizzare i css: 1.In linea: richiamandoli direttamente nelle pagine come stile dell’elemento usando l’attributo style 2.Incorporati: utilizzare l’elemento nell’head dei nostri documenti HTML 3.Collegati: richiamando una pagina di stili esterna con il tag 3.Collegati: richiamando una pagina di stili esterna con il tag

7 CSS in linea: esempi   Se, ad esempio, vogliamo che un intero paragrafo sia scritto in rosso e con font arial, possiamo scrivere: Ciao mamma!  L’utilizzo dell’attributo style, in un tag, permette di specificare una serie ci caratteristiche del tag stesso. Ad esempio: ciao mamma! fa sì che “ciao mamma!” sia visualizzato sul browser in Verdana,con dimensione pari a 100 pixel e colore verde

8 CSS in linea: sintassi   Lo stile viene inserito nel tag di apertura di un qualsiasi elemento HTML, rispettando la seguente sintassi: contenutoTag

9 Situazione problematica  Si vuole attribuire il colore rosso e il font arial a 10 differenti elementi di una stesso documento  Con i css in linea si deve modificare lo stile di tutti e 10 i paragrafi  Questo metodo è corretto, ma non risponde al caratteristica principale dei css, che è quella di centralizzare la formattazione di un documento.

10 CSS incorporati  I CSS incorporati permettono di ovviare al problema esposto sopra.  In questo caso la struttura di ogni stile viene definita utilizzando il tag all’interno del tag  In questo caso la struttura di ogni stile viene definita utilizzando il tag all’interno del tag  N.B.: gli stili definiti in questo modo, sono validi solo per il documenti in cui sono incorporati.

11 CSS incorporati: esempio esempio Stili incorporati Stili incorporati P {color : red; font-family : Arial, Helvetica, sans-serif; font-size: 70px;} primo P primo P secondo P secondo P

12 CSS incorporati: sintassi   La sinatassi per i CSS incorporati è la seguente sintassi: Selettore { NomeProprietàSTYLE1 : Valore1; NomeProprietàSTYLE2 : Valore2; …….. NomeProprietàSTYLEN : ValoreN;}   il selettore indica a quale sezione del documento applicare la regola (o le regole) indicata dal blocco delle dichiarazioni racchiuso tra parentesi graffe.

13 CSS incorporati: esempio2 esempio2 link con gli stili link con gli stili A {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12pt; font-weight : bold; text-decoration : none; color : #66CDAA; } A:HOVER {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; A:HOVER {font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; font-size : 12pt; font-weight : bold; text-decoration : underline; color: #FF8C00;} esempio 1 esempio 1

14 CSS: problematica  Ho in un documento html 2 paragrafi e voglio dare una formattazione differente a ciascuno con i CSS incorporati  Non posso utilizzare come selettore P  Debbo utilizzare come selettore un identificativo differente

15 CSS: selettori  Un selettore può essere:  Un elemento previsto dal linguaggio html (ad es. A, P, TD,….)  Un gruppo di elementi identificati da una specifica classe, definita dall’utente attraverso l’attributo CLASS  Un elemento definito univocamente da uno specifico identificatore, attraverso l’attributo ID

16 CSS: le classi le classile classi Le classi Le classi P.par_verde {color : Green;} P.par_rosso {color : red;} Questo è il paragarfo di classe "verde" Questo è il paragarfo di classe "verde" Questo è il paragarfo di classe "rosso" Questo è il paragarfo di classe "rosso"

17 CSS: problematica  Ho due documenti html e voglio dare una la stessa formattazione ai link presenti  Con i CSS incorporati devo inserire in entrambi i documenti gli stessi stili per il tag  Con i CSS incorporati devo inserire in entrambi i documenti gli stessi stili per il tag  Se debbo modificare il colore dei link, devo modificarlo in entrambi i documenti

18 CSS: collegati  L’utilizzo dei CSS collegati permette di centralizzare la gestione degli stili di un intero sito.  Il foglio di stile viene creato e salvato come file separato, con estensione.css  Il foglio di stile viene collegato utilizzando il tag all’interno del tag  Il foglio di stile viene collegato utilizzando il tag all’interno del tag

19 CSS collegati  La sintassi è la seguente:    Il file “stili.css” si deve trovare nella sottocartella “include”

20 CSS: le classi le classile classi Stili collegati Stili collegati Questo è il paragarfo di classe "verde" Questo è il paragarfo di classe "verde" Questo è il paragarfo di classe "rosso" Questo è il paragarfo di classe "rosso"


Scaricare ppt "CSS Cascading Style Sheet M.L Alessandroni. Introduzione 1  Il CSS è un linguaggio creato per ottenere un maggior controllo sulla rappresentazione grafica."

Presentazioni simili


Annunci Google