PCdaZERO.it

Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

CREARE PAGINE WEB    >     I Fogli Stile - CSS


Scopri e impara di più con i manuali di PC da Zero
Acquista PC da zero Volume 2.
Clicca qui, inserisci i tuoi dati e
in pochi giorni lo riceverai 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>
e all'interno di quest'ultimi tag dichiara lo stile,
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.

Link sponsorizzati