MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

CSS valors i unitats

This translation is incomplete. Please help translate this article from English.

Hi ha molts tipus de valors de propietat CSS que cal tenir en compte, des dels valors numèrics als colors fins a les funcions que realitzen una determinada acció (com incrustar una imatge de fons o girar un element). Alguns d'ells es basen en unitats particulars per especificar els valors exactes que representan: voleu que la vostra caixa sigui de 30 píxels d'amplada, o 30 centímetres o 30 ems? En aquesta guia, veurem valors més comuns com la longitud, el color i les funcions simples, així com explorar unitats menys comunes com graus i fins i tot valors numèrics sense unitat.

Requisits previs : Coneixements bàsics d'informàtica, el programari bàsic instal.lat, el coneixement bàsic del treball amb fitxers, els fonaments d'HTML (estudi d'Introducció a HTML), i una idea de com funciona CSS (estudiar els articles anteriors d'aquest mòdul.)
Objectiu: Per obtenir informació sobre els tipus més comuns de valors de propietat CSS i unitats associades.

Hi ha molts tipus de valors en CSS, alguns d'ells molt comuns i alguns d'ells que poques vegades trobareu. No ho cobrim tot exhaustivament en aquest article; només els que probablement us puguin ser mes utiles a mesura que continueu en el vostre camí cap al domini de CSS. En aquest article, cobrim els següents valors de CSS:

  • Valors numèrics: per especificar valors de longitud, per exemple l'amplada de l'element, el gruix de la vora o la mida de la font i per especificar els enters sense unitats, per exemple l'ample de línia relativa o nombre de vegades per executar una animació.
  • Percentatges: també es pot utilitzar per especificar la mida o la longitud, pel que fa a l'amplada o alçada del contenidor principal per exemple, o la mida del tipus de lletra per defecte.
  • Colors: per especificar colors de fons, colors de text, etc.
  • Posicions de coordenades: p. e. per especificar la posició d'un element posicionat en relació a la part superior esquerra de la pantalla.
  • Funcions: Per especificar, per exemple imatges de fons o degradats d'imatges de fons.

També veureu exemples d'aquestes unitats durant tota la resta del tema CSS, i gairebé tots els altres recursos CSS que veieu. Us acostumareu a tot això en molt poc temps.

Nota: Trobareu una cobertura exhaustiva d'unitats CSS a la CSS Referencia; les unitats són les entrades envoltades de claudàtors angulars, per exemple <color>.

Valors numèrics

Veureu els números que es fan servir a molts llocs d'unitats de CSS. Aquesta secció tracta sobre les classes més comunes del valor numèric.

Longitud i mida

Utilitzareu unitats de longitud/mida (consulteu <length> com a referència) tot el temps al vostre CSS per a dissenys, tipografia i molt més. Vegeu un exemple senzill: primer l'HTML:

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

I ara el CSS:

p {
  margin: 5px;
  padding: 10px;
  border: 2px solid black;
  background-color: cyan;
}

p:nth-child(1) {
  width: 150px;
  font-size: 18px;
}

p:nth-child(2) {
  width: 250px;
  font-size: 24px;
}

p:nth-child(3) {
  width: 350px;
  font-size: 30px;
}

El resultat és el següent:

Així doncs, en aquest codi fem el següent:

  • Establim margin, padding i border-width de cada paràgraf a 5 píxels, 10 píxels i 2 píxels respectivament. Un únic valor per marge/farcit significa que els quatre costats estan establerts al mateix valor. L'ample de la vora s'estableix com a part del valor de l'abreviatura border.
  • Establint width dels tres paràgrafs diferents a valors de píxels cada vegada més grans, significa que les caixes es fan més amples més a baix.
  • Establint font-size dels tres diferents paràgrafs a valors de píxels cada vegada més gran, significa que el text es fa més gran com més a baix. El font-size es refereix a l'alçada de cada glifo.

Els píxels (px) s'anomenen unitats absolutes perquè sempre seran de la mateixa mida, independentment de qualsevol altre configuració relacionada. Altres unitats absolutes són les següents:

  • mm, cm, in: Mil·límetres, centímetres o polzades.
  • pt, pc: Punts (1/72 de polzada) o picas (12 punts.)

Probablement no utilitzareu cap d'aquests elements sovint, excepte els píxels.

