Una prima precisazione da fare, per poter apprendere bene i concetti che andremo ad esplicare man mano, è che in una pagina web gli elementi sono suddivisi in due macro categorie: elementi di blocco e elementi inline, in linea. Gli elementi di blocco producono interruzioni di linea e generano un box vero e proprie nel quale è contenuto l’elemento, spezzando, diciamo, il flusso normale del documento. Gli elementi inline, invece, seguono il flusso, non producendo interruzione alcuna.
Un’altra distinzione, poi, è quella tra elementi rimpiazzati ed elementi non rimpiazzati. Per i primi, il browser, che, come abbiamo detto, è il programma che interpreta le informazioni che gli diamo per poter visualizzare le pagine web, conosce solo le informazioni intrinseche, cioè le informazioni dell’elemento stesso e non dal box creato dal tag. Un esempio di tale comportamento è dato dal tag <img>. Infatti il browser mette, al posto del tag, l’immagine stessa richiamata dall’attributo src del tag.
Fatte queste premesse, passiamo ora ad addentrarci nella spiegazione di quelli che sono i CSS e di come vengono utilizzati. In questa prima lezione vedremo come includerli in un file .html e quali siano i vantaggi di questa suddivisione tra struttura e stile.
Per prima cosa, avere un unico file .css che racchiude tutti gli stili che andremo ad applicare al nostro sito web è sicuramente un vantaggio. Se pensiamo ad una sola pagina web, è ovvio che il vantaggio si riduce notevolmente fino a non averne affatto (ce ne sono ancora però), ma se pensiamo ad un sito di molte pagine, avere un unico foglio di stile porta ad una gestione del sito molto più snella ed efficace. Dover cambiare un font in 300 pagine con una sola dichiarazione è sicuramente un vantaggio, non trovate??
Vediamo ora come utilizzare un foglio di stile .css: possiamo includere il file .css nelle pagine html, utilizzare stili interni e stili in linea. Vediamo qualche esempio:
Inclusione all'inizio di un documento html:
<head>
<title>Titolo del documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
Stili interni tra i tag <style> </style>:
<head>
<style type="text/css">
body{
background-color:white;
}
</style>
</head>
Stili in linea:
<body style="background-color:white;">
C’è anche un altro metodo, utilizzando la direttiva @import, ma tale funzionalità la analizzeremo più avanti. I metodi appena descritti sono quelli maggiormente utilizzati, andiamoli ad analizzare. Collegare un foglio di stile esterno, con estensione .css, ad una pagina html è alquanto semplice, si utilizza il tag <link> con gli attributi rel impostato a stylesheet, type impostato a text/css e href con il percorso, assoluto o relativo, del file .css da incorporare. Se vogliamo uno stile particolare per una sola pagina, che differisce quindi da quello per tutte le altre del nostro sito, possiamo utilizzare il tag <style>, anch’esso, come il tag <link> posizionato all’interno dei tag di apertura e di chiusura dell’HEAD. Il tag style ha due attributi, type che è obbligatorio e deve essere impostato a “text/css” ed un altro, media, che può essere impostato a vari valori, a seconda del media, del mezzo, che andrà a coinvolgere con le sue direttive. Di default, quindi se non viene scritto esplicitamente, esso è impostato a screen, che è quello maggiormente utilizzato. Altri valori saranno analizzati nelle appendici di questo corso. L’ultimo metodo è quello di utilizzare l’attributo STYLE per i vari tag all’interno della nostra pagina.
Nella prossima lezione analizzeremo la struttura delle direttive di un foglio di stile e come scrivere il nostro primo foglio di stile a cascata. Inoltre cercherò di spiegare meglio l’utilizzo dei vari metodi di impostazione di un foglio di stile appena descritti, non mancate!
No comments yet. You should be kind and add one!