diff options
Diffstat (limited to 'files/ca/learn/css/building_blocks/cascada_i_herència/index.html')
| -rw-r--r-- | files/ca/learn/css/building_blocks/cascada_i_herència/index.html | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/files/ca/learn/css/building_blocks/cascada_i_herència/index.html b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html new file mode 100644 index 0000000000..09a5e368eb --- /dev/null +++ b/files/ca/learn/css/building_blocks/cascada_i_herència/index.html @@ -0,0 +1,333 @@ +--- +title: Cascada i herència +slug: Learn/CSS/Building_blocks/Cascada_i_herència +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>L’objectiu d’aquest article és desenvolupar la comprensió d’alguns dels conceptes més fonamentals del CSS (la cascada, l’especificitat i l’herència) que controlen com s’aplica el CSS a l’HTML i com es resolen els conflictes.</p> + +<p>Si bé pot semblar que és menys rellevant i una mica més acadèmic que algunes altres parts del curs, la seva comprensió t'estalviarà feina més endavant! T’animem a treballar aquesta secció en profunditat i comprovar que entens els conceptes abans de continuar endavant.</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 d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre què són la cascada i l'especificitat, i com funciona l'herència en CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Regles_conflictives">Regles conflictives</h2> + +<p>CSS significa fulls d'estil en cascada (<strong>cascading style sheets</strong>), i es molt important entendre la paraula, <em>cascada</em>; el comportament de la cascada és clau per a comprendre el CSS.</p> + +<p>En algun moment treballaràs en un projecte i trobaràs que el CSS que creus que s’hauria d’aplicar a un element no funciona. Normalment, el problema és que has creat dues regles que podrien aplicar-se al mateix element. La <strong>cascada</strong> i el concepte d’<strong>especificitat</strong>, que estan estretament relacionats, són mecanismes que controlen quina regla s'aplica quan hi ha aquest conflicte. La regla que dona estil al teu element pot ser que no sigui la que esperaves, per la qual cosa has d'entendre com funcionen aquests mecanismes.</p> + +<p>Aquí també és important el concepte <strong>d'herència</strong>, que significa que algunes propietats CSS per defecte hereten valors establerts per a l'element pare, i d'altres no. Això també pot causar algun comportament que potser no esperes.</p> + +<p>Comencem per fer una ullada ràpida als elements clau que tractem i, a continuació, examinarem com interaccionen entre si i amb el CSS. Poden semblar un conjunt de conceptes complicats d’entendre. A mesura que vagis adquirint pràctica a l'hora d’escriure CSS, se’t farà més evident la manera que té de funcionar.</p> + +<h3 id="La_cascada">La cascada</h3> + +<p>Fulls d’estil en <strong>cascada</strong>: en un nivell molt senzill això significa que l’ordre de les regles CSS és important; quan s’apliquen dues regles que tenen la mateixa especificitat, la que s’utilitza és l'última que surt al codi CSS.</p> + +<p>En l’exemple següent hi ha dues regles que podrien aplicar-se a <code>h1</code>. <code>h1</code> acaba sent de color blau: aquestes regles tenen un selector idèntic i, per tant, porten la mateixa especificitat, de manera que l’última regla en el full d'estil guanya.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="Especificitat">Especificitat</h3> + +<p>L’especificitat és la manera com el navegador decideix quina regla s’aplica si diverses regles tenen selectors diferents i poden aplicar-se al mateix element. Bàsicament és una mesura de com d'específica serà la selecció d'un selector:</p> + +<ul> + <li>Un selector d’elements és menys específic (selecciona tots els elements d’un mateix tipus que apareixen en una pàgina) i, per tant, obté una puntuació més baixa.</li> + <li>Un selector de classes és més específic: només selecciona els elements d'una pàgina que tenen un valor d'atribut <code>class</code> específic, de manera que obté una puntuació més alta.</li> +</ul> + +<p>Vegem-ne un exemple! A continuació, tornem a tenir dues regles que podrien aplicar-se a <code>h1</code>. L’encapçalament <code>h1</code> següent acaba sent de color vermell: el selector de classe dona a aquesta regla una especificitat més alta, i per tant s'aplica encara que la regla amb el selector d'elements apareix més avall en el full d'estil.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>Més endavant explicarem la puntuació de l'especificitat.</p> + +<h3 id="Herència">Herència</h3> + +<p>L’herència també s’ha d’entendre en aquest context: els elements fill hereten alguns valors de propietat CSS que s’han establert en els elements pare, i no n’hereten d’altres.</p> + +<p>Per exemple, si configures un element <code>color</code> i un <code>font-family</code> per a un element, aquest color i tipus de lletra també s’apliquen a tots els elements que hi hagi a dintre, tret que els hi hagis aplicat valors de color i lletra diferents directament.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>Algunes propietats no s'hereten. Per exemple, si estableixes una amplada ({{cssxref("width")}}) del 50% per a un element, cap dels seus elements descendents adquireix una amplada del 50% de l'amplada de l'element pare. Si fos així, seria molt frustrant utilitzar CSS!</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: A les pàgines de referència de les propietats CSS de MDN, pots trobar un quadre d'informació tècnica, normalment a la part inferior de la secció d'especificacions, que enumera diversos punts de dades sobre aquesta propietat, inclòs si s'hereta o no. Consulta, per exemple, la secció <a href="/en-US/docs/Web/CSS/color#Specifications">Especificacions de la propietat del color</a>.</p> +</div> + +<h2 id="Entendre_com_interaccionen_els_conceptes">Entendre com interaccionen els conceptes</h2> + +<p>Aquests tres conceptes controlen quin CSS s'aplica a cada element. En les seccions següents veurem com funcionen conjuntament. De vegades pot semblar una mica complicat, però començaràs a recordar-los a mesura que guanyis experiència amb el CSS, i sempre ho pots tornar a buscar si se t'obliden els detalls. Fins i tot als desenvolupadors experimentats els costa recordar tots els detalls.</p> + +<h2 id="Comprendre_l’herència">Comprendre l’herència</h2> + +<p>Començarem per l'herència. En l'exemple següent hi ha un element {{HTMLElement("ul")}}, que conté dos nivells de llistes no ordenades. Hem definit per a l'element exterior <code><ul></code> una vora i un farciment, i n’hem canviat el color de la lletra.</p> + +<p>El color s’ha aplicat als fills directes i també als indirectes: els elements fill immediats (<code><li></code>) i els que hi ha a la primera llista imbricada. Després, hem afegit una classe <code>special</code> a la segona llista imbricada i hi hem aplicat un color diferent, el qual hereten els fills d’aquesta.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>No s'hereten propietats com l'amplada (com ja s'ha esmentat), els marges, els farciments i les vores. Si els fills de la nostra llista haguessin d’heretar una vora, cada llista i element de llista obtindria una vora, i probablement no sigui un efecte que vulguem.</p> + +<p>Quines propietats s'hereten de manera predeterminada i quines no, es en bona mesura qüestió de sentit comú.</p> + +<h3 id="Control_de_l’herència">Control de l’herència</h3> + +<p>El CSS proporciona quatre valors especials de propietat universal per a controlar l’herència. Totes les propietats CSS admeten aquests valors.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>Estableix el valor de la propietat aplicat a un element seleccionat perquè sigui igual que el de l’element pare. Això, en efecte, «activa l'herència».</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>Estableix que el valor de la propietat que s’aplica a l’element que se selecciona sigui igual que el valor que el full d'estil predeterminat del navegador estableix per a la propietat d’aquest element. Si el full d’estil predeterminat del navegador no estableix cap valor i la propietat s’hereta de manera natural, el valor de la propietat s’estableix en <code>inherit</code>.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>Restableix la propietat al seu valor natural, cosa que significa que si la propietat s’hereta naturalment, actua com a <code>inherit</code>, i en cas contrari, actua com a <code>initial</code>.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: També hi ha un valor més recent, {{cssxref("revert")}}, que té un suport limitat per part dels navegadors.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Consulta la secció {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} per obtenir més informació sobre cadascuna d'elles i el seu funcionament.</p> +</div> + +<p>Podem observar una llista d’enllaços i analitzar com funcionen els valors universals. L’exemple en viu següent et permet jugar amb el CSS i veure què passa si hi fas canvis. Jugar amb el codi és realment la millor manera d’arribar a conèixer l'HTML i el CSS.</p> + +<p>Per exemple:</p> + +<ol> + <li>El segon element de llista té aplicada la classe <code>my-class-1</code>. Estableix el color que hereta l’element <code><a></code> que té imbricat. Com canvia el color de l'enllaç si suprimeixes la regla?</li> + <li>Entens per què el tercer i el quart enllaços són del color que són? Si no és així, repassa la descripció dels valors anteriors.</li> + <li>Quin dels enllaços canvia de color si defineixes un color nou per a l'element <code><a></code>, per exemple <code>a { color: red; }</code>?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="Restablir_tots_els_valors_de_propietat">Restablir tots els valors de propietat</h3> + +<p>La propietat CSS abreviada <code>all</code> es pot utilitzar per a aplicar un d’aquests valors d’herència a (gairebé) totes les propietats alhora. El seu valor pot ser qualsevol dels valors d'herència (<code>inherit</code>, <code>initial</code>, <code>unset</code> o <code>revert</code>). És una manera còmoda de desfer els canvis que s’han aplicat a l’estil de manera que puguis tornar a un punt de partida conegut abans d'introduir canvis nous.</p> + +<p>En l’exemple següent hi ha dues citacions de bloc. La primera té un estil que s’aplica directament sobre la citació de bloc, mentre que la segona té una classe aplicada a la citació de bloc que estableix el valor de <code>all</code> en <code>unset</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p>Prova d’establir el valor <code>all</code> a alguns dels altres valors disponibles i observa quina és la diferència.</p> + +<h2 id="Entendre_la_cascada">Entendre la cascada</h2> + +<p>Ara entenem per què un paràgraf que està profundament imbricat dins l'estructura del teu HTML és del mateix color que el CSS que s’ha especificat per a <code>body</code>, i entenem per què canvia el CSS que, de les lliçons introductòries, hem aplicat a algun element en qualsevol punt del document, ja sigui assignant CSS a un element o creant una classe. Ara farem una ullada de més a prop a com la cascada defineix quines regles CSS s'apliquen quan hi ha més d'un situació que pot aplicar estil a un element.</p> + +<p>Cal considerar tres factors, en un ordre d'importància creixent. Els posteriors anul·len els anteriors:</p> + +<ol> + <li><strong>Ordre dins el codi</strong></li> + <li><strong>Especificitat</strong></li> + <li><strong>Importància</strong></li> +</ol> + +<p>Ara els analitzarem i descobrirem com els navegadors determinen quin CSS han d’aplicar.</p> + +<h3 id="Ordre_dins_el_codi">Ordre dins el codi</h3> + +<p>Ja hem vist com l’ordre dins el codi és important en la cascada. Si hi ha més d’una regla, amb exactament el mateix pes, guanya la que apareix última en el CSS. Pots veure-ho com que les regles que són més properes a l'element sobreescriuen les anteriors fins que l'última guanya i estableix el disseny que es dona a l'element.</p> + +<h3 id="Especificitat_2">Especificitat</h3> + +<p>Un cop entès el fet que l’ordre dins el codi importa, en algun moment et pots topar amb una situació en què saps que no s’aplica la regla que apareix l’última en el full d’estil, sinó una d’anterior. Això es deu al fet que aquesta regla anterior té una <strong>especificitat més elevada</strong>: és més específica i, per tant, el navegador la tria per donar estil a l'element.</p> + +<p>Com hem vist abans en aquest article, un selector de classes té més pes que un selector d’elements, de manera que les propietats definides per a la classe anul·len les que s’apliquen directament per a l’element.</p> + +<p>Una observació important que cal fer aquí és que, tot i que pensem en selectors i regles que s’apliquen a l'element que seleccionen, no es sobreescriu tota la regla, sinó només les propietats que són iguals.</p> + +<p>Aquest comportament ajuda a evitar repeticions dins el CSS. Una pràctica habitual és definir estils genèrics per als elements bàsics, i després crear classes per a aquells que són diferents. Per exemple, en el full d’estil següent hem definit estils genèrics per a títols d’encapçalament de nivell 2 i després hem creat algunes classes que canvien només algunes propietats i valors. Els valors definits inicialment s'apliquen a tots els títols d’encapçalament, i els valors més específics s'apliquen als títols d’encapçalament en què s'ha establert alguna classe.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>Observa ara com calcula l’especificitat el navegador. Ja saps que un selector d’elements té una especificitat baixa i una classe el pot sobreescriure. Essencialment s’atorga un valor en punts als diferents tipus de selectors i, si se sumen, s’obté el pes concret de cada selector, que pot avaluar-se respecte d’altres coincidències potencials.</p> + +<p>La quantitat d'especificitat que presenta un selector es mesura a partir de quatre valors (o components) diferents, que es poden entendre com si fossin milers, centenes, desenes i unitats; quatre dígits simples disposats en quatre columnes:</p> + +<ol> + <li><strong>Milers</strong>: suma un punt en aquesta columna si la declaració es troba continguda dins d’un atribut {{htmlattrxref("style")}}, també conegut com estil de línia. Aquestes declaracions no tenen selectors, de manera que la seva especificitat és sempre de 1.000.</li> + <li><strong>Centenes</strong>: suma un punt en aquesta columna per cada selector d’identificador que està contingut en el selector global.</li> + <li><strong>Desenes</strong>: suma un punt en aquesta columna per cada selector de classe, selector d'atributs o de pseudoclasse que està contingut dins del selector general.</li> + <li><strong>Unitats</strong>: suma un punt en aquesta columna per cada selector d'elements o pseudoelement que està contingut dins del selector general.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: El selector universal (<code>*</code>), els combinadors (<code>+</code>, <code>></code>, <code>~</code>, ' ') i la pseudoclasse de negació (<code>:not</code>) no tenen cap efecte sobre l'especificitat.</p> +</div> + +<p>La taula següent mostra alguns exemples aïllats per posar-te en situació. Estudia aquestes qüestions i assegura't d’entendre per què tenen aquestes especificitats. Encara no hem exposat detalladament els selectors, però pots trobar detalls de cada selector en la <a href="/ca/docs/Web/CSS/Selectors_CSS">pàgina de referència dels selectors</a> de MDN.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector</th> + <th scope="col">Milers</th> + <th scope="col">Centenes</th> + <th scope="col">Desenes</th> + <th scope="col">Unitats</th> + <th scope="col">Especificitat total</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>Cap selector, amb una regla dins de l’atribut {{htmlattrxref ("style")}} d'un element</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>Abans de continuar endavant, observa un exemple en acció.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>Què hi passa, aquí? En primer lloc, només ens interessen les set primeres regles d’aquest exemple i, com ja deus haver observat, hem inclòs els seus valors d’especificitat en un comentari abans de cadascuna.</p> + +<ul> + <li>Els dos primers selectors competeixen per donar estil al color de fons de l'enllaç; el segon guanya i fa que el color de fons sigui blau perquè té un selector d’ID addicional en la cadena: l’especificitat és de 201 contra 101.</li> + <li>Els selectors tercer i quart competeixen per donar estil al color del text de l'enllaç: el segon guanya i fa que el text sigui blanc perquè, encara que té un selector d'elements de menys, el selector que falta es canvia per un selector de classe, que passa de valdre 1 a valdre 10. Així, doncs, l’especificitat guanyadora és de 113 contra 104.</li> + <li>Els selectors 5-7 competeixen per donar estil a la vora de l'enllaç quan el cursor hi passa per sobre. El selector sis perd clarament contra el cinc, amb una especificitat de 23 enfront d’una de 24: té un selector de menys en la cadena. El selector set, però, supera el cinc i el sis: té el mateix nombre de subselectors que cinc en la cadena, però un element ha estat canviat per un selector de classe. Així doncs, l’especificitat guanyadora és 33 contra 23 i 24.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Aquest ha estat només un exemple aproximat per facilitar-ne la comprensió. En realitat, cada tipus de selector té el seu nivell d'especificitat propi, que no pot ser sobreescrit per selectors amb un nivell d'especificitat inferior. Per exemple, una combinació de selectors d’una <strong>classe</strong> <em>milió</em> no podrien sobreescriure les regles d’un selector d’<strong>ID</strong> <em>unitat</em>.</p> + +<p>Una manera més precisa d’avaluar l’especificitat seria puntuar els nivells d’especificitat individualment començant pel més alt i descendint quan sigui necessari. Només quan hi hagi un empat entre puntuacions de selector dins d’un nivell d’especificitat, hauràs d'avaluar el nivell següent; en cas contrari, pots prescindir dels selectors de nivell d’especificitat inferior perquè mai podran sobreescriure els nivells d’especificitat més alts.</p> +</div> + +<h3 id="!important">!important</h3> + +<p>Hi ha una element especial de CSS que podries utilitzar per substituir tots els càlculs anteriors, però has de tenir molta cura a l'hora de fer-lo servir: <code>!important</code>. S’utilitza per fer que una propietat i un valor particulars tinguin l’especificitat màxima; per tant, anul·la les regles normals de la cascada.</p> + +<p>Observa aquest exemple, en què hi ha dos paràgrafs, un dels quals té un selector d’ID.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>Fes-ne la prova i observa què succeeix. Si et costa d’entendre, prova d’eliminar algunes de les propietats i observa què passa:</p> + +<ol> + <li>Veuràs que els valors {{cssxref("color")}} i {{cssxref("padding")}} de la tercera regla s'han aplicat, però {{cssxref("background-color")}} no ho ha fet. Per què? Els tres haurien d’aplicar-se sense cap problema, perquè les regles posteriors en l’ordre del codi en general anul·len les regles anteriors.</li> + <li>Tanmateix, les regles anteriors guanyen perquè els selectors de classe tenen una especificitat més alta que els selectors d’element.</li> + <li>Els dos elements tenen una {{htmlattrxref("class")}} <code>better</code>, però el segon té un {{htmlattrxref("id")}} <code>winning</code>. Com que els ID tenen una especificitat <em>encara més elevada</em> que les classes (només es pot tenir un element amb un determinat ID en una mateixa pàgina, però es poden tenir molts elements amb la mateixa classe: els selectors ID són <em>molt específics</em> amb allò que delimiten), el color de fons vermell i la vora negra d'1 píxel s'aplicaran tots dos estils al segon element, mentre que el primer element té un color de fons gris i cap vora, tal i com especifica la classe.</li> + <li>El segon element <em>si</em> adquireix un color de fons vermell, però no té cap vora. Per què? Perquè la declaració <code>!important</code> de la segona regla s’ha inclòs després de <code>border: none</code>, i això vol dir que aquesta declaració obté el valor de la vora <code>border</code>) de la regla anterior, tot i que l'ID té una especificitat més elevada.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: L'única manera de substituir aquesta declaració <code>!important</code> seria incloure una altra declaració <code>!important</code> en una declaració amb la <em>mateixa especificitat</em> que es trobi més endavant en l'ordre del codi, o que presenti una especificitat més alta.</p> +</div> + +<p>És útil saber que <code>!important</code> existeix perquè sàpigues què és si t’ho trobes en el codi d’algú altre. <strong>Tanmateix, et recomanem fermament que no l'utilitzis tret que no tinguis cap altra alternativa.</strong> <code>!important</code> canvia el funcionament habitual de la cascada, de manera que pot complicar molt la resolució dels problemes de depuració de CSS, sobretot en un full d’estil.</p> + +<p>Una de les situacions en què potser l'has d'utilitzar és quan treballes en un CMS en què no pots editar els mòduls CSS bàsics, però vols substituir un estil que no es pot substituir de cap altra manera. Però, de debò, no ho facis servir si ho pots evitar!</p> + +<h2 id="La_importància_de_la_ubicació_del_CSS">La importància de la ubicació del CSS</h2> + +<p>Per acabar, és útil tenir en compte també que la importància d’una declaració CSS depèn de quin full d’estil s’especifica; és possible que els usuaris estableixin fulls d’estil personalitzats que anul·lin els estils del desenvolupador. Per exemple, l’usuari pot tenir una deficiència visual i pot voler definir una mida de lletra per a totes les pàgines web que visita que sigui el doble de la mida normal, per a poder llegir amb més facilitat.</p> + +<h2 id="En_resum">En resum</h2> + +<p>Les declaracions que entren en conflicte s’aplicaran en l’ordre següent, en què les que apareixen amb posterioritat sempre reescriuen les anteriors:</p> + +<ol> + <li>Declaracions en fulls d’estil d’agent d’usuari (per exemple, els estils predeterminats del navegador, que s’utilitzen quan no s’estableix cap altre estil).</li> + <li>Declaracions normals en fulls d’estil de l’usuari (estils personalitzats que estableix un usuari).</li> + <li>Declaracions normals en fulls d'estil d'autor (aquests són els estils que establim nosaltres, els desenvolupadors web).</li> + <li>Declaracions importants en fulls d’estil d’autor.</li> + <li>Declaracions importants en els fulls d'estil de l'usuari.</li> +</ol> + +<p>Té sentit que els fulls d’estil dels desenvolupadors web reemplacin els fulls d’estil dels usuaris, de manera que el disseny es pot mantenir tal i com es pretén, però a vegades els usuaris tenen bons motius per a anul·lar els estils dels desenvolupadors web, com ja s’ha esmentat; això es pot aconseguir amb <code>!important</code> en les regles d’estil.</p> + +<h2 id="Posa_a_prova_les_teves_habilitats">Posa a prova les teves habilitats</h2> + +<p>Hem vist moltes coses en aquest article. Ets capaç de recordar-ne la informació més important? A <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a> trobaràs més proves per verificar que has retingut aquesta informació abans de continuar.</p> + +<h2 id="Què_segueix">Què segueix?</h2> + +<p>Si has entès el gruix d’aquest article, ja has començat a familiaritzar-te amb la mecànica fonamental del CSS. A continuació, examinarem els selectors amb detall.</p> + +<p>Si no has entès del tot els conceptes de la cascada, l'especificitat i l'herència, no et preocupis. Sens dubte, això és el més complicat que hem exposat fins ara, i a vegades fins i tot els desenvolupadors web professionals ho troben complicat. T’aconsellem que tornis a aquest article unes quantes vegades a mesura que avancis en el curs, i que hi continuïs pensant.</p> + +<p>Torna a aquest punt si comences a trobar-te amb problemes estranys amb estils que no s'apliquen com esperaves. Podria ser un problema d'especificitat.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="En_aquest_mòdul">En aquest mòdul</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors CSS</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectors d'atribut</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadors</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions </a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts </a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li> +</ol> |