[Guida CSS #3] 4 metodi per inserire i fogli di stile in un documento


[Guida CSS #3] 4 metodi per inserire i fogli di stile in un documento

Passiamo ora a qualcosa di più pratico: come inserire i fogli di stile in un documento. In questo contesto è necessario fare un distinguo sui CSS, possiamo infatti trovare CSS esterni e CSS interni. La distinzione è molto semplice, quando troviamo il codice dei fogli di stile all’ interno dello stesso documento HTML parliamo allora di CSS interni, se invecei fogli di stile sono separati dal documento principale si parla di CSS esterni (in questo caso troviamo il codice in un file con estensione .css).

E’ bene avere chiara questa distinzione, poiché essa ci porterà a capire meglio come interagiscono i fogli di stile con la nostra pagina web. Come da titolo vi sono 4 metodi per inserire i fogli di stile in un documento, vediamoli assieme.

@import

Il primo metodo di cui parliamo è relativamente il più semplice: usare @import. Esso va utilizzato all’ interno dell’ elemento style ed è considerato da molti web designer il metodo più sicuro poiché sono pochi i problemi di compatibilità tra i vari browser a cui si va incontro utilizzandolo. In questo caso parliamo di un foglio di stile esterno, difatti richiameremo il file .css nelle parentesi tonde con un link assoluto o relativo, l’ esempio qui di seguito vi chiarirà le idee.

<style>
@import url (FoglioDiStile.css);
</style>


CSS INCORPORATI


Facciamo ora un esempio di fogli di stile interni. Anch’ essi vanno inseriti nell’ elemento <style> (all’ interno dell’ head della pagina HTML) e, inoltre, all’ elemento style potremo affiancare due attributi: type (obbligatorio) e media (facoltativo), più avanti scoprirete a cosa servono. In questo caso, all’ interno di <style>, inseriremo puro codice CSS, l’ esempio qui di seguito vale più di mille parole.

<html>
<head>
<style type=”text/css”>
body {
background-image: url(sfondo.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body>

</body>
</html>

CSS IN LINEA


Un altro esempio di CSS interni è quello dei fogli di stile in linea, difatti essi si basano su l’ uso di style come attributo, poiché esso può essere usato per tutti gli elementi. Non vi sono particolari regole da seguire in questo caso. L’ uso dei CSS avviene per ogni singolo tag, ecco per esempio come formattare il tag <p>.

<p style=”color: #000000; border: 1px solid;”> … </p>

CSS COLLEGATI

Parliamo ora dei fogli di stile collegati. Sono quelli generalmente più utilizzati e sono un chiaro esempio di CSS esterni. In questo caso agiremo sempre nell’ head della pagina, però con l’ elemento <link>. Esempio a seguire.

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>

</body>
</html>

Come potete vedere, ci sono vari attributi da poter utilizzare con l’ elemento link, tra i quali troviamo anche media e type già citati prima. Vediamo ora a che cosa servono questi attributi:

  • rel: è un attributo obbligatorio. I due valori che potremo inserire sono stylesheetalternate stylesheet (vedremo nelle prossime lezioni come utilizzare i fogli di stile alternativi);
  • href: anch’ esso obbligatorio. Il valore sarà naturalmente l’ URL del file .css del nostro documento;
  • type: attributo obbligatorio. Serve a specificare che tipo di file andiamo a richiamare, l’ unica soluzione in questo caso è text/css;
  • media: nell’ esempio di sopra non l’ ho inserito poiché è facoltativo. Esso va a definire il supporto al quale applicare il nostro foglio di stile (a dispositivi mobili, durante la stampa; etc.). Lo vedremo meglio successivamente.

PIANIFICARE


Se vi state chiedendo quale metodo utilizzare, la risposta è semplice: PIANIFICARE. Pensate prima di sviluppare. Naturalmente il metodo migliore di primo acchito è quello di utilizzare un foglio di stile collegato per formattare gli elementi più importanti della vostra pagina web. Nel caso vorrete poi modificare qualcosa in futuro vi basterà utilizzare un foglio di stile in linea (se la pagina da modificare è una) o @import (se volete modificare più pagine). Insomma, dovete avere un piano ben preciso prima di iniziare lo sviluppo della vostra pagina web.

Naturalmente se usate, per fare un esempio, un CSS collegato per formattare l’ elemento <p> di una pagina e successivamente, nella medesima pagina, modificate ulteriormente lo stesso elemento con un CSS in linea, uno dei 2 fogli di stile prevarrà sull’ altro. Vedremo successivamente le regole per capire come i CSS gestiscono la priorità e altro ancora.

<- Lezione Precedente (La classificazione degli elementi e l’ ereditarietà)
Lezione Successiva (Come utilizzare l’ attributo media)->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *