TUTORIAL: SEMPLICI BASI PER INIZIARE CON I CSS



Si sente più spesso parlare di CSS si parte della formattazione del testo fino alla costruzione di interi.

Per ora analizzeremo un breve esempio che metterà a nudo le regole base di questo codice.

Per prima cosa creiamo un file con il nostro programma preferito, se non ne avete va benissimo anche il notepad o blocco note di windows.

al suo interno scriveremo:

 

H1 {COLOR: #0000FF; background-color: #DDE8E8;}
H2 {COLOR: #800000; FONT-FAMILY: VERDANA; FONT-SIZE: 14px; FONT-WEIGHT: BOLD}
H3 {COLOR: #000080; FONT-FAMILY: VERDANA; FONT-SIZE: 14px; FONT-WEIGHT: BOLD}
H4 {COLOR: #4B4B4B; FONT-FAMILY: VERDANA; FONT-SIZE: 11px; FONT-WEIGHT: NORMAL}
H5 {COLOR: #800000; FONT-FAMILY: VERDANA; FONT-SIZE: 11px; FONT-WEIGHT: NORMAL}
H6 {COLOR: #800000; FONT-FAMILY: VERDANA; FONT-SIZE: 10px; FONT-WEIGHT: NORMAL}
P {COLOR: #4B4B4B; FONT-FAMILY: VERDANA; FONT-SIZE: 10px; FONT-WEIGHT: NORMAL}
a:hover,a:active { background: #FFFF99; }
a {color: #0066FF; text-decoration: none;}
a:hover {color: #FF8000; text-decoration: none;}

 

e salveremo questo file con un nome css.css ora siamo pronti a creare la nostra pagina HTML di prova per prima cosa richiamiamo le regole dei css che abbiamo appena creato il che significa che tra i tag <head> il nostro codice come nell'esempio sotto:

 

<head>

<!-- script CSS -->
<style type="text/css" media="screen">@import "CSS/css.css";</style>

</head>

 

cosa significano le righe che abbiamo scritto per il file css.css?

semplice, se nelle nostre pagine si troverà del testo tra i campi

 

<P> nostro testo </P>

 

questo assumerà come formattazione un colore #4B4B4B, un font verdana, un grandezza di 10 pixel

se il nostro testo sarà racchiuso tra i tag

 

 <H2> nostro testo </H2>

 

otterremo come formattazione un colore #000FF, un font verdana, un grandezza del carattere medio alta ed il carattere sarà in grassetto

vediamo qualche esempio con tutti i tipi utilizzati nel nostro file css.css:

 

<H1> nostro testo </H1>

<H2> nostro testo </H2>

<H3> nostro testo </H3>

<H4> nostro testo </H4>

<H5> nostro testo </H5>
<H6> nostro testo </H6>

<P> nostro testo </P>

 

Come potete vedere il testo contenuto nei tag <H1></H1> ha uno sfondo celestino, questo è dovuto al codice che abbiamo scritto dentro al file css.css

e precisamente alla riga :

H1 {COLOR: #0000FF; FONT-FAMILY: VERDANA; FONT-SIZE: 18px; FONT-WEIGHT: NORMAL; background-color: #DDE8E8;}

ed in particolare nella parte di codice

background-color: #DDE8E8;

 

 

Non è finita qui, infatti osservando il codice del file css.css notiamo che ci sono ancora tre righe che non sono state spiegate, vediamole:

 

a:hover,a:active { background: #FFFF99; }
a {color: #0066FF; text-decoration: none;}
a:hover {color: #FF8000; text-decoration: none;}

 

questo codice serve ad identificare la formattazione che dovranno avere i link nelle nostre pagine web.

la traduzione è questa:

 

a:hover,a:active { background: #FFFF99; }

 

quando passate con il cursore sopra un link questo avrà come sfondo un giallino pallido

 

a {color: #0066FF; text-decoration: none;}

questo è il colore che avrà il link nelle nostre pagine

 

a:hover {color: #FF8000; text-decoration: none;}

questo infine è il colore che avrà il testo del link quando ci passeremo sopra con il cursore

 

per un esempio basta vedere il link sottostante

  

  Torna al menu dei Tutorial

 

 

® Copyright 2005 - 2010 - SITO PERSONALE DI MASSIMILIANO BENVENUTI - C.F. BNVMSM69B07H501Q - Infoline: 333.8597013