CREARE PAGINE WEB > I Fogli Stile - CSS
I 3 Manualifondamentali per l uso del computer
12% di sconto
Acquista ora a soli 75 euro
Clicca qui, per riceverli
comodamente a casa tua.
Questa lezione non è aggiornata ma è liberamente consultabile.
Se vuoi acedere alle lezioni riguardanti la creazione di pagine web con HTML,
vai al seguente sommario: Creare siti web in HTML e CSS.
Prima di approfondire il linguaggio HTML, passiamo ad un livello superiore.
Voglio farti conoscere i FOGLI STILE o i cosiddetti CSS.
Forse potresti obbiettare:
Ma come, ho appena iniziato a conoscere l'HTML e già mi parli di CSS !
Niente di più semplice !
COS'E' UN FOGLIO STILE - CSS
Un foglio stile è una serie di istruzioni che indicano lo stile che dovranno assumere le tue pagine web.Queste istruzioni possono essere scritte all'interno della pagina web, o su un file esterno.
HAI GIA' FATTO USO DEI CSS !
In verità, nelle lezioni precedenti, hai già fatto uso dei fogli stile (CSS).Colorare lo sfondo ed il testo
Colorare e dimensionare i caratteri
Per indicare lo stile del tag <BODY>, è stata aggiunta la parola "style", con annessi attributi e valori:
<body style="background-color:black;
color:white">Questo, nel suo piccolo, è un foglio stile (cosiddetto, in linea).
Anche per indicare lo stile del tag <P>, è stata aggiunta la parola "style", con i seguenti attributi e valori:
<P style="background-color:silver;
color:red; font-size:20px">Usando il metodo conosciuto nelle lezioni precedenti,
per mantenere lo stesso stile su tutti i paragrafi,
dovresti ripetere le istruzioni ogni volta che inizi un paragrafo.
Come indicato in questo codice d'esempio:
<P style="background-color:silver;
color:red; font-size:20px">
Per correre miglior acque alza le vele<BR>
ormai la navicella del mio ingegno, <BR>
che lascia dietro a sé mar sì crudele;
</P>
<P style="background-color:silver; color:red;
font-size:20px">
e cantero di quel secondo regno<BR>
dove l'umano spirito si purga<BR>
e di salire al ciel diventa degno.
</P>Con questo risultato:
Per
correre miglior acque alza le vele
ormai la navicella del mio ingegno,
che lascia dietro a sé mar sì crudele;
e
cantero di quel secondo regno
dove l'umano spirito si purga
e di salire al ciel diventa degno.
INSERIRE UN FOGLIO STILE INCORPORATO
Oppure, più elegantemente,puoi descrivere lo stile del paragrafo, una solo volta, ad inizio pagina.
Ovvero, puoi inserire un foglio stile incorporato.
Per inserire un foglio stile incorporato.
scrivi all'interno dei tag <head></head>, i tag
<style type="text/css">
</style>ad esempio, in questo modo:
<head>
<style type="text/css">
P { background-color : silver; color:red; font-size:20px }
</style>
</head>
Nota: per digitare le parentesi graffe da tastiera,
tieni premuti insieme i tasti ALTGR + MAIUSC, e clicca sui tasti parentesi quadra (che si trova a destra della lettera P, solitamente).
Quindi un esempio di codice completo con foglio stile incorporato è il seguente:
<html>
<head>
<title>Pagina con foglio stile</title>
<style type="text/css">
P { background-color : silver; color:red; font-size:20px }
</style>
</head>
<body>
<P>
Per correre miglior acque alza le vele<BR>
ormai la navicella del mio ingegno, <BR>
che lascia dietro a sé mar sì crudele;
</P>
<P>
e cantero di quel secondo regno<BR>
dove l'umano spirito si purga<BR>
e di salire al ciel diventa degno.
</P>
</body>
</html>Ed avrà lo stesso risultato:
Per
correre miglior acque alza le vele
ormai la navicella del mio ingegno,
che lascia dietro a sé mar sì crudele;
e
cantero di quel secondo regno
dove l'umano spirito si purga
e di salire al ciel diventa degno.
Ti ricordo che:
l'attributo background-color - indica il colore dello sfondo,
l'attributo color - indica il colore del testo,
l'attributo font-size - indica le dimensioni del testo.
AGGIUNGERE ALTRI STILI
Tra i tag<style></style>,
inoltre,potrai aggiungere lo stile di altri tag.
Ad esempio, puoi descrivere lo stile del tag
<BODY> e del tag
<H3>,come nel seguente codice:
<style type="text/css">
BODY { background-color : black; color: white}
P { background-color: silver; color: red; font-size:20px }
H3 {style="background-color:green; color:yellow}
</style>
L'esempio del codice completo è:
<html>
<head>
<title>Pagina con foglio stile</title>
<style type="text/css">
BODY { background-color : black; color: white}
P { background-color: silver; color: red; font-size:20px }
H3 {style="background-color:green; color:yellow}
</style>
</head>
<body>
Esempio di foglio stile
<H3>Canto I</H3>
<P>
Per correre miglior acque alza le vele<BR>
ormai la navicella del mio ingegno, <BR>
che lascia dietro a sé mar sì crudele;
</P>
<P>
e cantero di quel secondo regno<BR>
dove l'umano spirito si purga<BR>
e di salire al ciel diventa degno.
</P>
</body>
</html>
Con il seguente risultato:
Esempio di
foglio stile
Canto I
Per
correre miglior acque alza le vele
ormai la navicella del mio ingegno,
che lascia dietro a sé mar sì crudele;
e
cantero di quel secondo regno
dove l'umano spirito si purga
e di salire al ciel diventa degno.
PERCHE' USARE UN FOGLIO STILE INCORPORATO
Scrivere (dichiarare) lo stile all'inizio della pagina web, ha il vantaggio di:1 - avere un codice più leggibile (pulito)
2 - rendere l'apertura della stessa pagina, più veloce, perché composta da meno parole - caratteri.
Ma si può fare di più !!
Segui la prossima lezione.