També hi ha unitats relatives, que són relatives al font-size de l'element actual o a la mida del viewport:

  • em: 1em és el mateix que la mida del tipus de lletra (font-size) de l'element actual (més específicament, l'amplada d'una lletra majúscula M). La mida de la font (font-size) base predeterminada proporcionada a pàgines web per navegadors web abans que s'apliqui l'estil CSS és de 16 píxels, el que significa que el valor computat de 1em té 16 píxels per un element per defecte. Però tingueu cura: les mides dels tipus de lletra són heretats per elements dels seus pares, de manera que si s'han establert diferents mides de font en elements primaris, el píxel equivalent d'un em pot començar a complicar-se. No us preocupeu massa per això, ara, anem a cobrir l'herència i la mida de les fonts amb més detall en articles i mòduls posteriors. ems són la unitat relativa més comuna que utilitzareu en el desenvolupament web.
  • ex, ch: Respectivament, aquests són l'alçada d'una x minúscula, i l'amplada del número 0. Aquests no són tan utilitzats habitualment o ben suportats com ems.
  • rem: El rem (root em) funciona exactament igual que el em, excepte que sempre serà igual a la mida de la mida de la font ( font-size ) predeterminada ; les mides de fonts heretats no tindran cap efecte, de manera que això sona com una opció molt millor que la ems, encara que les rems no funcionen en versions anteriors d'Internet Explorer (consulteu més sobre la compatibilitat entre navegadors Depurant CSS).
  • vw, vh: Respectivament aquests són 1/100th de l'amplada de la finestra de visualització, i 1/100th de l'alçada de la finestra de visualització. Una vegada més, aquests no són tan àmpliament compatibles com les rems.

L'ús d'unitats relatives és bastant útil: podeu dimensionar els elements HTML en relació amb la mida del tipus de lletra o de la finestra de visualització, de manera que el disseny continuarà sent correcte si, per exemple, la mida del text es duplica a tot el lloc web per part d'un usuari amb deficiències visuals.

Valors sense unitat

A vegades trobareu valors numèrics sense unitat en CSS: això no sempre és un error, de fet, està perfectament permès en algunes circumstàncies. Per exemple, si voleu eliminar completament el marge (margin) o el farciment (padding) d'un element, podeu utilitzar sense unitats 0 - 0 és 0, independentment de les unitats que s'hagin configurat abans!.

margin: 0;

Alçada de línia sense unitat

Un altre exemple és line-height, que estableix quina és l'alçada de cada línia de text en un element. Podeu utilitzar unitats per establir una alçada de línia específica, però sovint és més senzill utilitzar un valor sense unitat, que actua com un simple factor multiplicador. Per exemple, seguiu el codi HTML següent:

<p>Blue ocean silo royal baby space glocal evergreen relationship housekeeping
native advertising diversify ideation session. Soup-to-nuts herding cats resolutionary
virtuoso granularity catalyst wow factor loop back brainstorm. Core competency 
baked in push back silo irrational exuberance circle back roll-up.</p>

I el següent CSS:

p {
  line-height: 1.5;
}

Això donarà lloc al següent resultat de sortida:

Aquí la mida del tipus de lletra (font-size) és de 16 px; L'alçada de la línia serà 1,5 vegades aquesta, o 24px.

Nombre d'animacions

Les Animacions CSS us permeten animar elements HTML a la pàgina. Presentem un exemple senzill d'un paràgraf que gira quan es passa el ratolí per sobre. L'HTML per a aquest exemple és bastant simple:

<p>Hello</p>

El CSS és una mica més complex:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

p {
  color: red;
  width: 100px;
  font-size: 40px;
  transform-origin: center;
}

p:hover {
  animation-name: rotate;
  animation-duration: 0.6s;
  animation-timing-function: linear;
  animation-iteration-count: 5;
}

Aquí podeu veure una sèrie d'unitats interessants que no parlem explícitament en aquest article (<angle>s, <time>s, <timing-function>s, <string>s...), però el que ens interessa aquí està en la línia animation-iteration-count: 5; —això controla quantes vegades es produeix l'animació quan s'habilita (en aquest cas, quan el ratolí passa per sobre del paràgraf), i és una simple unitat numèrica entera (enter, a l'ordinador parla).

El resultat que obtenim d'aquest codi és el següent:

Percentatges

