Main | Definire un sito locale in Dreamweaver »

Lo standard CSS 2.0

CSS è la sigla per Cascading Style Sheet. Gli stili, normalmente raggrupati in un foglio di stile servono per modificare l'aspetto degli elementi HTML. In uno stesso stylesheet possono risiedere molti stili.
È possibile definire le informazioni relative agli stili in molti modi diversi: nell'elemento
<style></style>
posizionato all'interno di head, in ogni singolo tag della pagina, oppure in un file esterno con estensione css. Di seguito alcune specifiche sui fogli di stile esterni.

Specifiche CSS 2.0 file esterno (.css)

  1. SINTASSI: La sintassi dei CSS è composta di tre parti: un selector, una proprietà e un valore. La forma sintattica è la seguente:
    selector {property: value}
    Il selector è il nome che viene dato all'insieme delle proprietà e può anche essere il nome di un tag HTML che si desidera ridefinire; la proprietà è l'attributo che si desidera cambiare e il valore è il valore che si desidera dare all'attributo. La proprietà e il valore sono separati dai due punti ed entrambi chiusi tra parentesi graffe.
  2. Uno stesso selector può avere più proprietà assegnate: per questo motivo dopo ogni valore assegnato si mette un punto e virgola:
    selector {property: value; property: value}
    I selector semplici sono tag HTML e non necessitano di essere applicati nella pagina HTML (si applicano automaticamente, non appena si collega il foglio di stile alla pagina)
  3. È possibile in uno stylesheet definire delle classi (class selector) che permettono di definire differenti stili per uno stesso elemento HTML. Ad esempio con le classi è possibile avere due differenti stili per due differenti <div>, come nell'esempio che segue:
    div.pippo {property: value; property: value}
    e
    div.pluto {property: value; property: value}
    Le classi sono precedute da un punto e si possono trovare nelle due forme:
    div.pippo
    oppure
    .pippo
    Le classi si applicano nella pagina HTML con l'attributo class= "nome_classe".
  4. In uno stylesheet è possibile inserire anche id selector. Gli id selector sono diversi dalle classi nella misura in cui mentre una classe può essere applicata molte volte nella pagina, un id selector può essere applicato una volta sola, dal momento che l'attributo id (che serve per applicare un id selector) deve essere unico nel documento.
    La sintassi degli id selector è la seguente:
    div#pippo {property: value; property: value}
    oppure
    #pippo {property: value; property: value}
    L'id selector si applica nella pagina HTML con l'attributo id.
  5. In un css possono essere inseriti dei commenti che devono assumere la forma seguente:
    /* questo è un commento */
    Ogni altra forma non è permessa.
  6. In un css possono essere inserite pseudo-classi (o css selector) esse assumono le forme sintattiche seguenti:
    selector:pseudo-class {property: value}
    selector.class:pseudo-class {property: value}
    Le pseudoclassi principali (ma non le uniche) sono quelle relative al tag <a> e sono le seguenti:
    a:link {color: #FF0000} /* link non visitato */
    a:visited {color: #00FF00} /* link visitato*/
    a:hover {color: #FF00FF} /* mouse over link */
    a:active {color: #0000FF} /* link selezionato*/
    Nota Bene:
    a:hover per funzionare deve essere definito dopo a:link e a:visited
    a:active per funzionare deve essere definito dopo a:hover
  7. Un file css deve essere collegato a una pagina HTML mediante il tag <link> (che è un tag empty: non chiude). Il collegamento deve essere scritto in <head> e assume la forma seguente:
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  8. L'elenco delle proprietà si trova ad esempio sul sito della w3school all'indirizzo http://www.w3schools.com/css/css_reference.asp.
    In particolare si segnalano le seguenti proprietà:
    - backgound
    - border (boder-width; border-style; border-color)
    - border-top; border-right; border-bottom; border-left
    - float
    - height; width
    - font (font-style; font-weight; font-size; font-family; color)
    - list-style (list-style-type; list-style-position)
    -margin (margin-top; margin-right; margin-bottom; margin-left)
    -padding (padding-top; padding-right; padding-bottom; padding-left)
    - bottom; left; right; top, vertical-align;
    -text-align; text-decoration; letter-spacing; word-spacing;
  9. I warning del W3C: Il WWWConsortium ha a disposizione sul proprio sito un validatore per i fogli di stile. Si accede al validatore dall'indirizzo http://jigsaw.w3.org/css-validator/. Il validatore riporta tutti gli errori di sintassi presenti sul foglio di stile, oltre a una serie di suggerimenti non vincolanti che ricadono sotto la voce Warnings
    Ecco una sequenza dei principali Warining del W3 con una breve spiegazione:
    - You have no background-color with your color: Il W3 consiglia di immettere un background-color ogni volta che si immette una proprietà color. Nel caso non sia necessario ai fini strutturali della pagina, va bene usare anche come valore della proprietà la dicitura transparent;
    - You have no color with your background-color: Come il precedente e viceversa, il W3 consiglia di immettere un color ogni volta che si immette un background-color;
    - font-family: You are encouraged to offer a generic family as a last alternative: Il W3 incoraggia ad usare il nome esteso della famiglia di carattere e non solo uno dei font disponibili nella famiglia. Le famiglie di font sono formate da almeno un nome di carattere (ad esempio Verdana) e da almeno una famiglia (serif o sans-serif: ricordare che sans-serif è adeguato per la lettura a monitor, mentre serif è adeguato per la lettura su carta). Si noti che i font che contengono spazi (tipo Times New Roman) sono scritti tra virgolette.
in CSS | Venerdì 7 Ottobre 2005