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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
title: Què és el CSS?
slug: Learn/CSS/First_steps/What_is_CSS
translation_of: Learn/CSS/First_steps/What_is_CSS
original_slug: Learn/CSS/First_steps/Que_es_el_CSS
---
<div>{{LearnSidebar}}</div>
<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
<p class="summary">Els fulls d'estil en cascada (<strong>{{Glossary("CSS")}}</strong> o cascading style sheets) et permeten crear pàgines web atractives; però, com funcionen realment? Aquest article explica què és el CSS amb un exemple de sintaxi senzilla, i també inclou alguns termes clau sobre aquest llenguatge informàtic.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prerequisits:</th>
<td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i amb HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>).</td>
</tr>
<tr>
<th scope="row">Objectiu:</th>
<td>Aprendre què és el CSS.</td>
</tr>
</tbody>
</table>
<p>Al mòdul <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a> exposem què és l’HTML i com s'utilitza per a etiquetar documents. Aquests documents es podran llegir en un navegador web. Els títols d’encapçalament es veuran més grans que el text normal, els paràgrafs començaran en una línia nova i estaran separats per un espai entre ells. Als enllaços se'ls dona color i es subratllen per a distingir-los de la resta del text. El que veus són els estils predeterminats del navegador: estils molt bàsics que el navegador aplica a l'HTML per a assegurar-se que es pot llegir, fins i tot si l'autor de la pàgina no especifica cap estil explícit.</p>
<p><img alt="Els estils predeterminats que utilitza un navegador" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
<p>No obstant això, Internet seria un lloc avorrit si tots els llocs web fossin així. Amb CSS pots controlar exactament com es veuen els elements HTML al navegador, i presentar el teu etiquetatge amb el disseny que t'agradi.</p>
<h2 id="Per_a_què_serveix_el_CSS">Per a què serveix el CSS?</h2>
<p>Com hem comentat anteriorment, el CSS és un llenguatge informàtic que especifica com es presenten els documents als usuaris, com se’ls aplica estil, s’elaboren, etc.</p>
<p>Un <strong>document</strong> sol ser un fitxer de text estructurat que utilitza un llenguatge d’etiquetatge: {{Glossary("HTML")}} és el més comú, però també en pots trobar d'altres com ara {{Glossary("SVG")}} or {{Glossary("XML")}}.</p>
<p><strong>Presentar</strong> un document a un usuari significa convertir-lo en una forma que el públic pugui fer servir. Els {{Glossary("browser","navegadors")}} com {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} o {{Glossary("Microsoft Edge","Edge")}} estan dissenyats per a presentar documents visualment, per exemple, en una pantalla d'ordinador, un projector o una impressora.</p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: De vegades, als navegadors se'ls anomena {{Glossary("User agent","agents d'usuari")}}, que significa bàsicament un programa informàtic que representa a una persona dins d'un sistema informàtic. Els navegadors són el principal tipus d’agent d’usuari en què pensem quan parlem de CSS, però no són l’únic. Hi ha altres agents d'usuari disponibles, com els que converteixen documents HTML i CSS en PDF per a imprimir.</p>
</div>
<p>El CSS es pot fer servir per a dissenyar el text de documents molt bàsics, per exemple, per a canviar el <a href="/en-US/docs/Web/CSS/color_value">color</a> i la <a href="/en-US/docs/Web/CSS/font-size">mida de la lletra</a> dels títols i els enllaços. Es pot utilitzar per a donar disseny de la pàgina web; per exemple, convertir una sola columna de text en un disseny de pàgina amb una àrea de contingut principal i una barra lateral per a obtenir informació relacionada. Fins i tot es pot utilitzar per a efectes com <a href="/en-US/docs/Web/CSS/CSS_Animations">l’animació</a>. Consulta els enllaços d’aquest paràgraf per a obtenir exemples concrets.</p>
<h2 id="La_sintaxi_CSS">La sintaxi CSS</h2>
<p>El CSS és un llenguatge basat en regles: cada usuari defineix regles que especifiquen grups d’estils que s’han d’aplicar a determinats elements o grups d’elements de la teva pàgina web. Per exemple: «Vull que el títol d’encapçalament principal de la pàgina es vegi amb lletra gran i de color vermell».</p>
<p>El codi següent mostra una regla CSS molt simple que aplicaria l'estil descrit al paràgraf anterior:</p>
<pre class="brush: css notranslate">h1 {
color: red;
font-size: 5em;
}</pre>
<p>La regla s’obre amb un {{Glossary("CSS Selector", "selector")}}, que <em>selecciona</em> l'element HTML al qual aplicarem estil. En aquest cas, aplicarem estil als títols de nivell 1 ({{htmlelement ("h1")}}).</p>
<p>Tot seguit, hi ha un conjunt de claus <code>{ }</code>, i a dins hi haurà una o més <strong>declaracions</strong>, que prenen la forma de parells <strong>propietat</strong> i <strong>valor</strong>. Cada parell especifica una propietat dels elements que seleccionem i, a continuació, un valor que volem donar a la propietat.</p>
<p>Abans de la clau hi ha la propietat, i després, el valor. Les {{Glossary("property/CSS","propietats")}} CSS admeten diferents valors, depenent de quina propietat s'especifica. En el nostre exemple, tenim la propietat <code>color</code>, que pot prendre diversos <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Color">valors de color</a>. També hi ha la propietat <code>font-size</code>. Aquesta propietat pot prendre diverses <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Nombres_longituds_i_percentatges">unitats de mida</a> com a valor.</p>
<p>Un full d’estils CSS contindrà moltes regles d’aquestes, escrites l’una darrere de l’altra.</p>
<pre class="brush: css notranslate">h1 {
color: red;
font-size: 5em;
}
p {
color: black;
}</pre>
<p>Trobaràs que aprens ràpidament alguns valors, mentre que d’altres els hauràs de buscar. Les pàgines de propietat individuals del projecte MDN t'ofereixen una manera ràpida de cercar propietats i els seus valors si se t’obliden o si vols saber què més pots fer servir com a valor.</p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: Pots trobar enllaços a totes les pàgines de propietat CSS (juntament amb altres funcions CSS) a la pàgina de <a href="/ca/docs/Web/CSS/Referéncia_CSS">referències CSS</a> de MDN. De manera alternativa, t'has d’acostumar a cercar «mdn <em>css-feature-name</em>» al teu motor de cerca preferit sempre que necessitis més informació sobre una característica CSS. Per exemple, prova de cercar «mdn color» i «mdn font-size».</p>
</div>
<h2 id="Mòduls_CSS">Mòduls CSS</h2>
<p>Com que amb CSS es pot aplicar estil a tantes coses, el llenguatge es desglossa en <em>mòduls</em>. Veuràs diverses referències a aquests mòduls a mesura que explores la pàgina de MDN i moltes de les pàgines de documentació que s’organitzen al voltant d’un mòdul determinat. Per exemple, pots donar una ullada a la referència MDN en el mòdul <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Fons i vores</a> per a esbrinar quin n’és el propòsit i quines en són les diferents propietats i altres característiques que conté. També trobaràs enllaços a <em>l’especificació CSS</em> que defineix la tecnologia.</p>
<p>En aquesta fase, no t'has de preocupar gaire de la manera en què s’estructura el CSS, però pot facilitar la cerca d’informació si, per exemple, saps que és probable que una propietat determinada es trobi entre altres coses similars i, probablement, en la mateixa especificació. </p>
<p>Per veure un exemple concret, tornem al mòdul Fons i vores; podries pensar que té sentit lògic que les propietats <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> i <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> es defineixin en aquest mòdul. I tens raó.</p>
<h3 id="Especificacions_CSS">Especificacions CSS</h3>
<p>Totes les tecnologies d’estàndards web (HTML, CSS, JavaScript, etc.) estan definides en extensos documents anomenats especificacions (o simplement «specs»), que publiquen les organitzacions d’estàndards (com {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) i defineixen amb precisió com se suposa que aquestes tecnologies han de comportar-se.</p>
<p>El CSS no és diferent: el desenvolupa un grup del W3C anomenat <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Aquest grup està format per representants de creadors de navegadors i altres empreses que tenen interès en el CSS. També hi ha altres persones, conegudes com a experts convidats, que actuen com a veus independents, i que no estan vinculats a cap organització.</p>
<p>El CSS Working Group desenvolupa i especifica les noves funcions CSS. De vegades, perquè un navegador determinat està interessat a tenir alguna capacitat, d’altres vegades perquè els dissenyadors i els desenvolupadors web demanen una funció i, de vegades, perquè el grup de treball mateix ha identificat un requisit. El CSS es troba en desenvolupament constant, introduint característiques noves. Tot i això, una cosa clau sobre CSS és que tothom treballa molt per no canviar mai les coses d’una manera que trenqui els llocs web antics. Un lloc web creat el 2000, que utilitza el CSS limitat que hi havia aleshores, encara es pot fer servir avui dia.</p>
<p>Com a nouvingut al CSS, és probable que trobis aclaparadores les especificacions CSS, ja que estan destinades a l’ús dels enginyers perquè les utilitzin per a implementar-ne suport als d'agents d’usuari, no perquè els desenvolupadors web les llegeixin. Molts desenvolupadors experimentats preferirien consultar la documentació a MDN o en altres tutorials. No obstant això, val la pena saber que existeixen, i entendre la relació que hi ha entre el CSS que utilitzes, el suport del navegador i les especificacions.</p>
<h2 id="Suport_dels_navegadors">Suport dels navegadors</h2>
<p>Un cop especificat el CSS, només ens és útil per desenvolupar pàgines web si un o més navegadors l’han implementat. Això vol dir que el codi ha estat escrit per a convertir la instrucció del nostre fitxer CSS en quelcom que pugui sortir a la pantalla. Analitzarem més aquest procés en l’article <a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">Com funciona el CSS</a>. És inusual que tots els navegadors implementin una característica alhora, i per tant hi sol haver un buit en quina part del CSS es pot fer servir en quins navegadors i en quins no. Per això, és útil ser capaç de comprovar l’estat d’implementació. A cada pàgina de propietats de MDN pots veure l'estat de la propietat que t'interessa, de manera que pots saber si pots fer-la servir en un lloc web.</p>
<p>El que segueix és el gràfic de dades de compatibilitat per a la propietat <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> de CSS.</p>
<p>{{Compat("css.properties.font-family")}}</p>
<h2 id="Què_segueix">Què segueix</h2>
<p>Ara que coneixes què és el CSS, passem a <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Començar amb el CSS</a>, on pots començar a escriure algun codi CSS.</p>
<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
<h2 id="En_aquest_mòdul">En aquest mòdul</h2>
<ol>
<li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Què és el el CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Primers passos amb el CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Com s'estructura el CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Com funciona el CSS</a></li>
<li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Aplica els teus nous coneixements</a></li>
</ol>
|
