📁
Forum per Webmaster
CSS

Inserimento CSS

Come utilizzare i CSS in una pagie html



In questa prima parte incominceremo a vedere un po’ di codice, in modo particolare vedremo in che modo inserire i css in una pagina web.
Incominciamo con il dire che vi sono ben quattro modi differenti per utilizzare i css:

  1. Direttamente nella pagina usando l’attributo style dei tag html.
  2. Tramite l’inserimento dello style ponendo il tag nell’head della pagina xhtml
  3. Richiamando un file CSS esterno attraverso l’elemento link posto nell’head della pagina
  4. Tramite la direttiva @import in style

Tutti e quattro i metodi sopra elencati, permettono di impostare lo stile grafico della pagina anche se con alcune diversità. Gli ultimi due metodi evidenziano il vantaggio nell’adoperare i fogli di stili esterni, ciò rappresenta la soluzione più pratica: Nel caso in cui si volesse modificare il look ad una pagina sarà sufficiente variare il foglio di stile. E’ altresì possibile utilizzare il medesimo foglio di stile per più pagine o addirittura per l’intero sito web, uniformandone ovunque gli aspetti che determinano l’impronta visiva.
Il comportamento della direttiva @import esclude persino alcuni obsoleti browser che non hanno implementato correttamente i css.

I metodi che permettono di definire lo stile all’interno della pagina html/xhtml possono venire utili per provare al volo alcune prove, tuttavia se ne sconsiglia l’utilizzo se non in casi particolari che sarete voi a valutare.
Altro punto fondamentale che accenniamo è l’ereditarietà e la priorità dei precetti impostate dai css: Se si danno due stesse regole al medesimo elemento, magari una nel foglio di stile esterno e l’altra nell’elemento style il motore di rendering della pagina interpreterà quello con maggior priorità.
In questo caso la regola inserita in style andrà a rimpiazzare quella del file css esterno. Non c’è da preoccuparsi dato che questo argomento sarà esplicato in seguito.

Torniamo ora all’argomento principale di questa voce e vediamo in dal lato pratico come inserire i nostri stili.

Inserimento diretto nella pagina usando l’attributo style dei tag html

L’uso in tal caso è facile e intuitivo.
Si supponga di voler colorare di rosso un determinato paragrafo. Con questo metodo sarà sufficiente dichiaralo direttamente nel tag p:

<p style="color:red">testo colorato di rosso< /p>

Semplice no?

Tramite l’inserimento dello style ponendo il tag nell’head della pagina xhtml

Questo metodo consiste nell’inserire le proprietà direttamente nell’head anziché fare ricorso ad un file esterno:

<html>
 <head>
  <style type='text/css' media='all'>
    p {color:red;}
  </style>
 </head>
 <body>
   <p> testo colorato di rosso</p>
 </body>
</html>

Il tag style può avere due attributi:
type: obbligatorio, che serve a specificare il tipo; Di fatto sarà sempre e comunque text/css
media: si usa per specificare a quale dispositivo applicare le regole del foglio di stile (vedremo questo aspetto in seguito).

Richiamando un file CSS esterno attraverso l’elemento link posto nell’head della pagina

<link rel='stylesheet' type='text/css' href='css.css' media='all'>

Gli attributi previsti da questo metodo sono quattro:
type e media con non cambiano rispetto all’implementazione vista precedentemente, mentre in aggiunta troviamo href il quale specifica il percorso del foglio di stile (parametro obbligatorio) e rel che stabilisce la relazione tra il foglio di stile ed il documento html e può assumere solamentge due valori: stylesheet e alternate stylesheet.

Tramite la direttiva @import in style

Tale implementazione permette di indicare il percorso in cui si trova il foglio di stile entro parentesi tonde nell’elemento style nella seguente forma

<style>@import url(http://miosito.ext/css.css);</style>

Nell’articolo che segue potrete trovare un maggiore approfondimento per questo tipo di implementazione.
Visto come inserire i css nelle nelle pagine, in seguito mostreremo in che modo utilizzare i css nel pieno della loro potenza! Prima però sarà opportuno dare un’occhiata alla classificazione degli elementi di un documento.

Argomenti nella stessa categoria