Valors i unitats CSS

This translation is in progress.

Totes les propietats utilitzades en CSS tenen un valor o un conjunt de valors permesos per aquesta propietat, i fer una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors vàlids per a qualsevol propietat en concret. En aquesta lliçó, veurem alguns dels valors i unitats més habituals en ús.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Obtenir més informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.

Què és un valor CSS?

A les especificacions CSS i a les pàgines de propietat d'aquest projecte MDN, pots identificar els valors perquè estaran envoltats de claudàtors, com ara <color> o <length>. Quan vegis el valor <color> com a vàlid per a una propietat determinada, vol dir que pots utilitzar qualsevol color vàlid com a valor per a aquesta propietat, tal com apareix a la pàgina de referència de la propietat <color>.

Nota: També veuràs valors CSS anomenats tipus de dades. Els termes bàsicament es poden intercanviar: quan vegis alguna cosa en CSS anomenat tipus de dades, és realment una altra manera de dir valor.

Nota: Sí, els valors CSS solen denominar-se mitjançant claudàtors per diferenciar-los de les propietats CSS (per exemple, la propietat color, enfront del tipus de dades <color>). Pot ser que et confonguis entre els tipus de dades CSS i els elements HTML, ja que tots dos utilitzen claudàtors d'angle, però això és poc probable, ja que s'utilitzen en contextos molt diferents.

En l'exemple següent, hem establert el color del nostre títol de capçalera mitjançant una paraula clau i el fons amb la funció rgb():

h1 { 
  color: black; 
  background-color: rgb(197,93,161); 
} 

Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si veus <color> com a vàlid, no t'has de preguntar quins dels diferents tipus de valor del color es poden utilitzar: paraules clau, valors hexadecimals, funcions rgb(), etc. Pots utilitzar qualsevol valor <color> disponible sempre que sigui compatible amb el teu navegador. La pàgina de MDN per a cada valor et donarà informació sobre el suport del navegador. Per exemple, si observes la pàgina <color> veuràs que la secció de compatibilitat del navegador enumera diferents tipus de valor de color i suport per a aquests.

Mirem alguns dels tipus de valor i unitat que es poden trobar freqüentment, amb exemples per provar diferents valors possibles.

Nombres, longituds i percentatges

Hi ha diversos tipus de dades numèriques que pots trobar en CSS. Totes les següents es classifiquen com a numèriques:

Tipus de dades Descripció
<integer> Un <integer> és un nombre sencer, com ara 1024 o -55.
<number> Un <number> representa un nombre decimal: pot tenir o no un punt decimal amb un component fraccionat, per exemple 0.255, 128 o -1.2.
<dimension> Un <dimension> és un <number> amb una unitat associada, per exemple 45deg, 5s o 10px. <dimension> és una categoria de paraigües que inclou els tipus <length>, <angle>, <time> i <resolution>.
<percentage> Un <percentage> representa una fracció d'algun altre valor, per exemple el 50%. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element és relativa a la longitud de l'element pare.

Longituds

El tipus numèric que trobaràs amb més freqüència és <length>, per exemple 10px (píxels) o 30em. Hi ha dos tipus de longituds que s'utilitzen en CSS: relatives i absolutes. És important conèixer la diferència per comprendre com de grans poden arribar a ser les coses.

Unitats de longitud absoluta

A continuació, es mostren unitats de longitud absolute: no són relatius a cap altra cosa i es consideren sempre de la mateixa mida.

Unitat Nom Equivalent a
cm Centímetres 1cm = 96px/2,54
mm Mil·límetres 1 mm = 1/10 d'1cm
Q Quarts de mil·límetres 1T = 1/40a d'1cm
in Polzades 1in = 2,54cm = 96px
pc Piques 1pc = 1/16 d'1 in
pt Punts 1pt = 1/72a de 1in
px Píxels 1px = 1/96a de 1in

La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, en lloc de la sortida de pantalla. Per exemple, no solem utilitzar cm (centímetres) a la pantalla. L’únic valor que utilitzaràs habitualment és px (píxels).

Unitats de longitud relativa

Les unitats de longitud relativa són relatives a una altra cosa, potser a la mida de la lletra o a la mida de la visualització. L’avantatge d’utilitzar unitats relatives és que amb una planificació minuciosa pots fer que la mida del text o d’altres elements s’escalin respecte a la resta de la pàgina. Algunes de les unitats més útils per al desenvolupament web es troben a la taula següent.

Unitat Relatiu a
em Mida de la lletra de l’element pare.
ex Altura x de la lletra de l'element.
ch La mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.
rem Mida de la lletra de l’element arrel.
lh Alçada de línia de l’element.
vw 1% de l'amplada de la finestra gràfica.
vh 1% de l'alçada de la finestra gràfica.
vmin Un 1% de la dimensió més petita de la finestra gràfica.
vmax 1% de la dimensió més gran de la finestra gràfica.

Un exemple d'anàlisi

A l'exemple següent pots veure com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té un width establert en píxels. Com a unitat absoluta, aquesta amplada romandrà la mateixa sense importar què canviï.

La segona caixa té un ample fixat en unitats vw (ample de visualització). Aquest valor és relatiu a l'amplada de la visualització, de manera que 10vw és un 10 per cent de l'amplada de la visualització. Si canvies l’amplada de la finestra del navegador, la mida de la caixa hauria de canviar, però aquest exemple s’incorpora a la pàgina mitjançant <iframe>, de manera que això no funcionarà. Per veure-ho en acció, hauràs de provar l'exemple després d'obrir-lo a la pestanya del teu propi navegador.

La tercera caixa utilitza unitats em. Aquests són relatius a la mida de la lletra. Hem establert una mida de lletra d'1em a <div> que conté una classe .wrapper. Canvia aquest valor a 1,5em i veuràs que la mida de la lletra de tots els elements augmenta, però només l’últim element s’amplia, ja que l’amplada és relativa a la mida de la lletra.

Després de seguir les instruccions anteriors, prova de jugar amb els valors d’altres maneres, per veure què obtens.

Ems i rems

em i rem són les dues longituds relatives que probablement trobaràs amb més freqüència quan dimensionis qualsevol cosa, des de caselles fins a text. Val la pena entendre com funcionen i les diferències entre ells, sobretot quan comences a accedir a temes més complexos com ara donar estil al text o dissenyar amb CSS. L’exemple següent proporciona una demostració.

L’HTML és un conjunt de llistes imbricades: tenim tres llistes en total i tots dos exemples tenen el mateix HTML. L’única diferència és que el primer té una classe ems i el segon una classe rems.

Per començar, establim 16px com a mida de lletra a l’element <html>.

En resum, la unitat em significa «la mida de lletra de l'element pare». Els elements <li> que hi ha dins de <ul> amb una classe de ems prenen la mida del seu element pare. De manera que cada nivell successiu de nidificació augmenta progressivament, ja que cadascun té la mida del tipus de lletra establert en 1,3em (1,3 vegades la mida de la lletra de l’element pare).

En resum, la unitat rem significa «la mida de lletra de l'element arrel». (Estàndards rem per a «root em»). Els elements <li> dins de <ul> amb una classe de rems prenen la mida de l'element arrel (<html>). Això significa que cada nivell successiu de nidificació no continua augmentant.

Tanmateix, si canvies el font-size de <html> al CSS, veuràs que tot el que té relació amb ell canvia, tant rem com em.

 

Percentatges

En molts casos, un percentatge es tracta de la mateixa manera que la longitud. El que tenen els percentatges és que sempre es defineixen en relació a algun altre valor. Per exemple, si defineixes font-size d'un element com a percentatge, aquest serà un percentatge de font-size del pare principal de l'element. Si utilitzes un percentatge per a un valor width, serà un percentatge de l'amplada (width) principal.

En l'exemple següent, les dues caixes amb la mida especificada en unitats de percentatge i les dues caixes amb la mida especificada en unitats de píxel tenen els mateixos noms de classe. Ambdós conjunts tenen 200px i un 40% d’amplada respectivament.

La diferència és que el segon conjunt de dues caixes es troba dins d’un contenidor de 400 píxels d’amplada. La segona caixa de 200px d'ample té la mateixa amplada que la primera, però la segona caixa del 40% ara és el 40% de 400px, molt més estreta que la primera.

Prova de canviar l'amplada del contenidor o el valor percentual per veure com funciona.

 

El següent exemple mostra les mides de lletra en percentatges. Cada <li> té un font-size del 80%, per tant els elements de la llista imbricats són cada cop més petits a mesura que hereten la mida del seu pare.

 

Tingues en compte que, encara que molts valors accepten unitats de longitud o percentatge, n’hi ha que només accepten unitats de longitud. Pots veure quins valors s’accepten a les pàgines de referència de la propietat MDN. Si el valor permès inclou <length-percentage>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <length> no és possible utilitzar un percentatge.

Nombres

Alguns valors accepten números, sense que hi hagi cap unitat afegida. Un exemple de propietat que accepta un nombre sense unitat és la propietat opacity, que controla l’opacitat d’un element (com de transparent és). Aquesta propietat accepta un número entre 0 (totalment transparent) i 1 (totalment opac).

A l’exemple següent, intenta canviar el valor opacity a diversos valors decimals entre 0 i 1 per veure com la caixa i el seu contingut es fan més o menys opacs.

 

Nota: Si utilitzes un número en CSS com a valor, no s'ha d'envoltar entre cometes.

Color

Hi ha moltes maneres d’especificar el color en CSS, algunes de les quals s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color a qualsevol lloc, ja sigui si especifiques el color del text, el color de fons o qualsevol altra cosa.

El sistema de colors estàndard disponible en els equips moderns és de 24 bits, que permet la visualització d’uns 16,7 milions de colors diferents mitjançant una combinació de diferents canals vermells, verds i blaus amb 256 valors diferents per canal (256 x 256 x 256 = 16.777.216.) Mirem algunes de les maneres en què podem especificar colors en CSS.

Nota: En aquest tutorial analitzarem els mètodes habituals per especificar el color que tenen un bon suport del navegador. N’hi ha d’altres que no tenen un bon suport i són menys habituals.

Paraules clau de color

Podràs veure molt sovint, en exemples de la nostra secció d’aprenentatge o en una altra pàgina de MDN, les paraules clau de color que s’utilitzen, ja que són una manera senzilla i comprensible d’especificar el color. Hi ha moltes paraules clau, algunes de les quals tenen noms força entretinguts. En pots veure una llista completa a la pàgina del valor <color>.

Prova de jugar amb diferents valors de color als exemples en viu que es mostren a continuació, per obtenir més informació sobre com funcionen.

Els valors hexadecimals RGB

El següent tipus de valor de color que probablement trobaràs són els codis hexadecimals. Cada valor hexagonal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors entre 0 i f (que representa 15), de manera que 0123456789abcdef. Cada parell de valors representa un dels canals (vermell, verd i blau) i ens permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).

Aquests valors són una mica més complexos i menys fàcils d’entendre, però són molt més versàtils que les paraules clau: pots utilitzar valors hexagonals per representar qualsevol color que vulguis utilitzar en el teu color.

 

De nou, intenta canviar els valors per veure com varien els colors.

Valors RGB i RGBA

El tercer esquema de què parlarem aquí és RGB. Un valor RGB és una funció rgb() que proporciona tres paràmetres que representen els valors del canal vermell, verd i blau dels colors, de la mateixa manera que els valors hexàgons. La diferència amb RGB és els canals no estàn representat per dos dígits hexagonals, sinó per un nombre decimal entre 0 i 255, i és una mica més fàcil d’entendre.

Reescrivim el nostre darrer exemple per utilitzar els colors RGB:

 

També pots utilitzar colors RGBA: funcionen exactament de la mateixa manera que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, tot i així, hi ha un quart valor que representa el canal alfa del color, que controla l'opacitat. Si estableixes aquest valor a 0, el color serà totalment transparent, mentre que 1 el farà totalment opac. Els valors que queden entremig proporcionen diferents nivells de transparència.

Nota: Posar un canal alfa en un color té una diferència clau per utilitzar la propietat {cssxref("opacity")}} que hem vist anteriorment. Quan utilitzes l'opacitat, l’element i tot el que hi ha al seu interior són opacs, mentre que l’ús de colors RGBA només fa que el color que especifiques sigui opac.

A l'exemple següent hem afegit una imatge de fons al bloc que conté les nostres caixes de colors. A continuació, hem configurat les caixes perquè tinguin valors d'opacitat diferents: observa com el fons es veu més quan el valor del canal alfa és menor.

En aquest exemple, intenta canviar els valors del canal alfa per veure com afecta la sortida del color.

Nota: En algun moment es van actualitzar els navegadors moderns de manera que rgba() i rgb(), així com hsl() i hsla() (mira-ho més avall), es convertisin en purs àlies els uns dels altres i comencessin a comportar-se exactament igual. Així, per exemple, tant rgba() com rgb() accepten colors amb i sense valors de canal alfa. Prova de canviar les funcions rgba() de l'exemple anterior a rgb() i mira si els colors encara funcionen. L'estil que facis servir és decisió teva, però separar les definicions de colors transparents i els no transparents per utilitzar les diferents funcions proporciona un suport (molt) lleugerament millor al navegador i pot actuar com a indicador visual del lloc on es defineixen colors transparents al teu codi.

Els valors HSL i HSLA

