Sintassi dei CSS e collegamento dei fogli di style ad una pagina web

Pubblicato da progettandopc il

Il CSS in breve

Il CSS è un linguaggio utilizzando durante lo sviluppo di pagine HTML, XML e XHTML. Il suo scopo è quello di definire la formattazione delle pagine.

Argomenti trattati in questo articolo:




come gestire allineamento con i CSS

Supponendo di voler allineare h1 al centro utilizzeremo il seguente codice:

h1{
   text-align: center;
  }

Per l’allineamento a destra e sufficiente utilizzare right al posto di center. Per sinistra utilizzare left.

come gestire font con i CSS

Supponendo di voler i paragrafi <p> con il font arial utilizzeremo il seguente codice:

p{
 font-family: arial;
 }

come gestire dimensione con i CSS

Supponendo di voler i paragrafi <p> con una dimensione di 40 pixel utilizziamo il seguente codice:

p{
 font-size: 40px;
 }

Dove al posto di 40px inseriremo la dimensione desiderata.

come gestire colore con i CSS

Supponendo di voler i titoli in h1 di colore rosso utilizzeremo il seguente codice:

h1{
 color: #ff0000;
 }



struttura

Naturalmente all’interno dei blocchi delle dichiarazioni si possono mettere molteplici proprietà. Vediamo un esempio:

Supponendo di voler allineare h1 al centro ed impostare un colore rosso con il font arial utilizzeremo il seguente codice:

h1{
  font-family: arial;
  color: #ff0000;
  text-align: center;
  }

Prendendo l’esempio superiore

  • h1 è il “selettore”;
  • { apre il blocco delle dichiarazioni
  • } chiude il blocco delle dichiarazioni
  • font-family / color / text-align sono le proprietà
  • arial / #ff0000 / center sono i valori delle rispettive proprietà

commenti

È possibile aggiungere un commento inserendo quest’ultimo dopo il simbolo /* e prima del simbolo /*

Di seguito viene riportato l’esempio:

/* commenti */



Come collegare CSS a pagina web

collegare fogli di style esterni

Se vogliamo collegare una pagina web ad un foglio di stile esterno dobbiamo inserire il seguente codice tra il tag <head> e </head>

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

Dove al posto di style.css verrà scritto il nome della pagina con estensione .css

Con l’utilizzo dell’attributo media è possibile rendere valido il foglio di style soltanto per determinati dispositivi. Naturalmente è possibile inserire più fogli di style, da utilizzare alternativamente al variare del dispositivo utilizzato dall’utente.

Di default il browser imposta questo valore su all ovvero il CSS vale per tutti i dispositivi.

Se vogliamo integrare un CSS che vale solo per smartphone utilizzeremo il seguente codice:

<link rel="stylesheet" media="handheld" href="style.css">

L’attributo media può assumere i seguenti valori:

  • all > ogni dispositivo
  • braille > per dispositivi basata su braille
  • embossed > stampanti braille
  • screen > schermo computer
  • projection > presentazioni
  • print > stampante
  • speech > dispositivi sintesi vocali
  • handheld > dispositivi mobili e dispositivi con schermo di ridotte dimensioni
  • tty > terminali a carattere fisso
  • tv > visualizzazione per televisori

DIRETTIVA @import

Per collegare CSS esterni possiamo utilizzare anche la direttiva @import utilizzando il seguente codice:

<head>
<style>
@import url(foglio-di-style.css);
</style>
</head>

Dove al posto di foglio-di.style.css verrà scritto il nome della pagina con estensione .css

fogli di style incorporati

I fogli di style incorporati nella pagina vanno inseriti tra il tag <head></head> e del tag <style></style>

<head>
<style type="text/css">
h1{
  font-family: arial;
  color: #ff0000;
  text-align: center;
  }
</style>
</head>

Posso collegare più fogli di style alle stessa pagina?

Assolutamente sì, puoi collegare molteplici fogli di style, sebbene ti invito a tenere a mente che per caricare i fogli di stile viene fatta una richiesta http per ogni singolo elemento. Di conseguenza, per limitare le richieste http (e velocizzare il caricamento del sito) è preferibile utilizzare un unico foglio di style invece di utilizzarne molteplici. Con questo non stiamo dicendo di utilizzare sempre un unico foglio di style ma di non eccedere con numerosi fogli di style, utilizzando quelli strettamente necessari.