També podeu utilitzar valors percentuals per especificar la majoria de les coses que es poden especificar mitjançant valors numèrics específics. Això ens permet crear, per exemple, caixes l'amplada de les quals canviarà sempre un cert percentatge de l'amplada del contenidor principal. Això es pot comparar amb les caixes que tenen el seu ample fixat en un determinat valor unitari (com px o ems), que sempre mantindrà la mateixa longitud, fins i tot si canvia l'amplada del contenidor principal.

Anem a mostrar un exemple per explicar-ho.

Primer, dos quadres semblants, marcats en HTML:

<div>Fixed width layout with pixels</div>
<div>Liquid layout with percentages</div>

I ara una mica de css per donar estil a aquestes caixes:

div {
  margin: 10px;
  font-size: 200%;
  color: white;
  height: 150px;
  border: 2px solid black;
}

div:nth-child(1) {
  background-color: red;
  width: 650px;
}

div:nth-child(2) {
  background-color: blue;
  width: 75%;
}

Això ens dóna el següent resultat:

Aquí estem donant ambdós divs un margin, height, font-size, border i color. A continuació, donem el primer i segon div diferents background-colors perquè puguem diferenciar-los fàcilment. També estem configurant el width del primer div a 650px i l'amplada del segon div al 75%. L'efecte d'això és que el primer div sempre té el mateix ample, fins i tot si es modifica la finestra de visualització (començarà a desaparèixer de la pantalla quan la finestra de visualització es torni més estreta que la pantalla), mentre que el segon div l'ample canvia quan canvia la grandària de la finestra de visualització, de manera que seguirà sent sempre un 75% tan àmplia com el seu pare . En aquest cas, el pare del div és l'element <body>, que per defecte és el 100% de l'amplada de la finestra de visualització.

Nota: Podeu veure aquest efecte en acció fent un canvi de mida de la finestra del navegador en què es troba aquest article; També intenteu fer el mateix en els exemples en brut trobats a Github.

També hem establert la mida del tipus de lletra ( font-size ) en un valor percentual: 200%. Això funciona de manera diferent a com es pot esperar, però té sentit de nou, aquest nou tamany és relatiu a la mida del tipus de lletra del pare, com ho va ser amb ems. En aquest cas, la mida del tipus de lletra principal és de 16px, el valor predeterminat de la pàgina, de manera que el valor calculat serà del 200% d'aquest, o 32 píxels. Això funciona de manera molt similar a ems: el 200% és bàsicament l'equivalent a 2ems.

Aquests dos tipus diferents de disseny de caixa es coneixen sovint com a disposició líquida (canvis a mesura que canvia la grandària de la finestra de visualització del navegador) i fixa la disposició d'amplada (es manté la mateixa independentment). Tots dos tenen diferents usos, per exemple:

  • Es pot utilitzar un disseny líquid per assegurar-se que un document estàndard sempre s'adapti a la pantalla i que es vegi bé en diferents mides de la pantalla del dispositiu mòbil.
  • Es pot utilitzar un disseny de amplada fixa per mantenir un mapa en línia de la mateixa mida; la finestra de visualització del navegador es pot desplaçar al voltant del mapa, només veure-ne una determinada quantitat a la vegada. La quantitat que podeu veure alhora depèn de la mida de la vostra finestra de visualització.

Aprendreu molt més sobre dissenys web més endavant al curs, en el disseny CSS i els mòduls de disseny Responsive (TBD).

Aprenentatge actiu: jugar amb longituds

Per a aquest aprenentatge actiu, no hi ha respostes correctes. Simplement ens agradaria que juguéssiu amb l'amplada/alçada dels divs .inner i .outer per veure quins efectes tenen els diferents valors. Proveu un valor de percentatge per a la div .inner, i vegeu com s'ajusta quan l'amplada de la div .outer canvia. Proveu també alguns valors fixos, com píxels i ems.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset.

Colors

Hi ha moltes maneres d'especificar el color en CSS, algunes de les quals són implementades més recentment que altres. Els mateixos valors de color es poden utilitzar a tot arreu en CSS, ja sigui que especifiqueu el color del text, el color de fons o la resta.

El sistema de color estàndard disponible en ordinadors moderns és de 24 bits, permet visualitzar 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).

Anem a recórrer els diferents tipus de valor de color disponibles.

Nota: Per convertir entre els diferents sistemes de color que es detallen a continuació, necessiteu un convertidor de color. Hi ha molts convertidors fàcils que es poden trobar en línia, com ara HSL to RGB / RGB to HSL / Hex Colour Converter.

