diff options
Diffstat (limited to 'files/ca/learn/css/first_steps')
5 files changed, 1096 insertions, 0 deletions
diff --git a/files/ca/learn/css/first_steps/com_començar_amb_css/index.html b/files/ca/learn/css/first_steps/com_començar_amb_css/index.html new file mode 100644 index 0000000000..dfc1ae29b3 --- /dev/null +++ b/files/ca/learn/css/first_steps/com_començar_amb_css/index.html @@ -0,0 +1,254 @@ +--- +title: Com començar amb CSS +slug: Learn/CSS/First_steps/Com_començar_amb_CSS +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">En aquest article, agafarem un document HTML senzill i hi aplicarem una mica de CSS per aprendre algunes coses pràctiques 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 d'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>Comprendre els fonaments bàsics d’enllaçar un document CSS a un fitxer HTML i poder crear un text simple amb CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Començar_amb_lHTML">Començar amb l'HTML</h2> + +<p>El nostre punt de partida és un document HTML. Pots copiar el codi de sota si vols treballar al teu propi ordinador. Desa el codi de sota com a <code>index.html</code> en una carpeta de l'ordinador.</p> + +<pre class="brush: html notranslate"><!doctype html> +<html lang="ca"> +<head> + <meta charset="utf-8"> + <title>Introducció al CSS</title> +</head> + +<body> + + <h1>Sóc un títol de nivell u</h1> + + <p>Aquest és un paràgraf de text. Al text hi ha un <span>element span</span> +i també un enllaç <a href="http://example.com">link</a>.</p> + + <p>Aquest és el segon paràgraf. Conté un element <em>subratllat</em>.</p> + + <ul> + <li>Article 1</li> + <li>Article 2</li> + <li>Article <em>tres</em></li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si llegeixes això en un dispositiu o en un entorn on no pots crear fitxers fàcilment, no et preocupis: a continuació es mostren editors de codi en directe per a escriure un exemple de codi aquí a la pàgina.</p> +</div> + +<h2 id="Afegir_CSS_al_nostre_document">Afegir CSS al nostre document</h2> + +<p>El primer que hem de fer és dir al document HTML que tenim unes regles CSS que volem que utilitzi. Habitualment trobaràs tres maneres diferents d’aplicar CSS a un document HTML, però de moment examinarem la manera més comuna i útil: enllaçar el CSS des de la capçalera del document.</p> + +<p>Crea un fitxer a la mateixa carpeta que el teu document HTML i desa’l com <code>styles.css</code>. L’extensió <code>.css</code> mostra que es tracta d’un fitxer CSS.</p> + +<p>Per a enllaçar <code>styles.css</code> a <code>index.html</code>, afegeix la línia següent en algun lloc de la capçalera ({{htmlelement("head")}}) del document HTML:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>Aquest element {{htmlelement("link")}} indica al navegador que hi ha un full d'estil i utilitza l'atribut <code>rel</code> i la ubicació d'aquest full d'estil com a valor de l'atribut <code>href</code>. Pots provar si funciona el CSS afegint una regla a <code>styles.css</code>. Fent servir l'editor de codi, afegeix el següent al fitxer CSS:</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>Desa els fitxers HTML i CSS i torna a carregar la pàgina en un navegador web. Ara el títol d’encapçalament de primer nivell a la part superior del document s'ha de veure de color vermell. Si això succeeix, enhorabona: has aplicat amb èxit una mica de CSS a un document HTML. Si això no passa, comprova ho has escrit tot correctament.</p> + +<p>Pots continuar treballant amb <code>styles.css</code> localment, o bé pots utilitzar el nostre editor interactiu, que trobaràs a continuació, per continuar amb aquest tutorial. L’editor interactiu actua com si el CSS del primer quadre estigués vinculat al document HTML, tal com passa amb el nostre document anterior.</p> + +<h2 id="Aplicar_estil_als_elements_HTML">Aplicar estil als elements HTML</h2> + +<p>En tornar el títol vermell, ja hem demostrat que podem seleccionar un element HTML i aplicar-hi estil. Ho fem delimitant un <em>selector d’elements</em>: un seleccionador que coincideix directament amb un nom d’element HTML. Per a seleccionar tots els paràgrafs del document, utilitzaries el selector <code>p</code>. Per a convertir tots els paràgrafs en verd, faries servir:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>Pots seleccionar diversos selectors alhora, separats amb una coma. Si volem que tots els paràgrafs i tots els elements de la llista siguin verds, la regla ha de ser la següent:</p> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>Prova-ho a l’editor interactiu següent (edita els quadres de codi) o al teu document CSS local.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Canviar_el_comportament_predeterminat_dels_elements">Canviar el comportament predeterminat dels elements</h2> + +<p>Quan observem un document HTML ben marcat, fins i tot una cosa tan simple com el nostre exemple, podem veure que el navegador afegeix algun estil per defecte per fer que l’HTML sigui llegible. Els títols són grans i en lletra negreta i la nostra llista inclou vinyetes. Això passa perquè els navegadors tenen fulls d’estil interns que contenen estils predeterminats que s’apliquen per defecte a totes les pàgines; sense això no hi hauria distincions dins el text i hauríem d’aplicar estil a tot des de zero. Tots els navegadors moderns mostren el contingut HTML de la mateixa manera per defecte.</p> + +<p>Tanmateix, sovint voldràs alguna cosa que no sigui la tria que ha fet el navegador. Això es pot fer escollint només l’element HTML que vols canviar i fent servir una regla CSS per a canviar-ne l’aspecte. Un bon exemple és <code><ul></code>, que marca una llista no ordenada. Mostra boletes en els elements de llista, però si decideixo que no les vull, les puc eliminar:</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>Prova d’afegir això al teu CSS.</p> + +<p>És una bona opció consultar la propietat <code>list-style-type</code> a la pàgina de MDN per veure quins valors admet. Per provar uns valors diferents, dona una ullada a la pàgina <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code>, on trobaràs un exemple interactiu a la part superior de la pàgina i, a continuació, es detallen tots els valors que s’admeten.</p> + +<p>Si consultes aquesta pàgina, descobriràs que, a banda d’eliminar les vinyetes de la llista, també les pots canviar: prova de canviar-les per vinyetes quadrades amb el valor <code>square</code>.</p> + +<h2 id="Afegir_una_classe">Afegir una classe</h2> + +<p>Fins al moment hem dissenyat elements basats en els seus noms en HTML. Això funciona sempre que vulguis que tots els elements d’aquest tipus del document presentin el mateix aspecte. Moltes vegades no és el cas, així que hauràs de trobar la manera de seleccionar un subconjunt dels elements sense canviar els altres. La manera més habitual de fer-ho és afegir una classe a l'element HTML i delimitar aquesta classe.</p> + +<p>Al teu document HTML, afegeix un <a href="/ca/docs/Web/HTML/Global_attributes/class">atribut de classe</a> al segon element de la llista. La teva llista ara es veurà així:</p> + +<pre class="brush: html notranslate"><ul> + <li>Article 1</li> + <li <strong>class="special"</strong>>Item two</li> + <li>Article <em>tres</em></li> +</ul></pre> + +<p>Al teu CSS pots seleccionar la classe <code>special</code> creant un selector que comenci amb un punt. Afegeix el següent al teu fitxer CSS:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Desa i actualitza per veure quin és el resultat.</p> + +<p>Pots aplicar la classe <code>special</code> a qualsevol element de la pàgina que vulguis que tingui el mateix aspecte que aquesta llista. Per exemple, potser vols que l’element <code><span></code> del paràgraf també es vegi de color taronja i en negreta. Prova d’afegir-hi una classe <code>special</code> i torna a carregar la pàgina, i observa què passa.</p> + +<p>De vegades veuràs regles amb un selector que enumera el selector d’elements HTML juntament amb la classe:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Aquesta sintaxi vol dir «selecciona qualsevol element <code>li</code> que tingui una classe <code>special</code>». Si ho fas així, ja no podràs aplicar la classe a un element <code><span></code> o qualsevol altre element simplement afegint-hi la classe; hauràs d’afegir aquest element a la llista de selectors:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Com pots imaginar, algunes classes podrien aplicar-se a molts elements i no vols haver d’editar el CSS cada vegada que calgui adoptar un estil nou. Per tant, de vegades és millor deixar de banda l’element i simplement fer referència a la classe, tret que sàpigues que vols crear algunes regles especials per a un sol element i potser vols assegurar-te que no s’apliquen a altres coses.</p> + +<h2 id="Aplicar_estil_en_funció_de_la_ubicació_en_un_document">Aplicar estil en funció de la ubicació en un document</h2> + +<p>Hi ha vegades que voldràs que alguna cosa sembli diferent segons el lloc en què es troba dins el document. Hi ha diversos selectors que poden ajudar en aquesta situació, però ara per ara només ens fixarem en un parell. Al nostre document hi ha dos elements <code><em></code>: un dins d’un paràgraf i l’altre dins d’una llista. Per a seleccionar només un <code><em></code> que estigui situat dins d'un element <code><li></code>, pots utilitzar un selector anomenat <strong>combinador de descendents</strong>, que simplement pren la forma d'un espai entre dos altres selectors.</p> + +<p>Afegeix la regla següent al teu full d’estil.</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>Aquest selector seleccionarà qualsevol element <code><em></code> que es trobi dins un (descendent de) <code><li></code>. Per tant, al document d’exemple, hauries de trobar que el <code><em></code> de l’element de la tercera llista és morat, però el que hi ha dins del paràgraf no canvia.</p> + +<p>Una altra cosa que potser t'agradaria provar és aplicar estil a un paràgraf que surt immediatament després d'un títol d’encapçalament del mateix nivell de jerarquia de l'HTML. Per fer-ho, col·loca un <code>+</code> (un <strong>combinador de germans adjacents</strong>) entre els selectors.</p> + +<p>Prova d'afegir aquesta regla al teu full d'estil, també:</p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>L'exemple en directe següent inclou les dues regles anteriors. Prova d'afegir una regla perquè un element <code>span</code> es mostri de color vermell si és dins d'un element paràgraf. Sabràs que ho has fet bé si element <code>span</code> del primer paràgraf és vermell, però el que apareix al primer element de llista no canvia de color.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Com pots veure, el CSS ens ofereix diverses maneres de seleccionar elements, i fins ara només n’hem gratat la superfície! Analitzarem amb detall tots aquests selectors i molts més en els nostres articles sobre <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">selectors</a> que trobaràs més endavant en el curs.</p> +</div> + +<h2 id="Aplicar_estil_en_funció_de_l’estat">Aplicar estil en funció de l’estat</h2> + +<p>El darrer tipus d’aplicació d’estil que analitzarem en aquest article és la capacitat d’aplicar estil a les coses en funció del seu estat. Un exemple senzill d’això són els enllaços. Quan dissenyem un enllaç, hem de seleccionar l’element <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (<em>anchor</em>). Això té diferents estats en funció de si no s’ha visitat, s’ha visitat, s’hi passa pel damunt, se selecciona amb el teclat o s'hi fa clic (s’activa). Pots fer servir el CSS per a dirigir-te a aquests estats diferents: el CSS que trobaràs a continuació estableix els enllaços no visitats en rosa, i els visitats en verd.</p> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">a<span class="pseudo-class token">:link</span></span> <span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> pink<span class="punctuation token">;</span> +<span class="punctuation token">}</span> + +<span class="selector token">a<span class="pseudo-class token">:visited</span></span> <span class="punctuation token">{</span> + <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>Pots canviar l'aparença de l'enllaç quan l'usuari hi col·loca el punter a sobre, per exemple, eliminar-ne el subratllat, que s'aconsegueix amb la regla següent:</p> + +<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">a<span class="pseudo-class token">:hover</span></span> <span class="punctuation token">{</span> + <span class="property token">text-decoration</span><span class="punctuation token">:</span> none<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<p>A l’exemple en directe següent pots jugar amb diferents valors per als diversos estats d’un enllaç. Hi hem afegit les regles anteriors, i ens adonem que el color rosa és força clar i difícil de llegir; per què no el canviem per un color que vagi més bé? Es poden posar els enllaços en negreta?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>Hem eliminat el subratllat del nostre enllaç quan s’hi passa el punter del ratolí per sobre. Pots eliminar el subratllat de tots els estats d’un enllaç. Val la pena recordar, però, que en un lloc web real, vols que els visitants sàpiguen que un enllaç és un enllaç. Deixar el subratllat a lloc pot ser una pista important perquè la gent s’adoni que pot fer clic en un text dins d’un paràgraf; aquest és el comportament al qual estan acostumats. Com tot en CSS, amb els canvis es pot fer que el document sigui menys accessible; tractarem de posar en evidència els entrebancs potencials en els llocs adequats.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: sovint veuràs que en aquests articles i en l’MDN es menciona <a href="/ca/docs/Learn/Accessibility">l'accessibilitat</a>. Quan parlem d’accessibilitat ens referim al requisit que les nostres pàgines web siguin comprensibles i utilitzables per tothom.</p> + +<p>El teu visitant pot entrar a la pàgina web des d'un ordinador amb un ratolí o un <em>trackpad</em>, o des d’un telèfon amb pantalla tàctil. O potser utilitza un lector de pantalla que llegeix el contingut del document; o necessita utilitzar una mida de lletra del text molt més gran; o bé navega pel lloc web només amb el teclat.</p> + +<p>Un document HTML senzill és en general accessible per a tothom, i a l'hora d’aplicar estil a aquest document, és important que no el facis menys accessible.</p> +</div> + +<h2 id="Combinar_selectors_i_combinadors">Combinar selectors i combinadors</h2> + +<p>Val la pena assenyalar que pots combinar diversos selectors i combinadors. Per exemple:</p> + +<pre class="brush: css notranslate">/* selecciona qualsevol <span> que estigui dins d'un <p>, que està dins d'un <article> */ +article p span { ... } + +/* Selecciona qualsevol <p> que vagi directament després d'un <ul>, que vagi directament després d'un <h1> */ +h1 + ul + p { ... }</pre> + +<p>També pots combinar diversos tipus. Intenta afegir el següent al teu codi:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>Aplicarà estil a qualsevol element amb una classe <code>special</code> que es trobi dins d’un element <code><p></code>, que vingui just després d’un element <code><h1></code>> que es trobi dins del <code><body></code>. Uf!</p> + +<p>A l'HTML original que t’hem proporcionat, l'únic element amb estil és <code><span class="special"></code>.</p> + +<p>No et preocupis si et sembla complicat en aquest moment, començaràs a entendre-ho ben aviat de seguida que treballis més amb el CSS.</p> + +<h2 id="Tancant">Tancant</h2> + +<p>En aquest tutorial hem analitzat diverses maneres d’aplicar estil a un document amb CSS. Anirem desenvolupant aquests coneixements a mesura que avancem amb la resta d'articles. Tanmateix, ja en coneixes prou per a aplicar estil al text, aplicar CSS a partir de diferents maneres de seleccionar els elements del document i cercar propietats i valors en la documentació MDN.</p> + +<p>Al proper article analitzarem com s’estructura el CSS.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "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 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> diff --git a/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html new file mode 100644 index 0000000000..6c216af68c --- /dev/null +++ b/files/ca/learn/css/first_steps/com_estructurar_el_css/index.html @@ -0,0 +1,512 @@ +--- +title: Com estructurar el CSS +slug: Learn/CSS/First_steps/Com_estructurar_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.</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 de <a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">com funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre amb detall les estructures de sintaxi fonamentals del CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Aplicar_CSS_a_lHTML">Aplicar CSS a l'HTML</h2> + +<p>El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.</p> + +<h3 id="Fulls_d’estils_externs">Fulls d’estils externs</h3> + +<p>En l’article <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Primers passos amb el CSS</a> hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.</p> + +<p>Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió <code>.css</code> i s'hi fa referència des d’un element HTML <code><link></code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>Hola món!</h1> + <p>Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p>El fitxer CSS podria presentar un aspecte així:</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>L'atribut <code>href</code> de l'element {{htmlelement ("link")}} necessita fer referència a un fitxer del sistema de fitxers.</p> + +<p>A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:</p> + +<pre class="brush: html notranslate"><!-- Dins d’un subdirector anomenat styles dins del directori actual --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Fulls_d’estil_interns">Fulls d’estil interns</h3> + +<p>Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element {{htmlelement("style")}} que hi ha dins de l’HTML {{htmlelement("head")}}.</p> + +<p>Així doncs, l’HTML quedaria així:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>Hola món!</h1> + <p>Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p>Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.</p> + +<h3 id="Estils_en_línia">Estils en línia</h3> + +<p>Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut <code>style</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS </title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1> + <p style="color:red;">Aquest és el meu primer exemple amb CSS</p> + </body> +</html></pre> + +<p><strong>Si et plau, no ho facis!, tret que realment ho hagis de fer.</strong> És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.</p> + +<p>Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.</p> + +<h2 id="Jugar_amb_el_CSS_en_aquest_article">Jugar amb el CSS en aquest article</h2> + +<p>En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="ca"> + <head> + <meta charset="utf-8"> + <title>El meu experiment amb CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Crea el teu HTML de prova aquí</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Crea el teu CSS de prova aquí */ + +p { + color: red; +}</pre> + +<p>Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <code><body></code> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.</p> + +<p>Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}</p> + +<p>Continua i diverteix-te!</p> + +<h2 id="Selectors">Selectors</h2> + +<p>No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de <a href="/ca/docs/Learn/CSS/First_steps/Com_començar_amb_CSS">Primers passos amb el CSS</a>. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.</p> + +<p>Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p><strong>Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.</strong></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aprendràs molt més sobre els selectors als nostres tutorials <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">Selectors CSS</a>, al mòdul següent.</p> +</div> + +<h3 id="Especificitat">Especificitat</h3> + +<p>Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector <code>p</code> que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Diguem que al document HTML hi ha un paràgraf amb una classe <code>special</code>. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?</p> + +<pre class="brush: html notranslate"><p class="special">De quin color sóc?</p></pre> + +<p>El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen <strong>cascada</strong> i <strong>especificitat</strong>. Al bloc de codi següent hem definit dues regles per al selector <code>p</code>, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.</p> + +<p><strong>Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles <code>p { ... }</code> al teu full d'estil. A continuació, canvia el primer selector de <code>p</code> per <code>.special</code> i observa com canvia l’estil.</strong></p> + +<p>Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article <a href="/ca/docs/Learn/CSS/Building_blocks/Cascada_i_herència">Cascada i herència</a>, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.</p> + +<h2 id="Propietats_i_valors">Propietats i valors</h2> + +<p>El CSS consta de dos blocs de construcció bàsics:</p> + +<ul> + <li><strong>Propietats</strong>: Són identificadors que indiquen quines són les característiques d’estil (per exemple, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code> o <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) que es volen canviar.</li> + <li><strong>Valors</strong>: Cada propietat especificada rep un valor, que indica com vols canviar aquestes característiques d’estil (per exemple, quin tipus de lletra, l'amplada o el color de fons que vols).</li> +</ul> + +<p>En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és <code>color</code> i el valor <code>blue</code>.</p> + +<p><img alt="Una declaració del CSS ressaltada" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Una propietat emparellada amb un valor s'anomena <em>declaració CSS</em>. Les declaracions CSS es posen dins dels <em>blocs de declaració CSS</em>. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.</p> + +<p><img alt="Un bloc de declaracions ressaltat" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Finalment, els blocs de declaració CSS es combinen amb <em>selectors</em> per a produir <em>conjunts de regles CSS</em> (o <em>regles CSS</em>). La nostra imatge conté dues regles, una per al selector <code>h1</code> i una altra per al selector <code>p</code>. La regla per a <code>h1</code> està ressaltada.</p> + +<p><img alt="La regla per a h1 està ressaltada" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat.</p> + +<div class="blockIndicator warning"> +<p><strong>Important:</strong> Les propietats i valors de CSS són sensibles a majúscules i minúscules. Cada parella de propietat i valor es separa per un dos punts (:).</p> +</div> + +<p><strong>Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>Important</strong>: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.</p> +</div> + +<div class="warning"> +<p><strong>Important</strong>: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat <code>color</code> <em>sempre</em> s'ha d'escriure <code>color</code>. Si n’escrivim la versió britànica <code>colour</code>, no funcionarà.</p> +</div> + +<h3 id="Funcions">Funcions</h3> + +<p>Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció <code>calc()</code>. Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>Això es presenta així:</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>Una funció consisteix en el nom de la funció i, a continuació, uns parèntesis entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple <code>calc()</code> anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que la conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.</p> + +<p>Un altre exemple serien els diversos valors de {{cssxref("transform")}}, com ara <code>rotate()</code>.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>La sortida del codi anterior és la següent:</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}, en particular valors de gradient</strong></li> + <li><strong>{{cssxref("color")}}, en particular els valors rgb/rgba/hsl/hsla</strong></li> +</ul> + +<h2 id="rules">@rules</h2> + +<p>Les <code><a href="/ca/docs/Web/CSS/At-rule">@rules</a></code> (llegit «at-rules», en anglès) proporcionen instruccions sobre com ha de comportar-se el CSS, o quin CSS s'ha d'aplicar. Algunes <code>@rules</code> són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar <code>@import</code>:</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>Una de les <code>@rules</code> més comunes que trobaràs és <code>@media</code>, que et permet crear <a href="/en-US/docs/Web/CSS/Media_Queries">consultes a mèdia (o media queries, en anglès)</a> per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).</p> + +<p>Al CSS següent hi ha un full d’estil que dona a l’element <code><body></code> un color de fons rosat. Tot i això, després utilitzem <code>@media</code> per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>Trobaràs altres <code>@rules</code> al llarg d’aquests tutorials.</p> + +<p><strong>Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.</strong></p> + +<h2 id="Propietats_abreviades">Propietats abreviades</h2> + +<p>Algunes propietats com {{cssxref ("font")}}, {{cssxref ("background")}}, {{cssxref ("padding")}}, {{cssxref ("border")}} i {{cssxref ("margin")}} s’anomenen <strong>propietats abreviades</strong>: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.</p> + +<p>Per exemple, aquesta línia:</p> + +<pre class="brush: css notranslate">/* En les propietats abreviades de 4 valors, com ara margin i padding, s'apliquen els valors + a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres + propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge + a la part superior/inferior, a l'esquerra/a la dreta */ +padding: 10px 15px 15px 5px;</pre> + +<p>Fa el mateix que totes aquestes juntes:</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>Mentre que aquesta línia:</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>Fa el mateix que totes aquestes juntes:</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-scroll: fixed;</pre> + +<p>No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres <a href="/ca/docs/Web/CSS/Referéncia_CSS">referències CSS</a> per a obtenir-ne més informació.</p> + +<p><strong>Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.</strong></p> + +<div class="blockIndicator warning"> +<p><strong>Atenció</strong>: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.</p> +</div> + +<h2 id="Comentaris">Comentaris</h2> + +<p>De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.</p> + +<p>Els comentaris en CSS comencen amb <code>/*</code> i acaben amb <code>*/</code>. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.</p> + +<pre class="brush: css notranslate">/* Manejar una aplicació d’estil als elements bàsics */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra, + augmentem la mida de la lletra per a facilitar la lectura */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* Manejar elements específics que es troben al DOM */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>Els comentaris també són útils <em>per a inhabilitar</em> temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector <code>.special</code>.</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.</strong></p> + +<h2 id="Espais_en_blanc">Espais en blanc</h2> + +<p>Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador ignora els espais en blanc del teu CSS. El valor dels espais en blanc està en que són molt útils per a millorar la llegibilitat.</p> + +<p>En l'exemple que trobaràs a continuació, cada declaració (i inici/final de regla) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">Podries escriure exactament el mateix CSS de la manera següent, eliminant-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.</p> + +<div class="blockIndicator warning"> +<p><strong>Important:</strong> Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.</p> +</div> + +<p>Per exemple, les declaracions següents són vàlides en CSS:</p> + +<pre class="brush: css notranslate">margin: 0 auto; +padding-left: 10px;</pre> + +<p>Però les següents no són vàlids:</p> + +<pre class="brush: css notranslate">margin: 0auto; +padding- left: 10px;</pre> + +<p><code>Veus els errors d'espaiat? 0auto</code> no es reconeix com a valor vàlid per a la propietat <code>margin</code> (<code>0</code> i <code>auto</code> són dos valors separats), i el navegador no reconeix <code>padding-</code> com a propietat vàlida. El nom correcte de la propietat (<code>padding-left</code>) ha quedat separat per un espai perdut.</p> + +<p>Sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.</p> + +<p><strong>Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.</strong></p> + +<h2 id="Què_segueix">Què segueix?</h2> + +<p>És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (<a href="/ca/docs/Learn/CSS/First_steps/Com_funciona_el_CSS">Com funciona el CSS</a>), donarem una ullada a aquest procés.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "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 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> diff --git a/files/ca/learn/css/first_steps/com_funciona_el_css/index.html b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html new file mode 100644 index 0000000000..9621d2c21c --- /dev/null +++ b/files/ca/learn/css/first_steps/com_funciona_el_css/index.html @@ -0,0 +1,156 @@ +--- +title: Com funciona el CSS +slug: Learn/CSS/First_steps/Com_funciona_el_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.</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>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.</td> + </tr> + </tbody> +</table> + +<h2 id="Com_funciona_realment_el_CSS">Com funciona realment el CSS?</h2> + +<p>Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.</p> + +<ol> + <li>El navegador carrega el codi HTML (per exemple, el rep de la xarxa).</li> + <li>Converteix el codi {{Glossary("HTML")}} en un model d'objectes del document (<em>document object model</em> o {{Glossary("DOM")}}). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.</li> + <li>El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.</li> + <li>El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena <em>arbre de renderització</em>).</li> + <li>L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.</li> + <li>La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena <em>pintura</em>).</li> +</ol> + +<p>El diagrama següent ofereix una visió senzilla del procés.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="Sobre_el_DOM">Sobre el DOM</h2> + +<p>Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un {{Glossary("Node/DOM","node DOM")}} en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.</p> + +<p>Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.</p> + +<h2 id="Una_representació_real_del_DOM">Una representació real del DOM</h2> + +<p>En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.</p> + +<p>Prenguem el codi HTML següent:</p> + +<pre class="brush: html notranslate"><p> + Utilitzem: + <span>Fulls</span> + <span>d'estil</span> + <span>en cascada</span> +</p> +</pre> + +<p>En el DOM, el node que correspon al nostre element <code><p></code> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <code><span></code>. Els nodes <code>SPAN</code> són també nodes <span style="background-color: #f5f6f5;">pare</span>, i tenen nodes de text com a nodes fill:</p> + +<pre class="notranslate">P +├─ "Utilitzem:" +├─ SPAN +| └─ "Fulls" +├─ SPAN +| └─ "d’estil" +└─ SPAN + └─ "en cascada" +</pre> + +<p>Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:</p> + +<p>{{EmbedLiveSample('Una_representació_real_del_DOM', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="Aplicar_CSS_al_DOM">Aplicar CSS al DOM</h2> + +<p>Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:</p> + +<pre class="brush: html notranslate"><p> + Utilitzem: + <span>Fulls</span> + <span>d'estil</span> + <span>en cascada</span> +</p></pre> + +<p>Suposem que hi apliquem el CSS següent:</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector <code>span</code>, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <code><span></code> i després pinta a la pantalla la representació visual final.</p> + +<p>La sortida actualitzada és la següent:</p> + +<p>{{EmbedLiveSample('Aplicar_CSS_al_DOM', '100%', 55)}}</p> + +<p>En el nostre article <a href="/ca/docs/Learn/CSS/Building_blocks/Depurar_el_CSS">Depurar el CSS</a> del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.</p> + +<h2 id="Què_passa_si_un_navegador_es_troba_amb_CSS_que_no_entén">Què passa si un navegador es troba amb CSS que no entén?</h2> + +<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">En un article anterior</a> hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.</p> + +<p>La resposta és que no fa res i només passa a la declaració CSS següent.</p> + +<p>Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.</p> + +<p>De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.</p> + +<p>En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.</p> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p>Vull que aquest text sigui gran, en negreta i blau.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* Ortografia incorrecta de la propietat color */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.</p> + +<p>Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten <code>calc()</code> com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor <code>calc()</code> de <code>100% - 50px</code>. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre <code>calc()</code> perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb <code>calc()</code>, perquè la línia apareix més tard en la cascada.</p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.</p> + +<h2 id="Per_acabar">Per acabar</h2> + +<p>Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "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 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> diff --git a/files/ca/learn/css/first_steps/index.html b/files/ca/learn/css/first_steps/index.html new file mode 100644 index 0000000000..a3a11678a2 --- /dev/null +++ b/files/ca/learn/css/first_steps/index.html @@ -0,0 +1,55 @@ +--- +title: CSS first steps +slug: Learn/CSS/First_steps +tags: + - Beginner + - CSS + - Landing + - Learn + - Module + - NeedsTranslation + - TopicStub + - first steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt> + <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt> + <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt> + <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt> + <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/ca/learn/css/first_steps/que_es_el_css/index.html b/files/ca/learn/css/first_steps/que_es_el_css/index.html new file mode 100644 index 0000000000..b158b8e62e --- /dev/null +++ b/files/ca/learn/css/first_steps/que_es_el_css/index.html @@ -0,0 +1,119 @@ +--- +title: Què és el CSS? +slug: Learn/CSS/First_steps/Que_es_el_CSS +translation_of: Learn/CSS/First_steps/What_is_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> |