aboutsummaryrefslogtreecommitdiff
path: root/files/ca/conflicting/learn/css/building_blocks/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ca/conflicting/learn/css/building_blocks/index.html')
-rw-r--r--files/ca/conflicting/learn/css/building_blocks/index.html342
1 files changed, 342 insertions, 0 deletions
diff --git a/files/ca/conflicting/learn/css/building_blocks/index.html b/files/ca/conflicting/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..39d411bb19
--- /dev/null
+++ b/files/ca/conflicting/learn/css/building_blocks/index.html
@@ -0,0 +1,342 @@
+---
+title: Caixes
+slug: Web/Guide/CSS/Inici_en_CSS/Caixes
+tags:
+ - Basic
+ - Beginner
+ - CSS
+ - CSS Borders
+ - CSS Margin
+ - CSS Padding
+ - 'CSS:Getting_Started'
+ - NeedsBeginnerUpdate
+ - NeedsUpdate
+ - Web
+translation_of: Learn/CSS/Building_blocks
+translation_of_original: Web/Guide/CSS/Getting_started/Boxes
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.</p>
+
+<h2 class="clearLeft" id="Informació_Caixes">Informació: Caixes</h2>
+
+<p>Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.</p>
+
+<p>Al mig, és l'espai que l'<em>element</em> necessita per mostrar el seu contingut. Al voltant d'això, hi ha un <em>padding (farciment)</em>. Al voltant d'això, hi ha un <em>border (vora)</em>. Al voltant d'això, hi ha un <em>margin (marge)</em> que separa l'element d'altres elements.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <td style="width: 22em;">
+ <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+ <p style="text-align: center; margin: 0px;">margin (marge)</p>
+
+ <p style="text-align: center; margin: 0px 0px -.75em 0px;">border (vora)</p>
+
+ <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+ <p style="text-align: center;">padding (farciment)</p>
+
+ <div style="background-color: #eee;">
+ <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+ </div>
+ </div>
+ </div>
+
+ <p><em><span class="short_text" id="result_box" lang="ca"><span>El gris</span> <span>pàl·lid</span> <span>mostra</span> <span>parts</span> <span>de la disposició.</span></span></em></p>
+ </td>
+ <td>
+ <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+ <p style="text-align: center; margin: 0px;"> </p>
+
+ <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+ <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+ <p style="text-align: center;"> </p>
+
+ <div style="background-color: #fff;">
+ <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p>
+ </div>
+ </div>
+ </div>
+
+ <p><em>Això és el que es veu en el vostre navegador.</em></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.</p>
+
+<h3 id="Acolorir">Acolorir</h3>
+
+<p>El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.</p>
+
+<table>
+ <tbody>
+ <tr>
+ <td style="width: 22em;">
+ <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;">
+ <p style="text-align: center; margin: 0px;">margin</p>
+
+ <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p>
+
+ <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+ <p style="text-align: center;">padding</p>
+
+ <div style="background-color: #ded;">
+ <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+ </div>
+ </div>
+ </div>
+
+ <p><em><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <span>té</span> <span>un fons</span> <span>verd.</span></span></em></p>
+ </td>
+ <td>
+ <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;">
+ <p style="text-align: center; margin: 0px;"> </p>
+
+ <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p>
+
+ <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;">
+ <p style="text-align: center;"> </p>
+
+ <div style="background-color: #efe;">
+ <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p>
+ </div>
+ </div>
+ </div>
+
+ <p><em>Això és el que es veu en el vostre navegador.</em></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<h3 id="Vores">Vores</h3>
+
+<p>Podeu utilitzar les vores per decorar elements amb línies o caixes.</p>
+
+<p>Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.</p>
+
+<p>Els estils són:</p>
+
+<table style="margin-left: 2em;">
+ <tbody>
+ <tr>
+ <td style="width: 6em;">
+ <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div>
+ </td>
+ </tr>
+ <tr>
+ <td style="width: 6em;">
+ <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div>
+ </td>
+ <td style="width: 6em;">
+ <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>També podeu establir l'estil a <code>none</code> o <code>hidden</code> per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.</p>
+
+<p>Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Exemple</div>
+
+<p>Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:</p>
+
+<pre class="brush:css">h3 {
+ border-top: 4px solid #7c7; /* mid green */
+ background-color: #efe; /* pale green */
+ color: #050; /* dark green */
+ }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p>
+
+<table>
+ <tbody>
+ <tr>
+ <td>
+ <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p>Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:</p>
+
+<pre class="brush:css">img {border: 2px solid #ccc;}
+</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p>
+
+<table>
+ <tbody>
+ <tr>
+ <td>Imatge:</td>
+ <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<h3 id="Marges_i_farciment">Marges i farciment</h3>
+
+<p>Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.</p>
+
+<p>Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.</p>
+
+<p>Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).</p>
+
+<p>Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.</p>
+
+<p>Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Exemple</div>
+
+<p>Aquesta regla distingeix els paràgrafs amb la classe <code>remark</code>, donant-los una vora vermella al seu voltant.</p>
+
+<p>El farciment al seu voltant separa la vora del text una mica.</p>
+
+<p>Un marge esquerre sagna el paràgraf en relació amb la resta del text:</p>
+
+<pre class="brush:css">p.remark {
+ border: 2px solid red;
+ padding: 4px;
+ margin-left: 24px;
+ }
+</pre>
+
+<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p>
+
+<table>
+ <tbody>
+ <tr>
+ <td>
+ <p>Here is a normal paragraph.</p>
+
+ <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Més detalls</div>
+
+<p>Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.</p>
+
+<p>Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.</p>
+
+<p>Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.</p>
+
+<p>Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència <a href="/en-US/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">Model de caixa</span></a>.</p>
+</div>
+
+<h2 id="Acció_Afegir_vores">Acció: Afegir vores</h2>
+
+<p>Editeu l'arxiu CSS, <code>style2.css</code>. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:</p>
+
+<pre class="brush:css">h3 {border-top: 1px solid gray;}
+</pre>
+
+<p>Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:</p>
+
+<pre class="brush:css">li {
+ list-style: lower-roman;
+ margin-bottom: 8px;
+ }
+</pre>
+
+<p>Actualitzeu el navegador per veure el resultat:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+ <tr>
+ <td>
+ <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+ <ul style="">
+ <li style="margin-bottom: 8px;">Arctic</li>
+ <li style="margin-bottom: 8px;">Atlantic</li>
+ <li style="margin-bottom: 8px;">Pacific</li>
+ <li style="margin-bottom: 8px;">Indian</li>
+ <li style="margin-bottom: 8px;">Southern</li>
+ </ul>
+
+ <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+ <p><strong>1: </strong>Lorem ipsum</p>
+
+ <p><strong>2: </strong>Dolor sit</p>
+
+ <p><strong>3: </strong>Amet consectetuer</p>
+
+ <p><strong>4: </strong>Magna aliquam</p>
+
+ <p><strong>5: </strong>Autem veleum</p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<div class="tuto_example">
+<div class="tuto_type">Repte</div>
+
+<p>Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:</p>
+
+<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
+ <tbody>
+ <tr>
+ <td>
+ <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p>
+
+ <div style="border: 12px solid #69b; padding-left: 1em;">
+ <ul style="">
+ <li style="margin-bottom: 8px;">Arctic</li>
+ <li style="margin-bottom: 8px;">Atlantic</li>
+ <li style="margin-bottom: 8px;">Pacific</li>
+ <li style="margin-bottom: 8px;">Indian</li>
+ <li style="margin-bottom: 8px;">Southern</li>
+ </ul>
+ </div>
+
+ <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p>
+
+ <p><strong>. . .</strong></p>
+ </td>
+ </tr>
+ </tbody>
+</table>
+
+<p> </p>
+
+<p>(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)</p>
+</div>
+
+<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Veure la solució per el repte.</a></p>
+
+<h2 id="I_ara_què">I ara què?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">disseny</a> del vostre document d'altres maneres.</p>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-06 23:51:30 +0000