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
|
---
title: CSS
slug: Learn/CSS
tags:
- Beginner
- CSS
- CodingScripting
- Debugging
- Landing
- NeedsContent
- NeedsTranslation
- Topic
- TopicStub
- length
- specificity
translation_of: Learn/CSS
---
<div>{{LearnSidebar}}</div>
<p class="summary">Les Fulles d'estil en cascada (de l'anglès <em>Cascading Stylesheets</em> {{glossary("CSS")}}) és la segona tecnologia que hauries de començar a aprendre després de l'{{glossary("HTML")}}. Mentre que l'HTML s'utilitza per definir l'estructura i la semàntica del teu contingut, el CSS s'utilitza per donar-li estil i forma. Per exemple, pots utilitzar CSS per modificar el color, mida i espaiat de la tipografia del contingut, dividir-lo en múltiples columnes o afegir animacions i altres funcionalitats decoratives.</p>
<h2 id="Itinerari_d'aprenentatge">Itinerari d'aprenentatge</h2>
<p>Abans de començar amb CSS s'han d'aprendre els aspectes bàsics d'HTML. Recomanem que primer facis un cop d'ull a la nostra <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a> i posteriorment podràs aprendre:</p>
<ul>
<li>CSS, començant amb el mòdul l'introducció a CSS</li>
<li><a href="/en-US/Learn/HTML#Modules">Mòduls HTML</a> més avançats</li>
<li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a> i com utilitzar-lo per afegir funcionalitats dinàmiques a les pàgines web</li>
</ul>
<p>Es recomana aprendre HTML i CSS a la vegada, treballant de manera conjunta les dues disciplines. Això es deu a que HTML és molt més interessant conjuntament amb CSS i no pots aprendre CSS sense saber HTML.</p>
<p>Abans de començar aquest tema, hauries d'estar familiaritzat amb l'ús d'ordinadors i l'utilització passiva del Web (per exemple navegant i consumint contingut). Hauries de tenir configurat un entorn de treball bàsic com es detalla a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Instal·lant programari bàsic</a> i entendre com crear i gestionar arxius, com es detalla a <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Treballant amb arxius.</a> Ambdós temes formen part del mòdul complet per a principiants <a href="/en-US/docs/Learn/Getting_started_with_the_web">Començant amb la web</a>.</p>
<p>Malgrat que no és absolutament necessari, es recomana treballar el mòdul <a href="/en-US/docs/Learn/Getting_started_with_the_web">Començant amb la web</a> abans de començar amb aquest tema. Gran part del tractat a l'article d'introducció a CSS també es tracta al mòdul d'introducció a CSS, encara que d'una manera més detallada.</p>
<h2 id="Mòduls">Mòduls</h2>
<p>Aquest tema conté els següents mòduls en un ordre recomanat per un correcte aprenentatge. Es recomana que comencis pel primer.</p>
<dl>
<dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a></dt>
<dd>Aquest mòdul t'introdueix als conceptes bàsics de com funciona CSS, incloent selectors i propietats, escrivint regles CSS, aplicant CSS a l'HTML, com especificar longitud, color i altres unitats a CSS, cascada i herència, conceptes bàsic del model de caixes i depurant el CSS.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_text">Donant estil al text</a></dt>
<dd>Aqui veurem els aspectes bàsics dels estils de text: tipografia, gruixudària, cursiva, espai d'interlínia, espai entre caràcters, ombres i altres funcions que es poden aplicar al text. Acabarem d'arrodonir el mòdul fent un cop d'ull a la manera d'aplicar tipografies personalitzades a la teva pàgina web, donar estil a llistes i enllaços.</dd>
<dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Donant estil a les caixes</a></dt>
<dd>A continuació, veurem com donar estil a les caixes, un dels passos fonamentals per poder maquetar una pàgina web. En aquest mòdul resumirem el model de caixa i veurem com controlar la maquetació de les caixes, donan-hi espaiat, vores i marges, configurant colors de fons, imatges i altres funcionalitats divertides com per exemple ombrejat i filtres.</dd>
<dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Disseny CSS</a></dt>
<dd>Arribats a aquest punt ja hem vist els aspectes bàsics de CSS, com donar estil al text i com manipular les caixes on posem el contingut. Ara és moment de veure com posicionar les caixes al lloc correcte en relació a la finestra de visualització o a la resta de caixes. Hem cobert els prerequisits necessaris amb el que ens podem submergir a la maquetació CSS, veure les diferents configuracions de visualització, mètodes tradicionals utilitzant float i posicionament i les noves eines de maquetació com per exemple flexbox.</dd>
<dt>Disseny Adaptable</dt>
<dd>Amb tants tipus de dispositius amb els que es pot navegar per la Web avui en dia, el <a href="/en-US/docs/Web/Guide/Responsive_design">disseny web adaptable</a> (<em>RWD - Responsive Web Design</em>) ha esdevingut un aspecte clau pel que fa al desenvolupament de pàgines web. Aquest mòdul cobrirà les eines i principis bàsics del RWD, explicarà com aplicar diferents estils de CSS a un document en funció de les diferents característiques del dispositiu com poden ser la mida de la pantalla, orientació, i resolució i explorarà les tecnologies que tenim al nostre abast per servir vídeo i imatges en funció d'aquestes característiques.</dd>
</dl>
<h2 id="Resolent_problemes_habituals_de_CSS">Resolent problemes habituals de CSS</h2>
<p><a href="/en-US/docs/Learn/CSS/Howto">Ús de CSS per resoldre problemes habituals</a> ofereix enllaços a seccions de contingut explicant com utilitzar CSS per resoldre problemes molt habituals en el moment de crear pàgines web.</p>
<h2 id="Veure_també">Veure també</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS">CSS a MDN</a></dt>
<dd>Principal punt d'entrada de la documentació sobre CSS a MDN, on trobaràs una documentació detallada de totes les funcionalitats del llenguatge CSS. Vols saber tots els valors que pot prendre una determinada propietat? Aquest és el lloc on anar.</dd>
</dl>
|
