CSS: Fogli di stile
Valori e unità di misura
I valori attribuibili alle proprietà non vanno messi tra virgolette, ad eccezione di stringhe di testo e nomi di font composti da più parole.
Le unità di misura dei valori vanno scritte unitamente al valore, senza lasciare spazi (es. 20px).
Dimensioni
- px (pixels): unità di misura adatta per il monitor, la più usata.
- em (em-height): unità di misura relativa abbastanza usata nei CSS. 1 em è l'altezza media di un carattere per ogni font.
- in (inches - pollici): unità di misura americano, usato per la stampa e inadatto per il monitor.
- cm (centimetri): usato per la stampa e inadatto per il monitor.
- mm (millimetri): usato per la stampa e inadatto per il monitor.
- pt (points - punti): unità di misura tipografica, usato per definire la dimensione dei font.
- pc (picas): unità di misura poco usata (1 pica = 12 punti).
- ex (ex-height): unità di misura poco usata.
Percentuale
È un valore relativo rispetto ad un altro, in genere rispetto al valore genitore (parent). Es. 75%
Colori
I valori dei colori possono essere definiti in molti modi diversi.
- 16 parole chiave corrispondenti ai colori della palette VGA standard:
black | navy | blue | maroon | purple | green | red | teal | fuchsia | olive | gray | lime | aqua | silver | yellow | white
- #rrggbb è un codice composto da tre coppie di caratteri alfanumerici esadecimali corrispondenti rispettivamente al rosso, verde e blu (Red, Green, Blue). Ogni coppia può avere una quantità di valori che vanno dallo 00 all'FF, pari quindi ad una scala con 256 valori. Le tre coppie di colori permetto quindi di avere in totale 16.777.216 colori
- #rgb è invece la forma semplificata della precedente. Si usa per rappresentare 3 coppie di colori uguali. Es.#FFCC22 può essere scritto #FC2
- rgb(rrr%, ggg%, bbb%) è un altro modo per rappresentare i valori rgb, in forma percentuale, su una scala di valori da 0 a 100. Es. rgb(100%, 100%, 0%)
- rgb(rrr, ggg, bbb), come il precedente, ma i valori possibili sono i decimali dallo 0 al 255, equivalenti agli esadecimali da 00 a FF già visti
I valori dei colori possono esere adoperati dalle proprietà:
- color (colore di primo piano, cioè del testo, e del bordo, quando questo non è specificato dall'apposita proprietà)
proprietà ereditata
si applica a tutti gli elementi
selettore {color: <valore>}
- background-color (colore di sfondo)
selettore {background-color: <valore>}
- border (colore del bordo)
selettore {border: <valore>}
La parola chiave
inherit permette di ereditare le impostazioni definite per l'elemento genitore.
div {
color: #000;
background-color: rgb(220, 200, 180);
border : 1px solid red;
}
Stringhe
I valori espressi da stringhe vanno sempre racchiusi tra virgolette. Si applicano alle tre proprietà content, quotes, text-align (per tabelle definite con i CSS)
URI
Normalmente sono URL a file esterni (in genere immagini). Possono essere assoluti o relativi. Se relativi il path si riferisce al CSS e non al documento HTML. È composta dalla parola chiave url e l'indirizzo tra parentesi tonde senza virgolette. Es. url(img/linea.png).
Angoli
Usati in ambito audio (Vedi apposita sezione). Possono essere espresse con unità di misura relative agli angoli e sono valori relativi alle due proprietà azimuth e elevation:
- deg (degree - grado): ampiezza dell'angolo su scala 1-360 (Es. 180deg)
- grad (gradians): ampiezza dell'angolo su scala 1-400 (200grad = 180deg)
- rad (radians): ampiezza dell'angolo su scala 1-pi greco
Tempo
Usato in ambito audio. Spesso usato per le pause tra le parole lette da un sintetizzatore vocale. I valori si applicano alle tre proprietà pause, pause-after, pause-before:
- s (secondi)
- ms (millisecondi)
Frequenza
Usato in ambito audio:
- hz (Hertz)
- khz (Kilohertz)