diff options
Diffstat (limited to 'files/ca/learn/css/building_blocks')
16 files changed, 3795 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html new file mode 100644 index 0000000000..4196ac9434 --- /dev/null +++ b/files/ca/learn/css/building_blocks/advanced_styling_effects/index.html @@ -0,0 +1,410 @@ +--- +title: Efectes avançats de la caixa +slug: Learn/CSS/Building_blocks/Advanced_styling_effects +tags: + - Article + - Beginner + - Blend modes + - Boxes + - CSS + - CodingScripting + - Filters + - Styling + - box shadows + - effects +translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary">Aquest article actua com una caixa de trucs, que proporciona una introducció a algunes de les característiques avançades disponibles per a caixes d'estil que no encaixen a les altres categories anteriors - com ara ombres de caixa, modes de combinació i filtres.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir una idea sobre com utilitzar els efectes avançats de la caixa i conèixer algunes de les eines d'estil emergents que apareixen al llenguatge CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Ombres_de_caixa">Ombres de caixa</h2> + +<p>De tornada al nostre mòdul <a href="/en-US/docs/Learn/CSS/Styling_text">Estilitzar text</a> module, vam mirar la propietat {{cssxref("text-shadow")}}, que permet aplicar una o més ombres al text d'un element. Bé, existeix una propietat equivalent per les caixes - {{cssxref("box-shadow")}} que permet aplicar una o més ombres a una caixa de l'element actual. Igual que les ombres de text, les ombres de caixa són bastant ben suportades en tots els navegadors, però només a IE9+. Els usuaris de versions antigues d'IE podrien haver de fer front a no veure cap ombra, així que només cal que proveu els vostres dissenys per assegurar-vos que el vostre contingut sigui llegible sense elles.</p> + +<p>Podeu trobar els exemples d'aquesta secció a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (vegeu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">codi font</a> també).</p> + +<h3 id="Una_ombra_de_caixa_senzilla">Una ombra de caixa senzilla</h3> + +<p>Vegeu un exemple senzill per començar les coses. Primer, algun HTML:</p> + +<pre class="brush: html"><article class="simple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> + +<p>Ara el CSS:</p> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.simple { + box-shadow: 5px 5px 5px rgba(0,0,0,0.7); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('A_simple_box_shadow', '100%', 100) }}</p> + +<p>Veureu que tenim quatre elements en el valor de la propietat <code>box-shadow</code>:</p> + +<ol> + <li>El primer valor de longitud és el desplaçament horitzontal (<strong>horizontal offset</strong>) - la distància a la dreta que l'ombra es desplaça des de la caixa original (o a l'esquerra, si el valor és negatiu).</li> + <li>El segon valor de longitud és el desplaçament vertical (<strong>vertical offset</strong>) - la distància cap avall que l'ombra es desplaça des de la caixa original (o cap amunt, si el valor és negatiu).</li> + <li>El tercer valor de longitud és el radi de difuminat (<strong>blur radius</strong>) - la quantitat de difuminació aplicada a l'ombra.</li> + <li>El valor de color és el color base (<strong>base color</strong>) de l'ombra.</li> +</ol> + +<p>Podeu utilitzar qualsevol longitud i unitats de color que tingui sentit fer-ho per definir aquests valors.</p> + +<h3 id="Múltiples_ombres_de_caixa">Múltiples ombres de caixa</h3> + +<p>També podeu especificar múltiples ombres de caixa en una única declaració <code>box-shadow</code>, separant-les amb comes:</p> + +<div class="hidden"> +<pre class="brush: html"><article class="multiple"> + <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p> +</article></pre> +</div> + +<pre class="brush: css">p { + margin: 0; +} + +article { + max-width: 500px; + padding: 10px; + background-color: red; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); +} + +.multiple { + box-shadow: 1px 1px 1px black, + 2px 2px 1px black, + 3px 3px 1px red, + 4px 4px 1px red, + 5px 5px 1px black, + 6px 6px 1px black; +}</pre> + +<p>Ara obtenim aquest resultat:</p> + +<p>{{ EmbedLiveSample('Multiple_box_shadows', '100%', 100) }}</p> + +<p>Hem fet alguna cosa divertida, aquí, creant una caixa elevada amb diverses capes de colors, però podeu utilitzar-la de la manera que vulgueu, per exemple, per crear un aspecte més realista amb ombres basades en múltiples fonts de llum.</p> + +<h3 id="Altres_característiques_d'ombra_de_caixa">Altres característiques d'ombra de caixa</h3> + +<p>A diferència de {{cssxref("text-shadow")}}, {{cssxref("box-shadow")}} té una paraula clau disponible <code>inset</code> - posar-la al principi d'una declaració ombra fa que es converteixi en una ombra interior, més aviat, que una ombra exterior. Fem un cop d'ull i vegem què volem dir.</p> + +<p>En primer lloc, anirem amb un codi HTML diferent per a aquest exemple:</p> + +<pre class="brush: html"><button>Press me!</button></pre> + +<pre class="brush: css">button { + width: 150px; + font-size: 1.1rem; + line-height: 2; + border-radius: 10px; + border: none; + background-image: linear-gradient(to bottom right, #777, #ddd); + box-shadow: 1px 1px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +} + +button:focus, button:hover { + background-image: linear-gradient(to bottom right, #888, #eee); +} + +button:active { + box-shadow: inset 2px 2px 1px black, + inset 2px 3px 5px rgba(0,0,0,0.3), + inset -2px -3px 5px rgba(255,255,255,0.5); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('Other_box_shadow_features', '100%', 70) }}</p> + +<p>Aquí hem configurat un estil de botó juntament amb els estats focus/hover/active. El botó té una senzilla ombra de caixa negre que s'adapta a ella de manera predeterminada, a més d'un parell d'ombres d'inserció, una de llum i una altra fosca, situades a les cantonades oposades del botó per donar-li un bon efecte d'ombrejat.</p> + +<p>Quan es prem el botó, l'estat active fa que es canviï la primera ombra de la caixa per una ombra d'inserció molt fosca, donant l'aparença del botó que es prem.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha un altre element que es pot establir en el valor de <code>box-shadow</code> - un altre valor de longitud es pot configurar de manera opcional just abans del valor del color, que és un radi de dispersió (<strong>spread radius</strong>). Si s'estableix, això fa que l'ombra sigui més gran que la caixa original. No és molt utilitzat, però val la pena esmentar.</p> +</div> + +<h2 id="Filtres">Filtres</h2> + +<p>Els filtres CSS proporcionen una manera d'aplicar filtres a un element de la mateixa manera que podeu aplicar un filtre a una capa d'un paquet gràfic com Photoshop. Hi ha diverses opcions disponibles, i podeu llegir-les totes amb més detall a la pàgina de referència {{cssxref("filtre")}}. En aquesta secció, us explicarem la sintaxi i us mostrarem lo divertit que poden ser els resultats.</p> + +<p>Bàsicament, un filtre es pot aplicar a qualsevol element, bloc o en línia - simplement utilitzeu la propietat <code>filter</code> i li proporcioneu un valor d'una funció de filtre en particular. Algunes de les opcions de filtre, disponibles, fan coses molt similars a altres funcions CSS, per exemple, drop-shadow() funciona d'una manera molt similar i dóna un efecte similar a {{cssxref("box-shadow")}} o {{cssxref("text-shadow")}}. La cosa realment agradable sobre els filtres és que treballen sobre les formes exactes del contingut dins de la caixa, no només la caixa en si mateix com un gran tros, que pot semblar més bonic, encara que no sempre pot ser el que desitjeu. Vegem un exemple senzill per il·lustrar el que volem dir:</p> + +<p>En primer lloc, un senzill HTML:</p> + +<pre class="brush: html"><p class="filter">Filter</p> + +<p class="box-shadow">Box shadow</p> +</pre> + +<p><span id="result_box" lang="ca"><span>I ara, alguns CSS per aplicar una ombra a cadascuna</span></span>:</p> + +<pre class="brush: css">p { + margin: 1rem auto; + padding: 20px; + width: 100px; + border: 5px dashed red; +} + +.filter { + -webkit-filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); + filter: drop-shadow(5px 5px 1px rgba(0,0,0,0.7)); +} + +.box-shadow { + box-shadow: 5px 5px 1px rgba(0,0,0,0.7); +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('Filters', '100%', 200) }}</p> + +<p>Com podeu veure, el filtre drop-shadow segueix la forma exacta del text i els guions de la vora. L'ombra de la caixa només segueix el quadrat de la caixa.</p> + +<p>Algunes altres coses a destacar</p> + +<ul> + <li>Els filtres són molt nous - són compatibles amb la majoria de navegadors moderns, fins i tot Microsoft Edge, però no són compatibles en absolut amb Internet Explorer. Si utilitzeu filtres en els vostres dissenys, us heu de garantir que el vostre contingut es pugui utilitzar sense els filtres.</li> + <li>Veureu que hem inclòs una versió de la propietat <code>filtre</code> amb -<code>webkit</code>- prefixada. Es diu {{glossary("Vendor Prefix")}}, i és utilitzada de vegades per un navegador abans que finalitzi la implementació d'una nova característica, per suportar aquesta característica i experimentar amb ella sense coincidir amb la versió no prefixada. Els Vendor prefixes mai van ser destinats a ser utilitzats pels desenvolupadors web, però s'utilitzen de vegades a les pàgines de producció si realment es desitgen les característiques experimentals. En aquest cas, actualment, la versió -<code>webkit</code>- de la propietat és necessària per al suport de Chrome/Safari/ Opera, mentre que Edge i Firefox utilitzen la versió final, no prefixada.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Si decidiu utilitzar els prefixos en el vostre codi, assegureu-vos d'incloure tots els prefixos requerits, així com la versió no prefixada, de manera que el nombre màxim de navegadors possibles poguin utilitzar la característica, i quan els navegadors posteriorment deixin anar els prefixos, també poguin utilitzar la versió no prefixada. Tingueu també en compte que aquestes característiques experimentals podrien canviar, de manera que el codi podria trencar-se. Realment és millor experimentar amb aquestes característiques fins que s'eliminin els prefixos.</p> +</div> + +<p>Podeu veure altres exemples de filtres a <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/filters.html">filters.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/filters.html">codi font</a>).</p> + +<h2 id="Modes_de_mescla_(Blend)">Modes de mescla (Blend)</h2> + +<p>Els modes de mescla CSS ens permeten afegir modes de mescla a elements que especifiquen un efecte de mescla quan es superposen dos elements - el color final mostrat per a cada píxel serà el resultat d'una combinació del color del píxel original i el del píxel en la capa de sota. Els modes de mescla tornen a ser molt familiars per als usuaris d'aplicacions gràfiques com Photoshop.</p> + +<p>Hi ha dues propietats que utilitzen modes de mescla en CSS:</p> + +<ul> + <li>{{cssxref("background-blend-mode")}}, mescla diverses imatges de fons i colors establerts, en un sol element.</li> + <li>{{cssxref("mix-blend-mode")}}, mescla l'element que està establert amb elements que es superposen - tant de fons com de contingut.</li> +</ul> + +<p>Trobareu molts més exemples, que els disponibles aquí, a la nostra pàgina d'exemple <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (consulteu el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">codi font</a>), i a la pàgina de referència {{cssxref("<blend-mode>")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Els modes de mescla són també molt nous i lleugerament menys compatibles que els filtres. Encara no hi ha cap suport a Edge, i Safari només admet algunes de les opcions de mode de mescla.</p> +</div> + +<h3 id="background-blend-mode">background-blend-mode</h3> + +<p>De nou, anem a veure alguns exemples perquè pugueu entendre millor això. En primer lloc, {{cssxref("background-blend-mode")}} - aquí mostrarem un parell de {{htmlelement("div")}}s senzills, de manera que pogueu comparar l'original amb la versió barrejada:</p> + +<pre class="brush: html"><div> +</div> +<div class="multiply"> +</div></pre> + +<p>Ara, alguns CSS - afegim dues imatges de fons als <code><div></code>s: un gradient lineal i un png:</p> + +<pre class="brush: css">div { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +.multiply { + background-blend-mode: multiply; +}</pre> + +<p>El resultat que obtenim és el següent - podeu veure l'original a l'esquerra i el mode de mescla <code>multiply</code> a la dreta:</p> + +<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p> + +<h3 id="mix-blend-mode">mix-blend-mode</h3> + +<p>Ara mirem {{cssxref("mix-blend-mode")}}. Aquí presentem els mateixos dos <code><div></code>s, però cadascun d'ells ara està assegut a la part superior d'un simple <code><div></code> amb un fons porpra, per mostrar com es barregen els elements:</p> + +<pre class="brush: html"><article> + No mix blend mode + <div> + + </div> + <div> + </div> +</article> + +<article> + Multiply mix + <div class="multiply-mix"> + + </div> + <div> + </div> +</article></pre> + +<p><span id="result_box" lang="ca"><span>Aquí teniu el CSS amb aquest estil:</span></span></p> + +<pre class="brush: css">article { + width: 300px; + height: 180px; + margin: 10px; + position: relative; + display: inline-block; +} + +div { + width: 250px; + height: 130px; + padding: 10px; + margin: 10px; +} + +article div:first-child { + position: absolute; + top: 10px; + left: 0; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; + background-color: green; +} + +article div:last-child { + background-color: purple; + position: absolute; + bottom: -10px; + right: 0; + z-index: -1; +} + +.multiply-mix { + mix-blend-mode: multiply; +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Això ens dóna el següent resultat:</span></span></p> + +<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p> + +<p>Aquí podeu veure que la mescla de la mescla de multiply ha combinat no només les dues imatges de fons, sinó també el color del <code><div></code> a sota.</p> + +<div class="note"> +<p><strong>Nota</strong>: No us preocupeu si no enteneu algunes de les propietats de disseny anteriors, com ara {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}}, etc. Les cobrirem amb més detall en el nostre mòdul de <a href="/en-US/docs/Learn/CSS/CSS_layout">Disseny CSS</a>.</p> +</div> + +<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2> + +<p>Una altra característica incipient que pensàvem esmentar breument abans de seguir endavant (actualment compatible amb Chrome, Safari i Opera i que es va implementar a Firefox) és el valor <code>text</code> de {{cssxref("background-clip")}}. Quan s'utilitza juntament amb el propietari -<code>webkit-text-fill-color: transparent</code>; la característica, això us permet retallar imatges de fons a la forma del text de l'element, fent-ne uns efectes agradables. Aquest no és un estàndard oficial, però s'ha implementat en diversos navegadors, ja que és popular i utilitzat àmpliament pels desenvolupadors. Quan s'utilitza en aquest context, ambdues propietats requeriran un -<code>webkit</code>- vendor prefix, fins i tot per a navegadors no basats en Webkit/Chrome:</p> + +<pre class="brush: css">.text-clip { + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +}</pre> + +<p>Llavors, per què altres navegadors han implementat un prefix -webkit-? Principalment per a la compatibilitat del navegador - així, que molts desenvolupadors web van començar a implementar llocs web amb prefixes -<code>webkit</code>- va començar a semblar que els altres navegadors estaven trencats, mentre que, de fet, seguien els estàndards. Així que es van veure forçats a implementar algunes característiques d'aquest tipus. Això posa de manifest el perill d'utilitzar característiques CSS no estàndard i/o prefixades en el vostre treball - no només causen problemes de compatibilitat amb el navegador, sinó que també estan subjectes a canvis, de manera que el vostre codi podria trencar-se en qualsevol moment. És molt millor complir amb els estàndards.</p> + +<p>Si voleu utilitzar aquestes característiques en el vostre treball de producció, assegurar-vos de provar, a fons, en tots els navegadors i comprovar que, en els casos en què aquestes característiques no funcionin, el lloc encara és utilitzable.</p> + +<div class="note"> +<p><strong>Nota</strong>: Per a un complet codi d'exemple sobre <code>-webkit-background-clip: text</code>, vegeu <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (vegeu també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">codi font</a>).</p> +</div> + +<h2 id="Aprenentatge_actiu_experimentar_amb_alguns_efectes">Aprenentatge actiu: experimentar amb alguns efectes</h2> + +<p>Ara és el vostre torn. Per a aquest aprenentatge actiu, volem que experimenteu alguns dels efectes que heu llegit anteriorment, utilitzant el codi proporcionat a continuació.</p> + +<p>Si cometeu un error, sempre podeu restablir l'exemple mitjançant el botó <em>Reset</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me"> +</div></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me { + width: 280px; + height: 130px; + padding: 10px; + margin: 10px; + display: inline-block; + background-color: red; + background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px, + linear-gradient(to bottom right, #f33, #a33); +} </textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 820) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Esperem que aquest article hagi demostrat ser divertit en general - jugar amb joguines brillants i sempre és interessant veure quins tipus d'eines només estan disponibles en navegadors d'avantguarda. Heu arribat al final dels articles de les <a href="/en-US/docs/Learn/CSS/Styling_boxes">Caixes d'estil</a> de manera que a continuació, provareu les vostres habilitats amb les caixes d'estil amb les nostres avaluacions.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html new file mode 100644 index 0000000000..09a5e368eb --- /dev/null +++ b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada i herència +slug: Learn/CSS/Building_blocks/Cascada_i_herència +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.</p> + +<p>Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Regles_conflictives">Regles conflictives</h2> + +<p>CSS significa fulls d'estil en cascada (<strong>cascading style sheets</strong>), i es molt important entendre la paraula, <em>cascada</em>; el comportament de la cascada és clau per a comprendre el CSS.</p> + +<p>En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La <strong>cascada</strong> i el concepte d’<strong>especificitat</strong>, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.</p> + +<p>Aquí també és important el concepte <strong>d'herència</strong>, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.</p> + +<p>Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.</p> + +<h3 id="La_cascada">La cascada</h3> + +<p>Fulls d’estil en <strong>cascada</strong>: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.</p> + +<p>En l’exemple següent hi ha dues regles que podrien aplicar-se a <code>h1</code>. <code>h1</code> acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="Especificitat">Especificitat</h3> + +<p>L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:</p> + +<ul> + <li>Un selector d’elements és menys específic (selecciona tots els elements d’un mateix tipus que apareixen en una pàgina) i, per tant, obté una puntuació més baixa.</li> + <li>Un selector de classes és més específic: només selecciona els elements d'una pàgina que tenen un valor d'atribut <code>class</code> específic, de manera que obté una puntuació més alta.</li> +</ul> + +<p>Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a <code>h1</code>. L’encapçalament <code>h1</code> següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>Més endavant explicarem la puntuació de l'especificitat.</p> + +<h3 id="Herència">Herència</h3> + +<p>L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.</p> + +<p>Per exemple, si configures un element <code>color</code> i un <code>font-family</code> per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció <a href="/en-US/docs/Web/CSS/color#Specifications">Especificacions de la propietat del color</a>.</p> +</div> + +<h2 id="Entendre_com_interaccionen_els_conceptes">Entendre com interaccionen els conceptes</h2> + +<p>Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.</p> + +<h2 id="Comprendre_l’herència">Comprendre l’herència</h2> + +<p>Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <code><ul></code> una vora i un farciment, i n’hem canviat el color de la lletra.</p> + +<p>El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<code><li></code>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe <code>special</code> a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.</p> + +<p>Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.</p> + +<h3 id="Control_de_l’herència">Control de l’herència</h3> + +<p>El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en <code>inherit</code>.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a <code>inherit</code>, i en cas contrari, actua com a <code>initial</code>.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.</p> +</div> + +<p>Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.</p> + +<p>Per exemple:</p> + +<ol> + <li>El segon element de llista té aplicada la classe <code>my-class-1</code>. Estableix el color que hereta l’element <code><a></code> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?</li> + <li>Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.</li> + <li>Quin dels enllaços canvia de color si defineixes un color nou per a l'element <code><a></code>, per exemple <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="Restablir_tots_els_valors_de_propietat">Restablir tots els valors de propietat</h3> + +<p>La propietat CSS abreviada <code>all</code> es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (<code>inherit</code>, <code>initial</code>, <code>unset</code> o <code>revert</code>). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.</p> + +<p>En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de <code>all</code> en <code>unset</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p>Prova d’establir el valor <code>all</code> a alguns dels altres valors disponibles i observa quina és la diferència.</p> + +<h2 id="Entendre_la_cascada">Entendre la cascada</h2> + +<p>Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a <code>body</code>, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.</p> + +<p>Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:</p> + +<ol> + <li><strong>Ordre dins el codi</strong></li> + <li><strong>Especificitat</strong></li> + <li><strong>Importància</strong></li> +</ol> + +<p>Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.</p> + +<h3 id="Ordre_dins_el_codi">Ordre dins el codi</h3> + +<p>Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.</p> + +<h3 id="Especificitat_2">Especificitat</h3> + +<p>Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una <strong>especificitat més elevada</strong>: és més específica i, per tant, el navegador la tria per donar estil a l'element.</p> + +<p>Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.</p> + +<p>Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.</p> + +<p>Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.</p> + +<p>La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:</p> + +<ol> + <li><strong>Milers</strong>: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.</li> + <li><strong>Centenes</strong>: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.</li> + <li><strong>Desenes</strong>: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.</li> + <li><strong>Unitats</strong>: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: El selector universal (<code>*</code>), els combinadors (<code>+</code>, <code>></code>, <code>~</code>, ' ') i la pseudoclasse de negació (<code>:not</code>) no tenen cap efecte sobre l'especificitat.</p> +</div> + +<p>La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la <a href="/ca/docs/Web/CSS/Selectors_CSS">pàgina de referència dels selectors</a> de MDN.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Milers</th> + <th scope="col">Centenes</th> + <th scope="col">Desenes</th> + <th scope="col">Unitats</th> + <th scope="col">Especificitat total</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>Abans de continuar endavant, observa un exemple en acció.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.</p> + +<ul> + <li>Els dos primers selectors competeixen per donar estil al color de fons de l'enllaç; el segon guanya i fa que el color de fons sigui blau perquè té un selector d’ID addicional en la cadena: l’especificitat és de 201 contra 101.</li> + <li>Els selectors tercer i quart competeixen per donar estil al color del text de l'enllaç: el segon guanya i fa que el text sigui blanc perquè, encara que té un selector d'elements de menys, el selector que falta es canvia per un selector de classe, que passa de valdre 1 a valdre 10. Així, doncs, l’especificitat guanyadora és de 113 contra 104.</li> + <li>Els selectors 5-7 competeixen per donar estil a la vora de l'enllaç quan el cursor hi passa per sobre. El selector sis perd clarament contra el cinc, amb una especificitat de 23 enfront d’una de 24: té un selector de menys en la cadena. El selector set, però, supera el cinc i el sis: té el mateix nombre de subselectors que cinc en la cadena, però un element ha estat canviat per un selector de classe. Així doncs, l’especificitat guanyadora és 33 contra 23 i 24.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una <strong>classe</strong> <em>milió</em> no podrien sobreescriure les regles d’un selector d’<strong>ID</strong> <em>unitat</em>.</p> + +<p>Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.</p> +</div> + +<h3 id="!important">!important</h3> + +<p>Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: <code>!important</code>. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.</p> + +<p>Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:</p> + +<ol> + <li>Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.</li> + <li>Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.</li> + <li>Els dos elements tenen una {{htmlattrxref("class")}} <code>better</code>, però el segon té un {{htmlattrxref("id")}} <code>winning</code>. Com que els ID tenen una especificitat <em>encara més elevada</em> que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són <em>molt específics</em> amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.</li> + <li>El segon element <em>si</em> adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració <code>!important</code> de la segona regla s’ha inclòs després de <code>border: none</code>, i això vol dir que aquesta declaració obté el valor de la vora <code>border</code>) de la regla anterior, tot i que l'ID té una especificitat més elevada.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: L'única manera de substituir aquesta declaració <code>!important</code> seria incloure una altra declaració <code>!important</code> en una declaració amb la <em>mateixa especificitat</em> que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.</p> +</div> + +<p>És útil saber que <code>!important</code> existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. <strong>Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa.</strong> <code>!important</code> canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.</p> + +<p>Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!</p> + +<h2 id="La_importància_de_la_ubicació_del_CSS">La importància de la ubicació del CSS</h2> + +<p>Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.</p> + +<h2 id="En_resum">En resum</h2> + +<p>Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:</p> + +<ol> + <li>Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).</li> + <li>Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).</li> + <li>Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).</li> + <li>Declaracions importants en fulls d’estil d’autor.</li> + <li>Declaracions importants en els fulls d'estil de l'usuari.</li> +</ol> + +<p>Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb <code>!important</code> en les regles d’estil.</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a> trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.</p> + +<h2 id="Què_segueix">Què segueix?</h2> + +<p>Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.</p> + +<p>Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.</p> + +<p>Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "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">Selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">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">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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media 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">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/depurar_el_css/index.html b/files/ca/learn/css/building_blocks/depurar_el_css/index.html new file mode 100644 index 0000000000..273468969e --- /dev/null +++ b/files/ca/learn/css/building_blocks/depurar_el_css/index.html @@ -0,0 +1,198 @@ +--- +title: Depurar el CSS +slug: Learn/CSS/Building_blocks/Depurar_el_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>En escriure codi CSS de vegades et pots trobar que el teu CSS no fa el que esperes. Pot ser que esperis que un determinat selector coincideixi amb un element, i no passa; o que una caixa tingui una mida diferent de la que t’esperaves. Aquest article et proporciona orientacions sobre com es pot emprendre la depuració d’un problema en CSS i et mostra com les eines de desenvolupador (DevTools) que tots els navegadors moderns inclouen et poden ajudar a esbrinar què passa.</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ó bàsica sobre les eines de desenvolupador dels navegadors i aprendre a inspeccionar i editar el CSS de manera senzilla.</td> + </tr> + </tbody> +</table> + +<h2 id="Com_accedir_a_les_eines_de_desenvolupador_del_navegador">Com accedir a les eines de desenvolupador del navegador</h2> + +<p>L'article <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Què són les eines de desenvolupador dels navegadors</a> és una guia actualitzada que explica com accedir a les eines de desenvolupament web en diversos navegadors i plataformes. Tot i que pots decidir fer el desenvolupament web majoritàriament en un navegador determinat, i per tant et familiaritzaràs amb les eines que inclou aquell navegador, val la pena saber com accedir-hi des d'altres navegadors. Això t’ajudarà si fas proves de les representacions que donen diferents navegadors.</p> + +<p>També t’adonaràs que els diversos navegadors han decidit centrar-se en àrees diferents a l’hora de crear les eines de desenvolupador. Per exemple, en Firefox hi ha algunes eines excel·lents per a treballar visualment amb la compaginació amb CSS, que et permeten inspeccionar i editar <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Dissenys de graella</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> i <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Formes</a>. Ara bé, tots els diferents navegadors tenen eines fonamentals semblants; per exemple, per a inspeccionar les propietats i els valors que s’apliquen als elements de la teva pàgina i modificar-los des de l'editor.</p> + +<p>En aquest article analitzarem algunes funcions útils de les eines de desenvolupador de Firefox per a treballar amb CSS. Per fer-ho, utilitzarem un <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">fitxer d'exemple</a>. Carrega’l en una pestanya nova si vols seguir-nos alhora, i obre les eines de desenvolupador tal com es descriu en l'article de l'enllaç anterior.</p> + +<h2 id="El_DOM_i_el_View_Source">El DOM i el View Source</h2> + +<p>Una cosa que pot sorprendre els nouvinguts a DevTools és la diferència entre el que es veu quan mires <a href="/en-US/docs/Tools/View_source">el codi font</a> d'una pàgina web o el fitxer HTML que hi ha penjat al servidor, i el que pots veure en <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">la finestra HTML</a> de DevTools. Tot i que s’assembla força al que es pot veure des de View Source, hi ha algunes diferències.</p> + +<p>En el processat pel DOM, el navegador pot haver corregit un codi HTML mal escrit. Si has tancat un element de manera incorrecta, per exemple perquè has obert un <code><h2></code> però l’has tancat amb un <code></h3></code>, el navegador esbrina què volies fer i l'HTML del DOM tanca correctament l’etiqueta d’obertura <code><h2></code> amb l’etiqueta de tancament <code></h2></code> corresponent. El navegador també normalitza tot el codi HTML i el DOM mostra, a més, tots els canvis que s’hi fan amb JavaScript.</p> + +<p>En canvi, View Source és simplement el codi font HTML que hi ha emmagatzemat en el servidor. L’<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">arbre HTML</a> de DevTools mostra exactament el que representa el navegador, de manera que et proporciona una visió detallada del que passa realment.</p> + +<h2 id="Inspecció_del_CSS_aplicat">Inspecció del CSS aplicat</h2> + +<p>Selecciona un element de la teva pàgina, ja sigui fent clic amb el botó dret del ratolí o prement la tecla ctrl per seleccionar l'opció <em>Inspeccionar</em>, o selecciona’l en l'arbre HTML de l'esquerra de la pantalla de la interfície DevTools. Selecciona l'element amb la classe <code>box1</code>; aquest és el primer element de la pàgina que té una caixa que l’envolta.</p> + +<p><img alt="Pàgina d'exemple per a aquest tutorial amb DevTools." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>Si observes la vista de visualització de regles, <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a>, que hi ha a la dreta de l’HTML, pots veure les propietats i els valors CSS que s’apliquen a aquest element. S’hi veuen les regles que s’apliquen directament a la classe <code>box1</code> i també les regles de CSS que la caixa hereta de l’element pare, en aquest cas <code><body></code>. Això és útil per a veure si s’aplica algun codi CSS que no esperes. Potser hi ha una regla que s’hereta d’un element pare i has d’afegir una regla que l’anul·li en el context d’aquest element.</p> + +<p>També és útil la capacitat d’ampliar les propietats abreviades. En el nostre exemple hem fet servir la propietat abreviada <code>margin</code>.</p> + +<p><strong>Fes clic a la fletxa petita per a ampliar la vista i que se’n mostrin les diferents propietats sense abreviar i els valors.</strong></p> + +<p><strong>Pots activar i desactivar els valors en la finestra de Visualització de regles quan aquest plafó està actiu; si hi passes el ratolí per sobre, apareixeran les caselles de verificació. Desmarca la casella de verificació d’una regla, per exemple <code>border-radius</code> i aquell CSS deixarà d’aplicar-se.</strong></p> + +<p>Pots utilitzar-ho per a fer una comparació entre A i B i decidir si alguna cosa es veu més bé amb una regla aplicada o no, i també per a ajudar a depurar-la. Per exemple, quan un disseny de pàgina web no funciona correctament i intentes esbrinar quina propietat provoca el problema.</p> + +<h2 id="Editar_els_valors">Editar els valors</h2> + +<p>A més d’activar i desactivar propietats, pots editar-ne els valors. Pot ser que vulguis veure si un altre color escau més, o modificar la mida d'alguna cosa. Les DevTools et poden ajudar a estalviar molt de temps a l'hora d'editar un full d’estil i tornar a carregar la pàgina.</p> + +<p><strong>Amb l’element <code>box1</code> seleccionat, fes clic en la mostra (el petit cercle de color) que mostra el color que s’aplica a la vora. S'obrirà un selector de colors i podràs provar amb colors diferents, que s'actualitzaran en temps real a la pàgina. De manera semblant pots canviar l'amplada o l'estil de la vora.</strong></p> + +<p><img alt="Taula d'estils de DevTools amb un selector de colors obert." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Afegir_una_propietat">Afegir una propietat</h2> + +<p>Amb les DevTools pots afegir propietats. Que t'has adonat que no vols que la caixa hereti la mida de la lletra de l'element <code><body></code> i vols definir-hi una mida de lletra pròpia? Fes-ne primer la prova en les DevTools abans d’afegir-ho al teu fitxer CSS.</p> + +<p><strong>Fes clic en la clau de tancament de la regla i comença a introduir-hi una altra declaració; en el moment que comences a escriure, DevTools mostra una llista completa de les propietats que hi coincideixen. Selecciona la propietat per a la mida de la lletra (<code>font-size</code>) i introdueix-hi el valor que vols provar. També pots fer clic al botó + per a afegir una altra regla amb el mateix selector, i afegir-hi les regles noves.</strong></p> + +<p><img alt="El tauler DevTools quan afegeixes una propietat nova a les regles, amb l’eina de compleció automàtica oberta" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha altres funcions útils en la vista de visualització de regles; per exemple, es ratllen les declaracions que tenen valors no vàlids. Pots obtenir més informació en l’article <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar i editar el CSS</a>.</p> +</div> + +<h2 id="Entendre_el_model_de_caixes">Entendre el model de caixes</h2> + +<p>En articles anteriors hem parlat del <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes</a> i del fet que tenim un model de caixes alternatiu que canvia la manera com es calculen les mides dels elements segons la mida que els proporciones, i també de l'àrea de farciment i els marges. Les DevTools et poden ajudar a entendre com es calcula la mida d'un element.</p> + +<p>La <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">vista de disposició</a> mostra un esquema del model de caixes de l’element seleccionat, juntament amb una descripció de les propietats i els valors que canvien la manera com es disposa l’element en la pàgina. Inclou una descripció de les propietats que potser no has utilitzat explícitament sobre l'element, però que tenen valors inicials definits.</p> + +<p>Una de les propietats que es detallen en aquesta taula és la propietat de dimensionament de caixa (<code>box-sizing</code>), que controla quin model de caixes utilitza l'element.</p> + +<p><strong>Compara les dues caixes amb les classes <code>box1</code> i <code>box2</code>. Totes dues tenen definida la mateixa amplada (400px), però <code>box1</code> és visualment més ampla. En la finestra de disseny pots veure que utilitza <code>content-box</code>. Aquest valor pren la mida que dones a l’element, i a continuació hi suma l’amplada de l'àrea de farciment i de les vores.</strong></p> + +<p>L’element amb una classe <code>box2</code> fa servir <code>border-box</code>, de manera que aquí l’àrea de farciment i les vores es resten de la mida que has donat a l’element. Això significa que l'espai que ocupa la caixa en la pàgina és la mida exacta que has especificat, en el nostre cas: <code>width: 400px</code>.</p> + +<p><img alt="La secció de compaginació dels DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Obtén més informació sobre com <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">examinar i inspeccionar el model de caixes</a>.</p> +</div> + +<h2 id="Resolució_de_qüestions_despecificitat">Resolució de qüestions d'especificitat</h2> + +<p>De vegades durant el desenvolupament, però en particular quan necessites editar el CSS en un lloc que ja està en actiu, et trobes amb problemes per aconseguir que s’apliquin algunes regles CSS. No importa què facis, l'element simplement sembla que no entén la regla CSS. El que acostuma a passar és que un selector més específic anul·la els teus canvis, i aquí les DevTools et poden ajudar molt.</p> + +<p>En el nostre fitxer d’exemple hi ha dues paraules incloses en un element <code><em></code>. Una es mostra de color carabassa, i l’altra de color rosa brillant. Al CSS hi hem aplicat:</p> + +<pre class="brush: css notranslate">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>Per sobre de tot això, en el full d’estil hi ha una regla amb un selector <code>.special</code>:</p> + +<pre class="brush: css notranslate">.special { + color: orange; +}</pre> + +<p>Com recordaràs de l'article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Cascada_i_herència">la cascada i l’herència</a> en què comentem l’especificitat, els selectors de classe són més específics que els selectors d’elements, així que aquest és el valor que s’aplica. Les DevTools et poden ajudar a trobar aquest tipus de problemes, sobretot si la informació està amagada en algun lloc d'un extens full d'estil.</p> + +<p><strong>Inspecciona l'element <code><em></code> amb la classe <code>.special</code> i DevTools et mostrarà que el color que s'aplica és <code>orange</code>, i la propietat <code>color</code> aplicada a l'<code>em</code> està ratllada. Aquí pots veure que el selector de classe supera el selector d’elements.</strong></p> + +<p><img alt="Un element <code>em</code> seleccionat i inspeccionat amb DevTools per veure què anul•la el color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Obtén_més_informació_sobre_les_DevTools_de_Firefox">Obtén més informació sobre les DevTools de Firefox</h2> + +<p>Hi ha molta informació sobre les DevTools de Firefox aquí a MDN. Dona una ullada a la <a href="/ca/docs/Tools">secció principal de DevTools</a> i consulta les <a href="/en-US/docs/Tools/Page_Inspector#How_to">Guies pràctiques</a> per a obtenir més detalls sobre les qüestions que hem tractat breument en aquest article.</p> + +<h2 id="Problemes_en_depurar_el_CSS">Problemes en depurar el CSS</h2> + +<p>Les DevTools poden ser de gran ajuda a l’hora de resoldre problemes en CSS, de manera que, què has de fer quan et trobes en una situació en què el CSS no es comporta com esperes? Els passos següents t’haurien d’ajudar.</p> + +<h3 id="Fes_un_pas_enrere_des_del_problema">Fes un pas enrere des del problema</h3> + +<p>Qualsevol problema de codificació pot ser frustrant, sobretot els problemes amb el CSS, perquè sovint no reps cap missatge d’error que et permeti de cercar en línia per ajudar-te a trobar una solució. Si et sents frustrat, allunyat de la qüestió durant un temps: passeja, pren-te un refresc, parla amb un company de feina o treballa en una altra cosa durant un temps. De vegades la solució apareix màgicament quan deixes de pensar en el problema i, fins i tot si no arriba, resulta molt més fàcil treballar quan et sent fresc.</p> + +<h3 id="Els_teus_HTML_i_CSS_són_vàlids">Els teus HTML i CSS són vàlids?</h3> + +<p>Els navegadors esperen que tant el teu CSS com el teu HTML estiguin escrits correctament, però els navegadors també són molt indulgents i fan tot el possible per mostrar les teves pàgines web, encara que hi hagi errors d'etiquetatge. Si hi ha errors en el codi, el navegador ha de suposar què vols dir, i pot ser que prengui una decisió diferent de la que tenies en ment. A més, dos navegadors diferents podrien fer front al problema de maneres diferents. Per tant, un bon primer pas és executar tant el codi HTML com el CSS amb un validador, per a descobrir qualsevol error i esmenar-lo.</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">Validador de CSS</a></li> + <li><a href="https://validator.w3.org/">Validador d'HTML</a></li> +</ul> + +<h3 id="Les_propietats_i_els_valors_són_compatibles_amb_el_navegador">Les propietats i els valors són compatibles amb el navegador?</h3> + +<p>Els navegadors simplement ignoren el CSS que no entenen. Si la propietat o el valor que utilitzes no és compatible amb el navegador amb què fas les proves, no es trencarà res, però no s’aplicarà el CSS. Les DevTools en general ressalten d’alguna manera les propietats i els valors que no són compatibles. En la captura de pantalla següent, el navegador no admet el subvalor {{cssxref("grid-template-columns")}}.</p> + +<p><img alt="Imatge de les DevTools del navegador amb el subvalor grid-template-columns: subgrid es mostra ratllat perquè aquest subvalor no és compatible." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>També pots donar una ullada a les taules de compatibilitat del navegador que hi ha a la part inferior de cada pàgina de propietat del projecte MDN. Et mostren la compatibilitat del navegador per a aquesta propietat, sovint desglossada si hi ha compatibilitat per a algun ús de la propietat però no d’altres. La taula següent mostra les dades de compatibilitat per a la propietat {{cssxref("shape-outside")}}.</p> + +<p>{{compat("css.shape-outside")}}</p> + +<h3 id="Alguna_cosa_anul·la_el_teu_CSS">Alguna cosa anul·la el teu CSS?</h3> + +<p>Aquí és on la informació que has après sobre l’especificitat et resultarà molt útil. Si hi ha alguna regla que anul·la el que vols fer perquè té més especificitat, pots entrar en un joc molt frustrant per a intentar esbrinar què passa. Tanmateix, com es descriu més amunt, les DevTools et mostraran quin CSS s’aplica i podràs esbrinar com anul·lar-ho amb un nou selector que sigui prou específic.</p> + +<h3 id="Fer_una_prova_reduïda_del_problema">Fer una prova reduïda del problema</h3> + +<p>Si el problema no es resol amb els passos anteriors, has d'investigar més. El millor que pots fer en aquest moment és crear una cosa que es coneix com a prova reduïda. Ser capaç de «reduir un problema» és una habilitat molt útil. T'ajuda a trobar problemes en el teu codi propi i en el dels teus companys, i també et permet informar d’errors i demanar ajuda de manera més efectiva.</p> + +<p>Una prova reduïda és un exemple de codi que mostra el problema de la manera més senzilla possible, sense contingut ni estil. Això de vegades significa eliminar del teu disseny de pàgina web el codi problemàtic i fer-ne un petit exemple que només mostri aquest codi o aquesta funció.</p> + +<p>Per a crear una prova reduïda:</p> + +<ol> + <li>Si el teu codi d’etiquetatge es genera dinàmicament (per exemple amb un CMS), fes una versió estàtica de la sortida que mostra el problema. Un lloc per compartir codi com <a href="https://codepen.io/">CodePen</a> és útil per a allotjar proves reduïdes, perquè aleshores són accessibles en línia i es poden compartir fàcilment amb els companys. Pots començar per visualitzar el codi d’origen de la pàgina i copiar l’HTML a CodePen; a continuació, inclou-hi qualsevol CSS i JavaScript rellevants. Després d'això, comprova si el problema encara hi és.</li> + <li>Si suprimir el JavaScript no fa desaparèixer el problema, no incloguis el JavaScript. Si suprimir el JavaScript fa desaparèixer el problema, elimina tant de JavaScript com et sigui possible, i deixa-hi només el que origina el problema.</li> + <li>Elimina qualsevol codi HTML que no contribueixi al problema. Elimina components, o fins i tot elements principals del disseny de pàgina. Un cop més, prova de reduir al mínim el codi mentre encara es mostri el problema.</li> + <li>Elimina qualsevol CSS que no afecti el problema.</li> +</ol> + +<p>En aquest procés podràs descobrir què causa el problema, o com a mínim el podràs activar i desactivar en eliminar-ne quelcom específic. Val la pena afegir alguns comentaris al codi a mesura que descobreixes coses. Si has de demanar ajuda, aquests comentaris mostraran a la persona que t'ajuda el que ja has provat. O també et pot acabar de donar prou informació per a poder cercar problemes i situacions semblants.</p> + +<p>Si encara no trobes la solució del problema, tenir una prova reduïda et permet demanar ajuda, publicar-la en un fòrum o mostrar-la a un col·laborador. És molt més probable obtenir ajuda si mostres que abans de fer-ho t’has pres la feina de reduir el problema i esbrinar exactament on passa. Aleshores, un desenvolupador amb més experiència pot ser capaç de detectar el problema ràpidament i orientar-te en la direcció correcta; o, encara que no sigui així, la teva prova reduïda els permetrà de donar-hi una ullada ràpida i, potser, oferir-te una mica d'ajuda.</p> + +<p>En el cas que el problema sigui un error en un navegador, la prova reduïda també es pot fer servir per a enviar un informe d’errors al proveïdor del navegador corresponent (per exemple, a la pàgina web <a href="https://bugzilla.mozilla.org">bugzilla</a> de Mozilla).</p> + +<p>A mesura que adquireixis més experiència amb el CSS aprendràs a veure amb més facilitat on hi ha els problemes. Tanmateix, fins i tot els més experimentats de nosaltres ens trobem de vegades barrinant què dimonis passa aquí. Adoptar un enfocament metòdic, fer una prova reduïda i explicar el problema a algú són possibilitats que acostumen a donar un bon resultat a l'hora de trobar una solució.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "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">Els valors i les 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> diff --git a/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html new file mode 100644 index 0000000000..2ee0dc6129 --- /dev/null +++ b/files/ca/learn/css/building_blocks/desbordament_de_contingut/index.html @@ -0,0 +1,123 @@ +--- +title: Desbordament de contingut +slug: Learn/CSS/Building_blocks/Desbordament_de_contingut +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest apartat veurem un altre concepte important en CSS: el <strong>desbordament</strong>. El desbordament és el que succeeix quan hi ha massa contingut i no cap còmodament en una caixa. En aquesta guia aprendràs què és i com gestionar-lo.</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 (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions de CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb el CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre el desbordament i com gestionar-lo.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_el_desbordament">Què és el desbordament?</h2> + +<p>Ja sabem que tot en CSS són caixes i que podem restringir la mida d’aquestes caixes assignant valors als atributs {{cssxref("width")}} i {{cssxref("height")}} (o {{cssxref("inline-size")}} i {{cssxref("block-size")}}). <strong>El desbordament és el que succeeix quan dins d’una caixa hi ha massa contingut i no hi cap.</strong> El CSS t'ofereix diverses eines per a gestionar aquest desbordament, i també és un concepte útil de comprendre en aquesta fase inicial. Et trobaràs amb situacions de desbordament força sovint quan escriguis CSS, sobretot quan aprofundeixis en el disseny de pàgines web amb CSS.</p> + +<h2 id="El_CSS_tracta_devitar_«la_pèrdua_de_dades»">El CSS tracta d'evitar «la pèrdua de dades»</h2> + +<p>Comencem per examinar dos exemples que mostren com es comporta per defecte el CSS quan es desborda.</p> + +<p>El primer és una caixa a la que s’han restringit les dimensions del bloc en donar-hi una alçada (<code>height</code>). Després s’hi ha afegit més contingut del que cap en l’espai de la caixa. El contingut de la caixa es desborda i s’encavalca desordenadament sobre el paràgraf que hi ha a sota.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>El segon consisteix en una paraula dins d'una caixa en la qual s’ha restringit la dimensió de línia. La caixa s'ha fet massa petita perquè la paraula hi càpiga, i acaba sortint més enllà de la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>Pot ser que et preguntis per què el CSS ha adoptat per defecte l’enfocament més aviat desarreglat de provocar el desbordament del contingut. Per què no amagar el contingut de més, o fer créixer la caixa?</p> + +<p>Sempre que és possible, el CSS no amaga cap part de contingut; fer-ho provocaria la pèrdua de dades, i això acostuma a ser un problema. En termes de CSS, això significa que una part del contingut desapareix. El problema que el contingut s’esvaeixi és que podria passar que no t'adonis que ha desaparegut. Pot passar que els visitants de la teva pàgina no s'adonin que ha desaparegut. Pot tractar-se del botó d'enviament d'un formulari, i ningú no podria completar el formulari; això, és un gran problema! Per tant, el CSS tendeix a desbordar-se de manera visible. D’aquesta manera és probable que t’adonis del desperfecte o, en el pitjor dels casos, que un visitant del teu lloc web t'informi que una part del contingut s’encavalca amb una altra, i que s’ha de rectificar.</p> + +<p>Si has restringit la mida d’una caixa amb <code>width</code> o <code>height</code>, el CSS suposa que saps què fas i que gestiones el potencial de desbordament. En general, restringir la mida d’un bloc és problemàtic quan es col·loca text en una caixa, perquè pot haver-hi més text del que esperaves en el moment de dissenyar un lloc web, o que el text ocupi més espai, per exemple, perquè l'usuari ha augmentat la mida de la lletra.</p> + +<p>En el proper parell d’articles veurem diferents maneres de controlar la mida que poden ser menys propenses al desbordament. Tanmateix, també pots controlar la manera com es comporta el desbordament si necessites una mida fixa. Continua llegint!</p> + +<h2 id="La_propietat_overflow">La propietat <code>overflow</code></h2> + +<p>La propietat {{cssxref("overflow")}} és la manera de prendre el control del desbordament d'un element i dir al navegador com volem que s’hi comporti. El valor per defecte del desbordament és <code>visible</code>, és per això que per defecte podem veure el nostre contingut quan es desborda.</p> + +<p>Si vols que el contingut que desborda es talli, pots establir el valor <code>overflow: hidden</code> per a la caixa. Això farà exactament el que diu: amagar el desbordament. Això pot causar la desaparició de les coses, de manera que només ho hauries de fer si ocultar contingut no causarà cap problema.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>Potser voldries posar barres de desplaçament quan el contingut es desborda. Si utilitzes <code>overflow: scroll</code>, el navegador sempre mostra les barres de desplaçament, fins i tot quan no hi ha prou contingut per a desbordar-se. Pot ser que vulguis fer-ho així perquè evita que les barres de desplaçament apareguin i desapareguin en funció del contingut.</p> + +<p><strong>Observa que si vas traient part del contingut que hi ha en la caixa següent, les barres de desplaçament de la caixa es mantenen, fins i tot quan no hi ha res per desplaçar.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>En l’exemple anterior només hem de desplaçar-nos per l’eix <code>y</code>, però tenim barres de desplaçament en els dos eixos. En lloc d’això, podries utilitzar la propietat {{cssxref("overflow-y")}} i establir <code>overflow-y: scroll</code>, i et desplaçaries només sobre l'eix <code>y</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>També pots desplaçar-te sobre l'eix <em>x</em> amb {{cssxref("overflow-x")}}, tot i que no és recomanable quan apareixen paraules llargues. Consulta les propietats {{cssxref("word-break")}} o {{cssxref("overflow-wrap")}} si has de treballar amb paraules llargues en una caixa petita. També et poden ajudar a crear caixes que s’adaptin més bé segons la quantitat de contingut alguns dels mètodes que s’exposen en l’apartat <a href="/ca/docs/Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS">Dimensionament d’elements amb CSS</a>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p>Igual que amb <code>scroll</code>, obtindràs una barra de desplaçament en la dimensió de desplaçament si hi ha prou contingut per provocar l’aparició d’una barra de desplaçament.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: pots especificar el desplaçament en x i en y amb la propietat <code>overflow</code> passant-hi dos valors. Si s’especifiquen dues paraules clau, la primera s’aplica a <code>overflow-x</code> i la segona a <code>overflow-y</code>. En cas contrari, tant <code>overflow-x</code> com <code>overflow-y</code> s’estableixen en el mateix valor. Per exemple, <code>overflow: scroll hidden</code> configuraria <code>overflow-x</code> per a <code>scroll</code> i <code>overflow-y</code> per a <code>hidden</code>.</p> +</div> + +<p>Si vols que les barres de desplaçament apareguin només si hi ha més contingut del que es pot incloure dins de la caixa, utilitza <code>overflow: auto</code>. En aquest cas, el navegador decideix quan mostra les barres de desplaçament. Els navegadors per als equips d'escriptori normalment ho fan només quan hi ha prou contingut per a provocar desbordament.</p> + +<p><strong>En l’exemple següent, elimina una mica de contingut fins que no càpiga en la caixa i observa que les barres de desplaçament desapareixen.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="El_desbordament_estableix_un_context_de_formatació_de_bloc">El desbordament estableix un context de formatació de bloc</h2> + +<p>Hi ha un concepte en CSS que s'anomena <strong>block formatting context</strong> (<em>context de formatació de bloc</em>) o BFC. No és res que t'hagi de preocupar gaire ara mateix, però és útil saber que quan empres un valor de desbordament com ara <code>scroll</code> o <code>auto</code>, crees un BFC. El resultat és que el contingut de la caixa en què has canviat el valor <code>overflow</code> es converteix en un mini disseny de pàgina web propi. Les coses que hi ha fora del contenidor no poden ficar-se en el contenidor, i res pot sobresortir de la caixa cap als elements del disseny de pàgina web del voltant. Això és per permetre el comportament amb desplaçament, perquè per a crear una experiència de desplaçament coherent, tot el contingut de la caixa ha d’estar-hi contingut i no en pot sobresortir ni superposar-se amb altres elements de la pàgina.</p> + +<h2 id="Desbordaments_no_volguts_en_el_disseny_web">Desbordaments no volguts en el disseny web</h2> + +<p>Els mètodes de disseny moderns (tal com es recull en el mòdul de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>) gestionen molt bé el desbordament. Han estat dissenyats per fer front al fet que normalment no podem predir la quantitat de contingut que hi haurà en una pàgina web. En el passat, però, els desenvolupadors solien utilitzar altures fixes per a intentar alinear els extrems inferiors de caixes que en realitat no tenien cap relació entre elles. Això era fràgil, i encara et pots topar amb aplicacions heretades en què el contingut d’una caixa se superposa amb un altre contingut de la pàgina. Si veus això, sabràs que es tracta de desbordament; l'ideal seria que tornis a fer un càlcul de les mides dels elements de disseny de la pàgina per no haver de dependre de mides de caixa fixes.</p> + +<p>En desenvolupar un lloc sempre has de tenir en compte els problemes de desbordament. Has de provar els dissenys amb quantitats de contingut grans i petites, augmentar la mida de la lletra del text i assegurar-te que el teu CSS pot fer-ho de manera coherent. És probable que et vulguis reservar les opcions de canviar el valor de desbordament per ocultar contingut o afegir barres de desplaçament només per a casos especials, per exemple, per quan realment vols una caixa amb barres de desplaçament.</p> + +<h2 id="Posa_a_prova_els_teus_coneixements">Posa a prova els teus coneixements</h2> + +<p>Hi ha moltes coses a absorbir en aquesta lliço. En recordes la informació més important? Per comprovar-ho, vés a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest breu article ha introduït el concepte de desbordament; ara entens que el CSS intenta no invisibilitzar el contingut que es desborda perquè això causa la pèrdua de dades. Has descobert que pots gestionar un desbordament potencial i també que has de fer proves per assegurar-te que la teva feina no causa accidentalment desbordaments problemàtics.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "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 diferents direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionament d’elements amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i controls 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> diff --git a/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html new file mode 100644 index 0000000000..5ff34b8d93 --- /dev/null +++ b/files/ca/learn/css/building_blocks/dimensionar_elements_en_css/index.html @@ -0,0 +1,129 @@ +--- +title: Dimensionar elements en CSS +slug: Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>En els articles que hem vist fins ara has descobert diverses maneres de dimensionar els elements d'una pàgina web amb CSS. És important entendre la importància de les diferents característiques dels elements del teu disseny, i en aquest article resumim les maneres com assignar una mida als elements amb CSS i definim uns quants termes relatius al dimensionament que t'ajudaran en el futur.</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 (mira <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>Entendre les diferents maneres com podem assignar mides als elements amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="La_mida_natural_o_intrínseca_de_les_coses">La mida natural o intrínseca de les coses</h2> + +<p>Els elements HTML tenen una mida natural predeterminada abans que els afecti cap codi CSS. Un exemple senzill n’és una imatge. Una imatge té una amplada i una alçada definides en el fitxer d'imatge, que s'incorpora a la pàgina. Aquesta mida es descriu com la <strong>mida intrínseca</strong>, que prové de la imatge mateixa.</p> + +<p>Quan poses una imatge en una pàgina i no en canvies l’alçada i l’amplada, ja sigui amb atributs en l’etiqueta <code><img></code> o amb el CSS, es mostra amb aquesta mida intrínseca. Hem donat a la imatge de l’exemple següent una vora perquè puguis veure la dimensió que té el fitxer.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>Un element {{htmlelement("div")}} buit, però, no té mida pròpia. Si afegeixes un element {{htmlelement("div")}} sense contingut al teu HTML, i hi poses una vora, com hem fet abans amb la imatge, veuràs que a la pàgina apareix una línia. Es tracta de la vora de l'element replegat sobre si mateix perquè no té contingut que el mantingui obert. En el nostre exemple següent, aquesta vora s'estén per tota l'amplada de l’element que el conté, perquè és un element que té un comportament de bloc, amb el qual ja t'hauries de començar a familiaritzar. No té alçada (ni mida en la dimensió del bloc) perquè no hi ha contingut.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>Afegeix una mica de text a l'interior de l'element buit de l'exemple anterior. Ara la vora envolta aquest text perquè el contingut defineix l'altura de l'element. La mida d'aquest element <code><div></code> en la dimensió del bloc prové, per tant, de la mida del contingut. Una vegada més, aquesta és la mida intrínseca de l'element: el contingut en defineix la mida.</p> + +<h2 id="Configurar_una_mida_específica">Configurar una mida específica</h2> + +<p>Per descomptat, podem donar una mida específica als elements del nostre disseny. Quan es dona una mida a un element (el contingut del qual hauria d’encaixar en aquesta mida) ens hi referim com la <strong>mida extrínseca</strong>. Agafa els elements <code><div></code> de l'exemple anterior: podem donar-los valors específics d'amplada i d'alçada, i aleshores tindran aquesta mida, independentment del contingut que hi fiquem a dins. Tal com vam descobrir en l’anterior <a href="/ca/docs/Learn/CSS/Building_blocks/Desbordament_de_contingut">article sobre el desbordament</a>, una altura fixa pot provocar el desbordament del contingut si el contingut no cap en l’espai de la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>Arranjar l'alçada dels elements amb longituds o percentatges s’ha de fer amb molta cura justament pel problema del desbordament.</p> + +<h3 id="Lús_de_percentatges">L'ús de percentatges</h3> + +<p>En molts sentits, els percentatges actuen com unitats de longitud, i com hem comentat en l'<a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">article sobre valors i unitats</a>, sovint es poden intercanviar amb les longituds. Quan fas servir un percentatge has de ser conscient <em>de què</em> és percentatge. En el cas d’una caixa dins d’un altre contenidor, si dones a la caixa secundària un percentatge d’amplada, serà un percentatge de l’amplada del contenidor principal.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>Això és perquè els percentatges es calculen a partir de la mida del bloc contenidor. Sense un percentatge aplicat, el nostre element <code><div></code> ocuparia el 100% de l'espai disponible, perquè és un element de bloc. Si hi donem un percentatge d’amplada, es converteix en un percentatge de l’espai que ompliria normalment.</p> + +<h3 id="Marges_i_àrea_de_farciment_com_a_percentatges">Marges i àrea de farciment com a percentatges</h3> + +<p>Si estableixes <code>margins</code> i <code>padding</code> com percentatges, pot ser que observis algun comportament estrany. En l’exemple següent hi ha una caixa. Hem assignat a la caixa interior un marge ({{cssxref("margin")}}) del 10% i un àrea de farciment ({{cssxref("padding")}}) també del 10%. L'àrea de farciment i el marge de les parts superior i inferior de la caixa tenen la mateixa mida que els marges de l’esquerra i la dreta.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>Podries esperar, per exemple, que el percentatge dels marges superior i inferior sigui un percentatge de l'alçada de l'element, i que el percentatge dels marges esquerre i dret sigui un percentatge de l'amplada de l'element. Però aquest no és el cas!</p> + +<p>Quan utilitzes marges i àrees de farciment definits en percentatges, el valor es calcula a partir de la <strong>mida de l’element de línia</strong>, per tant, de l'amplada de l'element quan es treballa en un llenguatge horitzontal. En el nostre exemple, tots els marges i l'àrea de farciment són del 10% de l'amplada de l'element. Això significa que pots tenir marges i àrea de farciment de la mateixa mida al voltant de la caixa. És un fet que val la pena de recordar si utilitzes els percentatges d'aquesta manera.</p> + +<h2 id="Mida_mínima_i_màxima">Mida mínima i màxima</h2> + +<p>A més d’assignar mides fixes a les coses, podem demanar al CSS que doni a un element una mida mínima o màxima. Si tens una caixa que pot contenir una quantitat variable de contingut i vols que sempre tingui una alçada determinada <em>com a mínim</em>, pots establir la propietat {{cssxref("min-height")}}. La caixa sempre serà almenys d'aquesta alçada, però creixerà si hi ha més contingut del que pot contenir amb aquesta alçada mínima.</p> + +<p>En l'exemple següent hi ha dues caixes, totes dues amb una alçada establerta en 150 píxels. La caixa de l’esquerra té 150 píxels d’alçada; la caixa de la dreta ha augmentat la mida a més de 150 píxels perquè té més contingut i no hi cabria.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>Això és molt útil per tractar amb quantitats de contingut variables i evitar desbordaments.</p> + +<p>Un ús comú de {{cssxref("max-width")}} és reduir les imatges si no hi ha prou espai perquè es mostrin amb l’amplada intrínseca, alhora que es garanteix que no superen l'alçada de la caixa.</p> + +<p>Per exemple, si una imatge té una amplada intrínseca més petita que la de l’element que la conté i hi estableixes una amplada de <code>width: 100%</code>, la imatge s’estirarà i es farà gran, i podria pixelar-se. En canvi, si l’amplada intrínseca fos més gran que l’element que la conté, desbordaria. És probable que no vulguis que passi cap d'aquestes dues coses.</p> + +<p>Si en lloc d'això utilitzes <code>max-width: 100%</code>, la imatge es pot fer més petita que la seva mida intrínseca, però no es farà més gran que el 100% de la seva mida.</p> + +<p>En l'exemple següent hem utilitzat dues vegades la mateixa imatge. A la primera hi hem donat <code>width: 100%</code>, i com que està continguda en un recipient més gran, s'estén per tota l'amplada del contenidor. La segona imatge, en canvi, té <code>max-width: 100%</code>, i no s’estira per ocupar tot el recipient. La tercera caixa torna a contenir la mateixa imatge, amb <code>max-width: 100%</code>; en aquest cas pots observar com s’ha reduït per encaixar dins la caixa.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>Aquesta tècnica s’utilitza per fer que les imatges siguin <em>adaptatives</em>, de manera que quan es visualitzen en un dispositiu més petit es redueixen adequadament. Però no has d'utilitzar aquesta tècnica per carregar imatges molt grans i després reduir-les en el navegador. Les imatges han de tenir una mida adequada i no han de ser més grans del que es necessita en relació amb la mida més gran en què es poden mostrar en el disseny. La descàrrega d’imatges massa grans fa que el teu lloc web vagi més lent i pot ser més car per als usuaris que tenen una connexió amb comptador de dades.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Troba més informació sobre les <a href="/ca/docs/Learn/HTML/Multimèdia_i_incrustar/Imatges_sensibles">tècniques d’imatges adaptatives</a>.</p> +</div> + +<h2 id="Unitats_de_finestra_gràfica">Unitats de finestra gràfica</h2> + +<p>La finestra gràfica (que és l’àrea visible de la teva pàgina en el navegador que utilitzes per visitar un lloc web) també té una mida. En CSS hi ha unes unitats que es relacionen amb la mida de la finestra gràfica: la unitat <code>vw</code> per a l'amplada i la unitat <code>vh</code> per a l'alçada. Amb aquestes unitats pots establir mides relatives a la finestra gràfica de l'usuari.</p> + +<p><code>1vh</code> és igual a l'1% de l’alçada de la finestra gràfica, i <code>1vw</code> és igual a l’1% de l’amplada de la finestra gràfica. Pots fer servir aquestes unitats per a dimensionar les caixes, però també el text. A l'exemple següent tenim una caixa que té una mida de 20vh i 20vw. La caixa conté una lletra <code>A</code>, que ha rebut un valor {{cssxref("font-size")}} de 10vh.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong>Si canvies els valors de <code>vh</code> i <code>vw</code>, canvia la mida de la caixa o de la lletra; si canvies la mida de la finestra gràfica, també canvien les mides de la caixa i de la lletra perquè es mostren en relació amb la finestra gràfica. Per veure com canvia l'exemple quan canvies la mida de la finestra gràfica, has de carregar l'exemple en una finestra nova del navegador que puguis redimensionar (perquè la teva finestra gràfica és l’<code><iframe></code> incorporat que conté l'exemple anterior). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Obre l'exemple</a>, redimensiona la finestra del navegador i observa què passa amb la mida de la caixa i del text.</strong></p> + +<p>Dimensionar les coses segons la finestra gràfica pot ser útil en els teus dissenys. Per exemple, si vols que una secció principal es mostri a pantalla completa abans que la resta del contingut, fes que aquella part de la pàgina tingui un 100vh d’alçada i empenyerà la resta del contingut fora de la finestra gràfica, i això significa que només apareixerà quan l'usuari es desplaci pel document.</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article t'ha proporcionat un resum dels problemes principals que podries trobar-te a l’hora de dimensionar les coses en un lloc web. En passar a l’article de <a href="/ca/docs/Learn/CSS/Disseny_CSS">Disseny de pàgines web amb CSS</a>, la mida serà un aspecte molt important per a dominar els diferents mètodes de disseny, per la qual cosa val la pena entendre els conceptes que s'han explicat aquí abans de continuar.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "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 diferents direccions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en 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> diff --git a/files/ca/learn/css/building_blocks/fons_i_vores/index.html b/files/ca/learn/css/building_blocks/fons_i_vores/index.html new file mode 100644 index 0000000000..2e2ce4727c --- /dev/null +++ b/files/ca/learn/css/building_blocks/fons_i_vores/index.html @@ -0,0 +1,307 @@ +--- +title: Fons i vores +slug: Learn/CSS/Building_blocks/Fons_i_vores +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest article veurem algunes de les coses creatives que pots fer amb fons i vores amb el CSS. Des d’afegir degradats o imatges de fons fins a arrodonir cantonades; els fons i les vores són la solució per a moltes qüestions d’estil en CSS.</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>Aprendre a aplicar estil al fons i la vora de les caixes.</td> + </tr> + </tbody> +</table> + +<h2 id="Aplicar_estil_als_fons_amb_CSS">Aplicar estil als fons amb CSS</h2> + +<p>La propietat CSS {{cssxref("background")}} és una propietat abreviada que substitueix un seguit de propietats de fons que presentarem en aquest article. Quan et trobes amb una propietat de fons complexa en un full d’estil, pot ser que et sembli una mica difícil d’entendre perquè es poden estar passant molts valors alhora.</p> + +<pre class="brush: css notranslate"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>Més endavant en aquest tutorial tornarem a l’objectiu de com funcionen les propietats abreviades, però primer fem un cop d’ull a les diverses coses que pots fer amb els fons amb el CSS, a partir de cadascuna de les propietats dels fons.</p> + +<h3 id="Els_colors_de_fons">Els colors de fons</h3> + +<p>La propietat {{cssxref("background-color")}} defineix el color de fons de qualsevol element en CSS. La propietat accepta qualsevol color (<code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code>) vàlid. Un color de fons s'estén per sota del contingut i del farciment de la caixa.</p> + +<p>En l'exemple següent hem utilitzat diversos valors de color per a afegir un color de fons a la caixa, un títol d’encapçalament i un element {{htmlelement("span")}}.</p> + +<p><strong>Juga a fer servir qualsevol valor de <a href="/en-US/docs/Web/CSS/color_value"><color></a> disponible.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="Les_imatges_de_fons">Les imatges de fons</h3> + +<p>La propietat {{cssxref("background-image")}} permet visualitzar una imatge de fons en un element. En l'exemple següent hi ha dues caixes: una té una imatge de fons que és més gran que la caixa, l'altra té una imatge petita en forma d’estrella.</p> + +<p>Aquest exemple mostra dues coses sobre les imatges de fons. La imatge gran no es redueix de manera predeterminada per a adaptar-se a la caixa, sinó que només en veiem un tros petit d’una cantonada, mentre que la imatge petita es mostra en mosaic fins a omplir la caixa. La imatge en aquest cas és en realitat una única estrella.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>Si especifiques un color de fons a més d'una imatge de fons, la imatge es mostra a sobre. Afegeix una propietat <code>background-color</code> a l'exemple de dalt i observa-ho en acció.</strong></p> + +<h4 id="Control_amb_la_propietat_background-repeat">Control amb la propietat <code>background-repeat</code></h4> + +<p>La propietat {{cssxref("background-repeat")}} s'utilitza per a controlar el comportament en mosaic de les imatges. Els valors disponibles són:</p> + +<ul> + <li><code>no-repeat</code>: evita que el fons es repeteixi.</li> + <li><code>repeat-x</code>: repeteix horitzontalment.</li> + <li><code>repeat-y</code>: repeteix verticalment.</li> + <li><code>repeat</code>: el valor per defecte; repeteix en totes dues direccions.</li> +</ul> + +<p><strong>Prova aquests valors en l'exemple següent. Hem establert la propietat al valor <code>no-repeat</code>, de manera que només veuràs una estrella. Prova els diferents valors <code>repeat-x</code> i <code>repeat-y</code> i observa’n els efectes.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="Les_mides_de_la_imatge_de_fons">Les mides de la imatge de fons</h4> + +<p>En l'exemple anterior hi ha una imatge gran que ha acabat retallada perquè és més gran que el fons. En aquest cas podríem utilitzar la propietat {{cssxref("background-size")}}, que pot prendre valors de <a href="/en-US/docs/Web/CSS/length">longitud</a> o <a href="/en-US/docs/Web/CSS/percentage">percentatge</a>, per a dimensionar la imatge i que s'ajusti al fons.</p> + +<p>També pots utilitzar paraules clau:</p> + +<ul> + <li><code>cover</code>: el navegador ajusta la imatge perquè cobreixi tota l’àrea de la caixa, sense canviar-ne la relació d’aspecte. En aquest cas una part de la imatge pot acabar fora de la caixa.</li> + <li><code>contain</code>: el navegador ajusta la imatge a la mida adequada perquè s’adapti a la caixa. En aquest cas, pots acabar amb buits a banda i banda o a la part superior i inferior de la imatge, si la relació d'aspecte de la imatge és diferent de la de la caixa.</li> +</ul> + +<p>En l'exemple següent hem utilitzat la imatge més gran de l'exemple anterior i unitats de longitud per dimensionar-la dins de la caixa. Observa que això ha distorsionat la imatge.</p> + +<p>Fes la prova següent.</p> + +<ul> + <li>Canvia les unitats de longitud que s’hi utilitzen i modifica’n la mida del fons.</li> + <li>Elimina les unitats de longitud i observa què passa quan fas servir <code>background-size: cover</code> o <code>background-size: contain</code>.</li> + <li>Si la imatge és més petita que la caixa, pots canviar el valor de <code>background-repeat</code> perquè la imatge es repeteixi.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="La_ubicació_de_la_imatge_de_fons">La ubicació de la imatge de fons</h4> + +<p>La propietat {{cssxref("background-position")}} et permet triar la posició en què apareix la imatge de fons en la caixa a la qual s'aplica. Fa servir un sistema de coordenades en què el <code>(0,0)</code> és a la part superior esquerra de la caixa, i la caixa es posiciona sobre els eixos horitzontal (<code>x</code>) i vertical ((<code>y</code>).</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El valor per defecte de <code>background-position</code> és <code>(0,0)</code>.</p> +</div> + +<p>Els valors de <code>background-position</code> més comuns prenen dos valors independents: un valor horitzontal seguit d'un valor vertical.</p> + +<p>També pots utilitzar paraules clau com <code>top</code> i <code>right</code> (busca la resta de possibilitats en la pàgina sobre la propietat {{cssxref("background-position")}}):</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>I <a href="/en-US/docs/Web/CSS/length">longituds</a> i <a href="/en-US/docs/Web/CSS/percentage">percentatges</a>:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>També pots barrejar valors de paraules clau amb longituds o percentatges, per exemple:</p> + +<pre class="brush: css notranslate">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>Finalment, també pots utilitzar una sintaxi de 4 valors per a indicar una distància des de determinades cantonades de la caixa; la unitat de longitud en aquest cas és un desplaçament del valor que la precedeix. Així, doncs, en el CSS de sota, posicionem el fons a 20px de l’extrem superior i 10px de l’extrem dret:</p> + +<pre class="brush: css notranslate"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>Juga amb aquests valors en l'exemple següent i mou l'estrella per la caixa.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <code>background-position</code> és una propietat abreviada de {{cssxref ("background-position-x")}} i {{cssxref ("background-position-y")}}, que et permeten establir els diferents valors de posició de l'eix per separat.</p> +</div> + +<h3 id="Degradats_de_fons">Degradats de fons</h3> + +<p>Un degradat (quan s'utilitza per a un fons) actua igual que una imatge i també es defineix amb la propietat {{cssxref("background-image")}}.</p> + +<p>Pots llegir més informació sobre els diferents tipus de degradats i què pots fer amb ells en la pàgina sobre els tipus de dades <code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code> de MDN. Una manera divertida de jugar amb els degradats és utilitzar un dels molts generadors de degradats CSS que hi ha disponibles al web, <a href="https://cssgradient.io/">com aquest</a>. Pots crear un degradat i copiar i enganxar el codi font que el genera.</p> + +<p>Prova alguns degradats diferents en l'exemple següent. En les dues caixes hi ha, respectivament, un degradat lineal que s’estén per tota la caixa i un degradat radial amb una mida fixa, que per tant es repeteix.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="Múltiples_imatges_de_fons">Múltiples imatges de fons</h3> + +<p>També és possible posar més d’una imatge de fons: especifica amb una sola propietat <code>background-image</code> els diversos valors, separats cadascun per una coma.</p> + +<p>En fer-ho, pot passar que les imatges de fons es superposin entre elles. Els fons es disposen amb la darrera imatge de fons enumerada a la part inferior de la pila, i cada imatge anterior s’apila a sobre de la que la segueix en el codi.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Els degradats es poden barrejar feliçment amb imatges de fons normals.</p> +</div> + +<p>Les altres propietats <code>background-*</code> també poden tenir valors separats per comes, de la mateixa manera que <code>background-image</code>:</p> + +<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>Cada valor de les diverses propietats coincideix amb els valors que estan en la mateixa posició en les altres propietats. Aquí sobre, per exemple, el valor per a la propietat <code>background-repeat</code> d’<code>image1</code> és <code>no-repeat</code>. Però, què passa quan propietats diferents tenen una quantitat diferent de valors? La resposta és que els valors que ocupen les posicions més petites s'alternen cíclicament: en l'exemple anterior hi ha quatre imatges de fons però només dos valors <code>background-position</code>. Les dues primeres posicions s’apliquen a les dues primeres imatges, i després els valores es tornen a assignar cíclicament: el valor de la primera posició s’aplica a <code>image3</code>, i el valor de segona posició, a <code>image4</code>.</p> + +<p><strong>Juguem! En l'exemple següent hem inclòs dues imatges. Per a comprovar l'ordre d'apilament, canvia la imatge de fons que apareix primer en la llista. O juga amb les altres propietats i canvia’n els valors de posició i mida, o la repetició.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="Ancoratge_del_fons">Ancoratge del fons</h3> + +<p>Una altra opció que hi ha disponible per als fons és especificar com es desplacen quan es desplaça el contingut. Això es controla amb la propietat {{cssxref("background-attachment")}}, que pot prendre els valors següents:</p> + +<ul> + <li><code>scroll</code>: Fa que el fons de l'element es desplaci quan es desplaça la pàgina. Si el contingut de l'element es desplaça, el fons no es mou. En efecte, el fons està fixat a la mateixa posició de la pàgina, de manera que es desplaça a mesura que la pàgina es desplaça.</li> + <li><code>fixed</code>: Fa que el fons d'un element es fixi a la finestra de visualització, de manera que no es desplaça quan es desplaça el contingut de la pàgina o de l'element. Roman sempre en la mateixa posició a la pantalla.</li> + <li><code>local</code>: Aquest valor es va afegir més endavant (només és compatible amb Internet Explorer 9+, mentre que els altres són compatibles amb IE4+) perquè el valor <code>scroll</code> és més aviat confús i en molts casos no fa realment el que vols. El valor <code>local</code> fixa el fons a l'element en què està configurat, de manera que quan l'element es desplaça, el fons es desplaça amb ell.</li> +</ul> + +<p>La propietat {{cssxref("background-attachment")}} només funciona quan hi ha contingut pel qual et pots desplaçar; hem preparat un exemple que mostra les diferències entre els tres valors: fes-hi un cop d’ull a <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (també en pots consultar el <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">codi font</a> aquí).</p> + +<h3 id="Ús_de_la_propietat_abreviada_background">Ús de la propietat abreviada background</h3> + +<p>Com hem esmentat al començament d'aquest article, sovint veuràs fons que estan especificats amb la propietat {{cssxref("background")}}. Aquesta propietat abreviada et permet configurar totes les propietats diferents alhora.</p> + +<p>Si fas servir diversos fons, has d’especificar totes les propietats per al primer fons, i a continuació afegir-hi el fons següent, després d’una coma. En l'exemple següent hi ha un degradat amb una mida i una posició, i després un fons d'imatge amb <code>no-repeat</code> i una posició, i després un color.</p> + +<p>Quan s’escriuen els valor abreviats de les imatges de fons cal seguir unes regles, per exemple:</p> + +<ul> + <li>Només es pot especificar un fons de color després de la coma final.</li> + <li>El valor <code>background-size</code> només es pot incloure immediatament després de <code>background-position</code>, separat amb el caràcter «/», així: <code>center/80%</code>.</li> +</ul> + +<p>Consulta la pàgina sobre {{cssxref("background")}} de MDN per a veure’n totes les possibilitats.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="Consideracions_d’accessibilitat_relatives_als_fons">Consideracions d’accessibilitat relatives als fons</h3> + +<p>Quan poses un text sobre una imatge o un color de fons, t’has d’assegurar que té prou contrast perquè els usuaris el poden llegir. Si poses una imatge de fons i el text s’hi llegeix a sobre, també has d'especificar un color de fons que permeti llegir el text si la imatge no es carrega.</p> + +<p>Els lectors de pantalla no poden analitzar les imatges de fons, de manera que aquestes haurien de ser purament decoratives; qualsevol contingut important hauria de formar part de la pàgina HTML, i no estar continguda en segon pla.</p> + +<h2 id="Vores">Vores</h2> + +<p>En aprendre el model de caixes, vam descobrir com afecten les vores a la mida de la caixa. En aquesta secció veurem com emprar les vores de manera creativa. Normalment, quan afegim vores a un element amb CSS, utilitzem una propietat abreviada que estableix el color, l'amplada i l'estil de la vora en una línia de CSS.</p> + +<p>Podem establir una vora per als quatre costats d'una caixa amb la propietat {{cssxref("border")}}:</p> + +<pre class="brush: css notranslate"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>O podem establir una sola vora de la caixa, per exemple:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>Cadascuna d’aquestes propietats abreviades seria:</p> + +<pre class="brush: css notranslate"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>I per a les no abreviades seria:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aquestes propietats de la vora superior, dreta, inferior i esquerra també tenen mapades propietats <em>lògiques</em> relacionades amb el mode d'escriptura del document (per exemple, text d'esquerra a dreta o de dreta a esquerra, o de dalt a baix). Ho explorarem en l’article següent, que inclou <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">el tractament del text en diverses direccions</a>.</p> +</div> + +<p><strong>Amb les vores es poden emprar una gran varietat d'estils. En l'exemple següent hem utilitzat un estil de vora diferent per als quatre costats de la caixa. Juga amb l'estil, l'amplada i el color de la vora per veure com funcionen les vores.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="Les_cantonades_arrodonides">Les cantonades arrodonides</h3> + +<p>L’arrodoniment de les cantonades d'una caixa s’aconsegueix amb la propietat {{cssxref("border-radius")}} i les propietats associades que es relacionen amb cada cantó de la caixa. Es poden utilitzar dues longituds o percentatges com a valor; el primer valor defineix el radi horitzontal, i el segon el radi vertical. En molts casos només faràs servir un valor, que s'utilitzarà per a tots dos.</p> + +<p>Per exemple, pots fer que les quatre cantonades d’una caixa tinguin un radi de 10px:</p> + +<pre class="brush: css notranslate"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>O que la cantonada superior dreta tingui un radi horitzontal d’1em i un radi vertical del 10%:</p> + +<pre class="brush: css notranslate"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>Hem fixat les quatre cantonades de l'exemple següent i després hem canviat els valors de l'extrem superior dret perquè sigui diferent. Juga amb els valors i canvia les cantonades. Consulta la pàgina de propietats de {{cssxref("border-radius")}} i esbrina les opcions de sintaxi disponibles.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més proves per verificar que retens la informació abans de seguir a<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders"> Test your skills: Backgrounds and Borders</a>.<br> + </p> + +<h2 id="Resum">Resum</h2> + +<p>En aquest articles hem descobert força conceptes, i pots veure que hi ha molt per afegir a un fons o una vora d'una caixa. Consulta les diverses pàgines de propietat si vols obtenir més informació sobre alguna de les funcions que hem comentat. Cada pàgina de MDN té més exemples d’ús amb què pots jugar i ampliar els teus coneixements.</p> + +<p>En el proper article descobrirem com interactua el mode d'escriptura del document amb el CSS. Què passa quan el text no flueix d'esquerra a dreta?</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "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 de continguts</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en 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> diff --git a/files/ca/learn/css/building_blocks/images_media_form_elements/index.html b/files/ca/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..cb1ce805bc --- /dev/null +++ b/files/ca/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,193 @@ +--- +title: 'Imatges, media i elements de formulari' +slug: Learn/CSS/Building_blocks/Images_media_form_elements +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>En aquest article analitzarem com es tracten certs elements especials en CSS. Les imatges, altres media i els elements de formulari es comporten una mica diferent que les caixes pel que fa a la possibilitat d’aplicar-los disseny amb CSS. Entendre què és possible i què no ens estalviarà unes quantes frustracions, i en aquest article destacarem alguns dels conceptes principals que has de conèixer.</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 (mira <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>Comprendre el comportament inusual d'alguns elements quan se’ls aplica disseny amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Elements_de_recol·locació">Elements de recol·locació</h2> + +<p>Les imatges i els vídeos es descriuen com <strong><a href="/en-US/docs/Web/CSS/Replaced_element">elements de recol·locació</a></strong>. Això significa que no es pot actuar sobre el disseny intern d'aquests elements amb CSS, sinó només sobre la seva posició en la pàgina web entre la resta d’elements. Com veurem, però, hi ha diverses coses que el CSS pot fer amb una imatge.</p> + +<p>Alguns elements de recol·locació, com ara les imatges i els vídeos, també presenten una <strong>relació d'aspecte</strong>. Això vol dir que tenen una mida tant en la dimensió horitzontal (x) com en la vertical (y), i de manera predeterminada es mostren amb les dimensions intrínseques del fitxer.</p> + +<h2 id="Les_mides_de_les_imatges">Les mides de les imatges</h2> + +<p>Com ja saps d'aquests articles, tot en CSS genera una caixa. Si col·loques una imatge dins d’una caixa que és més petita o més gran que les dimensions intrínseques del fitxer d’imatges en qualsevol direcció, o bé apareixerà més petita que la caixa o bé desbordarà. Has de prendre una decisió sobre què passa amb el desbordament.</p> + +<p>En l'exemple següent hi ha dues caixes, totes dues de 200 píxels:</p> + +<ul> + <li>Una conté una imatge més petita de 200 píxels: és més petita que la caixa i no l’ocupa tota per a omplir-la.</li> + <li>L'altra és més gran de 200 píxels i desborda més enllà dels límits de la caixa.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>Què podem fer amb el problema del desbordament?</p> + +<p>Com hem vist en <a href="/ca/docs/Learn/CSS/Building_blocks/Dimensionar_elements_en_CSS">l'article anterior</a>, una tècnica habitual és assignar a la propietat <code>max-width</code> de la imatge una amplada del 100%. Això permet fer la imatge més petita que la caixa, però no més gran. Aquesta tècnica funciona amb altres elements de recol·locació com ara <code><a href="/ca/docs/Web/HTML/Element/video"><video></a></code> o <code><a href="/ca/docs/Web/HTML/Element/iframe"><iframe></a></code>.</p> + +<p><strong>Afegeix a l'element <code><img></code> de l'exemple anterior <code>max-width: 100%</code>. Observa que la imatge més petita es manté inalterada, però la més gran es fa més petita per a encaixar a la caixa.</strong></p> + +<p>Pots prendre altres decisions sobre el comportament de les imatges dins dels contenidors. Per exemple, pots voler donar a una imatge una mida perquè ompli completament una caixa.</p> + +<p>La propietat {{cssxref("object-fit")}} et pot ajudar amb això. La propietat <code>object-fit</code> et permet donar a l'element de recol·locació la mida adequada per adaptar-se a una caixa de diverses maneres.</p> + +<p>A continuació, hem utilitzat el valor <code>cover</code>, que redueix la mida de la imatge de manera que omple la caixa perfectament, tot mantenint la relació d’aspecte. Com que la relació d’aspecte es manté, la caixa talla algunes parts de la imatge.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p>Si fem servir el valor <code>contain</code>, la imatge es redueix fins que és prou petita per adaptar-se a la caixa. Això pot donar lloc a un format panoràmic si la imatge no presenta la mateixa relació d'aspecte que la caixa.</p> + +<p>També pots provar el valor <code>fill</code>, que omple la caixa però no manté la relació d’aspecte.</p> + +<h2 id="Elements_de_recol·locació_en_el_disseny_de_pàgines_web">Elements de recol·locació en el disseny de pàgines web</h2> + +<p>A mesura que vagis fent servir diverses tècniques de disseny de pàgines web amb CSS en elements de reemplaçament, és possible que t’adonis que es comporten una mica diferent d'altres elements. Per exemple, els elements d’un disseny de pàgina flexible o de graella per defecte ocupen tota l’àrea. Les imatges, en canvi, no s’estiren, sinó que s’alineen amb l’inici de l’àrea de la graella o del contenidor flexible.</p> + +<p>Observa que això passa en l'exemple següent, en què hi ha un contenidor amb dues columnes i dues files, que inclou quatre elements. Tots els elements <code><div></code> tenen un color de fons i s’estiren fins que ocupen tota la fila i la columna. Però la imatge no s’estira.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>Si has seguit aquests articles en ordre, potser encara no has arribat a al disseny de pàgina web. Aleshores, senzillament tingues en compte que els elements de recol·locació tenen comportaments predeterminats diferents quan passen a formar part d'un disseny en graella o d'un disseny flexible, essencialment per a evitar que el disseny de pàgina web els deformi de manera estranya.</p> + +<p>Pots aconseguir que la imatge ocupi tot l’espai de la cel·la de la quadrícula en què es troba, si fas això:</p> + +<pre class="brush: css">img { + width: 100%; + height: 100%; +}</pre> + +<p>Però això deformaria també la imatge, de manera que probablement no és el que busques.</p> + +<h2 id="Els_elements_de_formulari">Els elements de formulari</h2> + +<p>Els elements de formulari poden ser un problema a l’hora de fer un disseny de pàgina web amb CSS, i <a href="/ca/docs/Learn/HTML/Forms">l'article sobre formularis web</a> conté guies detallades sobre els aspectes més complicats relatius a aquest tema, que no reproduirem completament en aquest article. Tanmateix, en aquesta secció val la pena que destaquem uns quants elements bàsics.</p> + +<p>Molts controls de formulari s'afegeixen amb l’element <code><a href="/ca/docs/Web/HTML/Element/input"><input></a></code>; això defineix des de camps de formulari senzills, com ara entrades de text, fins a camps més complexos que s’han afegit en l'HTML5 com ara els selectors de color i de dates. I encara hi ha altres elements, com ara <code><a href="/ca/docs/Web/HTML/Element/textarea"><textarea></a></code>, per a entrades de text multilínia, i elements que s'utilitzen per a contenir i etiquetar parts de formularis com <code><a href="/ca/docs/Web/HTML/Element/fieldset"><fieldset></a></code> i <code><a href="/ca/docs/Web/HTML/Element/legend"><legend></a></code>.</p> + +<p>L'HTML5 també inclou atributs que permeten als desenvolupadors web indicar quins camps són obligatoris, i fins i tot el tipus de contingut que cal introduir. Si l’usuari introdueix alguna cosa inesperada o deixa un camp obligatori en blanc, el navegador pot mostrar un missatge d’error. Els diversos navegadors no presenten cap coherència ni homogeneïtzació pel que fa a l’estil que apliquen a aquests elements.</p> + +<h3 id="Aplicar_estil_a_elements_dentrada_de_text">Aplicar estil a elements d'entrada de text</h3> + +<p>Resulta força fàcil aplica estil als elements que permeten l’entrada de text, com <code><input type="text"></code>, alguns tipus específics, com <code><input type="email"></code>, i l'element <code><textarea></code>, i tendeixen a comportar-se igual que les altres caixes de la teva pàgina web. L'estil predeterminat d'aquests elements varia segons del sistema operatiu i el navegador amb què l'usuari visita el lloc web.</p> + +<p>En l'exemple següent hem aplicar estil a algunes entrades de text amb CSS; observa que alguns elements com ara les vores, els marges i l'àrea de farciment s'apliquen tal com s'esperaria. Utilitzem selectors d’atribut per a seleccionar els diferents tipus d’entrada. Ajusta les vores, afegeix colors de fons als camps i canvia el tipus de lletra i l'àrea de farciment; prova de canviar la manera com es veu aquest formulari.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>Important</strong>: Quan canvies l'estil dels elements de formulari t’has d’assegurar-te que a l'usuari encara li resulta evident que són elements de formulari. Podries crear una entrada de formulari sense vores i amb un fons que gairebé no es distingís del contingut que l’envolta, que potser seria difícil de reconèixer per a emplenar-la.</p> +</div> + +<p>Tal com s’explica en els articles sobre <a href="/en-US/docs/Learn/Forms/Styling_web_forms">l’aplicació d’estil a formularis</a> de la part d’HTML d’aquest curs, molts dels tipus d'entrada més complexos els proporciona el sistema operatiu i no és possible aplicar-los disseny. Per tant, has d’assumir que els diferents visitants sempre veuran els formularis ben diferents, i hauràs de provar els formularis complexos en diversos navegadors.</p> + +<h3 id="Elements_de_formulari_i_herència">Elements de formulari i herència</h3> + +<p>En alguns navegadors, els elements de formulari no hereten l'estil de lletra per defecte. Per tant, si vols estar segur que els teus camps de formulari utilitzen el tipus de lletra definit en el cos (<code>body</code>) de l’HTML o en un element pare, has d’afegir al teu CSS aquesta regla:</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="Elements_de_formulari_i_mida_de_les_caixes">Elements de formulari i mida de les caixes</h3> + +<p>En els diversos navegadors els elements de formulari utilitzen regles diferents per a assignar les mides de les caixes per a diferents controls de formulari. En el nostre article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">el model de caixes</a> has après com assignar una mida a les caixes amb la propietat <code>box-sizing</code> i pots fer servir aquests coneixements a l’hora d’aplicar disseny als formularis per a garantir una experiència coherent a l’hora d’establir les amplades i les alçades dels elements d’un formulari.</p> + +<p>Una bona idea per a obtenir una experiència d’usuari coherent és establir els marges i l'àrea de farciment a <code>0</code> per a tots els elements i afegir-los després en aplicar un disseny concret a cada control.</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="Altres_paràmetres_útils">Altres paràmetres útils</h3> + +<p>A més de les regles que hem esmentat, també hauries de configurar <code>overflow: auto</code> a <code><textarea></code> per evitar que Internet Explorer mostri una barra de desplaçament quan no faci falta:</p> + +<pre class="brush: css">textarea { + overflow: auto; +}</pre> + +<h3 id="Posar-ho_tot_«a_zero»">Posar-ho tot «a zero»</h3> + +<p>Com a últim pas, podem agrupar les diverses propietats que hem comentat en el «formulari base» següent, que proporciona una base coherent sobre la qual treballar. Això inclou tots els elements que hem esmentat en les últimes tres seccions:</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Molts desenvolupadors utilitzen fulls d'estil de normalització, que creen un conjunt d'estils de referència que utilitzen en tots els projectes. Normalment, aquests fulls d'estil fan coses semblants a les que acabem de descriure i garanteixen que qualsevol cosa que en navegadors diferents pugui ser diferent està configurada de manera predeterminada abans de fer la teva feina amb el CSS. Ara aquests fulls d’estil de normalització no són tan importants com abans, perquè els navegadors acostuma a presentar visualitzacions més coherents que en el passat. Tanmateix, si vols fer un cop d’ull a un exemple, ves a <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, que és un full d’estil molt popular que s’ha utilitzat com a base per molts projectes.</p> +</div> + +<p>Si vols obtenir més informació sobre com aplicar estil als formularis, fes un cop d’ull als dos articles de la secció d’HTML d’aquestes guies.</p> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Disseny de formularis web</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aspectes avançats d'aplicació d’estil a formularis web</a></li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>En aquest article s’han destacat algunes de les diferències amb què et trobaràs quan treballis amb imatges, media i altres elements poc habituals en CSS. En l’article següent examinarem alguns consells que et seran d’utilitat quan hagis de dissenyar taules HTML.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "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">Els valors i les 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, media 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> diff --git a/files/ca/learn/css/building_blocks/index.html b/files/ca/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..d42bb1fe85 --- /dev/null +++ b/files/ca/learn/css/building_blocks/index.html @@ -0,0 +1,72 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><strong>Translation in progress.</strong></p> + +<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html new file mode 100644 index 0000000000..175379f986 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/combinadors/index.html @@ -0,0 +1,111 @@ +--- +title: Combinadors +slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p> + +<p>Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Selector_de_descendents">Selector de descendents</h2> + +<p>Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):</p> + +<pre class="brush: css notranslate">body article p</pre> + +<p>Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.</p> + +<p>En l'exemple següent se seleccionen només els elements <code><p></code> que hi ha dins d'un element que està etiquetat amb una classe <code>.box</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p> + +<h2 id="Combinador_de_fills">Combinador de fills</h2> + +<p>El combinador de fills és un símbol de «més gran que» (<code>></code>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <code><p></code> que són descendents directes d’elements <code><article></code>:</p> + +<pre class="brush: css notranslate">article > p</pre> + +<p>En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <code><li></code> que són fills directes de <code><ul></code> i els apliquem una vora superior.</p> + +<p>Si suprimim l’element <code>></code>, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <code><li></code> adquireixen una vora vermella.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p> + +<h2 id="Selector_de_germans_adjacents">Selector de germans adjacents</h2> + +<p>El selector de germans adjacents (<code>+</code>) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <code><img></code> que hi ha just a continuació d‘elements <code><p></code>:</p> + +<pre class="brush: css notranslate">p + img</pre> + +<p>Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<code><h1></code> i hi apliquem estil.</p> + +<p>Si insereixes qualsevol altre element, com ara <code><h2></code>, entre <code><h1></code> i <code><p></code>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p> + +<h2 id="Selector_de_germans_general">Selector de germans general</h2> + +<p>Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (<code>~</code>). Per a seleccionar tots els elements <code><img></code> que estiguin <em>en qualsevol lloc</em> a continuació dels elements <code><p></code>, hem de fer això:</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>En l'exemple següent seleccionem tots els elements <code><p></code> que hi ha després de <code><h1></code>, i tot i que en el document també hi ha un element <code><div></code>, se selecciona també l'element <code><p></code> que hi ha després.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p> + +<h2 id="Lús_dels_combinadors">L'ús dels combinadors</h2> + +<p>Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <code><ul></code>, pots utilitzar el codi següent:</p> + +<pre class="brush: css notranslate">ul > li[class="a"] { }</pre> + +<p>Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.</p> + +<p>Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.</p> + +<h2 id="Comprova_les_teves_habilitats">Comprova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p> + +<h2 id="Avancem">Avancem</h2> + +<p>Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes del CSS</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "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 de les diverses direccions del text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elements d'imatge, de mèdia i 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">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitzar el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/index.html b/files/ca/learn/css/building_blocks/selectors_css/index.html new file mode 100644 index 0000000000..4bd7b005de --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/index.html @@ -0,0 +1,223 @@ +--- +title: Selectors CSS +slug: Learn/CSS/Building_blocks/Selectors_CSS +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Conèixer amb detall com funcionen els selectors CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_un_selector">Què és un selector?</h2> + +<p>Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el <em>subjecte del selector</em>.</p> + +<p><img alt="Una mica de codi amb un h1 ressaltat." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com <code>h1</code>, o una classe com <code>.special</code>).</p> + +<p>En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’<a href="https://www.w3.org/TR/selectors-3/">especificació de selectors de nivell 3</a>, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.</p> + +<h2 id="Llistes_de_selectors">Llistes de selectors</h2> + +<p>Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una <em>llista de selectors</em> que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a <code>h1</code> i també per a una classe <code>.special</code>, ho podríem escriure com dues regles separades.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.</p> + +<pre class="brush: css notranslate"><code>h1, .special { + color: blue; +} </code></pre> + +<p>L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.</p> + +<pre class="brush: css notranslate"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> + +<p>Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.</p> + +<p>En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a <code>h1</code>.</p> + +<pre class="brush: css notranslate"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>Tanmateix, en combinar-les, no s’aplicarà estil ni a <code>h1</code> ni a la classe, perquè la regla ja no és vàlida.</p> + +<pre class="brush: css notranslate"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="Tipus_de_selectors">Tipus de selectors</h2> + +<p>Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.</p> + +<h3 id="Selectors_de_tipus_de_classe_i_d’ID">Selectors de tipus, de classe i d’ID</h3> + +<p>Aquest grup inclou selectors que delimiten un element HTML, com ara <code><h1></code>.</p> + +<pre class="brush: css notranslate">h1 { }</pre> + +<p>També inclou selectors que delimiten una classe:</p> + +<pre class="brush: css notranslate">.box { }</pre> + +<p>o un ID:</p> + +<pre class="brush: css notranslate">#unique { }</pre> + +<h3 id="Selectors_datribut">Selectors d'atribut</h3> + +<p>Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:</p> + +<pre class="brush: css notranslate">a[title] { }</pre> + +<p>O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:</p> + +<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> + +<h3 id="Les_pseudoclasses_i_els_pseudoelements">Les pseudoclasses i els pseudoelements</h3> + +<p>Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse <code>:hover</code>, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:</p> + +<pre class="brush: css notranslate">a:hover { }</pre> + +<p>També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, <code>::first-line</code> sempre selecciona la primera línia de text que hi ha dins d’un element (<code><p></code> en el cas següent), i actua com si un <code><span></code> delimités la primera línia amb format i després la seleccionés.</p> + +<pre class="brush: css notranslate">p::first-line { }</pre> + +<h3 id="Combinadors">Combinadors</h3> + +<p>El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <code><article></code> amb el combinador de fills (<code>></code>):</p> + +<pre class="brush: css notranslate">article > p { }</pre> + +<h2 id="Propers_passos">Propers passos</h2> + +<p>Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID">els tipus de selectors de classe i d’ID</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="Taula_de_referència_dels_selectors">Taula de referència dels selectors</h2> + +<p>La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Tutorial de CSS</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_Tipus">Selector de tipus</a></td> + <td><code>h1 { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_tipus">Selectors de tipus</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_Universal">Selector universal</a></td> + <td><code>* { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#El_selector_universal">El selector universal</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_Classe">Selector de classe</a></td> + <td><code>.box { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_classe">Selectors de classe</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_ID">Selector d’ID</a></td> + <td><code>#unique { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_ID">Selectors d’ID</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_d'Atribut">Selector d'atribut</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut">Selectors d'atribut</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Selectors de pseudoclasse</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_una_pseudoclasse">Pseudoclasse</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Selectors de pseudoelement</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_un_pseudoelement">Pseudoelements</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_descendents">Combinador descendent</a></td> + <td><code>article p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors">Combinador descendent</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_fills">Combinador de fills</a></td> + <td><code>article > p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Selector_de_combinaci%C3%B3_delements_fill">Combinador de fills</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_de_germans_adjacents">Combinador de germans adjacents</a></td> + <td><code>h1 + p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_adjacents">Germans adjacents</a></td> + </tr> + <tr> + <td><a href="/ca/docs/Web/CSS/Selectors_general_de_germans">Combinador general de germans</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_generals">Germans general</a></td> + </tr> + </tbody> +</table> + +<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">Selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">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">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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media 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">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..b28cb4873a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,398 @@ +--- +title: Pseudoclasses i pseudoelements +slug: Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p> + +<p>El conjunt següent de selectors que veurem s’anomenen <strong>pseudoclasses</strong> i <strong>pseudoelements</strong>. N'hi ha una bona quantitat i sovint serveixen per a propòsits força específics. Un cop que hauràs après a utilitzar-los, pots mirar-te la llista i veure si n’hi ha cap que et serveixi per a la tasca que intentes assolir. Una vegada més afegim que la pàgina de MDN corresponent a cada selector et pot ser útil per a esbrinar-ne la compatibilitat dels navegadors.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir més informació sobre els selectors de pseudoclasse i pseudoelement.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_és_una_pseudoclasse">Què és una pseudoclasse?</h2> + +<p>Una pseudoclasse és un selector que selecciona elements que es troben en un estat específic. Per exemple, són el primer element del seu tipus o bé el cursor del ratolí els passa per sobre. Solen actuar com si haguessis aplicat una classe a alguna part del document, i sovint t’ajuden a reduir l'excés de classes en l'etiquetatge i et proporcionen un codi més flexible i fàcil de mantenir.</p> + +<p>Les pseudoclasses són paraules clau que comencen amb dos punts (:):</p> + +<pre class="notranslate">:<em>pseudo-class-name</em></pre> + +<h3 id="Un_exemple_senzill_de_pseudoclasse">Un exemple senzill de pseudoclasse</h3> + +<p>Donem una ullada a un exemple senzill. Si volem que el primer paràgraf d'un article es vegi més gran i en negreta, podem afegir una classe a aquest paràgraf i després afegir CSS a aquesta classe, tal com es mostra en el primer exemple següent:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p> + +<p>Tanmateix, això pot resultar molest a l'hora de fer-ne el manteniment; i si afegim un tipus nou de paràgraf a la part superior del document? Hauríem d’incloure la classe en el nou paràgraf. Doncs, en comptes d’afegir la classe, podríem utilitzar el selector de pseudoclasse {{cssxref(":first-child")}}; això seleccionarà <em>sempre</em> el primer element fill de l'article i ja no caldria editar l’HTML (que no sempre és possible, perquè de vegades es genera des d'un CMS).</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p> + +<p>Totes les pseudoclasses es comporten de la mateixa manera. Etiqueten una part del document que es troba en un estat determinat, i es comporten com si haguessis afegit una classe a l'HTML. Pots veure’n més exemples a MDN:</p> + +<ul> + <li><code><a href="/ca/docs/Web/CSS/:last-child">:last-child</a></code></li> + <li><code><a href="/ca/docs/Web/CSS/:only-child">:only-child</a></code></li> + <li><code><a href="/ca/docs/Web/CSS/:invalid">:invalid</a></code></li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: és vàlid escriure pseudoclasses i pseudoelements sense que les precedeixi cap selector d'element. En l'exemple anterior, podríem escriure <code>:first-child</code> i la regla s'aplicaria a qualsevol element que sigui el primer element d'un element <code><article></code>, no només primers paràgrafs. <code>:first-child</code> equival a <code>*:first-child</code>. Però normalment volem més control i cal ser més específics.</p> +</div> + +<h3 id="Pseudoclasses_dacció_dusuari">Pseudoclasses d'acció d'usuari</h3> + +<p>Algunes pseudoclasses només actuen quan l'usuari interactua d'alguna manera amb el document. Aquestes pseudoclasses <strong>d'acció de l'usuari</strong>, de vegades denominades <strong>pseudoclasses dinàmiques</strong>, actuen com si s'hagués afegit una classe a l'element quan l'usuari hi interactua. Els exemples inclouen:</p> + +<ul> + <li><code><a href="/ca/docs/Web/CSS/:invalid">:hover</a></code>; ja l’hem esmentada; només actua si l'usuari passa el cursor del ratolí per sobre d'un element, normalment un enllaç.</li> + <li><code><a href="/ca/docs/Web/CSS/:focus">:focus</a></code>; només actua si l'usuari selecciona l'element amb controls de teclat.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p> + +<h2 id="Què_és_un_pseudoelement">Què és un pseudoelement?</h2> + +<p>Els pseudoelements es comporten d’una manera similar, però actuen com si afegissis un element HTML completament nou a l’etiquetatge, en lloc d’aplicar una classe als elements que ja hi ha. Els pseudoelements comencen amb un doble dos punts <code>::</code>.</p> + +<pre class="notranslate"><em>::pseudo-element-name</em></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Alguns pseudoelements originals utilitzaven la sintaxi de dos punts simple, i de vegades encara ho pots veure en algun codi o alguns exemples. Els navegadors moderns admeten els primers pseudoelements amb una sintaxi de dos punts simple o de dos punts doble per a tenir compatibilitat cap enrere.</p> +</div> + +<p>Per exemple, si volguessis seleccionar la primera línia d’un paràgraf, podries etiquetar-la amb un element <code><span></code> i utilitzar un selector d’elements; però això falla si el nombre de paraules que has etiquetat és superior o inferior a l'amplada de l'element principal. Com que no podem saber quantes paraules cabran en una línia perquè això canvia amb l’amplada de la pantalla o la mida de la lletra, no és possible fer-ho només afegint HTML.</p> + +<p>El selector de pseudoelements <code>::first-line</code> ho fa de manera segura: selecciona només la primera línia, encara que el nombre de paraules augmenti o disminueixi.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p> + +<p>Actua com si hi hagués una etiqueta <code><span></code> màgica en aquesta primera línia que s'actualitza cada cop que canvia la longitud de la línia.</p> + +<p>Pots veure que això selecciona la primera línia dels dos paràgrafs.</p> + +<h2 id="Combinar_pseudoclasses_i_pseudoelements">Combinar pseudoclasses i pseudoelements</h2> + +<p>Si vols que la primera línia del primer paràgraf es vegi en negreta, pots agrupar els selectors <code>:first-child</code> i <code>::first-line</code>. Prova d’introduir en l'exemple en viu anterior el CSS següent. Amb això demanem que volem seleccionar la primera línia del primer element <code><p></code>, que hi ha dins d’un element <code><article></code>.</p> + +<pre class="brush: css notranslate"><code>article p:first-child::first-line { + font-size: 120%; + font-weight: bold; +}</code></pre> + +<h2 id="Generar_contingut_amb_before_i_after">Generar contingut amb <code>::before</code> i <code>::after</code></h2> + +<p>Hi ha un parell de pseudoelements especials, que s'utilitzen juntament amb la propietat <code><a href="/en-US/docs/Web/CSS/content">content</a></code> per a inserir contingut al document mitjançant CSS.</p> + +<p>Pots utilitzar-los per a inserir una cadena de text, com en l'exemple en viu següent. Prova de canviar el valor de text de la propietat {{cssxref("content")}} i observa com canvia a la sortida. També pots canviar el pseudoelement <code>::before</code> per <code>::after</code> i observa que el text s’insereix al final de l'element, en lloc del principi.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p> + +<p>Inserir cadenes de text amb CSS, de fet, no es fa gaire sovint a la web, perquè aquest text no és accessible per a alguns lectors de pantalla i pot ser difícil de trobar i editar en el futur.</p> + +<p>Un ús més vàlid d'aquests pseudoelements és inserir una icona, per exemple la petita fletxa afegida de l'exemple següent, que és un indicador visual que no volem que un lector de pantalla llegeixi:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p> + +<p>Aquests pseudoelements també s'utilitzen amb freqüència per a inserir una cadena buida, a la qual després pots aplicar estil com a qualsevol altre element de la pàgina.</p> + +<p>En l'exemple següent hem afegit una cadena buida amb el pseudoelement <code>::before</code>. L'hem establert en <code>display: block</code> per a poder-hi aplicar una amplada i una alçada. A continuació, utilitzem el CSS per donar-hi estil com a qualsevol altre element. Pots jugar-hi amb el CSS i canviar-ne l’aspecte i el comportament.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p> + +<p>L’ús dels pseudoelements <code>::before</code> i <code>::after</code>, juntament amb la propietat <code>content</code>, es coneix en CSS com el «contingut generat» i veuràs que aquesta tècnica s’utilitza sovint per a diverses tasques. Un bon exemple és el lloc <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, que t'ajuda a generar una fletxa amb CSS. Observa el CSS mentre crees la teva fletxa i fixa’t com funcionen els pseudoelements {{cssxref("::before")}} i {{cssxref("::after")}}. Sempre que vegis aquests selectors, cerca en la propietat {{cssxref("content")}} per esbrinar què s'ha afegit al document.</p> + +<h2 id="Secció_de_referència">Secció de referència</h2> + +<p>Hi ha un gran nombre de pseudoclasses i pseudoelements, i és útil tenir una llista en la qual s’hi faci referència. A continuació es mostren unes taules amb enllaços que apunten a les seves pàgines de referència en MDN. Fes-les servir de referència per veure de quines possibilitats d’etiquetatge disposes.</p> + +<h3 id="Pseudoclasses">Pseudoclasses</h3> + +<p>Paged Media, selecciona les pàgines de l’esquerra.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref(":active") }}</td> + <td>Selecciona un element quan l’usuari l'activa (per exemple, fent-hi clic a sobre).</td> + </tr> + <tr> + <td>{{ Cssxref(":any-link") }}</td> + <td>Selecciona els estats <code>:link</code> i <code>:visited</code> d'un enllaç.</td> + </tr> + <tr> + <td>{{ Cssxref(":blank") }}</td> + <td>Selecciona un <a href="/ca/docs/Web/HTML/Element/input">element <code><input></code></a> que té el valor d'entrada buit.</td> + </tr> + <tr> + <td>{{ Cssxref(":checked") }}</td> + <td>Selecciona un botó d'opció o una casella de selecció en l'estat de seleccionat.</td> + </tr> + <tr> + <td>{{ Cssxref(":current") }}</td> + <td>Selecciona l'element o un antecessor de l'element que es mostra actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":default") }}</td> + <td>Selecciona un o diversos elements de la interfície d'usuari que són els elements predeterminats entre un conjunt d'elements similars.</td> + </tr> + <tr> + <td>{{ Cssxref(":dir") }}</td> + <td>Selecciona un element a partir de la direccionalitat (el valor de l’atribut <code><a href="/ca/docs/Web/HTML/Global_attributes/dir">dir</a></code> en HTML o la propietat <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> en CSS).</td> + </tr> + <tr> + <td>{{ Cssxref(":disabled") }}</td> + <td>Selecciona els elements d'una interfície d'usuari que estan deshabilitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":empty") }}</td> + <td>Selecciona un element que no té fills, excepte, opcionalment, un espai blanc.</td> + </tr> + <tr> + <td>{{ Cssxref(":enabled") }}</td> + <td>Selecciona els elements d'una interfície d'usuari que estan habilitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":first") }}</td> + <td>En <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, selecciona la primera pàgina.</td> + </tr> + <tr> + <td>{{ Cssxref(":first-child") }}</td> + <td>Selecciona un element que és el primer entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":first-of-type") }}</td> + <td>Selecciona un element d'un tipus determinat entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus") }}</td> + <td>Selecciona l’element que té el focus.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-visible")}}</td> + <td>Selecciona l’element que té el focus i que el focus està visible per a l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":focus-within") }}</td> + <td>Selecciona l’element que té el focus més l’element que té un descendent amb el focus.</td> + </tr> + <tr> + <td>{{ Cssxref(":future") }}</td> + <td>Selecciona els elements que estan just després de l’element actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":hover") }}</td> + <td>Selecciona un element quan l'usuari hi interactua.</td> + </tr> + <tr> + <td>{{ Cssxref(":indeterminate") }}</td> + <td>Selecciona els elements d'una interfície d'usuari, el valor dels quals estan en un estat indeterminat; generalment es tracta de <a href="/en-US/docs/Web/HTML/Element/input/checkbox">caselles de selecció</a>.</td> + </tr> + <tr> + <td>{{ Cssxref(":in-range") }}</td> + <td>Selecciona un element amb un rang de valors quan té el valor dins del rang.</td> + </tr> + <tr> + <td>{{ Cssxref(":invalid") }}</td> + <td>Selecciona un element, com ara <code><input></code>, que estigui en un estat no vàlid.</td> + </tr> + <tr> + <td>{{ Cssxref(":lang") }}</td> + <td>Selecciona un element segons l’idioma (valor de l’atribut <a href="/ca/docs/Web/HTML/Global_attributes/lang">lang</a> en HTML).</td> + </tr> + <tr> + <td>{{ Cssxref(":last-child") }}</td> + <td>Selecciona l’element que és l’últim entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":last-of-type") }}</td> + <td>Selecciona un element d'un tipus determinat que és l’últim entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":left") }}</td> + </tr> + <tr> + <td>{{ Cssxref(":link")}}</td> + <td>Selecciona els enllaços no visitats.</td> + </tr> + <tr> + <td>{{ Cssxref(":local-link")}}</td> + <td>Selecciona els enllaços que apunten a les pàgines que estan al mateix lloc web que el document actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":is", ":is()")}}</td> + <td>Selecciona qualsevol dels selectors de la llista de selectors.</td> + </tr> + <tr> + <td>{{ Cssxref(":not") }}</td> + <td>Selecciona coses que no han estat seleccionades per altres selectors, que es converteixen en valor d'aquest selector.</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-child") }}</td> + <td>Selecciona elements d'entre una llista de germans: els germans es combinen amb una fórmula del tipus <var>an+b</var> (per exemple, 2n + 1 coincidiran amb els elements 1, 3, 5, 7, etc. Tots els imparells).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-of-type") }}</td> + <td>Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <code><p></code>): els germans es corresponen amb una fórmula de la forma <var>an+b</var> (per exemple, 2n + 1 coincidiria amb els elements 1, 3, 5, 7, etc. Tots els imparells).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-child") }}</td> + <td>Selecciona elements d'entre una llista de germans, comptant enrere des del final. Els germans es corresponen amb una fórmula del tipus <var>an+b</var> (per exemple, 2n + 1 coincidiria amb l’últim element de la seqüència, després els dos elements anteriors, un altre cop els dos elements anteriors, etc. Tots els imparells, comptant des del final).</td> + </tr> + <tr> + <td>{{ Cssxref(":nth-last-of-type") }}</td> + <td>Selecciona elements d'un tipus determinat d'entre una llista de germans (per exemple, <code><p></code>), comptant cap enrere des del final. Els germans es corresponen amb una fórmula de la forma <var>an+b</var> (per exemple, 2n + 1 coincidiria amb l’últim element d’aquest tipus de la seqüència, després els dos elements anteriors a aquell, i un altre cop dos elements anteriors, etc. Tots els imparells, comptant des del final).</td> + </tr> + <tr> + <td>{{ Cssxref(":only-child") }}</td> + <td>Selecciona un element que no té germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":only-of-type") }}</td> + <td>Selecciona un element que és l'únic del seu tipus entre els seus germans.</td> + </tr> + <tr> + <td>{{ Cssxref(":optional") }}</td> + <td>Selecciona els elements de formulari que no són necessaris.</td> + </tr> + <tr> + <td>{{ Cssxref(":out-of-range") }}</td> + <td>Selecciona un element amb un interval quan el seu valor està fora del rang.</td> + </tr> + <tr> + <td>{{ Cssxref(":past") }}</td> + <td>Selecciona els elements que són anteriors a l’element actiu.</td> + </tr> + <tr> + <td>{{ Cssxref(":placeholder-shown") }}</td> + <td>Selecciona un element d’entrada que mostra el marcador de posició del text.</td> + </tr> + <tr> + <td>{{ Cssxref(":playing") }}</td> + <td>Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat» quan aquest element «es reprodueix».</td> + </tr> + <tr> + <td>{{ Cssxref(":paused") }}</td> + <td>Selecciona un element que representa un àudio, un vídeo o un recurs similar, que pot ser «reproduït» o «pausat», quan aquest element està «en pausa».</td> + </tr> + <tr> + <td>{{ Cssxref(":read-only") }}</td> + <td>Selecciona un element no modificable per l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":read-write") }}</td> + <td>Selecciona un element modificable per l'usuari.</td> + </tr> + <tr> + <td>{{ Cssxref(":required") }}</td> + <td>Selecciona els elements de formulari que són necessaris.</td> + </tr> + <tr> + <td>{{ Cssxref(":right") }}</td> + <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a>, selecciona les pàgines de la dreta.</td> + </tr> + <tr> + <td>{{ Cssxref(":root") }}</td> + <td>Selecciona un element que és l'arrel del document.</td> + </tr> + <tr> + <td>{{ Cssxref(":scope") }}</td> + <td>Selecciona qualsevol element que sigui un element d'abast.</td> + </tr> + <tr> + <td>{{ Cssxref(":valid") }}</td> + <td>Selecciona un element, com ara <code><input></code>, que estigui en un estat vàlid.</td> + </tr> + <tr> + <td>{{ Cssxref(":target") }}</td> + <td>Selecciona l’element al qual apunta l’URL activa (és a dir, si té un ID que coincideix amb l’<a href="https://en.wikipedia.org/wiki/Fragment_identifier">identificador de fragment</a> de l’URL actiu).</td> + </tr> + <tr> + <td>{{ Cssxref(":visited") }}</td> + <td>Selecciona els enllaços visitats.</td> + </tr> + </tbody> +</table> + +<h3 id="Pseudoelements">Pseudoelements</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ Cssxref("::after") }}</td> + <td>Selecciona un element que pot aparèixer després del contingut actiu de l'element originari.</td> + </tr> + <tr> + <td>{{ Cssxref("::before") }}</td> + <td>Selecciona un element que pot aparèixer abans del contingut actiu de l'element originari.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-letter") }}</td> + <td>Selecciona la primera lletra de l'element.</td> + </tr> + <tr> + <td>{{ Cssxref("::first-line") }}</td> + <td>Selecciona la primera línia de l'element.</td> + </tr> + <tr> + <td>{{ Cssxref("::grammar-error") }}</td> + <td>Selecciona una part del document que conté un error de gramàtica que indica el navegador.</td> + </tr> + <tr> + <td>{{ Cssxref("::selection") }}</td> + <td>Selecciona la part del document seleccionat.</td> + </tr> + <tr> + <td>{{ Cssxref("::spelling-error") }}</td> + <td>Selecciona una part del document que conté un error d'ortografia que indica el navegador.</td> + </tr> + </tbody> +</table> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en 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> diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html new file mode 100644 index 0000000000..6ab61828f8 --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/selectors_atribut/index.html @@ -0,0 +1,154 @@ +--- +title: Selectors d'atribut +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> + +<p>Com ja saps a partir de l’estudi de l'HTML, els elements poden tenir atributs, que donen més detalls sobre l'element que s’etiqueta. En CSS pots utilitzar selectors d’atributs per a seleccionar elements que tenen uns atributs determinats. Aquest article et mostra com utilitzar aquests selectors tan útils.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (consulta <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Conèixer els selectors d’atributs i com utilitzar-los.</td> + </tr> + </tbody> +</table> + +<h2 id="Selectors_de_presència_i_de_valor">Selectors de presència i de valor</h2> + +<p>Aquests selectors permeten seleccionar un element només per la presència d’un atribut (per exemple <code>href</code>) o per diferents coincidències amb el valor de l’atribut.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>]</code></td> + <td><code>a[title]</code></td> + <td>Selecciona elements que tenen com a nom d'atribut <em>attr</em> el valor entre claudàtors.</td> + </tr> + <tr> + <td><code>[<em>attr</em>=<em>value</em>]</code></td> + <td><code>a[href="https://example.com"]</code></td> + <td>Selecciona elements que tenen el nom d'atribut <em>attr</em>, el valor del qual sigui exactament la cadena de caràcters que hi ha entre cometes: <em>value</em>.</td> + </tr> + <tr> + <td><code>[<em>attr</em>~=<em>value</em>]</code></td> + <td><code>p[class~="special"]</code></td> + <td> + <p>Selecciona elements amb un nom d’atribut <em>attr</em> el valor del qual és exactament <em>value</em>, o elements que tenen un atribut <em>attr</em> que conté un o més valors, dels quals almenys un coincideix amb <em>value</em>.</p> + + <p>Observa que en una llista de diversos valors, els valors se separen amb espais en blanc.</p> + </td> + </tr> + <tr> + <td><code>[<em>attr</em>|=<em>value</em>]</code></td> + <td><code>div[lang|="zh"]</code></td> + <td>Selecciona elements que tenen un nom d’atribut <em>attr</em> que pot ser exactament <em>value</em> o que pot començar per <em>value</em> seguit immediatament d’un guionet.</td> + </tr> + </tbody> +</table> + +<p>En l'exemple següent pots veure que com es fan servir aquests selectors.</p> + +<ul> + <li>Utilitzant <code>li[class]</code> podem seleccionar qualsevol selector amb un atribut de classe. Això ho fa coincidir tot menys el primer element de la llista.</li> + <li><code>li[class="a"]</code> relaciona un selector amb una classe <code>a</code>, però no un selector amb una classe <code>a</code> amb una altra classe separada per un espai que sigui part del valor. Selecciona el segon element de llista.</li> + <li><code>li[class~="a"]</code> selecciona una classe <code>a</code>, però que també tingui un valor que contingui la classe <code>a</code> com a part d'una llista separada amb espais. Selecciona el segon i el tercer elements de la llista.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> + +<h2 id="Selectors_de_subcadena">Selectors de subcadena</h2> + +<p>Aquests selectors permeten obtenir una concordança més ajustada a partir de les subcadenes que conté el valor del teu atribut. Per exemple, si hi ha les classes <code>box-warning</code> i <code>box-error</code> i vols seleccionar tot el que comença amb la cadena «box-», pots seleccionar-les totes dues amb <code>[class^="box-"]</code>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Exemple</th> + <th scope="col">Descripció</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>[<em>attr</em>^=<em>value</em>]</code></td> + <td><code>li[class^="box-"]</code></td> + <td>Selecciona elements amb un nom d'atribut <em>attr</em> que conté la subcadena <em>value</em> al principi.</td> + </tr> + <tr> + <td><code>[<em>attr</em>$=<em>value</em>]</code></td> + <td><code>li[class$="-box"]</code></td> + <td>Selecciona elements amb un nom d’atribut <em>attr</em> que conté la subcadena <em>value</em> al final.</td> + </tr> + <tr> + <td><code>[<em>attr</em>*=<em> </em>]</code></td> + <td><code>li[class*="box"]</code></td> + <td>Relaciona elements amb un nom d'atribut <em>attr</em> que conté almenys una ocurrència de la subcadena <em>value</em> en qualsevol lloc de la cadena.</td> + </tr> + </tbody> +</table> + +<p>L’exemple següent mostra l'ús d'aquests selectors:</p> + +<ul> + <li><code>li[class^="a"]</code> selecciona qualsevol valor d'atribut que comença amb <code>a</code>; és a dir, selecciona els dos primers elements de la llista.</li> + <li><code>li[class$="a"]</code> selecciona qualsevol valor d'atribut que acaba amb <code>a</code>; és a dir, selecciona el primer i el tercer elements de la llista.</li> + <li><code>li[class*="a"]</code> selecciona qualsevol valor d'atribut en què <code>a</code> apareix en alguna part de la cadena, de manera que selecciona tots els elements de la nostra llista.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> + +<h2 id="Distinció_entre_majúscules_i_minúscules">Distinció entre majúscules i minúscules</h2> + +<p>Si vols seleccionar els valors d'atribut tant si estan escrits en majúscules com en minúscules, pots utilitzar el valor <code>i</code> abans del claudàtor de tancament. Aquest indicador informa el navegador que els caràcters ASCII han de coincidir independentment de si les lletres són majúscules o minúscules. Sense aquest indicador, la correspondència entre els valors es farà segons les directrius del llenguatge del document pel que fa a la distinció entre majúscules i minúscules; en el cas de l'HTML, distingeix entre majúscules i minúscules.</p> + +<p>En l'exemple següent, el primer selector coincideix amb un valor que comença per <code>a</code>; només coincideix el primer element de la llista perquè els altres dos elements de la llista comencen amb una A majúscula. El segon selector no distingeix entre majúscules i minúscules, així que la correspondència és entre tots els elements de la llista.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha un valor <code>s</code> més recent, que imposa la coincidència de majúscules i les minúscules en contextos en què normalment no es dona; tanmateix, aquest valor encara no té gaire compatibilitat amb els navegadors i no resulta gaire útil en el context de l’HTML.</p> +</div> + +<h2 id="Propers_passos">Propers passos</h2> + +<p>Ara que hem acabat amb els selectors d’atribut, pots avançar cap a l’article següent sobre les <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements">pseudoclasses i els pseudoelements</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en 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> diff --git a/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html new file mode 100644 index 0000000000..2cdbdc244a --- /dev/null +++ b/files/ca/learn/css/building_blocks/selectors_css/selectors_de_tipus_classe_i_id/index.html @@ -0,0 +1,117 @@ +--- +title: 'Selectors de tipus, classe i ID' +slug: Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p> + +<p>En aquest article farem un cop d’ull als selectors més senzills que hi ha disponibles, i que probablement utilitzaràs més a l'hora de treballar.</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 com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Obtenir més informació sobre els diferents selectors CSS que podem utilitzar per a aplicar CSS a un document.</td> + </tr> + </tbody> +</table> + +<h2 id="Selectors_de_tipus">Selectors de tipus</h2> + +<p>A vegades, a un <strong>selector de tipus</strong> també se'l denomina <em>selector de noms d'etiqueta</em> o <em>selector d'elements</em>, perquè selecciona una etiqueta/element HTML al document. En l’exemple següent hem utilitzat selectors <code>span</code>, <code>em</code> i <code>strong</code>. Per tant, hem aplicat estil a totes les instàncies <code><span></code>, <code><em></code> i <code><strong></code>.</p> + +<p><strong>Afegeix una regla CSS que seleccioni l’element <code><h1></code> i en canviï el color pel blau.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p> + +<h2 id="El_selector_universal">El selector universal</h2> + +<p>El selector universal s'indica amb un asterisc (<code>*</code>) i selecciona tot el que hi ha dins del document (o dins de l'element pare, si s'encadena amb un altre element i un combinador descendent, per exemple). En l'exemple següent hem utilitzat el selector universal per a eliminar els marges de tots els elements. Això vol dir que, en lloc de l'estil predeterminat que hi afegeix el navegador, que deixa un espai de marge entre els títols d’encapçalament i els paràgrafs, tot està junt i no podem distingir els diferents paràgrafs amb facilitat.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p> + +<p>Aquest tipus de comportament a vegades es pot veure en els «fulls d'estil de restabliment» (o «fulls d'estil <em>reset</em>»), que eliminen tot l'estil que aplica el navegador. Van ser molt populars en un moment determinat, tot i que eliminar tots els estils significava que aleshores havies de tornar-ho a fer tot! Per tant, acostumem a utilitzar el selector universal amb atenció per a afrontar situacions molt específiques, com la que es descriu a continuació.</p> + +<h3 id="Ús_del_selector_universal_per_a_facilitar_la_lectura">Ús del selector universal per a facilitar la lectura</h3> + +<p>Un dels usos del selector universal és fer els selectors més fàcils de llegir i més evidents, en termes de què fan. Per exemple, si vull seleccionar el primer fill de qualsevol element <code><article></code>, independentment de quin element sigui, i posar-lo en negreta, podem utilitzar el selector {{cssxref(":first-child")}}, que veurem amb més detall en l’article sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements">pseudoclasses i pseudoelements</a>, com un selector descendent juntament amb el selector d'elements <code><article></code>:</p> + +<pre class="brush: css notranslate">article :first-child { + +}</pre> + +<p>Això es pot confondre, però, amb <code>article:first-child</code>, que selecciona qualsevol element <code><article></code> que sigui el primer fill d'un altre element.</p> + +<p>Per evitar aquesta confusió, podem afegir al selector <code>:first-child</code> el selector universal, de manera que ara resulta obvi el que fa el selector. Selecciona <em>qualsevol</em> element que sigui el primer fill d'un element <code><article></code>:</p> + +<pre class="brush: css notranslate">article *:first-child { + +} </pre> + +<h2 id="Selectors_de_classe">Selectors de classe</h2> + +<p>El selector de classe s’inicia amb un caràcter de punt (<code>.</code>) i selecciona qualsevol element del document que tingui aplicada la classe seleccionada. En l'exemple en directe següent hem creat una classe anomenada <code>.highlight</code> i l'hem aplicada a diversos llocs del document. Es ressalten tots els elements que tenen aplicada aquesta classe.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p> + +<h3 id="Seleccionar_classes_en_elements_concrets">Seleccionar classes en elements concrets</h3> + +<p>Pots crear un selector que seleccioni els elements específics que tenen aplicada aquella classe. En l'exemple següent, destaquem un element <code><span></code> que té una classe <code>highlight</code> diferent del destacat que apliquem a l'encapçalament <code><h1></code> amb classe <code>highlight</code>. Ho fem adjuntant la classe al selector de tipus per a l’element que volem seleccionar, sense cap espai entremig.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p> + +<p>Aquesta manera de seleccionar dificulta la reutilització de CSS, perquè la classe només s'aplica a aquest element en concret, i hauràs d'afegir un altre selector si decideixes que les regles s'han d'aplicar també a altres elements.</p> + +<h3 id="Seleccionar_un_element_si_té_aplicada_més_duna_classe">Seleccionar un element si té aplicada més d'una classe</h3> + +<p>Pots aplicar diverses classes a un element i seleccionar-les individualment, o bé seleccionar l'element només quan inclou totes les classes del selector. Això pot ser útil per a crear components que es poden combinar de maneres diferents al teu lloc web.</p> + +<p>En l'exemple següent hi ha un element <code><div></code> que inclou una nota. La vora gris s'aplica quan la casella té una classe <code>notebox</code>. Si també té una classe <code>warning</code> o <code>danger</code>, el {{cssxref("border-color")}} canvia.</p> + +<p>Podem dir-li al navegador que només volem fer coincidir l’element si té totes aquestes classes tot encadenant-les juntes sense espais entremig.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p> + +<h2 id="Selectors_d’ID">Selectors d’ID</h2> + +<p>Un selector d’ID comença amb un caràcter <code>#</code> en lloc d'un caràcter de punt, però s'utilitza bàsicament de la mateixa manera que un selector de classe. Ara bé, un ID només es pot utilitzar una vegada en cada document, i cada element pot tenir un <code>id</code> com a màxim. El selector pot seleccionar l’element que té l’<code>id</code> establert i també pots precedir l'identificador amb un selector de tipus que seleccioni l’element només si coincideix amb l'ID. Pots veure aquests dos usos en l'exemple següent:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Tal com hem après en l’article que parla d'especificitat, un ID té més especificitat i anul·la la majoria dels altres selectors. Això pot dificultar les coses a l'hora de treballar. En la majoria dels casos és preferible afegir una classe a l'element, en lloc d'utilitzar un ID, però a vegades fer servir un ID és l'única manera de seleccionar l'element (potser perquè no es té accés al codi d’etiquetatge i, per tant, no es pot editar).</p> +</div> + +<h2 id="En_el_proper_article">En el proper article</h2> + +<p>Continuarem explorant els selectors i veurem els <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut">selectors d’atribut</a>.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media 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">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> diff --git a/files/ca/learn/css/building_blocks/styling_tables/index.html b/files/ca/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..21f96454d9 --- /dev/null +++ b/files/ca/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,290 @@ +--- +title: Estils per taules +slug: Learn/CSS/Building_blocks/Styling_tables +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Styling + - Tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div> + +<p class="summary"><span id="result_box" lang="ca">Aplicar estil a una taula HTML no és la feina més glamurosa del món, però tots ho hem de fer en algun moment. Aquest article proporciona una guia d’aplicació d’estil a les taules HTML per a donar-los un aspecte presentable.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Conceptes bàsics d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), coneixements de taules HTML (consulta el mòdul de taules HTML (TBD)) i nocions de com funciona el CSS (consulta la <a href="/ca/docs/Learn/HTML/Taules_HTML">Introducció al CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre a aplicar estil a una taula HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Una_taula_HTML_típica"><span id="result_box" lang="ca"><span>Una taula HTML típica</span></span></h2> + +<p>Comencem amb una taula HTML típica. Bé, diem que és típica, tot i que la majoria d'exemples de taula HTML són sobre sabates, dades climàtiques o empleats, i nosaltres, en canvi, hem decidit fer-ne una de més interessant, sobre bandes punk famoses del Regne Unit. El codi d’etiquetatge presenta aquesta aspecte:</p> + +<pre class="brush: html notranslate"><table summary="The most famous UK punk bands"> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>El codi d’etiquetatge de la taula és correcte, permet aplicar-hi estil sense problemes i és accessible, gràcies a funcions com {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlattrxref("summary","table")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Malauradament, presenta un aspecte poc agradable quan es representa a la pantalla (observa-la en viu en el fitxer <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>Amb l’estil per defecte que hi aplica el navegador, la taula presenta un aspecte atapeït i poc llegible, i resulta més aviat avorrida. Per a posar-hi remei, hem d'utilitzar una mica de CSS.</p> + +<h2 id="Aprenentatge_actiu_Aplica_estil_a_la_taula">Aprenentatge actiu: Aplica estil a la taula</h2> + +<p>En aquesta secció d'aprenentatge actiu, treballarem junts per a aplicar estil a la nostra taula d’exemple.</p> + +<ol> + <li>Per començar, fes una còpia local del fitxer amb el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">codi d’etiquetatge d'exemple</a>, descarrega’t les dues imatges (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), i posa els tres fitxers resultants en un directori de treball en algun lloc del teu ordinador local.</li> + <li>A continuació, crea un fitxer nou anomenat <code>style.css</code> i desa’l al mateix directori que els altres fitxers.</li> + <li>Enllaça el CSS amb l'HTML, i posa-hi la línia de codi HTML següent dins de l’element {{htmlelement("head")}}: + <pre class="brush: html notranslate"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="Espaiat_i_disseny">Espaiat i disseny</h3> + +<p>El primer que cal és organitzar l'espaiat i el disseny, perquè l'estil de taula predeterminat és molt atapeït. Afegeix, doncs, el codi CSS següent al teu fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">/* spacing */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p><span id="result_box" lang="ca"><span>Les parts més importants que destaquem són les següents:</span></span></p> + +<ul> + <li>Assignar el valor <code>fixed</code> a la propietat {{cssxref("table-layout")}} de la taula en general és una bona idea perquè fa el comportament per defecte de la taula més previsible. Normalment, les columnes de la taula adquireixen una mida segons la quantitat de contingut que inclouen, i això pot provocar resultats estranys. Amb la propietat <code>table-layout: fixed</code> pots donar a les columnes una mida segons l'amplada de les capçaleres, i a continuació tractar-ne el contingut com sigui necessari. Per aquest motiu hem seleccionat les quatre capçaleres amb el selector <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) («selecciona l’<em>n</em>-èsim fill d’una seqüència que és un element {{htmlelement("th")}} que hi ha dins d'un element {{htmlelement("thead")}}») i els hem assignat una amplada en percentatge. L'amplada de la columna sencera segueix l'amplada de la capçalera, de manera que és una bona manera de configurar la mida de les columnes de la taula. Chris Coyier analitza aquesta tècnica amb més detall en <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed table layouts</a>.<br> + <br> + Hem emparellat això amb una amplada ({{cssxref("width")}}) del 100%, que significa que la taula ocuparà tota l’amplada del contenidor en què estigui continguda i serà molt adaptativa (tot i que encara t’ho hauries de treballar una mica si vols aconseguir que la taula presenti un bon aspecte amb amplades de pantalla estretes).</li> + <li>Assignar un valor <code>collapse</code> a la propietat {{cssxref ("border-collapse")}} és una bona pràctica habitual en qualsevol intent d’aplicació d’estil a una taula. Quan es configuren les vores dels elements de la taula, per defecte totes deixen un espai entre elles, com es mostra a la imatge següent: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">Això no resulta gaire agradable (o potser és l'aspecte que cerques, qui sap?). Amb la declaració <code>border-collapse: collapse;</code>, les vores s’ajunten en una de sola, i l’aspecte és més polit: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>Hem afegit una vora ({{cssxref("border")}}) al voltant de tota la taula, i més endavant també posarem vores al voltant de la capçalera de la taula i del peu de pàgina; ho fem perquè fa molt estrany si no hi ha una vora exterior que englobi tota la taula; pot resultar descontextualitzada i poden quedar-hi buits.</li> + <li>Hem establert una mica de farciment ({{cssxref("padding")}}) en els elements {{htmlelement("th")}} i {{htmlelement("td")}}; això proporciona als elements de dades un espai perquè respirin, i millora força la llegibilitat de la taula.</li> +</ul> + +<p>En aquest punt, la nostra taula presenta un aspecte molt més polit:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Una_mica_de_tipografia_senzilla">Una mica de tipografia senzilla</h3> + +<p>Ara organitzarem una mica el nostre text.</p> + +<p>En primer lloc hem trobat un tipus de lletra a <a href="https://www.google.com/fonts">Google Fonts</a> que resulta adequat per a una taula sobre bandes punk. Si vols, hi pots anar i triar-ne una altra; només cal que substitueixis l'element {{htmlelement("link")}} que et proporcionem i la declaració {{cssxref("font-family")}} personalitzada que Google Fonts et proporciona.</p> + +<p>Afegeix l’element {{htmlelement("link")}} següent a la capçalera (<code>head</code>) de l’HTML, just a sobre de l'element <code><link></code>:</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p><span id="result_box" lang="ca">A continuació afegeix al teu fitxer <code>style.css</code> el CSS següent, a sota del que has afegit abans</span>:</p> + +<pre class="brush: css notranslate">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>Fins aquí no hi ha res que sigui específicament de taules; en general, configurem un estil de lletra que en faciliti la lectura:</p> + +<ul> + <li>Hem configurat una llista de tipus de lletra sans-serif per al text general; aquesta elecció és purament d’estil. També hem configurat el tipus de lletra personalitzat per als elements de capçalera {{htmlelement("thead")}} i {{htmlelement("tfoot")}}, que hi dona un simpàtic aspecte <em>grungy punky</em>.</li> + <li>Hem establert un espai d’interlineat ({{cssxref("letter-spacing")}}) a les capçaleres i les cel·les, perquè creiem que afavoreix la llegibilitat. Una vegada més, es tracta sobretot d’una qüestió d’estil.</li> + <li>Hem centrat el text de les cel·les de la taula que hi ha dins de {{htmlelement("tbody")}} perquè estiguin alineats amb els de les capçaleres, perquè de manera predeterminada les cel·les tenen assignat un valor {{cssxref("text-align")}} <code>left</code>, i les capçaleres un valor <code>center</code>; però en general sembla que té un aspecte més agradable si els textos dels dos tipus d’element estan alineats de la mateixa manera; el gruix de la negreta que té la lletra de les capçaleres per defecte és prou per a diferenciar-ne l'aspecte.</li> + <li>Hem alineat a la dreta el text de la capçalera {{htmlelement("tfoot")}} perquè tingui una associació visual més adequada amb la dada que s’hi correspon.</li> +</ul> + +<p>El resultat presenta un aspecte una mica més net:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="Gràfics_i_colors"><span id="result_box" lang="ca">Gràfics i colors</span></h3> + +<p>Ara passem als gràfics i els colors! Com que la taula desprèn un aire i una actitud punk, hi hem de donar un potent estil marcat. Ara bé, no totes les teves taules hauran de tenir un aspecte tan extrem, també pots fer alguna cosa més subtil i amb més bon gust.</p> + +<p>Comença per afegir al teu fitxer <code>style.css</code> el CSS següent, també al final de tot:</p> + +<pre class="brush: css notranslate">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>Fins aquí tampoc no hi ha res que sigui específicament de taules, però val la pena observar alguns aspectes.</p> + +<p>Hem afegit una imatge de fons amb la propietat {{cssxref("background-image")}} a les capçaleres {{htmlelement("thead")}} i {{htmlelement("tfoot")}} i hem canviat el color ({{cssxref("color")}}) de tot el text de les capçaleres i el peu de pàgina pel blanc (i hi hem afegit una ombra amb {{cssxref("text-shadow")}}), i així resulta més llegible. Sempre t’has d’assegurar que el text contrasta prou amb el fons i es pot llegir bé.</p> + +<p>També hem afegit un degradat lineal en els elements {{htmlelement("th")}} i {{htmlelement ("td")}} de les capçaleres i el peu de pàgina per a obtenir-hi una mica de textura, i hem donat a aquests elements una fantàstica vora porpra. Resulta útil disposar diversos elements imbricats i poder superposar els estils de capa un damunt de l'altre. Sí, hauríem pogut posar la imatge de fons i el degradat lineal dels elements {{htmlelement("thead")}} i {{htmlelement("tfoot")}} amb la tècnica de les múltiples imatges de fons, però hem decidit fer-ho per separat perquè els navegadors antics no admeten imatges de fons múltiples ni degradats lineals.</p> + +<h4 id="Ratlles_de_zebra">Ratlles de zebra</h4> + +<p>Hem volgut dedicar una secció independent a mostrar-te com s’implementen les <strong>ratlles de zebra</strong> (<strong>zebra stripes)</strong>, que alternen files de color que faciliten l’anàlisi i la llegibilitat de les diferents files de dades de la taula. Afegeix el CSS següent a la part inferior del teu fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>Abans has vist el selector {{cssxref(":nth-child")}}, que hem utilitzat per a seleccionar elements fills específics. També hi pots donar una fórmula com a paràmetre, i aleshores es selecciona una seqüència d'elements. La fórmula <code>2n-1</code> seleccionaria tots els fills imparells (1, 3, 5, etc.), i la fórmula <code>2n</code> seleccionaria tots els fills parells (2, 4, 6, etc.). En el nostre codi hem utilitzat les paraules clau <code>odd</code> i <code>even</code>, que fan exactament el mateix que aquelles fórmules. En aquest cas, donem a les files parelles i imparelles uns (esborronadors) colors diferents.</li> + <li>També hem afegit un mosaic de fons que es repeteix en totes les files del cos; només una mica de soroll (un <code>.png</code> semitransparent amb un xic de distorsió visual) que proporciona un pèl de textura.</li> + <li>Per acabar, hem donat a la taula sencera un color de fons sòlid perquè els navegadors que no admeten el selector <code>:nth-child</code> encara tinguin un fons per a les files del cos.</li> +</ul> + +<p>Aquesta explosió de color dona com a resultat el següent:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>Bé, això podria resultar una mica excessiu i pot ser que no sigui del tot del teu gust, però el punt que volem tractar aquí és que les taules no tenen per què ser avorrides ni acadèmiques.</p> + +<h3 id="Aplicar_estil_al_títol_caption">Aplicar estil al títol (<em>caption</em>)</h3> + +<p>Encara podem fer una darrera cosa amb la nostra taula, aplicar estil al títol (<em>caption</em>). Afegeix el CSS següent a la part inferior del fitxer <code>style.css</code>:</p> + +<pre class="brush: css notranslate">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p>Aquí no hi ha res d’excepcional, tret de la propietat {{cssxref("caption-side")}}, a la qual hem donat un valor <code>bottom</code>. Això posa el títol (<em>caption</em>) a la part inferior de la taula, i amb les altres declaracions ens ofereix aquest aspecte final (consulta-ho en directe en el fitxer <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="Aprenentatge_actiu_Dissenya_la_teva_taula">Aprenentatge actiu: Dissenya la teva taula</h2> + +<p>En aquest punt, volem que prenguis el nostre HTML d'exemple (o fes-ne servir un de teu propi) i aplica-hi estil per a obtenir alguna cosa no tan cridanera i més refinada que la nostra taula.</p> + +<h2 id="Consells_ràpids_d’aplicació_d’estil_a_una_taula">Consells ràpids d’aplicació d’estil a una taula</h2> + +<p>Abans de continuar, hem pensat de proporcionar-te una llista breu dels punts més útils que hem exposat a dalt:</p> + +<ul> + <li>Fes el codi d’etiquetatge de la taula tan senzill com sigui possible i empra estructures de comportament flexible (p. ex., utilitza percentatges) per a aconseguir un disseny adaptatiu.</li> + <li>Aconsegueix un comportament de la taula més previsible amb la declaració {{cssxref("table-layout")}}<code>: fixed</code>, que et permet establir amb facilitat les amplades de columna a partir de configurar l’amplada ({{cssxref("width")}}) de les capçaleres ({{htmlelement ("th")}}).</li> + <li>Fes servir la declaració {{cssxref("border-collapse")}}<code>: collapse</code> per a ajuntar les vores dels elements de la taula en una sola línia i aconseguir un aspecte més net i fàcil de controlar.</li> + <li>Utilitza els elements {{htmlelement("thead")}}, {{htmlelement("tbody")}} i {{htmlelement("tfoot")}} per a dividir la taula en blocs lògics i obtenir més elements en què aplicar CSS, que et permetin aplicar estils per capes i sobreposar-les les unes sobre les altres, si cal.</li> + <li>Fes servir ratlles de zebra en files alternatives per a millorar la llegibilitat.</li> + <li>Utilitza la propietat {{cssxref("text-align")}} per a alinear el text dels elements {{htmlelement("th")}} i {{htmlelement("td")}}, i obtenir un aspecte més net i endreçat.</li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>Ara que deixem enrere l’aplicació d’estil a les taules, hem d’ocupar el temps en una altra cosa. L’article següent explica com depurar el CSS, com resoldre problemes com ara dissenys de pàgines web que no presenten l’aspecte que se n’espera, o propietats que no s’apliquen quan creus que ho haurien de fer.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p> diff --git a/files/ca/learn/css/building_blocks/the_box_model/index.html b/files/ca/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..e0d11e7e76 --- /dev/null +++ b/files/ca/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,343 @@ +--- +title: El model de caixa +slug: Learn/CSS/Building_blocks/The_box_model +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>Tot el que hi ha en CSS té una caixa que ho envolta, i entendre aquestes caixes és clau per a poder crear dissenys amb CSS o alinear els elements amb altres elements. En aquest article analitzarem adequadament el <em>model de caixes CSS</em> perquè puguis dur a terme tasques de disseny de pàgines web més complexes amb una bona comprensió de la manera com funcionen, i en coneixerem la terminologia relacionada.</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 com funciona el CSS (consulta els <a href="/ca/docs/Learn/CSS/First_steps">Primers passos amb CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir més informació sobre el model de caixes del CSS, què compon el model de caixes i com canviar al model de caixes alternatiu.</td> + </tr> + </tbody> +</table> + +<h2 id="Caixes_en_bloc_i_en_línia">Caixes en bloc i en línia</h2> + +<p>En CSS en general hi ha dos tipus de caixes: <strong>caixes de bloc</strong> i <strong>caixes de línia</strong>. Aquestes característiques fan referència a com es comporta la caixa en termes de flux de pàgina i en relació amb altres caixes de la pàgina:</p> + +<p>Si una caixa es defineix com un bloc, es comporta de les maneres següents:</p> + +<ul> + <li>La caixa crea un salt de línia i genera una línia nova.</li> + <li>La caixa s’estén en la direcció de la línia i omple tot l’espai disponible de l’element que la conté. En la majoria dels casos, això significa que la caixa s’amplia tant com el seu contenidor i omple el 100% de l’espai disponible.</li> + <li>Es respecten les propietats d’amplada ({{cssxref("width")}}) i alçada ({{cssxref("height")}}).</li> + <li>El farciment, el marge i la vora allunyen la caixa de la resta d’elements.</li> +</ul> + +<p>Si no és que decidim canviar el tipus de visualització a <code>inline</code> (en línia), els elements com ara els títols d’encapçalament (per exemple, <code><h1></code>) o els paràgrafs, <code><p></code>, utilitzen per defecte el tipus de visualització <code>block</code>.</p> + +<p>Si una caixa té un tipus de visualització exterior <code>inline</code>, llavors:</p> + +<ul> + <li>La caixa no crea un salt de línia i no genera una línia nova.</li> + <li>Les propietats {{cssxref("width")}} i {{cssxref("height")}} no s'apliquen.</li> + <li>El farciment, el marge i les vores verticals s’apliquen, però no fan que la resta de caixes en línia s'allunyin.</li> + <li>El farciment, el marge i les vores horitzontals s’apliquen i fan que la resta de caixes en línia s'allunyin.</li> +</ul> + +<p>Els elements <code><a></code>, que s’usa per als enllaços, <code><span></code>, <code><em></code> i <code><strong></code> són altres exemples d’elements que es mostren en línia per defecte.</p> + +<p>El tipus de caixa que s’aplica a un element està definit pels valors de la propietat {{cssxref("display")}}, com <code>block</code> i <code>inline</code>, i es relaciona amb el valor <strong>exterior</strong> (<em>outer</em>) de <code>display</code>.</p> + +<h2 id="A_part_tipus_de_visualització_interior_i_exterior">A part: tipus de visualització interior i exterior</h2> + +<p>Aquest és un bon moment per explicar també els tipus de visualització <strong>inner</strong> i <strong>outer</strong>. Com ja hem esmentat, les caixes CSS tenen un tipus de visualització <em>outer</em> (exterior), que especifica si la caixa es comporta com un element de bloc o de línia.</p> + +<p>Les caixes també tenen un tipus de visualització <em>interna</em> (<em>inner</em>), que determina com es disposen els elements dins d'aquesta caixa. Per defecte, els elements que hi ha a l’interior d’una caixa es disposen segons el <strong><a href="/ca/docs/Learn/CSS/Disseny_CSS/Flux_normal">flux normal</a></strong>, que significa que es comporten igual que qualssevol altres elements de bloc i de línia (com s’explica més amunt).</p> + +<p>Tanmateix, podem canviar el tipus de visualització <code>inner</code> (interior) amb els valors de <code>display</code>, com ara <code>flex</code>. Si en un element establim <code>display: flex;</code>, el tipus de visualització <code>outer</code> (exterior) és <code>block</code>, però el tipus de visualització <code>inner</code> es canvia per <code>flex</code>. Els fills directes d’aquesta caixa es converteixen en elements flexibles i es disposen d’acord amb les regles que s’especifiquen en les especificacions de <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>, que veurem més endavant.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Per obtenir més informació sobre els valors de la visualització i sobre com funcionen les caixes de bloc i de línia, consulta la guia MDN per a les <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposicions de bloc i de línia</a>.</p> +</div> + +<p>Quan avancis a l'article Disseny de pàgines web amb CSS, trobaràs <code>flex</code> i els diversos valors <code>inner</code> que pots donar a les teves caixes, per exemple, <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> + +<p>Tanmateix, la disposició de bloc i de línia és la manera com es comporten les coses a la web per defecte. Com hem dit abans, de vegades es coneix com el <em>flux normal</em>, perquè sense cap altra instrucció, les nostres caixes es comporten com elements de bloc o de línia.</p> + +<h2 id="Exemples_de_diferents_tipus_de_visualització">Exemples de diferents tipus de visualització</h2> + +<p>Avancem i donem una ullada a uns quants exemples. A continuació es mostren tres elements HTML diferents, tots ells amb una visualització exterior de tipus <code>block</code>. El primer és un paràgraf amb una vora que s’ha afegit amb CSS. El navegador el representa com una caixa amb un comportament de tipus bloc, de manera que el paràgraf comença en una línia nova i ocupa tota l'amplada disponible.</p> + +<p>El segon és una llista amb una disposició de tipus <code>display: flex</code>, que estableix una disposició de tipus flex per als elements de dins del contenidor, però la llista en si mateixa és una caixa que té un comportament de tipus bloc i, com el paràgraf, ocupa tota l’amplada del contenidor i crea un salt de línia que genera una línia nova.</p> + +<p>A sota hi ha un paràgraf a nivell de bloc, dins del qual hi ha dos elements <code><span></code>. Aquests elements normalment tindrien un comportament de tipus <code>inline</code>, però un dels elements té una classe amb comportament de tipus bloc i l'hem configurada amb la declaració <code>display: block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> + +<p>Podem observar com es comporten els elements <code>inline</code> en l'exemple següent. Els elements <code><span></code> del primer paràgraf són elements de línia per defecte i no creen salts de línia nous.</p> + +<p>També hi ha un element <code><ul></code> que es pot configurar amb <code>display: inline-flex</code>, que crea una caixa amb comportament de línia al voltant d'alguns elements de tipus flex.</p> + +<p>Per acabar, hi ha dos paràgrafs configurats amb <code>display: inline</code>. El contenidor de línia amb comportament flex i els paràgrafs es combinen en una sola línia, en lloc de generar línies noves, com ho farien si es configuraven com elements de bloc.</p> + +<p><strong>En l'exemple pots alternar entre aquests modes de visualització si canvies de <code>display: inline</code> a <code>display: block</code> o de <code>display: inline-flex</code> a <code>display: flex</code>.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> + +<p>En articles posteriors trobaràs coses com ara el comportament de tipus flex; de moment has de recordar que canviar el valor de la propietat <code>display</code> pot canviar el tipus de visualització exterior d’una caixa del comportament de bloc al de línia, i això canvia la manera com es distribueix al costat d’altres elements en la composició de la pàgina web.</p> + +<p>A la resta de l’article ens centrarem en el tipus de visualització exterior.</p> + +<h2 id="Què_és_el_model_de_caixes_de_CSS">Què és el model de caixes de CSS?</h2> + +<p>El model complet de caixes CSS s'aplica a les caixes amb comportament de bloc; les caixes amb comportament de línia només utilitzen una mica del comportament definit en el model de caixes. El model defineix com funcionen conjuntament les diferents parts que constitueixen una caixa (el marge, la vora, el farciment i el contingut) per a crear una caixa que pots veure a la pàgina web. Per complicar-ho encara una mica més, hi ha un model de caixes estàndard i un model de caixes alternatiu.</p> + +<h3 id="Parts_duna_caixa">Parts d'una caixa</h3> + +<p>Per crear una caixa amb comportament de bloc amb CSS tenim:</p> + +<ul> + <li>El <strong>contingut de la caixa</strong> (o <em>content box</em>): L'àrea on es mostra el contingut, que es pot dimensionar amb propietats com {{cssxref("width")}} i {{cssxref("height")}}.</li> + <li>El <strong>farciment de la caixa</strong> (o <em>padding box</em>): El farciment s’ubica al voltant del contingut com un espai en blanc; la mida es pot controlar amb la propietat {{cssxref("padding")}} i d’altres de relacionades.</li> + <li>La <strong>vora de la caixa</strong> (o <em>border box</em>): La vora envolta el contingut i el farciment. La mida i l’estil es poden controlar amb la propietat {{cssxref("border")}} i d’altres de relacionades.</li> + <li>El <strong>marge de la caixa</strong> (o <em>margin box</em>): El marge és la capa més externa, embolica el contingut, el farciment i la vora com espai en blanc entre la caixa i la resta d’elements. La mida es pot controlar amb la propietat {{cssxref("margin")}} i d’altres de relacionades.</li> +</ul> + +<p>El diagrama següent mostra aquestes capes:</p> + +<p><img alt="Diagrama del model de caixes" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="El_model_de_caixes_CSS_estàndard">El model de caixes CSS estàndard</h3> + +<p>En el model de caixes estàndard, si es dona a la caixa els atributs <code>width</code> i <code>height</code>, això defineix l'amplada i l'alçada del <em>contingut de la caixa</em>. A continuació s'afegeix a l'amplada i l'alçada qualsevol farciment i vora, i això dona la mida total de la caixa. Això es mostra a la imatge de sota.</p> + +<p>Suposem que la caixa té el CSS definit pels atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code> següents:</p> + +<pre class="brush: css notranslate">.box { + width: 350px; + height: 150px; + margin: 10px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>L’espai que ocupa la nostra caixa segons el model de caixa estàndard és de 410 px (350 + 25 + 25 + 5 + 5) i l’alçada de 210 px (150 + 25 + 25 + 5 + 5), perquè l'àrea de farciment i la vora s'afegeixen a l'amplada útil que la caixa utilitza per al contingut.</p> + +<p><img alt="Exemple de mida d’una caixa en el model de caixa estàndard." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: El marge no compta per a la mida real de la caixa: òbviament afecta l’espai total que la caixa ocupa en la pàgina, però només l’espai de fora de la caixa. L’àrea de la caixa arriba fins a la vora: no s’estén fins al marge.</p> +</div> + +<h3 id="El_model_de_caixes_CSS_alternatiu">El model de caixes CSS alternatiu</h3> + +<p>Pots pensar que resulta una mica incòmode haver de sumar la vora i el farciment per a obtenir la mida real de la caixa, i tens raó! Per aquest motiu, el CSS va introduir un model de caixes alternatiu poc després de crear el model de caixes estàndard. Amb aquest model, qualsevol amplada de caixa és l'amplada de caixa visible en la pàgina; per tant, l'amplada de l'àrea de contingut és aquella amplada menys les amplades del farciment i de la vora. El mateix CSS que hem fet servir en l'exemple anterior donaria el resultat següent (amplada = 350 px, alçada = 150 px).</p> + +<p><img alt="Exemple de mida de caixa quan s’utilitza el model de caixes alternatiu." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>Per defecte, els navegadors utilitzen el model de caixes estàndard. Si vols activar el model alternatiu per a un element, ho pots fer amb la configuració de <code>box-sizing: border-box</code>. Amb això dius al navegador que prengui la vora de la caixa com la zona definida per totes les mides que has definit.</p> + +<pre class="brush: css notranslate"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>Si vols que tots els teus elements utilitzin el model de caixes alternatiu, elecció habitual entre els desenvolupadors, configura la propietat <code>box-sizing</code> en l’element <code><html></code>, i a continuació configura tots els altres elements perquè heretin aquest valor, com es veu en l'exemple següent. Si vols entendre el concepte que hi ha al darrere, consulta l'article <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">sobre trucs de CSS sobre les mides de les caixes</a>.</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Una dada curiosa és que Internet Explorer solia treballar per defecte amb el model de caixes alternatiu i no tenia cap mecanisme disponible per canviar-lo.</p> +</div> + +<h2 id="Jugar_amb_els_models_de_caixes">Jugar amb els models de caixes</h2> + +<p>En l’exemple següent pots veure dues caixes. Totes dues tenen una classe <code>.box</code>, que els proporciona els mateixos valors de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. L’única diferència és que la segona caixa s’ha configurat perquè utilitzi el model de caixes alternatiu.</p> + +<p><strong>Pots canviar la mida de la segona caixa (afegint CSS a la classe <code>.alternate</code>) i fer-la coincidir amb l'alçada i l'amplada de la primera caixa?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Pots trobar la solució d’aquesta activitat <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">aquí</a>.</p> +</div> + +<h3 id="Utilitza_les_DevTools_del_navegador_per_veure_el_model_de_caixes">Utilitza les DevTools del navegador per veure el model de caixes</h3> + +<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador dels navegadors</a> poden facilitar la comprensió del model de caixes. Si inspecciones un element amb les DevTools del Firefox, pots veure la mida que té l’element, i el marge, l’àrea de farciment i la vora. Fer una inspecció com aquesta d’un element és una bona manera de saber si la caixa té realment la mida que et penses que té.</p> + +<p><img alt="Inspecció d’un element segons el model de caixes amb Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="Marges_farciments_i_vores">Marges, farciments i vores</h2> + +<p>Ja has vist les propietats {{cssxref("margin")}}, {{cssxref("padding")}} i {{cssxref("border")}} en l'exemple anterior. En aquest exemple utilitzem les propietats abreviades, que ens permeten establir els quatre costats de la caixa alhora. Aquestes propietats abreviades també tenen propietats equivalents sense abreviar, que permeten controlar els diferents costats de la caixa individualment.</p> + +<p>Explorem aquestes propietats amb més detall.</p> + +<h3 id="Marges">Marges</h3> + +<p>El marge és un espai invisible que hi ha al voltant de la caixa. Manté la resta d’elements lluny de la caixa. Els marges poden tenir valors positius o negatius. Si estableixes un marge negatiu en un costat de la caixa, altres elements de la caixa s’hi poden superposar. Tant si utilitzes el model de caixes estàndard com el model alternatiu, el marge se suma sempre a la mida especificada per a la caixa visible.</p> + +<p>Podem controlar tots els marges d’un element alhora amb la propietat {{cssxref("margin")}}, o bé per cada costat de manera individual amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>Prova de canviar els valors del marge en l’exemple següent i observa com s’empeny la caixa a causa de l’espai que es crea o s’elimina (si és un marge negatiu) entre aquest element i l’element que conté.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> + +<h4 id="Col·lapse_del_marge">Col·lapse del marge</h4> + +<p>Un punt clau per a entendre els marges és el concepte de col·lapse del marge. Quan els marges de dos elements es toquen, es combinen i es converteixen en un sol marge, que és la mida del marge més gran. Si un dels negatius (o ho són tots dos), la quantitat de marge negatiu és resta del total.</p> + +<p>En l’exemple següent hi ha dos paràgrafs. El paràgraf superior té un <code>margin-bottom</code> de 50 píxels. El segon paràgraf té un <code>margin-top</code> de 30 píxels. Els marges col·lapsen, de manera que el marge efectiu entre les caixes és de 50 píxels, i no el total dels dos marges.</p> + +<p><strong>Prova d’establir la propietat <code>margin-top</code> del segon paràgraf a 0. El marge visible entre els dos paràgrafs no canvia: conserva els 50 píxels que s’han establert per al <code>bottom-margin</code> del primer paràgraf.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> + +<p>Hi ha diverses normes que dicten quan els marges col·lapsen i quan no. Per a més informació, consulta amb detall la pàgina sobre el <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">col·lapse del marge</a>. De moment l'important és que recordis que els marges col·lapsen. Si crees espai amb marges i no obtens l’espai que esperes, és probable que tinguis un col·lapse de marges.</p> + +<h3 id="Vores">Vores</h3> + +<p>La vora s’estableix entre el marge i el farciment d'una caixa. Si empres el model de caixes estàndard, la mida de la vora s’afegeix a les de <code>width</code> i <code>height</code> de la caixa. Si utilitzes el model de caixes alternatiu, la mida de la vora fa més petita la caixa de contingut, perquè ocupa una mica de les <code>width</code> i <code>height</code> disponibles.</p> + +<p>Les vores ofereixen moltes possibilitats de dissenys: hi ha quatre vores i cada vora pot tenir un estil, una amplada i un color, que podem definir.</p> + +<p>Pots definir l'amplada, l'estil o el color de les quatre vores alhora amb la propietat {{cssxref("border")}}.</p> + +<p>Per establir propietats diferents per a cada costat de vora, pots utilitzar:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>Per a establir l'amplada, l’estil o el color de tots els costats alhora, utilitza les propietats següents:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>Per a definir l'amplada, l'estil o el color d'un sol costat, pots emprar una de les propietats següents:</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>En l'exemple següent hem utilitzat diverses propietats abreviades i sense abreviar per a crear vores. Juga amb les diferents propietats i comprova que n’entens el funcionament. Les pàgines de MDN sobre les propietats de les vores proporcionen informació sobre els diversos estils de vora que pots triar.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> + +<h3 id="Farciment">Farciment</h3> + +<p>El farciment es situa entre la vora i l’àrea de contingut. A diferència dels marges, no hi pot haver àrees de farciment negatives, de manera que el valor ha de ser 0 o un valor positiu. Qualsevol fons que apliques al teu element es mostra darrere de l'àrea de farciment, i normalment s'utilitza per a mantenir el contingut allunyat de la vora.</p> + +<p>Podem controlar l'àrea de farciment de cadascun dels costats d’un element amb la propietat {{cssxref("padding")}}, o bé cadascuna de les àrees de farciment de cada costat amb les propietats equivalents:</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>Observa que si canvies els valors de farciment en la classe <code>.box</code> de l'exemple següent, canvia on comença el text en relació amb la caixa.</strong></p> + +<p><strong>També pots canviar el farciment en la classe <code>.container</code>, que deixa un espai entre el contenidor i la caixa. Pots canviar l'àrea de farciment de qualsevol element, i es fa un espai entre la vora i el que hi ha dins de l'element.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> + +<h2 id="El_model_de_caixes_i_les_caixes_amb_comportament_de_línia">El model de caixes i les caixes amb comportament de línia</h2> + +<p>Totes les opcions anteriors s'apliquen a les caixes amb comportament de bloc. Algunes de les propietats poden aplicar-se també a les caixes amb comportament de línia, com ara les creades per un element <code><span></code>.</p> + +<p>En l'exemple següent hi ha un <code><span></code> dins d'un paràgraf i hi hem aplicat els atributs <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> i <code>padding</code>. Observa que l’amplada i l’alçada s’ignoren. Es respecta el marge, l'àrea de farciment i la vora, però no es canvia la relació de la resta de continguts amb la nostra caixa amb comportament de línia, i per tant l'àrea de farciment i la vora s’encavalquen amb altres paraules del paràgraf.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> + +<h2 id="Ús_de_display_inline-block">Ús de <code>display: inline-block</code></h2> + +<p>Hi ha un valor especial de l’atribut <code>display</code> que proporciona un punt intermedi entre <code>inline</code> i <code>block</code>. Això és útil per a situacions en què no vols que un article generi una línia nova, però vols que respecti l’amplada (<code>width</code>) i l’alçada (<code>height</code>) i evitar que es superposin.</p> + +<p>Un element <code>display: inline-block</code> constitueix un subconjunt dels elements de bloc que ja coneixem:</p> + +<ul> + <li>Es respecten les propietats <code>width</code> i <code>height</code>.</li> + <li><code>padding</code>, <code>margin</code> i <code>border</code> allunyen la resta d'elements de la caixa.</li> +</ul> + +<p>Tanmateix, no es genera una línia nova i només es fa més gran que el contingut si afegeixes explícitament les propietats <code>width</code> i <code>height</code>.</p> + +<p><strong>En l'exemple següent hem afegit al nostre element <code><span></code>la declaració <code>display: inline-block</code>. Fes la prova de canviar-ho per <code>display: block</code> o elimina del tot aquesta línia i observa quina diferència hi ha entre els dos models de visualització.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> + +<p>Això pot ser útil si vols donar a un enllaç una àrea sensible més gran amb <code>padding</code>. L’element <code><a></code> és un element de línia, com <code><span></code>; pots utilitzar <code>display: inline-block</code> per configurar l'àrea de farciment de manera que a un usuari li resulti més fàcil fer clic a l'enllaç.</p> + +<p>Això es veu amb força freqüència en les barres de navegació. La barra de navegació següent es mostra en una fila gràcies a la propietat <code>flexbox</code>, i hem afegit àrea de farciment a l'element <code><a></code> perquè volem canviar el color de fons (<code>background-color</code>) quan es passa per sobre de <code><a></code> amb el cursor del ratolí. El farciment sembla que s’encavalca amb la vora de l’element <code><ul></code>. Això és perquè <code><a></code> és un element en línia.</p> + +<p><strong>Afegeix <code>display: inline-block</code> a la regla amb el selector <code>.links-list a</code> i observa que aquest problema es soluciona amb l'àrea de farciment perquè els altres elements la respecten.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Recordes la informació més rellevant? Trobaràs més tests per verificar que has retingut la informació abans de seguir a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p> + +<h2 id="Resum">Resum</h2> + +<p>Això és el que has d’entendre sobre el model de caixes. Potser voldràs tornar a aquest article en el futur si les mides de les caixes et confonen.</p> + +<p>En l’article següent analitzem com es poden emprar <a href="/ca/docs/Learn/CSS/Building_blocks/Fons_i_vores">fons i vores</a> per a fer més interessants les teves caixes.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "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">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">El dimensionament dels elements amb CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, mèdia i controls 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> diff --git a/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html b/files/ca/learn/css/building_blocks/valors_i_unitats_css/index.html new file mode 100644 index 0000000000..b754bd27ac --- /dev/null +++ b/files/ca/learn/css/building_blocks/valors_i_unitats_css/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> |