Cosa sono i CSS



Css è l’acronimo di Cascading style sheet(Fogli di stile a cascata).

Il Css è un linguaggio standard del W3C.

Evoluzioni dei CSS:

  • CSS 1: il primo rilascio ufficiale risale al dicembre 1996.
  • CSS2: nel maggio 1998 viene rilasciata la seconda versione che si arricchisce di molte proprietà in più rispetto alla prima versione. L’ultima versione è la level 2 revision 1 (CSS 2.1).
  • CSS3: Futura versione ancora in fase di studio (Working Draft).

A cosa servono i css?

  • A separare Presentazione e Contenuto.
  • Modularizzare aspetti legati alla presentazione, per esempio visualizzazioni per stampa, pc, palmari.
  • Modificare l’aspetto di più pagine con il minimo sforzo

Sintassi dei css

Selettore {Proprietà: Valore;} Esempio: Banner {text-align=center;}

Come assegno un foglio di stile ad una pagina html?

Ci sono 3 modi per associare i fogli di stile:

  • CSS interni
  • CSS in linea
  • CSS esterni

CSS interni

<style type=”text/css”>
h1 {
font-size: 18pt;
text-align: center;
}
</style>
I selettori vanno inseriti all’interno dei tag <style>

e il tag <style> va inseriti all’interno del tag <head>

CSS in linea

<p style=”font-size: 12pt; color:red;”>Prova mondoinformatico</p>

CSS esterni

Tutti i selettori vengono salvati in file di testo a parte con estensione .css, il file css va poi incluso nel file html.

Si presentano due modi di agire:

  • Usare l’elemento <link> all’interno della sezione <head>:
    <link rel=”stylesheet“ href=”nomefile.css” type=”text/css”>
    rel: indica il tipo di relazione (stylesheet o alternate stylesheet per i fogli di stile alternativi).
    href: url del foglio.
    type: il tipo MIME (tipo di dati) del foglio.
  • Usare la direttiva @import (a volte risolve problemi di compatibilità tra browser) :
    <style>@import url(nomefile.css);</style>

L’attributo media per la visualizzazione su diversi dispositivi

Il diffondersi delle tecnologie, ha permesso di poter visitare siti con differenti dispositivi: computer, palmari, smartphone, telefonini, ecc.
Il problema è che la corretta visualizzazione di ogni pagina richiede un foglio di stile personalizzato per ogni dispositivo.
L’attributo media dei tag <link> e <style>, permette di poter impostare un foglio di stile diverso per ogni supporto.
Il seguente esempio imposta, nelle due diverse sintassi, un foglio di stile specifico per i palmari:

<link rel=”stylesheet” type=”text/css” media=“handheld” href=“stile.css” />

<style type=”text/css” media=” handheld “>…</style>

Un elenco dei possibili valori dell’attributo media:

  • all: CSS applicato a tutti i dispositivi di visualizzazione.
  • Screen: normali browser web.
  • Print: stile usato solo in fase di stampa.
  • Aural: usato per i browser a sintesi vocale.
  • Braille: Il CSS viene usato per supporti basati sull’uso del braille.
  • Embossed: stampanti braille.
  • Handheld: Palmari e simili.
  • Projection: Usato per presentazioni e proiezioni a tutto schermo.
  • Tty: Dispositivi a carattere fisso.
  • Tv: Web-tv.
Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest