Introduzione ai CSS
Cascading Style Sheet
(Fogli di Stile in Cascata)
Cascading Style Sheet
I CSS rappresentano lo standard W3C per la presentazione visiva delle pagine
web.
Realizzare un sito usando i CSS può portare grandi benefici sotto molti punti di
vista quali ad esempio:
• Riduzione dei tempi di realizzazione:
• Facilità nell’apportare modifiche di stile;
• Facilità nella navigazione da parte di utenti svantaggiati;
• Velocità di caricamento delle pagine;
Aggiunta di stili a pagine HTML
E’ possibile applicare stili ai documenti in tre modi diversi:
• Stili inline;
• Fogli di stile incorporati;
• Fogli di stile esterni;
Stili inline
In HTML, le informazioni di stile dei singoli elementi possono
essere specificate mediante l’attributo style come nel seguente
esempio:
<p style=“color: red, background: yellow;”>
Attenzione la presentazione di questo testo è
allarmante!
</p>
senza Stile
Prova
con Stile
Questa tecnica è sconsigliata a causa del fatto che
incoraggia un livello scadente nella stesura del codice
Fogli di Stile incorporati
E’ possibile incorporare un foglio di stile all’inizio di un documento HTML
mediante il Tag Style, che deve comparire all’interno del tag Head, come
nel seguente esempio:
<html>
<head>
<title>foglio stile incorporato</title>
<style type=“text/css”>
h1 {color:purple;}
p {font-size:smaller; color:gray;}
</style>
</head>
………
……..
</html>
senza il Tag Style
Prova
Con il Tag Style
Fogli di stile esterni
Gli stili possono essere specificati in un file.
Il vantaggio principale di questo approccio è che la raccolta in un unico file di
tutti i fogli stile di uso comune permette di aggiornare tutte le pagine che fanno
riferimento ad esso con una sola operazione.
Un altro vantaggio importante è che i fogli di stile esterni vengono memorizzati
nella cache, e ciò può ridurre la richiesta di banda.
Un foglio stile esterno può essere richiamato in due modi:
• con la Direttiva @import
• con il Tag Link
Fogli di stile esterni
<head>
<title>Pagina HTML </title>
<style type=“text/css”>
@import url(prova.css);
</style>
</head>
prova.css
body {
font:10pt/14pt Verdana;
}
prova
<head>
<title> Pagina HTML </title>
<link rel=“stylesheet” type=“text/css” href=“prova.css” media=“all”>
</head>
prova
Struttura di un foglio stile
Un foglio di stile è composto da una o più regole che descrivono la
presentazione degli elementi della pagina, e ogni regola ha due parti
fondamentali: il selettore e il blocco di dichiarazione.
dichiarazione
h1
{
Color: red;
proprietà
valore
dichiarazione
background: yellow
proprietà
valore
}
Struttura di una regola
All’inizio della regola si trova il selettore, che seleziona le parti del
documento a cui deve essere applicata la regola. Alla fine si trova il blocco
di dichiarazione, costituito da una o più dichiarazioni, ciascuna delle quali è
una combinazione di una proprietà CSS e del rispettivo valore.
Il blocco di dichiarazione è sempre tra parentesi graffe { }, e può contenere
più dichiarazioni: ogni dichiarazione deve essere conclusa da un punto e
virgola (;). L’unica eccezione è l’ultima dichiarazione del blocco, il cui punto
e virgola è facoltativo.
Ogni proprietà, che rappresenta un particolare parametro stilistico, è
separata dal suo valore da due punti (:).
I nomi delle proprietà nei CSS non sono sensibili alle maiuscole.
I valori ammissibili per una proprietà sono definiti dalla descrizione della
proprietà stessa.
h1
{
Color: red;
background: yellow
}
Una home page tradizionale
Dal vero
Un restayling… all’essenziale
Dal vero
e ora realizziamo il foglio stile !
body {
font: 10pt/14pt Arial;
}
div#container {
padding: 10 px;
Qui stiamo dicendo al browser che tutto il
testo compreso nel tag <body> sarà reso
con un font “Arial” di dimensione tipografica
di 10 punti , altezza della linea di 14 punti.
Qui stiamo dicendo al browser che tutto il
div container sarà separato da 10 pixel
rispetto al suo contenitore.
}
div#banner {
background-color: #0033CC;
color: white;
padding: 10px;
text-align: center;
}
Qui stiamo dicendo al browser che per
quanto riguarda il div banner esso avrà uno
sfondo blu, le scritte in bianco allineate al
centro e sarà separato dal suo contenitore
di 10 pixel
ancora un po’ di fatica…..
div#menu {
background-color: #FFE6BF;
border: 1px solid #8B96B9;
text-align: center;
}
div#menu li {
display: inline;
margin-right: 10 px;
Qui definiamo le proprietà del div menu
specificando l’allineamento centrale lo
spessore dei bordi, il colore di background;
Le proprietà degli elenchi puntati;
Le proprietà del div news tra cui i margini, la
posizione e la dichiarazione che il testo possa
scorrere sotto il riquadro del contenitore
stesso;
}
div #news {
background-color: #FFFFCC;
float: left;
margin: 18px 10px 0px 0px;
padding: 10px;
border: 1px solid #8B96B9;
}
e salviamo il tutto in un file
denominato “miostile.css”
colleghiamo il tutto alla pagina html
Acme1.htm
<html>
<head>
<title> Acme Inc.</title>
<link rel=“stylesheet” href=“miostile.css” type=“text/css”>
</head>
………
………
proviamo
Scarica
