[Pillola] Collegare i Css al codice

gio84

[Pillola] Collegare i Css al codice

Per incorporare i fogli di stile al codice ci sono sostanzialmente tre metodi: i fogli di stile incorporati direttamente nella pagina e i fogli di stile esterni che si dividono in link e import.

I fogli di stile incorporati cioé all'interno della pagina sono a mio parere più scomodi e meno utilizzati, poiché volevndo modificare lo stile bisogna mettere mano a ciascuna pagina e il lavoro diventa molto lungo, mentre usando quelli esterni basta modificare il solo file .css, consiglio quindi di usare quelli esterni.

Quelli incorporati vanno richiamati nell'head della vostra pagina web in questo modo

<style type="text/css" media"all">
body &#123;
background-color:yellow
&#125;
</style>

I fogli di stile esterni con elemento link sono i fogli di stile che vengono incorporati nella maniera che io ritengo più "furba".
Praticamente scriviamo il nostro foglio di stile con il blocco note anche solo, lo salviamo con estensione .css e lo mettiamo nel server.
Poi andiamo nella pagina e richiamiamo il file nell'head della nostra pagina nel seguente modo:

<link rel="stylesheet" href="fogliodistile.css" type="text/css" />

href rappresenta l'indirizzo del nostro foglio di stile css e fogliodistile.ccs é ovviamente il nome del file.

Per motivi di posizionamento si consiglia inolter di nominare il foglio di stile con una keyword che vogliamo "spingere" maggiormente.

Usando il terzo metodo e cioé la direttiva @import, che fa parte dei css. Questo comando va quindi messo direttamente nel nostro foglio di stile, che esso sia incorporato, esterno con modalità link o modalità import.
Ad esempio in un foglio di stile incorporato anziché faremo come nel primo caso usando la modalità import scriveremo quindi:

<head>
<title>Titolo</title>
<style type="text/css">
@import url&#40;fogliodistile.css&#41;;
body &#123;
background-color&#58;yellow
&#125;
</style>
</head>

Per comodità invito comunque ad usare i fogli di stile esterni e inserirli nell'head del documento con la direttiva link, come abbiamo visto nel secondo caso.