Fogli di stile CSS

Cascading Style Sheets, ovvero fogli di stile a cascata. Linguaggio che permette d’informare al browser circa l’aspetto da conferire ai vari tag pr5esenti nel documento HTML.

Nasce nel 1996 con lo scopo di superare le incompatibilità tra i vari browser e separare la struttura di un documento dalla sua formattazione.

Questa guida si occupa di presentare le tecniche base dei CSS, un’altra guida si occuperà di presentare le modifiche e i nuovi tag relativi alla versione CSS3.

I fogli di stile possono essere:

  • interni, significa che il codice è scritto direttamente all’interno del documento HTML, esistono due modi:
    • inline, stile all’interno del tag HTML che si desidera cambiare;
      <p style = “color: #FF0000;”> rosso</p>
    • incorporati, insieme di istruzioni CSS inseriti nella parte head del documento HML, le istruzioni vanno inserite tra i tag <style> e </style>;
      <html>
      <head>
      <title>…….</title>
      <style type = “text/css”>
      p { color: #FF0000; }
      </style>
      </head>
      <body>
      …..
      </body>
      </html>
  • esterni, significa che il codice è scritto in un file con estensione .css separato dal file HTML;
    <html>
    <head>
    <title>…..</title>
    <link rel = “stylesheet” type = “text/css” href = “filestyle.css”>
    </head>
    <body>
    …..
    </body>
    </html>
    • rel, indica la relazione tra il documento HTML ed il file linkato;
    • type, definisce il tipo di file;
    • href, fa riferimento al percorso e nome file CSS;

L’attributo media permette di applicare fogli di stile diversi in base al dispositivo utilizzato dall’utente, i valori sono:

  • all, ogni dispositivo;
  • braille, dispositivi basati sul braille;
  • embossed, stampanti braille;
  • handheld, dispositivi portatili con display piccolo;
  • print, stampanti;
  • projection, presentazioni;
  • screen, schermo del computer;
  • speech, dispositivi di sintesi vocale;
  • tty, terminali;
  • tv, televisori;

Le regole sono l’elemento principale di cui è costituito un foglio di stile:

  • selettore, serve per definire gli elementi a cui applicare un dato stile;
  • { }, all’interno delle parentesi viene specificato il blocco delle dichiarazioni;
    • ogni dichiarazione è composta da proprietà e corrispondente valore separati dai due punti (:);
    • le dichiarazioni chiave/valore vengono separate con un punto e virgola (;);

Ogni linguaggio prevede l’inserimento di commenti che non va interpretato, per indicare l’inizio e la fine del commento si usa /* commento */. I commenti possono essere su più linee.

Please follow and like us:

Lascia un commento