diff options
Diffstat (limited to 'files/ca/learn/css/building_blocks/values_and_units/index.html')
| -rw-r--r-- | files/ca/learn/css/building_blocks/values_and_units/index.html | 394 |
1 files changed, 394 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/values_and_units/index.html b/files/ca/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..b754bd27ac --- /dev/null +++ b/files/ca/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,394 @@ +--- +title: Valors i unitats CSS +slug: Learn/CSS/Building_blocks/Valors_i_unitats_CSS +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Totes les propietats CSS tenen assignats un valor o un conjunt de valors permesos; donar una ullada a qualsevol pàgina de propietats de MDN t'ajudarà a comprendre els valors que admet una propietat concreta. En aquest article veurem uns quants dels valors i unitats que són d’ús més habitual.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir informació sobre els diferents tipus de valors i unitats que s’utilitzen en les propietats CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_valor_CSS">Què és un valor CSS</h2> + +<p>En les especificacions CSS i en les pàgines de propietat d'aquest projecte MDN pots identificar amb facilitat els valors perquè estan escrits entre parèntesis angulars (<em>brackets</em>), per exemple <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> o <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. Si veus que per a una propietat és vàlid el valor <code><color></code>, vol dir que per a aquesta propietat pots utilitzar com a valor qualsevol dels colors vàlids que apareixen a la pàgina de referència de la propietat <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa que també es fa referència als valors CSS com <em>tipus de dades</em>. Bàsicament són termes intercanviables: el terme <em>tipus de dada</em> és en realitat una altra manera de dir <em>valor</em>.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els valors CSS solen denotar-se entre parèntesis angulars per a diferenciar-los de les propietats CSS (per exemple, la propietat {{cssxref("color")}} i el tipus de dada <a href="/en-US/docs/Web/CSS/color_value"><color></a>). Encara que tant els tipus de dades CSS com els elements d’HTML es denoten entre parèntesis angulars, és poc probable que et confonguis perquè s'utilitzen en contextos molt diferents.</p> +</div> + +<p>En l'exemple següent hem establert el color del nostre títol de capçalera amb una paraula clau, i el fons amb la funció <code>rgb()</code>:</p> + +<pre class="brush: css notranslate"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>Un valor en CSS és una manera de definir una col·lecció de subvalors permesos. Això vol dir que si <code><color></code> és un valor permès, no t'has de demanar quins dels diferents tipus de valor del color es poden utilitzar: les paraules clau, els valors hexadecimals, les funcions <code>rgb()</code>, etc. Pots utilitzar <em>qualsevol</em> valor <code><color></code> disponible, sempre que sigui compatible amb el navegador. La pàgina de MDN et dona informació sobre la compatibilitat de cada valor amb els navegadors. Per exemple, consulta la pàgina <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> i observa que en la secció de compatibilitat dels navegadors s’enumeren diferents tipus de valors de color i la compatibilitat que tenen amb els diferents navegadors.</p> + +<p>A continuació donem una ullada a uns quants dels tipus de valors i unitats amb què et pots trobar habitualment, amb exemples perquè facis proves amb diferents valors possibles.</p> + +<h2 id="Nombres_longituds_i_percentatges">Nombres, longituds i percentatges</h2> + +<p>En CSS pots trobar diversos tipus de dades numèriques. Totes les dades següents es classifiquen com a dades numèriques:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tipus de dada</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td>Un <code><integer></code> és un nombre enter, com ara <code>1024</code> o <code>-55</code>.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td>Un <code><number></code> representa un nombre decimal: pot tenir o no un punt de separació de xifres decimals, per exemple <code>0.255</code>, <code>128</code> o <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td>Una <code><dimension></code> és un valor <code><number></code> amb una unitat associada, per exemple <code>45deg</code> (graus), <code>5s</code> (segons) o <code>10px</code> (píxels). <code><dimension></code> és una categoria «paraigua» que inclou els tipus <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code> i <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>Un <code><percentage></code> representa una proporció d'algun altre valor, per exemple el <code>50%</code>. Els valors de percentatge sempre són relatius a una altra quantitat, per exemple, la longitud d'un element en percentatge és relativa a la longitud de l'element pare.</td> + </tr> + </tbody> +</table> + +<h3 id="Longituds">Longituds</h3> + +<p>El tipus numèric que es troba amb més freqüència és <code><length></code>, per exemple <code>10px</code> (píxels) o <code>30em</code>. En CSS s'utilitzen dos tipus de longituds: relatives i absolutes. És important conèixer-ne la diferència per a entendre quines mides pot atènyer un element.</p> + +<h4 id="Unitats_de_longitud_absolutes">Unitats de longitud absolutes</h4> + +<p>Totes les unitats que es mostren a continuació són unitats de longitud <strong>absolutes</strong>: no són relatives a cap altre element i es considera que tenen sempre la mateixa mida.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unitat</th> + <th scope="col">Nom</th> + <th scope="col">Equival a</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centímetres</td> + <td>1cm = 96px/2,54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Mil·límetres</td> + <td>1 mm = 1/10 d'1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarts de mil·límetre</td> + <td>1T = 1/40 d'1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Polzades</td> + <td>1in = 2,54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Piques</td> + <td>1pc = 1/16 d'1"</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Punts</td> + <td>1pt = 1/72a d'1"</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Píxels</td> + <td>1px = 1/96a d'1"</td> + </tr> + </tbody> +</table> + +<p>La majoria d'aquests valors són més útils quan s'utilitzen en una sortida en format imprès, més que no en una sortida per pantalla. Per exemple, la pantalla no s’acostuma a mesurar en <code>cm</code> (centímetres). Normalment, les úniques unitats que es fan servir per a la pantalla són els píxels (<code>px</code>).</p> + +<h4 id="Unitats_de_longitud_relatives">Unitats de longitud relatives</h4> + +<p>Les unitats de longitud relatives són unitats que es prenen en relació amb un altre element, potser la mida de la lletra o la mida de la finestra gràfica. L’avantatge d’utilitzar unitats relatives és que amb una planificació acurada pots definir a escala la mida del text o d’altres elements de la pàgina. A la taula següent pots trobar algunes de les unitats que són més útils per al desenvolupament web.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unitat</th> + <th scope="col">Relativa a</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td> + <p>La mida de la lletra de l’element pare, en el cas de propietats tipogràfiques como ara {{cssxref("font-size")}}, i la mida de la font del propi element, en el cas d'altres propietats com {{cssxref("width")}}.</p> + </td> + </tr> + <tr> + <td><code>ex</code></td> + <td>L’altura x de la lletra de l'element.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>La mesura d'avanç (amplada) del glif «0» del tipus de lletra de l'element.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>La mida de la lletra de l’element arrel.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>L’alçada de línia de l’element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>L’1% de l'amplada de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>L’1% de l'alçada de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>L’1% de la dimensió més petita de la finestra gràfica.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>L’1% de la dimensió més gran de la finestra gràfica.</td> + </tr> + </tbody> +</table> + +<h4 id="Un_exemple_il·lustratiu">Un exemple il·lustratiu</h4> + +<p>En l'exemple següent pots observar com es comporten algunes unitats de longitud relativa i absoluta. La primera caixa té una amplada ({{cssxref("width")}}), establerta en píxels. Com que és una unitat absoluta, aquesta amplada roman sempre igual, independentment d’altres canvis.</p> + +<p>La segona caixa té una amplada fixa establerta en unitats <code>vw</code> (amplada de la finestra gràfica). Aquest valor és relatiu a l'amplada de la finestra gràfica; així, 10vw és un 10 per cent de l'amplada de la finestra gràfica. Si canvia l’amplada de la finestra del navegador, la mida de la caixa ha de canviar, però aquí no et funcionarà perquè aquest exemple està incrustat a la pàgina amb <code><a href="/ca/docs/Web/HTML/Element/iframe"><iframe></a></code>. Si vols veure-ho en acció, has d’<a href="https://mdn.github.io/css-examples/learn/values-units/length.html">obrir l’exemple en una pestanya nova del teu navegador</a>.</p> + +<p>La tercera caixa utilitza unitats <code>em</code>. Aquestes unitats són relatives a la mida de la lletra. Hem establert una mida de lletra d'<code>1em</code> en l’element {{htmlelement("div")}} que conté una classe <code>.wrapper</code>. Canvia aquest valor per <code>1,5em</code> i observa que la mida de la lletra de tots els elements augmenta, però només augmenta l’amplada de l’últim element, perquè l’amplada és relativa a la mida de la lletra.</p> + +<p>Després de seguir les instruccions anteriors, juga una mica més amb els valors i observa què hi obtens.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="Unitats_em_i_rem">Unitats <code>em</code> i <code>rem</code></h4> + +<p>Les unitats <code>em</code> i <code>rem</code> són les dues longituds relatives que és probable que et trobis amb més freqüència per a dimensionar elements, des de caixes fins a text. Val la pena entendre com funcionen i en què es diferencien, sobretot quan comences a introduir-te en temes més complexos, com ara <a href="/ca/docs/Learn/CSS/Estilitzar_text">aplicar estil al text</a> o el <a href="/ca/docs/Learn/CSS/Disseny_CSS">disseny de pàgines web amb CSS</a>. T’ho mostrem a continuació amb un exemple.</p> + +<p>L’HTML d’aquest exemple consisteix en dos blocs de llistes imbricades: hi ha tres llistes en total i tots dos blocs tenen el mateix HTML. L’única diferència és que en el primer bloc hi ha una classe <em>em</em>, i en el segon una classe <em>rem</em>.</p> + +<p>Per començar, establim la mida de la lletra de l’element <code><html></code> a 16px.</p> + +<p><strong>Breument, la unitat <em>em</em> fa referència a «la mida de lletra de l'element pare»</strong>. Els elements {{htmlelement("li")}} que hi ha dins dels elements {{htmlelement("ul")}} amb una classe <code>em</code> hereten la mida de l’element pare, de manera que en cada nivell d’imbricació successiu la mida de la lletra augmenta progressivament perquè en cadascun hi ha una mida de lletra establerta en <code>1.3em</code> (1,3 vegades la mida de la lletra de l’element pare).</p> + +<p><strong>Breument, la unitat <em>rem</em> fa referència a «la mida de lletra de l'element arrel»</strong> (els rem estàndard es corresponen amb l’<code>em</code> de l’arrel). Els elements {{htmlelement("li")}} dins dels elements {{htmlelement("ul")}} amb una classe <code>rem</code> prenen la mida de l'element arrel (<code><html></code>). Això significa que no augmenten en cada nivell d’imbricació successiu.</p> + +<p>Tanmateix, observa que si canvies la mida de la lletra (<code>font-size</code>) de l’element <code><html></code> amb el CSS, canvia tot el que hi està relacionat, tant els <code>rem</code> com els <code>em</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentatges">Percentatges</h3> + +<p>En molts casos, un percentatge és tractat de la mateixa manera que una longitud. La qüestió amb els percentatges és que sempre es defineixen en relació amb algun altre valor. Per exemple, si defineixes la mida de la lletra (<code>font-size</code>) d'un element com un percentatge, aquesta serà un percentatge del valor de <code>font-size</code> de l’element pare. Si fas servir un percentatge per a un valor de l’amplada (<code>width</code>), serà un percentatge del valor de <code>width</code> de l’element pare.</p> + +<p>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. Tots dos conjunts de caixes tenen 200px i un 40% d’amplada, respectivament.</p> + +<p>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'amplada 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.</p> + +<p><strong>Canvia l'amplada del contenidor o el valor en percentatge i observa què passa.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>L’exemple següent mostra les mides de lletra en percentatges. Cada element de llista <code><li></code> té una mida de lletra <code>font-size</code> del 80%; per tant, la lletra dels elements de llista imbricats és cada cop més petita a mesura que la mida de lletra s’hereta de l’element pare.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>Observa que molts valors accepten unitats de longitud i de percentatge, però n’hi ha que només accepten unitats de longitud. Consulta quins valors s’accepten en les pàgines de referència de cada propietat de MDN. Si el valor permès inclou <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code>, pots utilitzar una longitud o un percentatge. Si el valor permès només inclou <code><length></code> no s’admet l’ús de percentatges.</p> + +<h3 id="Nombres">Nombres</h3> + +<p>Hi ha valors que accepten nombres sense unitat. Un exemple de propietat que accepta un nombre sense unitat és la propietat <code>opacity</code>, que controla l’opacitat d’un element (el nivell de transparència). Aquesta propietat accepta un nombre entre el <code>0</code> (totalment transparent) i l’<code>1</code> (totalment opac).</p> + +<p><strong>En l’exemple següent, canvia el valor <code>opacity</code> per diversos valors decimals entre el <code>0</code> i l’<code>1</code> i observa com la caixa i el contingut es tornen més o menys opacs.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si en CSS fas servir un nombre com a valor, no l’has de posar entre cometes.</p> +</div> + +<h2 id="Color">Color</h2> + +<p>Hi ha moltes maneres d’especificar el color en CSS, i algunes s’han implementat més recentment que d’altres. El CSS pot utilitzar els mateixos valors de color per a qualsevol element, ja sigui per a especificar el color del text com el color del fons, o qualsevol altra cosa.</p> + +<p>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 vermell, verd i blau amb 256 valors diferents per a cada canal (256 x 256 x 256 = 16.777.216). Observa algunes de les maneres com podem especificar colors amb el CSS.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En aquest tutorial analitzarem els mètodes habituals per a especificar el color que tenen una bona compatibilitat amb els navegadors. N’hi ha d’altres, que no tenen una bona compatibilitat amb els navegadors i són menys habituals.</p> +</div> + +<h3 id="Paraules_clau_per_als_colors">Paraules clau per als colors</h3> + +<p>Molt sovint en els exemples de la nostra secció d’aprenentatge o en alguna altra pàgina de MDN veuràs que utilitzem paraules clau de colors, perquè són una manera senzilla i comprensible d’especificar un color. Hi ha moltes paraules clau, i algunes tenen noms força curiosos. En pots veure una llista completa a la pàgina dedicada al valor <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>.</p> + +<p><strong>Juga amb diferents valors de color en els exemples en viu que et presentem a continuació per a entendre més bé com funcionen.</strong></p> + +<h3 id="Els_valors_RGB_hexadecimals">Els valors RGB hexadecimals</h3> + +<p>El tipus de valor de color següent que probablement trobaràs més sovint són els codis hexadecimals. Cada valor hexadecimal consisteix en un símbol hashtag/coixinet (#) seguit de sis nombres hexadecimals, cadascun dels quals pot prendre un dels 16 valors que van del 0 a la f (que representa el 15), és a dir: <code>0123456789abcdef</code>. Cada parell de valors representa un dels canals (vermell, verd i blau) i permet especificar qualsevol dels 256 valors disponibles per a cada un (16 x 16 = 256).</p> + +<p>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: amb els valors hexadecimals pots representar qualsevol color que vulguis per a la teva paleta de colors.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Canvia un cop més els valors i observa com varien els colors.</strong></p> + +<h3 id="Valors_RGB_i_RGBA">Valors RGB i RGBA</h3> + +<p>El tercer sistema de què parlarem aquí és RGB. Un valor RGB és una funció <code>rgb()</code> que proporciona tres paràmetres que representen els valors dels canals vermell, verd i blau dels colors, igual que els valors hexadecimals. La diferència amb RGB és que els canals no estan representats per dos dígits hexadecimals, sinó per un nombre decimal entre 0 i 255, que sembla una mica més fàcil d’entendre.</p> + +<p>Reescrivim el nostre darrer exemple adaptat amb l’ús de colors RGB:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>També pots utilitzar colors RGBA: funcionen exactament igual que els colors RGB, de manera que pots utilitzar qualsevol valor RGB, però s’hi afegeix un quart valor que representa el canal alfa del color, que en controla l'opacitat. Si estableixes aquest valor a <code>0</code>, el color és totalment transparent, mentre que <code>1</code> el fas totalment opac. Els valors que hi ha entremig proporcionen diferents nivells de transparència.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Entre establir un canal alfa per a un color o utilitzar la propietat {cssxref("opacity")}} que hem vist abans hi ha una diferència fonamental. Quan empres l'opacitat, l’element i tot el que té a l’interior són opacs, mentre que amb l’ús de colors RGBA, només es torna opac el color que especifiques.</p> +</div> + +<p>En 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 que el fons es veu més quan el valor del canal alfa és més petit.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>Canvia els valors del canal alfa en aquest exemple i observa com això afecta la sortida del color.</strong></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: En algun moment els navegadors moderns es van actualitzar perquè <code>rgba()</code> i <code>rgb()</code>, i també <code>hsl()</code> i <code>hsla()</code> (els veurem més avall) fossin àlies purs els uns dels altres i es comportessin exactament igual. Així, per exemple, tant <code>rgba()</code> com <code>rgb()</code> accepten colors amb valors de canal alfa i sense. Prova de canviar en l'exemple anterior les funcions <code>rgba()</code> per <code>rgb()</code> i comprova si els colors encara funcionen. Tot i que és decisió teva la manera com aplicar estil, fer servir funcions diferents que separin les definicions dels colors transparents de les dels que no ho són proporciona una compatibilitat (una mica) més bona amb els navegadors i pot servir d’indicador visual de quins colors del teu codi estan definits amb transparència.</p> +</div> + +<h3 id="Els_valors_HSL_i_HSLA">Els valors HSL i HSLA</h3> + +<p>Una mica menys de compatibilitat que RGB presenta 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ó <code>hsl()</code> accepta valors de tonalitat, saturació i lluminositat, que distingeixen els 16,7 milions de colors, però d'una manera diferent:</p> + +<ul> + <li><strong>Tonalitat</strong>: El to de base del color. Pren un valor entre el 0 i el 360, que representa un angle al voltant d'una roda de color.</li> + <li><strong>Saturació</strong>: El nivell de saturació que presenta el color. Pren un valor entre el 0 i el 100%, en què al 0 no hi ha color (apareix com una ombra de gris) i al 100% la saturació del color és total.</li> + <li><strong>Lluminositat</strong>: La claror i brillantor del color. Pren un valor entre el 0 i el 100%, en què al 0 no hi ha llum (apareix negre del tot) i al 100% la llum és total (apareix blanc del tot).</li> +</ul> + +<p>Podem adaptar l'exemple RGB amb colors HSL, d’aquesta manera:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>De la mateixa manera que RGB té RGBA, HSL té un equivalent HSLA, que et proporciona la mateixa funció d’especificació del canal alfa. Ho mostrem a continuació canviant el nostre exemple RGBA adaptat amb colors HSLA.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>Pots utilitzar qualsevol d'aquests valors de color en els teus projectes. En la majoria de casos és probable que et triïs una paleta de colors (i el mètode que escullis per a especificar el color), que faràs servir al llarg de tot el projecte. Pots fer combinacions de colors i barreges, però per coherència acostuma a ser millor si tot el teu projecte empra el mateix model de colors.</p> + +<h2 id="Imatges">Imatges</h2> + +<p>El tipus de dades <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> utilitza valors permesos que són imatges. Poden ser tant fitxers d'imatge enllaçats des d'una funció <code>url()</code>, com degradats.</p> + +<p>En l'exemple següent presentem una imatge i un degradat emprats com a valors de la propietat CSS <code>background-image</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: hi ha altres valors possibles per a <code><image></code>, però són més recents i encara tenen poca compatibilitat amb els navegadors. Si vols saber-ne més, dona una ullada a la pàgina que MDN dedica al tipus de dada <code><a href="/en-US/docs/Web/CSS/image"><image></a></code>.</p> +</div> + +<h2 id="Posició">Posició</h2> + +<p>El tipus de dades <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> representa un conjunt de coordenades 2D que s’utilitzen per a posicionar un element, com ara una imatge de fons (amb <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). Pot prendre paraules clau com <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> i <code>center</code> per a alinear els elements amb límits específics d’una caixa 2D, i també longituds, que representen desplaçaments respecte de les vores superior i esquerra de la caixa.</p> + +<p>Un valor de posició típic consta de dos valors: el primer estableix la posició horitzontal, i el segon la vertical. Si només especifiques el valor per a un eix, l’altre utilitza <code>center</code> per defecte.</p> + +<p>En l’exemple següent hem posicionat una imatge de fons a 40px de la part superior dreta del contenidor amb una paraula clau.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Juga amb aquests valors i observa com pots anar desplaçant la imatge.</strong></p> + +<h2 id="Cadenes_i_identificadors">Cadenes i identificadors</h2> + +<p>Al llarg dels exemples anteriors hem vist que es fan servir paraules clau com a valors (per exemple, les paraules clau de <code><color></code> com ara <code>red</code>, <code>black</code>, <code>rebeccapurple</code> i <code>goldenrod</code>). Aquestes paraules clau s’anomenen més precisament <em>identificadors</em>, i són valors especials que el CSS entén. Per tant, no s'escriuen entre cometes (és a dir, no es tracten com cadenes alfanumèriques).</p> + +<p>En alguns casos en CSS s’utilitzen cadenes alfanumèriques, per exemple en <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Generar_contingut_amb_before_i_after">especificar contingut generat</a>. En aquests casos, aquest valor es posa entre cometes per a denotar que es tracta d’una cadena alfanumèrica. En l'exemple següent utilitzem paraules clau de color, que s’escriuen sense cometes, i una cadena de contingut generat, escrita entre cometes.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Funcions">Funcions</h2> + +<p>L'últim tipus de valor que analitzarem és el grup de valors coneguts com a funcions. En programació, una funció és un bloc 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é n’hi ha en CSS, com a valors de propietats. Ja hem vist funcions en acció en l’article sobre els colors: <code>rgb()</code>, <code>hsl()</code>, etc. El valor que retorna una imatge des d'un fitxer, <code>url()</code>, també és una funció.</p> + +<p>Un valor que es comporta més com les funcions que pots trobar en un llenguatge de programació tradicional és la funció <code>calc()</code> de CSS. Aquesta funció et permet fer càlculs senzills dins del CSS. És útil sobretot quan vols calcular valors que no pots definir quan escrius el CSS del teu projecte perquè necessites que el navegador te’ls proporcioni en temps d'execució.</p> + +<p>Per exemple, a continuació fem servir la funció <code>calc()</code> per a assignar a una caixa una amplada d’un <code>20% + 100px</code>. El 20% es calcula a partir de l’amplada de l’element pare contenidor <code>.wrapper</code>, i canvia si en canvia l’amplada. Aquest càlcul no es pot fer prèviament perquè no sabem quin serà el 20% de l’element pare, de manera que demanem al navegador que ens ho calculi amb la funció <code>calc()</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Posa_a_prova_el_teu_coneixement">Posa a prova el teu coneixement</h2> + +<p>Hem vist molt de contingut en aquest article. En recordes la informació més important? Trobaràs més proves per comprovar si has retingut aquesta informació abans de seguir a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Hem fet una passada ràpida pels tipus de valors i unitats més habituals amb què et pots trobar. Pots consultar tots els diferents tipus a la pàgina de referència <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">Valors i unitats en CSS</a>; molts d’ells els faràs servir a mesura que avances per aquests articles.</p> + +<p>L’important és que recordis que cada propietat té una llista determinada de valors permesos, i que cada valor té una definició que explica quins en són els subvalors. Aleshores, pots consultar-ne les dades específiques aquí, a les pàgines d’MDN.</p> + +<p>Per exemple, és útil saber que <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> també et permet crear un degradat de color, però potser no és obvi.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Els selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Els combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valors i unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements amb el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depura el teu CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> |