Paraules clau (Keywords)

Els tipus de colors més simples i més antics de CSS són les paraules clau de color. Són cadenes específiques que representen valors de color particulars. Per exemple, el següent codi:

<p>This paragraph has a red background</p>
p {
  background-color: red;
}

Dóna aquest resultat:

Això és fàcil d'entendre, encara que només ens permet especificar primitives de color obvis. Hi ha al voltant de 165 paraules clau diferents disponibles per als navegadors web moderns: consulteu la llista completa de paraules clau de color.

És probable que utilitzeu colors purs com el vermell, negre i blanc regularment en el vostre treball, però més enllà, podeu utilitzar un altre sistema de colors.

Valors hexadecimals

El següent sistema de color omnipresent són els colors hexadecimals, o codis hexadecimals. Cada valor hexadecimal consisteix d'un símbol hash/pound (#) seguit de sis números hexadecimals, cadascun dels quals pot prendre un valor entre 0 i f (que representa 16), així 0123456789abcdef. Cada parell de valors representa un dels canals: vermell, verd i blau, i ens permet especificar qualsevol dels 256 valors disponibles per a cadascun (16 x 16 = 256).

Així, per exemple, aquest codi:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: #ff0000;
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: #0000ff;
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: #e0b0ff;
}

Proporciona el següent resultat:

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: podeu utilitzar valors hexadecimals per representar qualsevol color que vulgueu utilitzar al vostre esquema de colors.

RGB

El tercer esquema que parlarem aquí és RGB. Un valor RGB és una funció - rgb() - que conté tres paràmetres que representen els valors del canal vermell, verd i blau dels colors, de la mateixa manera que els valors hexadecimals. La diferència amb RGB és que cada canal està representat no per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255.

Repassem el nostre darrer exemple per utilitzar colors RGB:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: rgb(255,0,0);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: rgb(0,0,255);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: rgb(224,176,255);
}

Això dóna el següent resultat:

El sistema RGB és gairebé tan ben suportat com els valors hexadecimals, probablement no trobareu navegadors que no els suportin en el vostre treball. Els valors RGB són, sens dubte, una mica més intuïtius i fàcils d'entendre que els valors hexadecimals.

Nota: Per què 255 i no 256? Els sistemes informàtics tendeixen a comptar des de 0, no 1. Per permetre 256 valors possibles, els colors RGB prenen valors en el rang de 0-255, no 1-256.

HSL

Una mica menys ben recolzat que RGB és el model HSL (no en versions anteriors d'IE), que es va implementar després d'un gran interès dels dissenyadors, en comptes de valors vermells, verds i blaus, la funció hsl() accepta valors de tonalitat, saturació i lluminositat, s'utilitzen per distingir entre els 16,7 milions de colors, però d'una manera diferent:

  1. tonalitat (hue): l'ombra base del color. Això pren un valor entre 0 i 360, presentant els angles al voltant d'una roda de color.
  2. saturació (saturation): com saturat és el color? Això pren un valor de 0 al 100%, on 0 no té color (apareixerà com una ombra gris) i el 100% és de saturació de color complet
  3. lluminositat (lightness): com de lluminós o brillant és el color? Això pren un valor de 0 al 100%, on 0 no és lluminós (apareixerà completament negre) i el 100% té llum total (apareixerà completament blanc)

Nota: Un cilindre HSL és útil per visualitzar la forma en què funciona aquest model de color. Vegeu l'article de HSL i HSV a Wikipedia.

Ara reescriurem el nostre exemple per utilitzar colors HSL:

<p>This paragraph has a red background</p>
<p>This paragraph has a blue background</p>
<p>This paragraph has a kind of pinky lilac background</p>
/* equivalent to the red keyword */
p:nth-child(1) {
  background-color: hsl(0,100%,50%);
}

/* equivalent to the blue keyword */
p:nth-child(2) {
  background-color: hsl(240,100%,50%);
}

/* has no exact keyword equivalent */
p:nth-child(3) {
  background-color: hsl(276,100%,85%);
}

Proporciona el següent resultat:

El model de color HSL és intuïtiu per dissenyadors que solen treballar amb aquests models de colors. És útil, per exemple, trobar un conjunt de tons per anar junts en un esquema de color monocromàtic:

/* three different shades of red*/
background-color: hsl(0,100%,50%);
background-color: hsl(0,100%,60%);
background-color: hsl(0,100%,70%);

RGBA i HSLA

RGB i HSL tenen els seus modes corresponents: RGBA i HSLA, que permeten configurar no només el color que voleu mostrar, sinó també la transparència que voleu que tingui aquest color. Les seves funcions corresponents prenen els mateixos paràmetres, més un quart valor en el rang 0-1, que estableix la transparència o el canal alfa. 0 és completament transparent i 1 és completament opac.

Vegem un altre exemple ràpid - primer l'HTML:

<p>This paragraph has a transparent red background</p>
<p>This paragraph has a transparent blue background</p>

Ara, el CSS: aquí movem el primer paràgraf cap avall amb un cert posicionament, per mostrar l'efecte dels paràgrafs que es solapen (obtindreu més informació sobre el posicionament més endavant):

p {
  height: 50px;
  width: 350px;
}

/* Transparent red */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
  position: relative;
  top: 30px;
  left: 50px;
}

