Introducció al disseny CSS

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 display, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

Prerequisits: Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu: 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.

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:

  • Elements flotants
  • La propietat display
  • Flexbox
  • Graella
  • Posicionament
  • Taules CSS
  • Disposició de múltiples columnes

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.

Flux normal

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>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

Per defecte, el navegador mostra aquest codi de la manera següent:

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.

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.

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

  • La propietat display: els valors habituals, com ara block, inline o inline-block poden canviar la manera com els elements es comporten en un flux normal (consulta l’article Tipus de caixes CSS 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.
  • Elements flotants: aplicant a float un valor com left, 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.
  • La propietat position: et permet controlar amb precisió la disposició de caixes dintre d'altres caixes. El posicionat static é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.
  • Disposició en taules: les característiques dissenyades per aplicar estils a les parts d'una taula HTML poden usar-se sobre d'altres elements fent servir display: table i les propietats associades.
  • Disposició multicolumna: Las propietats de disposició multicolumna poden fer que el contingut d'un bloc es disposi en columnes, com les d'un diari.

La propietat display

Els mètodes principals per aconseguir un disseny de pàgina amb CSS són tots els valors de la propietat display (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 display, 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 display: block. 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 <a> és display: inline per defecte.

Pots canviar aquest comportament de visualització per defecte. Per exemple, l'element <li> és display: block 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 display a inline, 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 display 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.

A més de poder canviar la presentació predeterminada, canviant un element de block a inline i viceversa, hi ha alguns mètodes de disseny més grans que comencen com amb un valor de display. 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 display: flex i display: grid.

Caixes flexibles (Flexbox)

Flexbox és el nom breu del mòdul de disseny de caixa flexible, dissenyat per facilitar-nos la distribució de les coses en una dimensió, sigui com a fila o com a columna. Per utilitzar flexbox, apliqueu display: flex 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.

L'etiquetatge HTML següent ens proporciona un element contenidor, amb una classe wrapper, dins del qual hi ha tres elements <div>. Per defecte, es mostrarien com a elements de bloc, un a sota de l’altre, al nostre document.

Tanmateix, si afegim display: flex al pare, els tres elements ara es disposen en columnes. Això es deu al fet que es converteixen en ítems flexibles (flex items) i es veuen afectats per alguns valors inicials que flexbox estableix al contenidor flex. Es mostren en una fila, perquè el valor inicial de flex-direction establert al seu pare és row. Tots semblen estirar-se fins a l’alçada de l’element més alt, perquè el valor inicial de la propietat align-items establert al seu pare és stretch. 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.

.wrapper {
  display: flex;
}
<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>

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.

Com a exemple senzill d'això, podem afegir la propietat flex a tots els nostres elements fill, amb un valor d'1. 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.

.wrapper {
    display: flex;
}

.wrapper > div {
    flex: 1;
}
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</div>

Nota: Aquesta ha estat una molt breu introducció al que és possible amb Flexbox. Per obtenir més informació, consulteu el nostre article de Flexbox.

Disposició en graella (Grid)

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.

Una vegada més, podeu activar el disseny de quadrícula amb un valor específic de display - display: grid. 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 display: grid, també definim files i columnes al pare mitjançant les propietats grid-template-rows i grid-template-columns, respectivament. Hem definit tres columnes cadascuna d'1fr i dues files de 100px. No necessito posar cap regla sobre els elements infantils; es col·loquen automàticament a les cel·les que ha creat la nostra graella.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
<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>

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 grid-column i grid-row. Això fa que els elements abastin diverses pistes.

.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;
}
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
</div>

Nota: 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 Graelles (Grids).

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.

Elements flotants (Floats)

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.

La propietat float té quatre valors possibles:

  • left: fa flotar l'element a l'esquerra.
  • right: fa flotar l'element a la dreta.
  • none: no flota. Aquest és el valor predeterminat.
  • inherit: especifica que el valor de la propietat float s'hereta de l'element pare.

A l'exemple següent, flotem un <div> a l'esquerra i li donem un 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.

<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>

    
.box {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 30px;
}

Nota: Els floats s’expliquen completament a la nostra lliçó sobre les propietats float i clear. Abans de tècniques com Flexbox i Grid es feien servir floats 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 mètodes de disseny heretats.

Tècniques de posicionament

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.

Tot i això, hi ha tècniques útils per a certs patrons de disseny que depenen de la propietat position. La comprensió del posicionament també ajuda a entendre el flux normal, i què significa moure un element fora del flux normal.

Hi ha cinc tipus de posicionament principals, que hauries de conèixer:

  • El posicionament estàtic (static positioning) é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í».
  • El posicionament relatiu (relative positioning) 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.
  • El posicionament absolut (absolute positioning) 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 <html> 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ó.
  • El posicionament fix (fixed positioning) é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.
  • El posicionament enganxós (sticky positioning) és un mètode de posicionament més recent que fa que un element actuï com si fos position: static fins que arriba a un desplaçament definit des de la finestra de visualització del navegador, moment en què passa a actuar com a position: fixed.

Un exemple senzill de posicionament

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:

<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>

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

La sortida que dona és la següent:

Posicionament Relatiu (Relative positioning)

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:

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Aquí hem donat al nostre paràgraf del mig un valor position de relative; això no fa res per si mateix, de manera que també afegim les propietats top i 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.

Si afegeixes aquest codi, es mostra el resultat següent:

Posicionament absolut (Absolute)

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.

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Aquí hem donat al nostre paràgraf del mig un valor position d'absolute, i les mateixes propietats top i left, com abans. L'addició d'aquest codi, però, dona el resultat següent:

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 top i 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 posicionament.

Posicionament fix (fixed positioning)

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.

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 position: fixed.

<h1>Fixed positioning</h1>

<div class="positioned">Fixed</div>

<p>Paragraph 1.</p>
<p>Paragraph 2.</p>
<p>Paragraph 3.</p>
.positioned {
    position: fixed;
    top: 30px;
    left: 30px;
}

Posicionament enganxós (sticky positioning)

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é position: sticky, 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 position: fixed aplicat.

.positioned {
  position: sticky;
  top: 30px;
  left: 30px;
}

Nota: per aprendre més sobre posicionament, aneu a l'article sobre posicionament.

Taules CSS

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).

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".

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.

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 <div>, amb finalitats de disseny.

<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>

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat display. A l’element <form> i als elements <div>, <label> i <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.

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula (<caption>), i també caption-side: bottom;, 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.

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;
}

Això ens dona el resultat següent:

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

Disseny multicolumna

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.

Per convertir un bloc en un contenidor multicolumna, utilitzem la propietat column-count, que indica al navegador quantes columnes voldríem tenir o bé column-width, que indica al navegador que ompli el contenidor amb tantes columnes d'almenys aquesta amplada.

A l'exemple següent, comencem amb un bloc d'HTML dins d'un element <div> que conté una classe de container.

<div class="container">
    <h1>Multi-column layout</h1>
    
    <p>Paragraph 1.</p>
    <p>Paragraph 2.</p>

</div>

Utilitzem una column-width (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.

    .container {
        column-width: 200px;
    }

Resum

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!