1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
---
title: Disseny CSS
slug: Learn/CSS/CSS_layout
tags:
- Beginner
- CSS
- Floating
- Grids
- Guide
- Landing
- Layout
- Learn
- Module
- Multiple column
- Positioning
- flexbox
- float
translation_of: Learn/CSS/CSS_layout
original_slug: Learn/CSS/Disseny_CSS
---
<div>{{LearnSidebar}}</div>
<p class="summary">En aquest punt, ja hem examinat els fonaments de CSS, com l'estil del text, i l'estil i la manipulació de les caixes en el que estroba dins el contingut. Ara és hora de veure com col·locar les caixes al lloc correcte en relació amb la finestra de visualització, entre elles. Hem cobert els requisits previs necessaris de manera que ara podem aprofundir en el disseny CSS, provant diferents paràmetres de visualització, mètodes tradicionals de disseny que inclouen flotants i posicionament, i noves eines de disseny modernas, com flexbox.</p>
<h2 id="Requisits_previs">Requisits previs</h2>
<p><span id="result_box" lang="ca"><span>Abans de començar aquest mòdul, ja hauríeu de:</span></span></p>
<ol>
<li>Estar familiaritzats amb els principis bàsics d' HTML, tal com es descriu en el mòdul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>.</li>
<li>Sentir-vos còmodes amb els fonaments CSS, tal com s'ha tractat a la <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</li>
<li>Entendre com fer <a href="/en-US/docs/Learn/CSS/Styling_boxes">caixes d'estil</a>.</li>
</ol>
<div class="note">
<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) d'exemples de codi, en un programa de codificació en línia com <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
</div>
<h2 id="Guies">Guies</h2>
<p>Aquests articles proporcionaran instruccions sobre les eines i tècniques fonamentals de disseny, disponibles a CSS.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducció al disseny CSS</a></dt>
<dd>Aquest article recapitularà algunes de les característiques de disseny de CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de {{cssxref("display")}} - i introduïm alguns dels conceptes que cobrirem al llarg d'aquest mòdul.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotants</a></dt>
<dd>Originalment per a imatges flotants dins dels blocs de text, la propietat {{cssxref("float")}} s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes a les pàgines web. Aquest article ho explica tot.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionament</a></dt>
<dd>El posicionament us permet treure elements del flux normal de disseny del document, i fer que es comportin de manera diferent, per exemple, asseguts un damunt de l'altre o quedant sempre al mateix lloc dins de la finestra de visualització del navegador. Aquest article explica els diferents valors de {{cssxref("position")}}, i com utilitzar-los.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Exemples pràctics de posicionament</a></dt>
<dd>Amb els conceptes bàsics de posicionament coberts en l'últim article, veurem, ara, com construir un parell d'exemples del món real per il·lustrar quin tipus de coses podeu fer amb el posicionament.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
<dd>Una nova tecnologia, però amb suport, ara, bastant estès en tots els navegadors, <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> està començant a estar preparat per a un ús generalitzat. Flexbox proporciona eines que permeten crear ràpidament dissenys complexos i flexibles i característiques que històricament resulten difícils amb CSS. Aquest article explica tots els fonaments.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Graelles</a></dt>
<dd>Els sistemes de graella són una altra característica molt comuna que s'utilitza en els dissenys de CSS, que solen implementar-se mitjançant flotadors o altres característiques de disseny. Imagineu el disseny com un nombre establert de columnes (p. Ex. 4, 6 o 12) i, a continuació, ajusteu les columnes de contingut dins d'aquestes columnes imaginàries. En aquest article explorarem la idea bàsica sobre la creació d'un sistema de graella, mireu l'ús d'un sistema de graella confeccionat per un marc (framework) de graella i finalitzeu l'experimentació amb les Graelles CSS - una incipient nova funció de navegador fa que l'implementació de disseny de graella a la Web sigui molt més fàcil.</dd>
</dl>
<h2 id="Avaluacions"><span id="result_box" lang="ca"><span>Avaluacions</span></span></h2>
<p><span id="result_box" lang="ca"><span>Les següents avaluacions posaran a prova la vostra capacitat per dissenyar pàgines web amb CSS.</span></span></p>
<dl>
<dt>Creació d'un disseny flexible multicolumna (TBD)</dt>
<dd>Aquesta avaluació provarà la vostra capacitat per crear un disseny estàndard de diverses columnes, amb algunes característiques interessants.</dd>
<dt>Creació d'un widget de control fix (TBD)</dt>
<dd>Aquesta avaluació desafia la vostra comprensió del posicionament, demanant-vos que creeu un widget de control de posició fix que permeti a l'usuari accedir als controls d'una aplicació web independentment d'on es desplaci.</dd>
</dl>
|