/* Transparent blue */
p:nth-child(2) {
  background-color: hsla(240,100%,50%,0.5);
}

Aquest és el resultat:

Els colors transparents són molt útils per a efectes visuals més rics: barreja de fons, elements UI semitransparents, etc.

Opacitat

Hi ha una altra manera d'especificar la transparència a través de CSS: la propietat opacity. En lloc de definir la transparència d'un color en particular, això estableix la transparència de tots els elements seleccionats i els seus fills. Una vegada més, estudiem un exemple perquè puguem veure la diferència.

<p>This paragraph is using RGBA for transparency</p>
<p>This paragraph is using opacity for transparency</p>

Ara el CSS:

/* Red with RGBA */
p:nth-child(1) {
  background-color: rgba(255,0,0,0.5);
}

/* Red with opacity */
p:nth-child(2) {
  background-color: rgb(255,0,0);
  opacity: 0.5;
}

Aquest es el resultat:

Tingueu en compte la diferència: la primera caixa que utilitza el color RGBA només té un fons semitransparent, mentre que tot a la segona caixa és transparent, inclòs el text. Haureu de pensar acuradament quan usar cadascun, per exemple, RGBA és útil quan voleu crear un títol de la imatge superposada on la imatge es mostra a través del quadre de títol, però el text encara es pot llegir. L'opacitat, d'altra banda, és útil quan es vol crear un efecte d'animació on tot l'element d'interfície d'usuari va des de completament visible a ocult..

Aprenentatge actiu: jugar amb colors

Aquesta sessió d'aprenentatge actiu tampoc no té cap resposta correcta: ens agradaria que alteressis els valors de color de fons de les tres caixes que es troben més avall que es superposen lleugerament les una amb les altres. Intenteu amb paraules clau, hexadecimal, RGB/HSL/RGBA/HSLA i la propietat d'opacitat. Vegeu el divertit que pot ser.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset.

Funcions

En la programació, un function és una secció de codi reutilitzable que es pot executar diverses vegades per completar una tasca repetitiva amb un esforç mínim tant per al desenvolupador com de l'ordinador. Les funcions solen associar-se a llenguatges com JavaScript, Python o C + +, però també existeixen en CSS, com a valors de propietat. Ja hem vist funcions en acció a la secció Colors, amb rgb(), hsl(), etc.:

background-color: rgba(255,0,0,0.5);
background-color: hsla(240,100%,50%,0.5);

Aquestes funcions calculan el color a utilitzar.

Però també veureu funcions en altres llocs, sempre que vegeu un nom amb un parèntesi després d'això, que conté un o més valors separats per comes, es tracta d'una funció. Per exemple:

/* calculate the new position of an element after it has been rotated by 45 degress */
transform: rotate(45deg);
/* calculate the new position of an element after it has been moved across 50px and down 60px */
transform: translate(50px, 60px);
/* calculate the computed value of 90% of the current width minus 15px */
width: calc(90%-15px);
/* fetch an image from the network to be used as a background image */
background-image: url('myimage.png');

Hi ha molts bits interessants de funcionalitat que podeu utilitzar dins de CSS, que aprendreu en el moment oportú!

Resum

Espero que hàgiu gaudit aprenent sobre valors i unitats CSS - no es preocupeu si això no té un sentit complet en aquest moment; Obtindreu més i més pràctica amb aquesta part fonamental de la sintaxi CSS a mesura que avanceu!

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,