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&a; 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)