|
CSS - Formalizziamo
[I1]
[I2]
[I3]
[E1]
[E2]
[E3]
[E4]
[E5]
[F1]
[F2]
[F3]
[F4]
[ES1]
[ES2]
[ES3]
[ES4]
Un foglio di stile e' un documento di testo di estensione .css. Puo' essere scritto con un semplice editor di testo, analogamente a quanto avviene per i file html.
Esso contiene un insieme di regole, ciascuna delle quali presenta la seguente sintassi:
selettore {proprieta'1:valore; proprita'2:valore;proprieta'N:valore}
Un selettore puo' essere:
- un elemento del linguaggio HTML
- un sottoinsieme di elementi con uguale attributo class.
In questo caso il selettore diventa il nome del tag seguito da . e dal nome della classe, come nel nostro esempio dove p.ingredienti rappresenta un selettore di tipo paragrafo e classe ingredienti.
- un singolo elemento identificato attraverso l'aggiunta al tag di un attributo id di valore specifico (Non abbiamo visto questo caso nel nostro esempio, ma comparira' a breve con la trattazione del layout)
Vediamo alcuni elementi suddivisi per area di azione.
1- Colore
Attraverso il foglio di stile si puo' modificare il colore del testo, dei bordi, dello sfondo di un elemento.
I colori possono essere specificati in modi diversi:
- i 16 colori della VGA standard di Windows sono identificati da una parola chiave:
black, navy, blue, maroon, purple, green, red, teal, fuchsia, olive, gray, lime, aqua, silver, yellow, white
- le restanti sfumature si indicano attraverso il codice esadecimale preceduto dal simbolo "#":
#RRGGBB
Nella notazione esadecimale le prime due lettere o numeri corrispondono ai valori per il colore rosso (RED), la seconda coppia fa riferimento al verde (GREEN), l'ultima al blue (BLUE
La definizione del colore puo' essere associata a molti elementi diversi (paragrafo p, titoli hn, pagina intera body, etc...).
La sintassi, applicata ad un paragrafo come esempio, e' la seguente:
p {color: black; background-color: white;}
dove color imposta il colore di primo piano (il testo), mentre background-color stabilisce il colore dello sfondo (background).
2- Sfondo
Ad ogni elemento puo' essere associata la descrizione di uno sfondo. Le proprieta' specificabili, con la relativa funzione, sono le seguenti:
- background-color. Specifica il colore di sfondo, utilizzando uno dei formati di cui si e' accennato nella sezione relativa alla gestione del colore.
- background-image . Definisce un'immagine da usare come sfondo. L'immagine puo' essere memorizzata insieme agli altri file che compongono l'ipertesto. In questo caso si specifichera' nome e perscorso. Oppure puo' trovarsi in un altro punto della rete, richiedendo l'indicazione della sua URL.
Vediamo due esempi di uso, applicati alla pagina intera:
body {background-image: url(img/sfondo.gif); }
body {background-image: url(http://www.nomeServer.it/img/sfondo.jpg); }
- background-repeat.L'immagine usata come sfondo puo' essere utilizzata in modo singolo, oppure ripetuta per occupare tutto lo spazio disponibile. Esempi di uso:
body { background-image: url(sfondo.gif); background-repeat: repeat; }
I valori che la proprieta' puo' assumere sono: repeat, per ripetere in entrambe le direzioni, repeat-x, per ripetere solo in direzione orizzontale, repeat-y, per ripetere solo in direzione verticale, oppure no-repeat, per non ripetere.
- background-attachment . L'immagine di sfondo puo' scorrere insieme al testo, se questo non e' contenuto completamente nello spazio del monitor, oppure rimanere fermo. Questa proprieta' distingue i due casi.
Si usa in questo modo:
body { background-image: url(back_400.gif);
background-repeat: repeat-x;
background-attachment: fixed; }
I valori che puo' assumenre sono: fixed, per avere l'immagine fissa e scroll, per avere l'immagine che si muove insieme al testo.
- background-position .Indica il punto all'interno della pagina in cui va collocata l'immagine. Questa posizione puo' essere specificata in modo assoluto, indicando la distanza in pixel dell'immagine dalla'ngolo in alto a sinistra dello schermo (background-position: 50px 50px;, oppure usando parole chiave (center, top (allinea in alto), bottom(allinea in basso), left (allinea a sinistra), right ) (allinea a destra))
3- Testo
Consente di impostare lo stile, la dimensione, la caratteristiche (normale, grassetto, sottolineato), l'interlinea, ossia la distanza tra due righe di testo, ecc.
Le proprieta' sono:
- font-family. Specifica un elenco di tipi di caratteri alternativi: il browser tentera' di usare il primo della lista. Solo se sul sistema questo font non e' disponibile procedera' tentando si utilizzare il secondo, e cosi' via.
- font-size. Indica la dimensione del carattere da utilizzare.
Questa dimensione puo' essere espressa in modo assoluto, indicando il numero di pixel, oppure in modo relativo (si rimanda a testi piu' approfonditi per la modalita' relativa).
- font-weight. Specifica il "peso visivo" del carattere, ossia il suo livello di grassetto. I valori specificati possono essere espressi in forma numerica (100 - 200 - 300 - 400 - 500 - 600 - 700 - 800 - 900) dove a valori inferiori corrisponde peso minore, oppure attraverso parole chiave (normal, bold, bolder, lighter)
- font-style. Imposta il testo in base ad uno di questi tre valori:normal,italic,oblique.
Oblique ha un risultato estetico molto simile a italic, il corsivo.
- line-height. Imposta la distanza di interlinea.
Il valore puo' essere espresso in modo assoluto, specificando valore numerico e unita' di misura (es: 15px), oppure in modo relativo al testo. Con questa seconda modalita', indicando 1.2, 1.3, 1.5 si realizza un'interlinea rispettivamente di 1.2,oppure 1.3 o 1.5 volte la dimensione del font. E' possibile anche esprimere in percentuale la relazione tra l'interlinea e la dimensione del font: indicando 50% si ottiene uno spazio tra le righe pari alla meta' della dimensione dei caratteri.
- Text-align.Imposta l'allineamento del testo. I valori che puo' assumere sono:left - Allinea il testo a sinistra, right - Allinea il testo a destra , center - Centra il testo, justify - Giustifica il testo.
- Text-decoration. Imposta decorazioni al testo. I valori che puo' assumere sono:none, underline - per avere testo sottolineato, overline - il testo avrà una linea superiore , line-through - il testo sarà attraversato da una linea orizzontale al centro
, blink - testo lampeggiante .
Vediamo un esempio dove sono utilizzate le proprieta' descritte:
p {font-family: arial, "Times New Roman", Verdana, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: italic;
line-height: 1.5;
text-align: center;
text-decoration: underline;
}
4- Dimensioni
E' possibile specificare la dimensione (altezza height e larghezza - width) per diversi elementi html, come le immagini, le sezioni di un layout (vedere lezione successiva), le celle di una tabella, ecc.
Il valore puo' essere impostato in modo assoluto, indicando numero e unita' di misura.Veidiamo un esempio, applicato ad una classe di immagini indicata come "galleriaFotografica":
img.galleriaFotografica?{width=300px;}
In questo modo a prescindere dalle dimensioni con cui le immagini sono state salvate, esse compariranno tutte con una larghezza pari a 300 pixel.
La dimensione puo' essere indicata anche in modo percentuale: per esempio indicando 50% si otterra' una dimensione dell'oggetto pari alla meta' rispetto alle dimensioni originarie.
5- Margini
Il margine serve per impostare la distanza tra un elemento e gli elementi adiacenti.
E' possibile impostare una distanza uguale per tutti e 4 i lati, oppure specificare un valore differente per ciascun lato.
Le parole chiave utilizzate sono: margin, margin-top (in alto), margin-right, margin-bottom (in basso), margin-left.
I valori assumibili possono essere assoluti, quindi nella forma numero- unita' di misura, oppure percentuali.
Esempio:
div {
margin-top: 10px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 20px; }
6- Bordi
I fogli di stile ci consentono di aggiungere un bordo ad un elemento, specificandone lo stile, la dimensione e il colore. Possiamo impostare i bordi tutti insieme, oppure specificarne le caratteristiche uno ad uno.
Le proprieta' sono:
- Stile. E' possibile stabilire lo stile di tutti e quattro i bordi, oppure di ciascun bordo separatamente utilizzando le seguenti parole chiave:
border-style, border-top-style, border-bottom-style, border-left-style, border-right-style.
Lo stile di un bordo può essere espresso con una delle seguenti parole chiave:
none, se l'elemento non presenta alcun bordo, dotted, se il bordo e' una sequenza di punti discontinui, dashed, se il bordo e' una sequenza di trattini discontinui, solid, se e' una linea continua, double. , se e' una linea doppia, groove , se ha effetto tridimensionale, ridge , se e' rialzato con effetto tridimensionale, inset e outset per avere effetti simili al tridimensionale.
- Spessore. Analogamente a quanto appena descritto per lo stile, usiamo le seguenti parole chiave per specificare la dimensione della larghezza di un bordo: border-width, border-top-width, border-bottom-width, border-left-width, border-right-width.
La dimensione puo' essere espressa con un valore numerico seguito da unita' di misura, oppure con una delle seguenti parole chiave: thin, per avere un bordo sottile, medium, o thick, per avere spessore maggiore.
- Colore. Parole chiave per specificare il colore: border-color, border-top-color, border-bottom-color, border-left-color, border-right-color.
Il colore si indica come spiegato nella sezione dedicata la colore specificando la parola chiave oppure il codice esadecimale.
Esempio di impostazione di un bordo applicato ad un paragrafo:
p {
border-top-color: black;
border-bottom-color: black;
border-left-color: red;
border-right-color: red;
border-style: solid;
border-width: 1px;
}
7/8
|