Una mica menys compatible que el RGB és el model de color HSL (no és compatible amb versions antigues d’Internet Explorer), que es va implementar després de molta insistència per part dels dissenyadors. En lloc dels valors vermell, verd i blau, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, que s'utilitzen per distingir els 16,7 milions de colors, però d'una manera diferent:

  • Tonalitat: El to base del color. Això pren un valor entre 0 i 360, que representa els angles al voltant d'una roda de color.
  • Saturació: Com de saturat està el color? Això pren un valor del 0 al 100%, on 0 no té color (apareixerà com una ombra de gris) i el 100% és la saturació a tot color.
  • Lluminositat: Com de clar o brillant és el color? Això pren un valor del 0 al 100%, on a 0 no hi ha llum (apareixerà completament negre) i el 100% és de llum completa (apareixerà completament blanc).

Podem actualitzar l'exemple RGB per utilitzar colors HSL com aquest:

 

De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa capacitat d’especificar el canal alfa. A continuació, ho hem demostrat canviant el nostre exemple RGBA per utilitzar colors HSLA.

 

Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. És probable que per a la majoria dels projectes decideixis fer servir una paleta de colors i després utilitzis aquests colors (i el mètode escollit per especificar el color) al llarg del projecte. Pots combinar i barrejar models de colors, però per coherència sol ser millor si tot el teu projecte fa servir el mateix.

Imatges

El tipus de dades <image> s'utilitza allà on una imatge sigui un valor vàlid. Pot ser un fitxer d'imatge real enllaçat a través d'una funció url() o un degradat.

A l'exemple següent mostrem una imatge i un gradient com a valor per a la propietat CSS background-image.

 

Nota: hi ha alguns altres valors possibles per a <image>, però són més recents i actualment tenen una mala assistència del navegador. Fes una ullada a la pàgina de MDN per al tipus de dades <image> si vols llegir-ne més.

Posició

El tipus de dades <position> representa un conjunt de coordenades 2D, utilitzades per posicionar un element, com ara una imatge de fons (mitjançant background-position). Es poden prendre paraules clau com top, left, bottom, right i center per alinear els elements amb límits específics d’una caixa 2D, juntament amb les longituds, que representen compensacions de les vores superior i esquerra de la caixa.

Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontalment, el segon verticalment. Si només especifiques valors per a un eix, l’altre utilitzarà center per defecte.

En el següent exemple, hem posicionat una imatge de fons de 40px des de la part superior dreta del contenidor mitjançant una paraula clau.

 

Juga amb aquests valors per veure com pots empènyer la imatge.

Cadenes i identificadors

Al llarg dels exemples anteriors, hem vist llocs on les paraules clau s’utilitzen com a valor (per exemple, paraules clau de <color> com ara red, black, rebeccapurple i goldenrod). Aquestes paraules clau es descriuen amb més precisió com a identificadors, un valor especial que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes).

Hi ha llocs on s'utilitzen cadenes en CSS, per exemple quan especifiques contingut generat. En aquest cas, el valor es cita per demostrar que és una cadena. A l'exemple següent, utilitzem paraules clau de color no cotitzades juntament amb una cadena de contingut generat per citar.

 

Funcions

L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En la programació, una funció és una secció de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per part del desenvolupador com de l’ordinador. Les funcions normalment s’associen a idiomes com JavaScript, Python o C ++, però també existeixen en CSS, com a valors de propietat. Ja hem vist funcions en acció a la secció sobre els colors: rgb(), hsl(), etc. El valor que s'utilitza per retornar una imatge des d'un fitxer, en aquest cas url(), també és una funció.

Un valor que es comporta més com una cosa que pots trobar en un llenguatge de programació tradicional és la funció CSS calc(). Aquesta funció et permet fer càlculs senzills dins del teu CSS. És especialment útil si vols cercar valors que no pots definir quan escrius el CSS per al teu projecte i necessites que el navegador et faci una feina en temps d'execució.

Per exemple, a continuació, utilitzem calc() per fer la caixa d’un 20% + 100px d’amplada. El 20% es calcula a partir de l’amplada del contenidor principal ..wrapper i canviarà si canvia l’amplada. No podem fer aquest càlcul prèviament perquè no sabem quin serà el 20% dels pares, per la qual cosa fem servir calc() per dir-li al navegador que ens ho faci.

Resum

Hem passat ràpidament a través dels tipus més habituals de valors i unitats que et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència Valors i unitats en CSS; allà hi trobaràs molts d’aquests valors en ús mentre avances per aquestes lliçons.

El més important a recordar és que cada propietat té una llista definida de valors permesos i cada valor té una definició que explica quins són els subvalors. A continuació, pots consultar les dades específiques aquí a MDN.

Per exemple, entendre que <image> també et permet crear un degradat de color és útil, però potser no és obvi.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Imatges, media i elements de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS