Es poden identificar tres tipus diferents d'unitats:
Unitat | Sufix | Exemple | |
---|---|---|---|
Numèric | Cap | width: 100 |
|
Percentatge | % |
width: 67% |
|
Longitud | Em | em |
font-size: 1.2em |
Píxels | px |
font-size: 12px |
|
Punts | pt |
font-size: 13pt |
|
Milímetres | mm |
width: 356mm |
Les unitats absolutes són totes aquelles unitats que no varien en funció del dispositiu o context en les que són utilitzades.
Les unitats relatives, en canvi, varien en funció del dispositiu o context en les que són utilitzades. És el cas d'aquells valors representats en percentatges, o el de les unitats em
, que s'explicarà a continuació.
em
em
, originalment equivalia a l'alçada de la M
majúscula. A l'entorn de producció web, la unitat em
representa, però, el valor de la mida de font base del navegador (per defecte, 16 píxels). Per exemple: si un paràgraf es representa a 16 píxels, l'equivalent serà d'1 em; per tant 2 em equivaldran a 32 píxels; i 0.5em equival a 8 píxels.
Hi ha tres tipus d'unitats diferents per a especificar un color:
Valor hexadecimal: utilitza els valors hexadecimals (base 16), que fan servir els dígits del 0
al 9
i les lletres de la a
a la f
. Veieu la següent taula d'equivalència entre unitats de base 16 (hexadecimal) i base 10 (decimal):
Hexadecimal | Decimal |
---|---|
0 | 0 |
1 | 1 |
2 | 2 |
3 | 3 |
4 | 4 |
5 | 5 |
6 | 6 |
7 | 7 |
8 | 8 |
9 | 9 |
a | 10 |
b | 11 |
c | 12 |
d | 13 |
e | 14 |
f | 15 |
El valor hexadecimal d'un color es representa amb el símbol #
seguit de tres o sis valors hexadecimals.
Aquests sis valors hexadecimals representen, en grups de dos, el valor d'un canal de color específic: vermell, verd i blau. Per exemple, el següent valor hexadecimal #a3ff01
correspon a un color en el que el canal vermell és igual a #a3
(163 en decimal), el canal verd és igual a #ff
(255 en decimal) i, finalment, el canal blau és igual a #01
(1 en decimal). Segons la combinació de valors triada per a cada canal de color, s'obtindrà un color específic dels 16 milions de colors possibles (255*255*255 = 16581375 possibilitats de colors).
Tres valors hexadecimals és una representació reduïda dels sis valors hexadecimals, quan els valors de cada un dels tres canals estan formats per dos dígits o lletres iguals. Per exemple, el valor hexadecimal #afa
equival a #aaffaa
, o #8a0
és igual a #88aa00
En el següent exemple, s'han utilitzat les unitats hexadecimals per a especificar el color dels paràgrafs i el color de fons per mitjà d'una regla CSS:
p { color: #aaff00; background-color: #f00; }
Valor RGB: Permet la representació d'un color indicant, per mitjà de valors numèrics o percentatges, la quantitat dels canals vermell, verd i blau. En el cas d'un valor numèric, el valor es trobarà entre 0 i 255, de menor a major quantitat. Si s'utilitzen percentatges enlloc de valors numèrics, aquests es trobaran entre 0% i 100%, de menor a major quantitat. Veieu l'exemple anterior expressat amb valors RGB:
p { /* valor numèric */ color: rgb(170, 255, 0); /* valor amb percentatges */ background-color: rgb(100%, 0, 0); }
Nom del color: Permet seleccionar un color d'una llista entre 17 colors predeterminats: aqua
, black
, blue
, fuchsia
, gray
, lime
, green
, maroon
, navy
, olive
, orange
, purple
, red
, silver
, teal
, white
i yellow
. Veieu l'exemple anterior, però fent servir noms de color predefinits:
p { color: lime; background-color: red; }