diff options
Diffstat (limited to 'files/ca/web/guide/css/inici_en_css/disseny/index.html')
| -rw-r--r-- | files/ca/web/guide/css/inici_en_css/disseny/index.html | 382 |
1 files changed, 382 insertions, 0 deletions
diff --git a/files/ca/web/guide/css/inici_en_css/disseny/index.html b/files/ca/web/guide/css/inici_en_css/disseny/index.html new file mode 100644 index 0000000000..3ebf8912d6 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/disseny/index.html @@ -0,0 +1,382 @@ +--- +title: Disseny +slug: Web/Guide/CSS/Inici_en_CSS/Disseny +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/CSS_layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th 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 algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.</p> + +<h2 class="clearLeft" id="Informació_Disseny">Informació: Disseny</h2> + +<p>Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.</p> + +<p>En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.</p> + +<p>Aquesta pàgina descriu algunes tècniques simples que podeu intentar.</p> + +<h3 id="Estructura_del_document"><span id="result_box" lang="ca"><span>Estructura del</span> <span>document</span></span></h3> + +<p>Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.</p> + +<p>El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.</p> + +<p>La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.</p> + +<p>Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut <code>id</code>:</p> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</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 style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <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; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <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> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Unitats_de_mida"><span class="short_text" id="result_box" lang="ca"><span>Unitats</span> <span>de mida</span></span></h3> + +<p>Fins ara, en aquest tutorial, s'han especificat les mides en píxels <code>(px)</code>. Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.</p> + +<p>Per a molts propòsits, és millor especificar les mides com un percentatge o en ems <code>(em)</code>. Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>La vora de l'esquerra d'aquest text té la mida definida en píxels.</p> + +<p>La vora de la dreta té la mida definida en ems.</p> + +<p>En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p><span id="result_box" lang="ca"><span>Per a altres</span> <span>dispositius</span><span>, altres unitats</span> <span>de longitud són</span> <span>les adequades.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Hi ha més</span> <span>informació</span> <span>sobre</span> <span>això en una</span> <span>pàgina</span> <span>posterior d'aquest</span> <span>tutorial.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Per als</span> <span>detalls</span> <span>complets dels</span> <span>valors</span> <span>i</span> <span>les</span> <span>unitats que</span> <span>es</span> <span>poden</span> <span>utilitzar</span><span>, consulteu</span></span> <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Valors</a> <span id="result_box" lang="ca"><span>en</span> <span>l'especificació</span> <span>CSS.</span></span></p> +</div> + +<h3 id="Disposició_del_text">Disposició del text</h3> + +<p>Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:</p> + +<dl> + <dt>{{ cssxref("text-align") }}</dt> + <dd>Alinea el contingut. Utilitzeu un d'aquests valors: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> + <dt>{{ cssxref("text-indent") }}</dt> + <dd>Sagna el contingut en una quantitat que especifiqueu.</dd> +</dl> + +<p>Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Per centrar les capçaleres:</p> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>Resultant:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <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; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.</p> +</div> + +<h3 id="Flotants">Flotants</h3> + +<p>La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.</p> + +<p>La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra</p> + +<p>Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:</p> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<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 style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <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> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)</p> + +<h3 id="Posicionament">P<span id="result_box" lang="ca"><span>osicionament</span></span></h3> + +<p>Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.</p> + +<p>Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.</p> + +<dl> + <dt><code>relative</code></dt> + <dd>La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.</dd> + <dt><code>fixed</code></dt> + <dd>La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.</dd> + <dt><code>absolute</code></dt> + <dd>La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb <code>relative</code>, <code>fixed</code> o <code>absolute</code>. Es pot fer que qualsevol element pare sigui adequat especificant <code>position:relative</code>; però sense especificar cap canvi.</dd> + <dt><code>static</code></dt> + <dd> + <p>El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.</p> + </dd> +</dl> + +<p>Juntament amb aquests valors de la propietat <code>position</code> (a excepció de <code>static</code>), especifiqueu una o més de les propietats: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> per identificar on voleu que aparegui l'element, i potser també la seva grandària.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:</p> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>En la vostre fulla d'estil, fer la posició dels pares <code>relative</code>. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills <code>absolute</code>:</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Model de format Visual </a>i <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Detalls del model de format visual</a>.</p> + +<p>Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.</p> +</div> + +<h2 id="Acció_Especificació_del_disseny"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Especificació</span> <span>del disseny</span></span></h2> + +<ol> + <li>Canvieu el document d'exemple, <code>doc2.html</code>, i la fulla d'estil, <code>style2.css</code>, utilitzant els exemples de més amunt en la secció <a href="#Document_structure" title="#Document structure"><strong>Estructura del document</strong></a> i <a href="#Floats" title="#Floats"><strong>Flotants</strong></a>.</li> + <li>En l'exemple <a href="#Floats" title="#Floats"><strong>Flotants</strong></a> afegir farciment per separar el text de la vora dret en 0,5 em.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Reptes</div> + +<p>Modifiqueu el document d'exemple, <code>doc2.html</code>, afegint aquesta etiqueta prop del final, just abans de <code></body></code>.</p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.</p> + +<p>Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.</p> + +<p>Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<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> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> 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/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.</p> |