docI CSS - I fogli di stile
download 
Reclamo Transcript
I CSS - I fogli di stile
I CSS - I fogli di stile
Scritto da Administrator
I FOGLI DI STILE CSS (CASCADING STYLE SHEETS)
Gli stili rappresentano un metodo per definire come il browser debba visualizzare i tag HTML. Il
loro vantaggio è che possono essere utilizzati a differenti livelli: si possono inserire tutti gli stili in
un file separato aumentando la facilità e la velocità di modifica degli stessi su più pagine,
oppure si possono inserire gli stili in cima a una singola pagina, applicandoli solo ad essa;
oppure si possono includere gli stili all'interno dei tag stessi tramite l'attributo style.
Creare gli stili per la pagina: il tag <style> deve essere incluso fra i tag <head> e </head>.
L'attributo
type
indica il tipo MIME per il foglio di stile:
text/css
è l'unico valore che si utilizzerà. Il corpo del foglio di stile consiste in una serie di direttive che
seguono una precisa struttura:
selettore { proprietà: valore; proprietà: valore; ... }
Ciascuna regola consiste in un selettore seguito da un elenco di proprietà e valori associati ad
esse, racchiuse tra parentesi graffe e senza limite di numero, separate l'una dall'altra da un
punto e virgola. I selettori possono coincidere con i normali tag HTML come <h1>, <p>, <div>,
...
Creare fogli di stile per un intero sito: è possibile registrare tutte le informazioni di stile in un file
e applicarle a più file contemporaneamente. Un file CSS è praticamente solo il corpo di un tag <
style>
separato dal resto della struttura HTML di una normale pagina e salvato con estensione
.css
. Una volta creato il file con il foglio di stile, lo si può inserire in una pagina utilizzando il tag
<link>
:
<link rel="stylesheet" href="URL del file di stile.css" type="text/css" />
L'attributo type è lo stesso del tag <type>, l'attributo href è lo stesso del tag <a>. E' possibile
inserire i collegamenti a più di un foglio di stile in una pagina.
I SELETTORI
- tag HTML: un tipo di selettori è rappresentato dai tag HTML. Le regole per quel selettore
verranno applicate a tutte le istanze di quel tag nella pagina o nelle pagine.
tag { proprietà: valore; proprietà: valore; ... }
E' possibile applicare a più selettori le stesse proprietà.
tag, tag { proprietà: valore; proprietà: valore; ... }
- selettori contestuali: vengono usati per applicare gli stili agli elementi solo quando questi
sono nidificati all'interno di altri elementi specificati:
1/5
I CSS - I fogli di stile
Scritto da Administrator
tag_contenitore tag { proprietà: valore; proprietà: valore; ... }
In caso di conflitti, gli sti li nidificati sovrascrivono gli stili generali.
- classi e identificatori: a volte la selezione per tag non è molto specifica ma è necessario
creare una propria classificazione da utilizzare con i CSS. Ci sono due attributi supportati da
tutti i tag HTML: "class" e "id".
L'attributo class serve ad assegnare gli elementi a interi gruppi di tag, mentre l'attributo id è
utile per assegnare un identificativo a singoli elementi specifici. La sintassi di una regola è:
.nome classe { proprietà: valore; proprietà: valore; ... }
Se si vuole riservare una formattazione solo a un tag della classe specificata, è possibile
includere il nome dell'elemento HTML oltre quello della classe:
tag.nome classe { proprietà: valore; proprietà: valore; ... }
Per applicare una classe ad un tag nella pagina:
<tag class="nome classe"> testo o altri tag </tag>
Se si desidera applicare gli stili solo ad un elemento in un foglio di stile è bene assegnargli un id
:
<tag id="nome id"> testo o altri tag </tag>
Le regole CSS da applicare ad un elemento vanno scritte facendo riferimento al suo id:
#nome id { proprietà: valore; proprietà: valore; ... }
E' possibile mescolare diversi tipi di selettori, così come è possibile nidificarli.
UNITA' DI MISURA
Esistono 4 tipi di misure specificabili nei CSS: unità di lunghezza, unità percentuali, unità di col
ore
e
URL
. Esistono due tipi di unità di lunghezza: assolute (corrispondono a unità di misura del mondo
reale) e relative (basate su unità di misura più arbitrarie, solitamente più utilizzate; fra queste
rientra anche l'unità "pixel"). Le unità percentuali devono essere utilizzate in considerazione del
fatto che bisogna specificare il contesto affinché possano essere calcolate (nel senso: la
percentuale di cosa?). Gli URL si specificano così: url(URL del file).
PROPRIETA' DEI RIQUADRI DI TESTO
Prima di procedere con le proprietà dei riquadri di testo, è bene soffermarsi sugli attributi che
definiscono gli stili (interni o esterni) del testo:
-
text-decoration: underline, overline, line.trough, blink, none;
font-style: normal, italic, oblique;
font-weight: normal, bold, bolder, lighter, 100-900;
font-family: nome o nomi di carattere;
font-variant: normal, small-caps;
text-align: left, right, center, justify;
font-size: valore numerico con relativa unità di misura;
line-height: normal, valore con relativa unità di misura.
2/5
I CSS - I fogli di stile
Scritto da Administrator
Queste proprietà possono essere inserite all'interno dei tag come <div> o <span> oppure come
coppia di proprietà-valore nei fogli di stile. Esistono altre proprietà per il testo.
Per i riquadri di testo esistono altre proprietà, utilizzate per posizionare gli elementi, controllare
lo spazio bianco attorno ad essi e applicare loro effetti grafici. Per lavorare sui riquadri di testo è
possibile utilizzare il tag <div> perché non modifica assolutamente l'aspetto delle pagine, ma è
solo un contenitore al quale si può applicare uno stile.
- Le dimensioni: la dimensione di un riquadro viene controllata da due proprietà: width e hei
ght
in termini assoluti o relativi alla finestra del browser.
- I bordi: con i CSS è possibile applicare i bordi a qualsiasi elemento. La sintassi delle
proprietà del bordo sono le seguenti:
border: width style color;
Quando si usa la proprietà border da sola, ad essa possono essere associate tre variabili.
- width è l'ampiezza della linea che disegna il bordo e che può assumere come valori un
numero con la sua unità di misura o valori predefiniti (thin, medium, thick.
- style assume i seguenti valori: none (nessuno stile), dottet (a punti), dashed (tratteggiato),
solid (solido), double (doppio), groove (scalanatura), ridge (cresta), inset (incavato), outset (in
rilievo).
- color identifica il colore del bordo.
Esistono molte altre proprietà. E' possibile impostare individualmente lo stile di ciascun lato
utilizzando: border-top, border-right, border-bottom, border-left.
border-top: thin double black;
- I margini: la proprietà margin controlla lo spazio bianco tra il bordo e il blocco che lo
include.
.nome classe { margin: 10 px; }
- La spaziatura: la proprietà padding controlla lo spazio bianco attorno al bordo.
.nome classe { padding: 10 px; }
3/5
I CSS - I fogli di stile
Scritto da Administrator
- Il posizionamento: per avere pieno controllo sugli elementi è necessario selezionare prima
uno schema di posizionamento con al proprietà
position. Esistono 4
schemi di posizionamento:
static
,
relative
,
absolute
e
fixed
.
- static: è lo schema predefinito, in virtù del quale gli elementi vengono posizionati da
sinistra verso destra e dall'alto verso il basso. Il valore static (statico) è il valore di default e
sarebbe uguale alla posizione dell’elemento nell’esempio del flusso normale. L’elemento
’statico’ non può essere mosso della sua posizione.
- relative: permette di posizionare l’elemento in base al suo div ‘contenitore’.
Contrariamente alla posizione assoluta, le dichiarazioni top, bottom, left e right non
rappresentano punti fissi di posizionamento ma sono basate sulla posizione naturale
dell’elemento, indicandone lo spostamento.
- absolute: permette di rimuovere l’elemento dello flusso normale della pagina per potere
posizionarlo tramite le dichiarazioni top, bottom, left e right in unità di misura. L’elemento
assoluto è posizionato in rapporto al suo div ‘contenitore’ solo se lui stesso ha la sua proprietà
position impostato con un valore altro che ’static’.
- fixed: Come per la posizione assoluta, il valore fixed (fisso) permette di rimuovere
l’elemento del flusso normale della pagina per potere posizionarlo con le dichiarazione top,
bottom, left e right. La differenza tra di loro è che l’elemento fisso si posiziona sempre in base a
l’elemento HTML (l’area visiva della finestra del browser) e mai ad un suo eventuale elemento
‘contenitore’. Essendo fisso, questo elemento rimanerà sempre alla sua posizione anche se il
resto della pagina è scorrevole.
Un elemento ‘fixed’ può essere riposizionato usando top, bottom, left, right (come per
‘absolute’) ricordandosi che sarà sempre in relazione alla finestra browser.
Una volta scelto lo schema di posizionamento, è possibile impostare la posizione degli
elementi. Ci sono 4 proprietà per il posizionamento: top, left, bottom, right. Assumono valori
4/5
I CSS - I fogli di stile
Scritto da Administrator
corrispondenti alla distanza tra il lato indicato e il lato del blocco che li racchiude.
.nome classe { position: relative; left: 50 px; top: 50 px; }
PROPRIETA' DELLE TABELLE
Le proprietà delle tabelle possono essere gestite dai tag <table>, <tr> e <td>. Una volta
individuata la classe o il tag, è possibile applicare gli attributi per il
padding
,
border
,
background-color
,
text-align
,
margin
,
border
,
border-left
,
border-top
,
border-righ
t,
border-bottom
, ecc.
PROPRIETA' DI BODY
E' possibile applicare qualsiasi stile ad una pagina applicandolo al tag <body>. Per sostituire le
informazioni generali finora applicate con l'HTML è possibile usare il seguente listato come
esempio:
body { font-family: nome font; color: colore; background-color: colore; margin: valore
px; background-image: url (URL del file immagine); background-position: posizione
dell'immagine di fondo; background-attachment: scroll o fixed; background-repeat:
repeat-x o repeat-y o repeat o no-repeat; ... }
PROPRIETA' DEI LINK
Per i collegamenti è possibile impostare diverse proprietà grazie ai CSS per diversi tipi di link.
a: link { color: colore; }
a: activate { color: colore; }
a: visited { color: colore; }
a: hover { color: colore; }
E' possibile specificarte una classe per i vari link:
a.nome classe: link { color: colore; }
All'interno delle proprietà per i font è possibile inserire anche le proprietà normalmente usate
per il testo normale (come font-weight, text-decoration) o per altri tag (background-color).
5/5
