This translation is incomplete. Please help translate this article from English.

Aquest article recapitularà algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els  diferents valors de display, i introduïm alguns dels conceptes que cobrirem a través d'aquest mòdul.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu: Donar-vos una visió general de les tècniques de disseny de pàgines CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.

Les tècniques de disseny de pàgina CSS ens permeten prendre elements continguts 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 al seu voltant, el seu contenidor pare o la finestra de visulització/finestra principal. Les tècniques de disseny de pàgines que cobrirem amb més detall en aquest mòdul són:

  • Flotadors
  • Posicionament
  • Taules CSS
  • Flexbox
  • Graella

Cada tècnica té els seus usos, avantatges i desavantatges.

Flux de disseny normal

El flux normal, és com el navegador estableix les pàgines HTML de forma predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem 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 mostrarà aquest codi de la manera següent:

Tingueu en compte aquí com es mostra l'HTML en l'ordre exacte en què apareix al codi font, amb elements apilats un sobre un altre - el primer paràgraf, seguit de la llista desordenada, seguit del segon paràgraf.

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant:

  • La propietat position - static és el valor per defecte, en el flux normal, però podeu fer que els elements es distribueixen de manera diferent mitjançant altres valors, per exemple sempre fixats a la part superior esquerra de la finestra de visualització del navegador.
  • Flotadors - aplicant a float un valor com left, pot fer que els elements de nivell de bloc s'alineïn un al costat de l'altre en lloc d'asseure's un damunt de l'altre
  • La propietat display - els valors estàndard com block, inline o inline-block poden canviar la forma en que els elements es comporten en un flux normal (vegeu Tipus de caixes CSS per obtenir més informació), mentre que valors poc freqüents o especialitzats ens permeten dissenyar elements de maneres completament diferents, utilitzant eines com Flexbox.

Flotadors (Floats)

Flotadors (Floats) és una tècnica que permet que els elements flotin a l'esquerra o a la dreta uns dels altres, en comptes de fer-ho per defecte asseguts uns sobre els altres. Els usos principals dels flotadors són establir columnes i flotar text al voltant d'una imatge. Per començar, feu una ullada ràpida a la propietat float i veure un exemple senzill.

La propietat flotant té quatre valors possibles:

  • left - flota l'element a l'esquerra.
  • right - flota l'element a la dreta.
  • none - especificat no flotant en absolut. Aquest és el valor predeterminat.
  • inherit - especifica que el valor de la propietat float s'hauria d'heretar de l'element primari.

Exemple HTML senzill

Mostrem com podem crear un disseny senzill de dues columnes amb flotadors. Primer, algun HTML:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>

Aquí tenim un encapçalament de primer nivell i dos senzills <div>s, cadascun dels quals conté un encapçalament de segon nivell i un paràgraf. De manera predeterminada, el contingut es distribuirà en l'ordre original, des de la part superior a la inferior, baixant la pàgina.

Fer flotar les columnes

Canviem les coses - en lloc d'això volem que els nostres dos <div>s se senten un al costat de l'altre. Per fer-ho, podem utilitzar el següent codi. Tingueu en compte que els dos <div>s floten un amb un valor a l'esquerra i un amb un valor a la  dreta, vol dir que un volarà cap a l'esquerra i l'altre cap a la dreta. També se'ls proporciona valors width, que els permeten adaptar-se a la mateixa línia i tenir un canal intermedi (l'ample total mai serà més de 100!).

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

L'exemple actualitzat serà així:

Nota: Per obtenir més informació sobre els flotadors CSS, consulteu l'article Flotadors (Floats).

Tècniques de posicionament

El posicionament us permet moure un element des del punt original de la pàgina a un altre lloc, amb gran precisió.

Hi ha quatre tipus principals de posicionament que heu de coneixer:

  • Static positioning és el valor per defecte que obté cada element - significa "posar l'element en la seva posició normal en el flux del disseny del document - res especial per veure aquí".
  • Relative positioning permet modificar la posició d'un element a la pàgina, movent-lo en relació a la seva posició en el flux normal, fins i tot fent que se superposi a altres elements de la pàgina. Això és útil per als ajustos de disseny menors i per determinar el disseny.
  • Absolute positioning mou un element completament fora del flux de disseny normal de la pàgina, com si estigués assegut a la seva pròpia capa separada. A partir d'aquí, el podem corregir a una posició relativa a les vores de l'element <html> de la pàgina (o és l'element ancestral més proper). És útil per crear efectes de disseny complexos com ara caixes de pestanyes on diferents panells de contingut se sentin un damunt de l'altre i es mostren i oculten segons es desitgi, o panells d'informació que es sentin fora de la pantalla per defecte, però es poden fer lliscar en la pantalla mitjançant un Botó de control.
  • Fixed positioning és molt similar al posicionament absolut, excepte que fixa un element relatiu a la finestra de visualització del navegador, no un altre element. Això és útil per crear efectes com ara un menú de navegació persistent, que sempre es manté al mateix lloc a la pantalla al desplaçar-se el resta del contingut.

Exemple de posicionament senzill

Per familiaritzar-se amb aquestes tècniques de disseny de pàgina, us mostrarem un parell d'exemples ràpids. Els nostres exemples tindran, tots, el mateix 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>

Aquest HTML serà dissenyat de manera predeterminada mitjançant el següent CSS:

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 dóna és la següent:

Posicionament Relatiu (Relative)

Un ús molt comú del posicionament relatiu és fer petits ajustaments en el disseny, com ara moure una mica una icona, cap avall, perquè s'ajusti a una etiqueta de text. Per fer-ho, podríem afegir la següent regla per afegir un posicionament relati

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

Aquí, donem al nostre paràgraf mitjà un valor position relative - això no fa res per si mateix, així que també afegim les propietats top i left. Aquests serveixen per moure l'element afectat cap avall i a la dreta - això podria semblar el contrari del que s'esperava, però cal pensar-ho com que l'element és empès cap els costats esquerra i superior, cosa que fa que es mogui cap a la dreta i avall.

Si afegiu aquest codi, es mostrarà el següent resultat:

Posicionament absolut (Absolute)

El posicionament absolut s'utilitza per moure els elements a qualsevol lloc de la pàgina web, per crear dissenys complexos. Curiosament, sovint s'utilitza conjuntament amb el posicionament relatiu i flotadors.

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

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

Aquí, donem al nostre paràgraf mitjà un valor position absolute, i les mateixes propietats top i left, com abans. L'addició d'aquest codi, no obstant això, donarà el següent resultat:

Això és molt diferent. L'element posicionat ha quedat totalment separat de la resta del disseny de la pàgina i es troba en la part superior de la mateixa. Els altres dos paràgrafs ara s'assenten junts com si el seu germà posicionat no existís. Les propietats top i left tenen un efecte diferent sobre elements amb posició absoluta que en elements posicionats relativament. En aquest cas, no s'especifica quant es mou l'element respecte a la seva posició original; per contra, s'especifica la distància que l'element ha d'asseure's en els costats superior i esquerre dels limits de la pàgina (l'element <html>, per ser exactes).

Deixarem el posicionament fix per ara - bàsicament funciona de la mateixa manera, excepte que es manté fixat a les vores de la finestra del navegador i no a les vores dels seus pares.

Nota: Per obtenir més informació sobre el posicionament, consulteu els nostres articles de Posicionament i Exemples pràctics de posicionament.

Taules CSS

Les taules HTML són perfectes per mostrar dades tabulars, 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·locant els encapçalaments, els peus de pàgina, les diferents columnes, etc. files i columnes de la taula. Això va funcionar en el moment, però té molts problemes: els dissenys de taules són inflexibles, molt pesats en el marcatje, difícils de depurar i semànticament erronis (per exemple, els usuaris del lector de pantalla tenen problemes per navegar en els dissenys de taules).

Existeixen les taules CSS per permetre als elements de disseny actuar com si fossin una taula, sense cap dels problemes descrits anteriorment - això pot sonar estrany, però heu d'utilitzar elements de taula per a les dades tabulars, podent ser útil de vegades. Per exemple, és possible que vulgueu dissenyar un formulari amb les etiquetes i les entrades de text alineades; Això pot ser complicat, però les taules CSS ho fan fàcil.

Vegem un exemple. Primer, un marcat senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un títol dins d'un paràgraf. Cada parell label/input està embolicat per un <div>, per a 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, el CSS per al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat display. El <form>, <div>s,<label>s i <input>s han estat esmentats perquè es mostrin com una taula de files i cel·les respectivament, bàsicament actuaran com un marcatge de taula HTML, fent que les etiquetes i entrades s'alineïn, bé, per defecte. Tot el que hem de fer és afegir una mica de mida, marge, etc. perquè tot es vegi una mica més agradable i hem acabat.

Notareu que el paràgraf de l'encapçalament ha sigut donat per display: table-caption; - el que fa que actuï com una taula <caption> - i caption-side: bottom; per indicar que el títol s'asseu a la part inferior de la taula amb finalitats d'estil, tot i que el marcat és abans de les entrades en la font. 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 dóna el següent resultat:

També podeu veure aquest exemple en viu a css-tables-example.html (consulteu el codi font també.)

Nota: No cobrirem les taules CSS amb més detall en aquest mòdul.

Caixes flexibles

CSS és un llenguatge poderós, que pot fer moltes coses, però tradicionalment ha caigut en termes de disseny. Els mètodes de disseny tradicionals antiquats com float i positioning funcionen, però de vegades es consideran molt complexos, difícils, inflexibles i dolents del que necessiten ser. Per exemple, què passa si voleu:

  • Centra verticalment una caixa de contingut (no només el text, line-height no funcionarà).
  • Feu que diverses columnes que continguin diferents quantitats de contingut tinguin la mateixa alçada, sense utilitzar una alçada fixada o simulant-ho amb imatges de fons.
  • Feu que diverses caixes, en una línia, ocupin la mateixa quantitat d'espai disponible, independentment de quantes d'elles hi hagi, i si tenen farciments, marges, etc. aplicats.

Els exemples anteriors són pràcticament impossibles d'aconseguir amb CSS regular - es van inventar caixes flexibles (o flexbox) per permetre que aquestes coses es puguin assolir més fàcilment.

Vegem un exemple; Primer, un senzill HTML:

<section>
  <div>This is a box</div>
  <div>This is a box</div>
  <div>This is a box</div>
</section>

<button class="create">Create box</button>
<button class="reset">Reset demo</button>

Aquí tenim un element <section> amb tres <div>s dins, més un parell de botons per crear una nova caixa (create box) i restablir la demostració (Reset demo). De manera predeterminada, els elements fills no es poden establir o dimensionr en absolut, i usant els mètodes tradicionals anteriors hauríem de mesurar acuradament cada un, permetent l'amplada, el farcit, la vora i el marge, i si afegim un altre element fill hauriem de canviar completament tots els valors.

Anem a fer-ho amb Flexbox:

html {
  font-family: sans-serif;
}

section {
  width: 93%;
  height: 240px;
  margin: 20px auto;
  background: purple;
  display: flex;
}

div {
  color: white;
  background: orange;
  flex: 1;
  margin-right: 10px;
  text-shadow: 1px 1px 1px black;
}

div:last-child {
  margin-right: 0;
}

section, div {
  border: 5px solid rgba(0,0,0,0.85);
  padding: 10px;
}

Dues línies d'aquest CSS són realment interessants:

  • display: flex; indica que els fills de l'element <section> es distribueixen com a caixes flexibles - de manera predeterminada, tots elles s'estenen per omplir l'alçada disponible del pare, sigui quina sigui, i es mostrin en una fila - Amb prou ample per embolicar el seu contingut.
  • flex: 1; indica a cada element <div> per ocupar una quantitat igual de l'espai disponible en la fila, no importa quants hi hagi.

Per il·lustrar encara més el sorprenent que és, també afegirem una mica de JavaScript perquè pugueu afegir més fills <div>s prement el botó Crear caixa. També podeu restablir la demostració si afegiu massa <div>s, prement el botó Reset demo.

Aquí teniu l'exemple en viu - teniu un joc, per presenciar com de potent és Flexbox com a eina de disseny.

També podeu trobar aquesta demostració a flexbox-example.html (vegeu també el codi font).

Nota: Per obtenir més informació sobre Flexbox, consulteu el nostre article Flexbox.

Disseny de graella (Grid)

La característica més experimental que cal esmentar aquí són les Graelles CSS, que encara no són ampliament compatibles amb els navegadors. Sovint, les pàgines web es presenten utilitzant sistemes de graella, de la mateixa manera que els mitjans impresos, i la idea aquí és fer que aquest procés sigui més senzill i natural, definint una graella i definint quines parts del contingut es troben dins de cada àrea de la graella.

Les graelles CSS, en el seu estat actual no són compatibles en cap moment (excepte en versions experimentals de Firefox i Chrome). IE i Edge admeten una versió antiga i obsoleta de la tecnologia. Això és quelcom que podem esperar en el futur!.

Note: Per obtenir més informació sobre els marcs (frameworks) de graella actual i altres tecnologies que s'utilitzen avui dia, i sobre la propera especificació nadiva CSS de graelles, consulteu l'article Graelles (Grids).

Resum

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que heu de saber. Seguiu llegint per obtenir més informació sobre cada tecnologia individual!

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,