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:
1. In linea: richiamandoli direttamente
nelle pagine come stile dell’elemento
usando l’attributo style
2. Incorporati: utilizzare l’elemento
<style> nell’head dei nostri documenti
HTML
3. 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;
font-size : 12pt;
font-weight : bold;
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>
Scarica
