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
|
---
title: Sintaxi
slug: Web/CSS/Sintaxi
tags:
- CSS
- Guide
- Reference
- Web
translation_of: Web/CSS/Syntax
---
<div>{{cssref}}</div>
<p>L'objectiu bàsic del llenguatge de la Fulla d'Estil en Cascada (CSS) és permetre que un motor del navegador pinti elements de la pàgina amb característiques específiques, com ara colors, posicionament o decoracions. La <em>sintaxi CSS</em> reflecteix aquest objectiu i els seus components bàsics són:</p>
<ul>
<li>La <strong>propietat</strong> és un identificador, és un <em>nom</em> legible per humans, que defineix quina característica es considera.</li>
<li>El <strong>valor</strong> descriu com el motor ha de manejar la característica. Cada propietat té un conjunt de valors vàlids, definits per una gramàtica formal, així com un significat semàntic, implementat pel motor del navegador.</li>
</ul>
<h2 id="Declaracions_CSS">Declaracions CSS</h2>
<p>Establir propietats CSS a valors específics és la funció principal del llenguatge CSS. Un parell de propietats i valors s'anomena <strong>declaració</strong>, i qualsevol motor CSS calcula quines declaracions s'apliquen a cada element d'una pàgina per tal d'establir-la de forma adequada i definir-la.</p>
<p>Les dues propietats i els valors no són sensibles a majúscules i minúscules de manera predeterminada a CSS. El parell està separat per dos punts, ':' (U + 003A COLON), i els espais en blanc abans, entre i després de les propietats i valors, però no necessàriament a l'interior, s'ignoren.</p>
<p><img alt="css syntax - declaration.png" class="default internal" src="/@api/deki/files/6164/=css_syntax_-_declaration.png" style="border: 1px solid black; padding: 1em;"></p>
<p>Hi ha més de <a href="/en/CSS/CSS_Reference" title="en/CSS/CSS_Reference">100 propiertats diferents</a> en CSS i un nombre gairebé infinit de valors diferents. No es permeten tots els parells de propietats i valors i cada propietat defineix quins són els valors vàlids. Quan un valor no és vàlid per a una propietat determinada, la declaració es considera <em>invàlida</em> i és totalment ignorada per el motor CSS .</p>
<h2 id="Blocs_de_declaracions_CSS">Blocs de declaracions CSS</h2>
<p>Les declaracions s'agrupen en <strong>blocs</strong>, és a dir, en una estructura delimitada per una clau d'obertura, '<code>{</code>' (<code>U+007B LEFT CURLY BRACKET</code>), i una de tancament, '<code>}</code>' (<code>U+007D RIGHT CURLY BRACKET</code>). Els blocs de vegades poden ser niats, de manera que les claus d'oberture i tancament han de coincidir.</p>
<p><img alt="css syntax - block.png" class="default internal" src="/@api/deki/files/6165/=css_syntax_-_block.png" style="border: 1px solid black; padding: 1em;"></p>
<p>Aquests blocs són naturalment anomenats blocs de declaració i les declaracions dins d'elles estan separades per un punt i coma, ';' (U + 003B SEMICOLON). Un bloc de declaració pot estar buit, aixó és, que conté una declaració nul·la. Els espais en blanc al voltant de les declaracions s'ignoren. L'última declaració d'un bloc no necessita ser acabada per un punt i coma, tot i que sovint es considera un bon estil per fer-ho ja que evita oblidar-se d'afegir-lo quan s'estén el bloc amb una altra declaració.</p>
<p><img alt="css syntax - declarations block.png" class="default internal" src="/@api/deki/files/6166/=css_syntax_-_declarations_block.png" style="border: 1px solid black; padding: 1em;"></p>
<div class="note">El contingut d'un bloc de declaració CSS, és una llista de declaracions separades per punt i coma, sense les claus inicials i de tancament, es pot incloure dins d'un atribut d'<a href="/en/HTML/Global_attributes#attr-style" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-style"><code>estil</code></a>.</div>
<h2 id="Regles_de_CSS">Regles de CSS</h2>
<p>Si les fulles d'estil només poguessin aplicar una declaració a cada element d'una pàgina web, serien bastant inútils. L'objectiu real és aplicar diferents declaracions a diferents parts del document.</p>
<p>CSS ho permet associant condicions amb blocs de declaracions. Cada bloc de declaració (vàlid) està precedit d'un o més selectors que són condicions que seleccionen alguns elements de la pàgina. El bloc de declaracions d'un grup de parells de selectors s'anomena un <strong>conjunt de regles</strong> (<strong>ruleset</strong>), o sovint només una <strong>regla</strong> (<strong>rule</strong>).</p>
<p><img alt="css syntax - ruleset.png" class="default internal" src="/@api/deki/files/6167/=css_syntax_-_ruleset.png" style="border: 1px solid black; padding: 1em;"></p>
<p>Com que un element de la pàgina pot coincidir amb diversos selectors i, per tant, amb diverses regles que poden incloure una propietat determinada en diverses ocasions, amb valors diferents, l'estàndard CSS defineix quina té prioritat sobre l'altra i s'ha d'aplicar: això s'anomena algorisme en <a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="Cascading and inheritance">cascade</a>.</p>
<div class="note">És important notar que fins i tot si un conjunt de regles caracteritzat per un grup de selectors és una espècie d'abreviatura que reemplaça els conjunts de regles amb un sol selector cadascun, això no s'aplica a la validesa del conjunt de regles en si.<br>
<br>
Això dóna lloc a una conseqüència important: si un únic selector bàsic no és vàlid, com quan s'utilitza un pseudo-element o pseudo-classe desconegut, el selector sencer és invàlid i per tant s'ignora tota la regla (no és vàlida).</div>
<h2 id="Sentències_CSS"><span id="result_box" lang="ca"><span>Sentències CSS</span></span></h2>
<p>Els conjunts de regles són els blocs principals de construcció d'una fulla d'estil, que sovint només consisteixen en una gran llista d'elles. Però hi ha una altra informació que un autor web vol transmetre en la fulla d'estil, com el joc de caràcters, altres fulles d'estil externes per importar, descripcions de tipus de fonts o comptadors de llistes i molts més. Utilitzarà altres tipus específics de declaracions per fer-ho.</p>
<p>Una <strong>declaració</strong> és un bloc de construcció que comença amb qualsevol caràcter que no sigui l'espai i que finalitza en la primera clau de tancament o punt i coma (fora d'una cadena, no escapada i no s'inclou en un altre parell de {}, () o []).</p>
<p><img alt="css syntax - statements Venn diag.png" class="default internal" src="/@api/deki/files/6168/=css_syntax_-_statements_Venn_diag.png" style="padding: 1em;"></p>
<p>Hi ha dos tipus de declaracions:</p>
<ul>
<li><strong>Conjunt de regles</strong> (<strong>Rulesets</strong>) (o regles) que, com es veu, associen una col·lecció de declaracions CSS a una condició descrita per un selector.</li>
<li><strong>Regles-At </strong>(<strong>At-rules</strong>) comencen amb un signe, '<code>@</code>' (<code>U+0040 COMMERCIAL AT</code>), seguit d'un identificador i, després continuen fins al final de la sentència, és a dir fins al següent punt i coma (;) fora d'un bloc o al final del bloc següent. Cada tipus de <a href="/en/CSS/At-rule" title="At-rule">regles-at</a>, definides per l'identificador, poden tenir la seva pròpia sintaxi interna, i la semàntica per descomptat. S'utilitzen per transmetre informació de metadades (com {{cssxref("@charset")}} o {{cssxref("@import")}}), informació condicional (com {{cssxref("@media")}} o {{cssxref("@document")}}), o informació descriptiva (com {{cssxref("@font-face")}}).</li>
</ul>
<p>Qualsevol declaració que no sigui un conjunt de regles (ruleset) o una at-rule no és vàlida i és ignorada.</p>
<p><a name="nested_statements">Hi ha un altre grup de declaracions – les <strong>declaracions niades.</strong> Aquestes són declaracions que es poden utilitzar en un subconjunt específic de regles-at – les <em>regles de grup condicional</em>. Aquestes declaracions només s'apliquen si es compleix una condició específica: el contingut de la regla-at <code>@media</code> només s'aplica si el dispositiu en què el navegador s'executa coincideix amb la condició expressada; el contingut de la regla-at <code>@document</code> només s'aplica si la pàgina actual coincideix amb algunes condicions, i així successivament. En CSS1 i CSS2.1, només es podien utilitzar <em>conjunts de regles</em> dins de les regles de grup condicional. Això va ser molt restrictiu i aquesta restricció es va aixecar en </a><a href="/en/CSS/CSS3#Conditionals" title="en/CSS/CSS3#Conditionals"><em>CSS Conditionals Level 3</em></a>. Ara, tot i que encara és experimental i no és compatible amb tots els navegadors, les regles de grup condicional poden contenir un rang de contingut més ampli: però també alguns conjunts de regles, però no totes les regles-at.</p>
<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2>
<ul>
<li>{{ CSS_key_concepts()}}</li>
</ul>
|
