diff options
Diffstat (limited to 'files/ca/learn/css/css_layout/introduction')
| -rw-r--r-- | files/ca/learn/css/css_layout/introduction/index.html | 700 |
1 files changed, 700 insertions, 0 deletions
diff --git a/files/ca/learn/css/css_layout/introduction/index.html b/files/ca/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..88a924dc00 --- /dev/null +++ b/files/ca/learn/css/css_layout/introduction/index.html @@ -0,0 +1,700 @@ +--- +title: Introducció al disseny CSS +slug: Learn/CSS/Disseny_CSS/Introduccio_disseny_CSS +tags: + - Article + - Beginner + - CSS + - Floats + - Grids + - Introduction + - Layout + - Learn + - Positioning + - Tables + - flexbox + - flow +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref ("display")}}, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisits:</th> + <td><span id="result_box" lang="ca">Conceptes bàsics d'HTML</span> (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca">i nocions de com funciona el CSS</span> (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.</td> + </tr> + </tbody> +</table> + +<p>Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:</p> + +<ul> + <li>Elements flotants</li> + <li>La propietat {{cssxref("display")}}</li> + <li>Flexbox</li> + <li>Graella</li> + <li>Posicionament</li> + <li>Taules CSS</li> + <li>Disposició de múltiples columnes</li> +</ul> + +<p><span id="docs-internal-guid-3d1d84d1-7fff-8b2f-5bac-858fd61ba989" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Cada tècnica té els seus usos, avantatges i inconvenients, i cap tècnica s'ha dissenyat per utilitzar-se aïllada. Entenent per a què s’ha dissenyat cada mètode estaràs en una bona posició per entendre quina és la millor disposició per a cada tasca.</span></p> + +<h2 id="Flux_normal"><span id="result_box" lang="ca">Flux normal</span></h2> + +<p>El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:</p> + +<pre class="brush: html notranslate"><p>I love my cat.</p> + +<ul> + <li>Buy cat food</li> + <li>Exercise</li> + <li>Cheer up friend</li> +</ul> + +<p>The end!</p></pre> + +<p>Per defecte, el navegador mostra aquest codi de la manera següent:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.</p> + +<p>Per a molts dels elements de la pàgina el flux normal crea exactament la disposició que cal, però per dissenys més complexos et farà falta alterar aquest comportament per defecte fent ús d'alguna de les eines disponibles en CSS. Començar amb un document HTML ben estructurat és molt important, donat que així pots treballar amb com les coses es disposen per defecte, en comptes de barallar-t'hi.</p> + +<p>Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:</p> + +<ul> + <li><strong>La propietat {{cssxref("display")}}:</strong> els valors habituals, com ara <code>block</code>, <code>inline</code> o <code>inline-block</code> poden canviar la manera com els elements es comporten en un flux normal (consulta l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">Tipus de caixes CSS</a> per a obtenir-ne més informació), mentre que d’altres valors poc freqüents o especialitzats ens permeten disposar els elements de maneres completament diferents, utilitzant eines com Flexbox.</li> + <li><strong>Elements flotants:</strong> aplicant a {{cssxref("float")}} un valor com <code>left</code>, pots fer que els elements de nivell de bloc s'alineïn l’un al costat de l'altre en lloc de disposar-se l’un damunt de l'altre.</li> + <li><strong>La propietat {{cssxref("position")}}:</strong> et permet controlar amb precisió la disposició de caixes dintre d'altres caixes. El posicionat <code>static</code> és l'habitual en el flux normal, però pots fer que els elements es disposin d'altres maneres usant valors diferents, per exemple enganxats a la part superior de la finestra de visualització del navegador.</li> + <li><strong>Disposició en taules:</strong> les característiques dissenyades per aplicar estils a les parts d'una taula HTML poden usar-se sobre d'altres elements fent servir <code>display: table</code> i les propietats associades.</li> + <li><strong>Disposició multicolumna:</strong> Las propietats de <a href="/en-US/docs/Web/CSS/CSS_Columns">disposició multicolumna</a> poden fer que el contingut d'un bloc es disposi en columnes, com les d'un diari.</li> +</ul> + +<h2 id="La_propietat_display">La propietat <code>display</code></h2> + +<p>Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat <code>display</code> (visualització). Aquesta propietat ens permet canviar la manera per defecte com es mostren les coses. Tot el que hi ha al flux normal té un valor de <code>display</code>, que s'utilitza com la forma per defecte en què es comporten els elements que hi estan configurats. Per exemple, el fet que els paràgrafs en català es mostrin un per sota de l’altre es deu al fet que s’estilen amb <code>display: block</code>. Si creeu un enllaç al voltant d'un text dins d'un paràgraf, aquest enllaç romandrà en línia amb la resta del text i no es dividirà en cap línia nova. Això es deu al fet que l'element {{htmlelement("a")}} és <code>display: inline</code> per defecte.</p> + +<p>Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element {{htmlelement("li")}} és <code>display: block</code> per defecte, és a dir, que els elements de la llista es mostren l'un a sota de l'altre al nostre document en català. Si canviem el valor de <code>display</code> a <code>inline</code>, ara es mostraran un al costat de l’altre, com ho farien les paraules en una frase. El fet que puguis canviar el valor de <code>display</code> de qualsevol element significa que pots triar elements HTML pel seu significat semàntic, sense preocupar-te de com quedaran. La seva aparença és una cosa que es pot canviar.</p> + +<p>A més de poder canviar la presentació predeterminada, canviant un element de <code>block</code> a <code>inline</code> i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de <code>display</code>. Tanmateix, quan els feu servir, generalment haureu d'invocar propietats addicionals. Els dos valors més importants per als nostres propòsits a l’hora de parlar del disseny són <code>display: flex</code> i <code>display: grid</code>.</p> + +<h2 id="Caixes_flexibles_Flexbox">Caixes flexibles (Flexbox)</h2> + +<p>Flexbox és el nom breu del <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">mòdul de disseny de caixa flexible</a>, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu <code>display: flex</code> a l'element pare dels elements que vulgueu disposar; tots els seus fills directes es converteixen en ítems flexibles. Ho podem veure en un exemple senzill.</p> + +<p>L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe <code>wrapper</code>, dins del qual hi ha tres elements {{htmlelement("div")}}. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.</p> + +<p>Tanmateix, si afegim <code>display: flex</code> al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (<em>flex items</em>) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de {{cssxref("flex-direction")}} establert al seu pare és <code>row</code>. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat {{cssxref("align-items")}} establert al seu pare és <code>stretch</code>. Això significa que els ítems s’estenen fins a l’alçada del contenidor flex, que en aquest cas està definida per l’element més alt. Tots els articles s’alineen a l’inici del contenidor, deixant qualsevol espai addicional al final de la fila.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Flexbox_Example_1">Flexbox Example 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>A més de les propietats anteriors que es poden aplicar al contenidor flex, hi ha propietats que es poden aplicar als ítems flex. Aquestes propietats, entre altres coses, poden canviar la manera com es “flexionen” els ítems, cosa que els permet expandir-se i contraure’s per adaptar-se a l’espai disponible.</p> + +<p>Com a exemple senzill d'això, podem afegir la propietat {{cssxref ("flex")}} a tots els nostres elements fill, amb un valor d'<code>1</code>. Això farà que tots els ítems creixin i omplin el contenidor, en comptes de deixar espai al final. Si hi ha més espai, els elements s’ampliaran; si hi ha menys espai es tornaran més estrets. A més, si afegiu un altre element al marcatge, tots els elements es faran més petits per fer-hi espai; ajustaran la seva mida per ocupar la mateixa quantitat d’espai, sigui quin sigui.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Flexbox_Example_2">Flexbox Example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flexbox">Flexbox</a>.</p> +</div> + +<h2 id="Disposició_en_graella_Grid">Disposició en graella (Grid)</h2> + +<p>Mentre que Flexbox està dissenyat per al disseny unidimensional, el disseny de quadrícula està pensat per a dues dimensions: alinear les coses en files i columnes.</p> + +<p>Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - <code>display: grid</code>. L'exemple següent utilitza un marcatge similar a l'exemple de flex, amb un contenidor i alguns elements fills. A més d’utilitzar <code>display: grid</code>, també definim files i columnes al pare mitjançant les propietats {{cssxref("grid-template-rows")}} i {{cssxref("grid-template-columns")}}, respectivament. Hem definit tres columnes cadascuna d'<code>1fr</code> i dues files de <code>100px</code>. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Grid_example_1">Grid example 1</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> + <div class="box4">Four</div> + <div class="box5">Five</div> + <div class="box6">Six</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p><span id="docs-internal-guid-06c574d0-7fff-ef3d-b16b-035c6b7961fe" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">Un cop tingueu una graella, podeu col·locar-hi explícitament els elements, en lloc de confiar en el comportament de la ubicació automàtica que acabem de veure. Al segon exemple que teniu a continuació hem definit la mateixa graella, però aquesta vegada amb tres elements fills. Hem definit la línia inicial i final de cada element mitjançant les propietats {{cssxref("grid-column")}} i {{cssxref("grid-row")}}. Això fa que els elements abastin diverses pistes.</span></p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Grid_example_2">Grid example 2</h6> + +<pre class="brush: css notranslate"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">One</div> + <div class="box2">Two</div> + <div class="box3">Three</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Aquests dos exemples són només una petita part de la potència del disseny de graella; per obtenir més informació, consulteu el nostre article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Graelles">Graelles (Grids)</a>.</p> +</div> + +<p>La resta d'aquesta guia cobreix altres mètodes de disseny, que són menys importants per a les principals estructures de disseny de la pàgina, però que poden ajudar-vos a realitzar tasques específiques. En comprendre la naturalesa de cada tasca de disseny, aviat trobareu que, quan mireu un component concret del vostre disseny, el tipus de disseny més adequat sovint serà clar.</p> + +<h2 id="Elements_flotants_Floats">Elements flotants (<em>Floats</em>)</h2> + +<p>Flotar un element canvia el comportament d’aquest element i dels elements de nivell de bloc que el segueixen en un flux normal. L'element es mou cap a l'esquerra o cap a la dreta i s'elimina del flux normal i el contingut circumdant flota al voltant de l'element flotat.</p> + +<p>La propietat {{cssxref("float")}} té quatre valors possibles:</p> + +<ul> + <li><code>left</code>: fa flotar l'element a l'esquerra.</li> + <li><code>right</code>: fa flotar l'element a la dreta.</li> + <li><code>none</code>: no flota. Aquest és el valor predeterminat.</li> + <li><code>inherit</code>: especifica que el valor de la propietat <code>float</code> s'hereta de l'element pare.</li> +</ul> + +<p>A l'exemple següent, flotem un <code><div></code> a l'esquerra i li donem un {{cssxref("margin")}}} per la dreta per apartar el text de l'element. Això ens dona l’efecte del text rodejant aquesta caixa i és la major part del que heu de saber sobre els elements flotants tal com s’utilitzen en el disseny web modern.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Floats_example">Floats example</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Simple float example</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Els <em>floats</em> s’expliquen completament a la nostra lliçó sobre les propietats <a href="/ca/docs/Learn/CSS/Disseny_CSS/Flotadors">float i clear</a>. Abans de tècniques com Flexbox i Grid es feien servir <em>floats</em> com a mètode per crear dissenys de columnes. És possible que encara trobeu aquests mètodes al web; els tractarem a la lliçó sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny heretats</a>.</p> +</div> + +<h2 id="Tècniques_de_posicionament">Tècniques de posicionament</h2> + +<p>El posicionament us permet moure un element des d'on es col·locaria quan estigués en un flux normal a una altra ubicació. El posicionament no és un mètode per crear el disseny principal de la pàgina, sinó que es tracta més de gestionar i ajustar la posició d’elements específics de la pàgina.</p> + +<p>Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat {{cssxref("position")}}. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.</p> + +<p>Hi ha cinc tipus de posicionament principals, que hauries de conèixer:</p> + +<ul> + <li>El <strong>posicionament estàtic</strong> (<em><strong>static positioning</strong></em>) és el valor per defecte que té cada element; significa «posa l'element en la posició normal en el flux del disseny del document; res especial per veure aquí».</li> + <li>El <strong>posicionament relatiu</strong> (<em><strong>relative positioning</strong></em>) permet modificar la posició d'un element en la pàgina i moure’l en relació amb la seva posició en el flux normal, fins i tot fent que se superposi a altres elements de la pàgina.</li> + <li>El <strong>posicionament absolut</strong> (<em><strong>absolute positioning</strong></em>) elimina un element completament del flux normal de la pàgina, com si estigués disposat en una capa separada pròpia. A partir d'aquí, el podem fixar a una posició relativa respecte de les vores de l'element <code><html></code> de la pàgina (o l'element pare posicionat més proper). És útil per a crear efectes de disseny de pàgina complexos com ara caixes de tipus pestanya en què diferents panells de contingut es disposen els uns damunt dels altre i es mostren i oculten segons es vol, o panells d'informació que es disposen fora de la pantalla per defecte, però es poden fer lliscar cap a l’interior de la pantalla amb un control de tipus botó.</li> + <li>El <strong>posicionament fix</strong> (<strong>fixed positioning</strong>) és molt similar al posicionament absolut, excepte que fixa un element en relació amb la finestra de visualització del navegador, no amb un altre element. Això és útil per a crear efectes com ara un menú de navegació persistent, que sempre es manté al mateix lloc a la pantalla en desplaçar-se la resta del contingut.</li> + <li>El <strong>posicionament enganxós</strong> (<strong>sticky positioning</strong>) és un mètode de posicionament més recent que fa que un element actuï com si fos <code>position: static</code> fins que arriba a un desplaçament definit des de la finestra de visualització del navegador, moment en què passa a actuar com a <code>position: fixed</code>.</li> +</ul> + +<h3 id="Un_exemple_senzill_de_posicionament">Un exemple senzill de posicionament</h3> + +<p>Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:</p> + +<pre class="brush: html notranslate"><h1>Positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">I am a basic block level element.</p> +<p>I am a basic block level element.</p></pre> + +<p><span id="result_box" lang="ca">Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:</span></p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>La sortida que dona és la següent:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="Posicionament_Relatiu_Relative_positioning">Posicionament Relatiu (<em>Relative positioning</em>)</h3> + +<p>El posicionament relatiu et permet desplaçar un element de la posició que tindria per defecte en flux normal. Això vol dir que pots assolir una tasca com ara moure una icona cap avall de manera que quedi alineada amb una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relatiu:</p> + +<pre class="notranslate">.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} de <code>relative</code>; això no fa res per si mateix, de manera que també afegim les propietats {{cssxref("top")}} i {{cssxref("left")}}, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès des dels costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.</p> + +<p>Si afegeixes aquest codi, es mostra el resultat següent:</p> + +<div class="hidden"> +<h6 id="Un_exemple_de_posicionament_relatiu">Un exemple de posicionament relatiu</h6> + +<pre class="brush: html notranslate"><h1>Relative positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my relatively positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_positioning_example', '100%', 300) }}</p> + +<h3 id="Posicionament_absolut_Absolute"><span id="result_box" lang="ca">Posicionament absolut</span> (Absolute)</h3> + +<p>El posicionament absolut s’utilitza per eliminar completament un element del flux normal i col·locar-lo mitjançant desplaçaments des de les vores d’un bloc contenidor.</p> + +<p>Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí hem donat al nostre paràgraf del mig un valor {{cssxref("position")}} d'<code>absolute</code>, i les mateixes propietats {{cssxref("top")}} i {{cssxref("left")}}, com abans. L'addició d'aquest codi, però, dona el resultat següent:</p> + +<div class="hidden"> +<h6 id="Absolute_positioning_example">Absolute positioning example</h6> + +<pre class="brush: html notranslate"><h1>Absolute positioning</h1> + +<p>I am a basic block level element.</p> +<p class="positioned">This is my absolutely positioned element.</p> +<p>I am a basic block level element.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning_example', '100%', 300) }}</p> + +<p>Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat a sobre en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats {{cssxref("top")}} i {{cssxref("left")}} tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, s'especifica la distància a la qual l'element s’ha de situar dels costats superior i esquerre de la pàgina. És possible canviar l'element pare que es converteix en aquest contenidor i ho veurem a la lliçó sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p> + +<h3 id="Posicionament_fix_fixed_positioning">Posicionament fix (fixed positioning)</h3> + +<p>El posicionament fix elimina el nostre element del flux de documents de la mateixa manera que el posicionament absolut. Tanmateix, en lloc d'aplicar els desplaçaments des del contenidor, s'apliquen des de la finestra gràfica. Com que l'element es manté fix en relació amb la finestra gràfica, podem crear efectes com un menú que es manté fix a mesura que la pàgina es desplaça per sota.</p> + +<p>Per a aquest exemple, el nostre HTML inclou tres paràgrafs de text, per tal que puguem fer que la pàgina es desplaci, i un quadre al qual donarem <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p>Paragraph 1.</p> +<p>Paragraph 2.</p> +<p>Paragraph 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Fixed_positioning_example">Fixed positioning example</h6> + +<pre class="brush: html notranslate"><h1>Fixed positioning</h1> + +<div class="positioned">Fixed</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Posicionament_enganxós_sticky_positioning">Posicionament enganxós (sticky positioning)</h3> + +<p>El posicionament enganxós és el mètode de posicionament final que tenim a la nostra disposició. Combina el posicionament estàtic per defecte amb el posicionament fix. Quan un element té <code>position: sticky</code>, es desplaçarà en flux normal fins que arribi al desplaçament sobre la finestra de visualització del navegador que definit. En aquest moment es queda "enganxat" com si tingués <code>position: fixed</code> aplicat.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Sticky_positioning_example">Sticky positioning example</h6> + +<pre class="brush: html notranslate"><h1>Sticky positioning</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Sticky</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> per aprendre més sobre posicionament, aneu a l'article sobre <a href="/ca/docs/Learn/CSS/Disseny_CSS/Posicionament">posicionament</a>.</p> +</div> + +<h2 id="Taules_CSS">Taules CSS</h2> + +<p>Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).</p> + +<p>La forma en què es mostra una taula en una pàgina web quan utilitzeu el marcatge de taula es deu a un conjunt de propietats CSS que defineixen el disseny de la taula. Aquestes propietats es poden utilitzar per disposar elements que no són taules, un ús que de vegades es descriu com "utilitzar taules CSS".</p> + +<p>L'exemple següent mostra un d'aquests usos; L'ús de taules CSS per al disseny s'hauria de considerar un mètode heretat en aquest moment, per a aquelles situacions en què tingueu navegadors molt antics sense compatibilitat amb Flexbox o Grid.</p> + +<p>Vegem-ne un exemple. Primer, un marcatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un text dins d'un paràgraf. Cada parell label/input està envoltat d'un element {{htmlelement("div")}}, amb finalitats de disseny.</p> + +<pre class="brush: html notranslate"><form> + <p>First of all, tell us your name and age.</p> + <div> + <label for="fname">First name:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Last name:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Age:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat {{cssxref("display")}}. A l’element {{htmlelement("form")}} i als elements {{htmlelement("div")}}, {{htmlelement("label")}} i {{htmlelement("input")}} se'ls hi ha dit que es mostrin com una taula, files de la taula i cel·les de la taula, respectivament; bàsicament actuaran com un marcatge de taula HTML que alinea les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.</p> + +<p>Observa que s’ha assignat al paràgraf de descripció (<em>caption</em>) la declaració <code>display: table-caption;</code>, que fa que aquest paràgraf actuï com un títol de taula ({{htmlelement("caption")}}), i també <code>caption-side: bottom;</code>, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p><span id="result_box" lang="ca">Això ens dona el resultat següent:</span></p> + +<p>{{ EmbedLiveSample('CSS_tables', '100%', '170') }}</p> + +<p>També pots veure aquest exemple en viu en el fitxer <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (i també consultar-ne el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">codi d’origen</a>).</p> + +<h2 id="Disseny_multicolumna">Disseny multicolumna</h2> + +<p>El mòdul de disseny de múltiples columnes ens proporciona una manera de distribuir contingut en columnes, de manera similar a com flueix el text en un diari. Tot i que la lectura de columnes cap amunt i cap avall és menys útil en un context web, ja que no voleu obligar els usuaris a desplaçar-se cap amunt i cap avall, la disposició del contingut en columnes pot ser una tècnica útil.</p> + +<p>Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat {{cssxref("column-count")}}, que indica al navegador quantes columnes voldríem tenir o bé {{cssxref("column-width" )}}, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.</p> + +<p>A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <code><div></code> que conté una classe de <code>container</code>.</p> + +<pre class="brush: html notranslate"><div class="container"> + <h1>Multi-column layout</h1> + + <p>Paragraph 1.</p> + <p>Paragraph 2.</p> + +</div></pre> + +<p>Utilitzem una <code>column-width</code> (amplada de columna) de 200 píxels en aquest contenidor, cosa que provoca que el navegador creï tantes columnes de 200 píxels com càpiguen al contenidor i, a continuació, comparteixi l’espai restant entre les columnes creades.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Multicol_example">Multicol example</h6> + +<pre class="brush: html notranslate"> <div class="container"> + <h1>Multi-column Layout</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Resum">Resum</h2> + +<p>Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> |