Struttura di uno stylesheet:


Ogni stylesheet contiene una o più regole, ciascuna delle quali ha questa struttura:
 selettore {
  proprietà1: valore1;
  proprietà2: valore2;
  (...)
 }
  • Il selettore identifica la parte di contenuto della pagina di cui si vuole modificare l'aspetto. Il browser cerca tutti gli elementi della pagina indicati dal selettore ed applica le proprietà corrispondenti. Se più selettori identificano lo stesso elemento vengono applicati dal pù generale al più specifico. A parità di specificità prevale l'ultimo trovato nello stylesheet.
    La sintassi dei selettori è articolata e potente: vale la pena di approfondirla uin po'. Gran parte della potenza di strumenti come jQuery deriva dalla sintassi dei selettori.
  • La proprietà identifica il tipo di formattazione che si intende modificare. Colori, font, allineamento, o altro. Ogni regola può definire un numero qualsiasi di proprietà.
  • Il valore viene assegnato alla proprietà scelta. Ecco una tabella delle proprietà più frequentemente utilizzate, linkate alle rispettive descrizioni in w3schools.com:
Colori color
background-color
Spaziatura margin
padding
margin-left, margin-right,
margin-top, margin-bottom
padding-left, padding-right,
padding-top, padding-bottom
Bordi border-width
border-style
border-color
border (larghezza, stile e colore assieme)
Allineamento testo text-align
text-indent
word-spacing
letter-spacing
line-height
white-space
Font font-family
font-size
font-weight
font-style
font-variant
text-decoration
@font-face (web fonts)
Dimensioni width
height
Disposizione position
left, right
float, clear
Grafica background-image
background-repeat
background-position

I commenti negli style sheet usano la convenzione dei commenti del linguaggio C:
/* Questo è un commento. */
Il fatto che i tre linguaggi di cui ci occupiamo (HTML, CSS e JavaScript) utilizzino sintassi diverse anche per i commenti indica la loro evoluzione da contesti diversi...

Sintassi dei selettori


Un riassunto della sintassi dei selettori:
  • Per nome dell'elemento: nomeelemento - Seleziona tutti gli elementi con nome nomeelemento.
  • Per classe: .nomeclasse - Seleziona tutti gli elementi il cui attributo class è definito come nomeclasse.
  • Per ID: #qualeid - Seleziona tutti gli elementi il cui attributo id è definito come qualeid.
  • Combinazione: selettore1,selettore2,... - Seleziona gli elementi indicati da uno qualsiasi dei selettori.
  • Contenimento: selettore1 selettore2 - Seleziona gli elementi indicati da selettore2 e contenuti in un elemento indicato da selettore1.
  • Ordine: selettore1~selettore2 - Seleziona gli elementi indicati da selettore2 preceduti da un elemento indicato da selettore1.
  • Parentela: selettore1>selettore2 - Seleziona gli elementi indicati da selettore2 il cui padre è un elemento indicato da selettore1.
  • Adiacenza: selettore1+selettore2 - Seleziona gli elementi indicati da selettore2 che seguono immediatamente un elemento indicato da selettore1 ma non sono contenuti in esso.
  • Per attributo (solo CSS3): [nomeattributo] - seleziona gli elementi che hanno definito l'attributo nomeattributo.
    [nomeattributo=valoreattributo] - seleziona gli elementi per i quali l'attributo nomeattributo è definito al valore valoreattributo.
  • Per pseudo-classe: - Permette di selezionare elementi che rientrano in una particolare categoria. La pseudo-classe può essere applicata come qualificatore ad altri selettori. Qualche esempio:
     not:(selettore) (CSS3) Un elemento che non è del tipo selezionato da selettore.
     root: (CSS3) L'elemento padre del documento.
     link: Link ad altri documenti non visitati.
     visited: Link ad altri documenti già visitati.
     empty: (CSS3) Elementi che non hanno figli.
     only-child: Elementi unici contenuti in un altro elemento.
     :nth-child(n) (CSS3) L'n-esimo figlio di un elemento. Possono essere utilizzate espressioni come 2n (elementi pari), 2n+1 (elementi dispari), etc.
     :nth-last-child(n) (CSS3) L'n-esimo figlio di un elemento, contando all'indietro dall'ultimo. Stesse regole come per il selettore precedente.
     :valid (CSS3) Elemento contenente un valore valido.
     ::selection (non standardizzato ma supportato!) La porzione di un elemento selezionata (evidenziata) dall'utente.
     ::before Posizione prima dell'elemento a cui la pseudo-classe si riferisce.
     ::after Posizione dopo l'elemento a cui la pseudo-classe si riferisce.

Bibliografia:

Unità di misura di CSS


È importante preferire una specifica delle dimensioni in termini relativi:
Unità Descrizione
% percentuale della dimensione dell'elemento che contiene quello selezionato
vh percentuale della viewport del browser. Utile ma non ancora standardizzato
in pollici (1 pollice = 2,54 cm)
cm centimetri
mm millimetri
em 1em corrisponde alla dimensione del font corrente. 2em è 2 volte la dimensione del font corrente. Ad esempio se il font è di 12pt 2em sono 24pt. Questa unità è particolarmente utile per i CSS, perché scala automaticamente in proporzione al font in uso.
ex Un ex è la dimensione in orizzontale (x-height) del font in uso. (corrisponde di solito circa a metà della dimensione del font.
pt punto tipografico (1pt equivale a 1/72 di pollice)
pc 'pica' (1pc equivale a 12 punti, 1/6 di pollice)
px pixel (un pixel è un punto sullo schermo del computer)