Limitiamoci ai concetti fondamentali, tralasciando la gran quantità di regole particolari e complesse che ne governano il comportamento. L'uso di un software tipo DREAMWEAVER di ADOBE ci può aiutare per molte di queste regole.
PANORAMICA SULLE FUNZIONI DEI CSS
I fogli di stile della pagina HTML comprendono informazioni sia per la pagina in sé che per gli elementi che in essa sono contenuti. Un foglio di stile puo essere scritto direttamente tra i TAG <head> ..... </head> oppure collegato alla pagina. con il codice che segue, inserendo il collegamento tra <head> e </head>
<link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />
Il che tradotto significa che il link è relativo a un foglio di stile rel="sylesheet' con un file di tipo testo che contiene un CSS type="text/css" che risiede nella sottodirectory CSS - della dir dove si trova la pagina HTML e si chiama stilenuovo.css.(nome di comodo)
Come si scrivono i comandi di un CSS
nome_elemento { comando_1 ; comando_2; .......... comando_n }
Il nome dell'elemento è quello un TAG HTML che si vuole formattare, il nome di una CLASSE che poi viene richiamata dentro un TAG, il nome di una DIV o altro. Vedrete in dettaglio alcuni dei contenuti possibili al paragrafo 'Sintassi'
Proprietà riguardanti il lay-out del BODY (corpo della pagina)width : auto (Larghezza automatica)
height :auto (Altezza automatica)
min-width::0 (Larghezza miinima)
max-width:0 (Larghezza massima)
min-height::0 (Altezza miinima)
max-heigth:0 (Altezza massima)
| margin:0 (Margini. possono essere fissati uno per uno left - top - right - bottom ) |
||||
top: 0 px
|
Dopo aver fissato i margini (qui evidenziati in colore grigio chiaro, mettiamo una 'imbottitura' i colore più scuro
| padding: n (Imbottitura. possono essere fissati singolarmente left - top - right - bottom ) | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
fissiamo la posizione - position - della finestra, che avrà a disposizione lo spazio dal quale si sono tolti i margini e l'imbottiturache vedete con lo sfondo più scuro
| position: static (posizione statica del body per definizione) | ||||||||||||||||||||||||||
|
||||||||||||||||||||||||||
| sx | dx | nessuna | |
| Float (appoggia) | # left | right # | none |
| Clear (pulisci) | left | right | none | both |
| overflow-x | visible | sovradimensione x e y | ||
| overflow-y | visible | visibile | ||
| Visibility | visible | Visibilità= visibile | ||
| z-index | auto | Ordine | ||
| opacity | 1 | Opacità | ||
Proprietà riguardanti le righe del testocolor: COLORE preso dalla tavolozza dei colori
font-family: tip di carattere. Es 'Arial, Cambria, Times new roman'
font-style: ES: normal,italic,oblique
font-variant: ES: normal, small-caps
font-weight: Es. 'bold(grassetto). normal
font-size: grandezza del carattere
line:height: altezza della riga
text-align: ES normal, justify, left, right
text-decoration: ES: none (nessuna), underline
text-indent: Rientro del testo in px
text-shadow (ombreggiatura)
h-shadow: ombra orizzontale in px
v-shadow: ombra verticale in px
blur: sfocatura dell'ombra in px
color: COLORE preso dalla tavolozza dei colori
Ci sono anche comandi per impostare ombreggiatura del testo, distanziare le lettere, e altro I comandi sono molti e complessi, per cui raccomando di usare un editor che abbia una funzione di CSS Designer che permette di fissare la singola caratteristica e vedere praticamente l'effetto del comando.
È dunque preferibile usare editors come Frontpage della Microsoft o meglio Dreamweaver di Adobe.
Proprietà riguardanti i BORDI di una cella o di una DIV o di una tabella
border-color: COLORE preso dalla tavolozza dei colori
border-top-color: colore del bordo superiore
border-right-color: colore del bordo destro
border-bottom-color: colore del bordo inferiore
border-left-color: colore del bordo sinistro
border-width: LARGHEZZA del bordo
border-top-width: larghezza del bordo superiore
border-right-width: larghezza del bordo destro
border-bottom-width: larghezza del bordo inferiore
border-left-width: larghezza del bordo sinistro
border-radius: RAGGIO del bordo
border-top-left-radius: in alto a sinistra
border-top-right-radius: in alto a destra
border-bottom-right-radius:in basso a destra
border-bottom-left-radius: in basso a sinistra
border-style: STILE del bordo (
border-top-style: colore del bordo superiore
border-right-style: colore del bordo destro
border-bottom-style: colore del bordo inferiore
border-left-style: colore del bordo sinistro
Lo stile da assegnare al bordo può essere:
dotted a puntini
dashed a linee
solid intero
double doppio
groove incassato
ridge emergente
inset interno
outset esterno
Proprietà riguardanti i COLLEGAMENTI ipertestuali
Esempio proprietà collegamento si scrive a:link e contiene colore del testo e decorazione (sottolineatura, etc)
a:link { color: #000066; text-decoration: none; }
Esempio proprietà del collegamento già VISITATO si scrive a:visited e contiene colore del testo e decorazione (sottolineatura, etc)
a:visited { text-decoration: none; color: #006600; }
Esempio proprietà del collegamento al PASSAGGIO DEL MOUSE si scrive a:hover e contiene colore del testo e decorazione (sottolineatura, etc)
a:hover { text-decoration: none; color: #006600; }
Esempio proprietà del collegamento attivo si scrive a:active e contiene colore del testo e decorazione (sottolineatura, etc)
a:active { text-decoration: none; color: #000000; }
LA SINTASSI : come scrivere un file CSS
Non conviene scrivere lo stile di una pagina direttamente tra i TAGd <head> ... </head> a meno chje la pagina si una sola volta nel sito. Di solito è meglio scrivere un CSS in un file a parte e collegarlo con il codice che segue, inserendo il collegamento tra <head> ..... </head>della pagina HTML
< link href="css/stilenuovo.css" rel="stylesheet" type="text/css" />
Facciamo un nuovo file con il nostro editor. Alla prima riga scriveremo
@charset "utf-8";
/* CSS riguardante la pagina base dei sito*/
dove nella seconda riga metteremo l'informazione sul foglio di stile tra i simboli /* .......*/ in modo che questo testo non venga elaborato dall'interprete.
Il file CSS può modificare gli elementi di una pagina XHTML ovvero gli elementi che è possibile inserire in una data pagina XHTML tra i TAG <body> ....</body>.
a) Una CLASSE Per esempio prendiamo una classe che chiameremo 'giustifica' per cui scriveremo questo nome preceduto da un punto - appunto per indicare che si tratta di una classe e apriamo una parentesi graffa '{'.
Dopo la parentesi graffa mettiamo la sequenza delle istruzioni e alla fine chiudiamo la parentesi graffa '}": La classe può essere richiamata dentro un TAG, il nome di una DIV o altro, come vedremo di seguito.
.giustifica {
font-family: Arial;
font-size: medium;
text-align: justify;
}
/* CSS riguardante la pagina base dei sito*/
la stessa cosa si può anche scrivere in modo piu visibile su più righe. La sintassi di ogni istruzione è
comando: contenuto ;
.giustifica { |
.nome della classe { il tipo di carattere : Arial; grandezza sel carattere: medium; allineamento del testo: justify ; } |
b) un ELEMENTO identificato con un nome. Mentre la classe si può attribuire a qualunque alemento, in questo caso la formattazione riguarda solo l'elemento con quel nome. Per esempio prendiamo un elemento che chiameremo 'corpo' preceduto da un cancelletto, e apriamo una parentesi graffa '{'. Dopo la parentesi graffa mettiamo la sequenza delle istruzioni e chiudiamo la parentesi graffa '}":
#corpo { |
#nome dell'elemento { |
Queste sono le caratteristiche più comuni. Ma gli elementi possono essere modificati con molto altro: si possono inserire bordi arrotondati, immagini o colori di sfondo anche sfumati, e tanto altro. Per questo suggerisco di usare un editor specializzato che aiuti elencando tutti i comandi possibili che potrete scegliere in base alle vostre esigenze. Comperate e installate DREAMWEAVER di ADOBE, CHE PER ME È IL MIGLIORE E IL PIÙ FACILE DA USARE.
NOTA 1:GLI STILI IMPOSTATI CON IL CSS SI POSSONO MODIFICARE ALL'OCCORRENZA IN OGNI SINGOLA LINEA. PER ESEMPIO
TAG <p> .......</p) si scriverà <p style=" elemento: valore; elemento 1: valore1; ........ elemento n : valore n; " ricordandosi di mettere i due punti e il punto e virgola di chiusura. OPPURE, con un'altra classe chw inseriremo nel CSS della pagina possiamo scrivere anche
<p class="nome della nuova classe"> .......</p
Il comando si applica a tutto ciò che sta al posto dei puntini di cui sopra. Potete sbizzarirvi e provare a modificare i tag come volete, perché quasi tutti I TAG possono essere cambiati uno per uno in questo modo come abbiamo detto per il precedente, per esempio:
- <span> ..... </span>
- <td> ...<td>
- <table> .... <table>
- <body>.....</body>
- <div> .... </div>
- <ul> ..... </ul>
etc etc
NOTA 2: POTETE FARE UN FILE CSS CHE CONTENGA TUTTI GLI ELEMENTI DI DIVERSE PAGINE, E COLLEGARLO A TUTTE ANCHE SE LA PAGINE NON SONO UGUALI PERCHÉ non contengono tutti gli elementi del file CSS. Con riferimento alla DIV 'corpo' di cui sopra, evidentemente tale <DIV id="corpo> .......</DIV> deve essere presente nella pagina.