CSS Cascading Style Sheet M.L Alessandroni
Introduzione 1 Il CSS è un linguaggio creato per ottenere un maggior controllo sulla rappresentazione grafica di una pagina HTML
Introduzione 2 I CSS (come vengono chiamati comunemente) permettono di attribuire ai documenti html, formattazioni più raffinate rispetto al semplice html
Introduzione 3 I CSS permettono di costruire il contenuto e successivamente applicarvi uno stile semplicemente variando la pagina dello stile (uso più frequente)
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)
Come lavorare con i CSS Esistono 3 metodi per utilizzare i css: In linea: richiamandoli direttamente nelle pagine come stile dell’elemento usando l’attributo style Incorporati: utilizzare l’elemento <style> nell’head dei nostri documenti HTML Collegati: richiamando una pagina di stili esterna con il tag <link>
CSS in linea: esempi Se, ad esempio, vogliamo che un intero paragrafo sia scritto in rosso e con font arial, possiamo scrivere: <p style=“ font-family:arial; color:red”>Ciao mamma!</p> L’utilizzo dell’attributo style, in un tag , permette di specificare una serie ci caratteristiche del tag stesso. Ad esempio: <h1 style="font-family: Verdana; font-size:100px; color: Green;">ciao mamma!</h1> fa sì che “ciao mamma!” sia visualizzato sul browser in Verdana,con dimensione pari a 100 pixel e colore verde
CSS in linea: sintassi Lo stile viene inserito nel tag di apertura di un qualsiasi elemento HTML, rispettando la seguente sintassi: <TagInizio STYLE= “NomeProprietàSTYLE1 : Valore1; NomeProprietàSTYLE2 : Valore2; …….. NomeProprietàSTYLEN : ValoreN “ > contenutoTag </TagFine>
Situazione problematica Si vuole attribuire il colore rosso e il font arial a 10 differenti elementi <p> 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.
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 <style> all’interno del tag <head> N.B.: gli stili definiti in questo modo, sono validi solo per il documenti in cui sono incorporati.
CSS incorporati: esempio <html> <head> <title>Stili incorporati</title> <style type="text/css"> P { color : red; font-family : Arial, Helvetica, sans-serif; font-size: 70px;} </style> </head> <body> <p>primo P</p> <p>secondo P</p> </body> </html>
CSS incorporati: sintassi La sinatassi per i CSS incorporati è la seguente sintassi: < STYLE TYPE=“text/css”> Selettore { NomeProprietàSTYLE1 : Valore1; NomeProprietàSTYLE2 : Valore2; …….. NomeProprietàSTYLEN : ValoreN;} </STYLE> il selettore indica a quale sezione del documento applicare la regola (o le regole) indicata dal blocco delle dichiarazioni racchiuso tra parentesi graffe.
CSS incorporati: esempio2 <html> <head> <title>link con gli stili</title> <style type="text/css"> 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; text-decoration : underline; color: #FF8C00;} </style> </head> <body> <a href="css_incorporati_es1.htm">esempio 1 </a> </body> </html>
CSS: problematica Ho in un documento html 2 paragrafi <p> 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
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
CSS: le classi <html> <head> <title>Le classi</title> <style type="text/css"> P.par_verde {color : Green;} P.par_rosso {color : red; } </style> </head> <body> <p class="par_verde"> Questo è il paragarfo di classe "verde"</p> <p class="par_rosso"> Questo è il paragarfo di classe "rosso"</p> </body> </html>
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 <A> Se debbo modificare il colore dei link, devo modificarlo in entrambi i documenti
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 <LINK> all’interno del tag <HEAD>
CSS collegati La sintassi è la seguente: <LINK rel=“Stylesheet” href=“include/stili.css” type=“text/css”> Il file “stili.css” si deve trovare nella sottocartella “include”
CSS: le classi <html> <head> <title>Stili collegati</title> <LINK rel=“Stylesheet” href=“include/stili.css” type=“text/css”> </head> <body> <p class="par_verde"> Questo è il paragarfo di classe "verde"</p> <p class="par_rosso"> Questo è il paragarfo di classe "rosso"</p> </body> </html>