diff options
Diffstat (limited to 'files/ca/learn/css/first_steps/getting_started/index.html')
| -rw-r--r-- | files/ca/learn/css/first_steps/getting_started/index.html | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/files/ca/learn/css/first_steps/getting_started/index.html b/files/ca/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..555dc4f0cd --- /dev/null +++ b/files/ca/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,255 @@ +--- +title: Com començar amb CSS +slug: Learn/CSS/First_steps/Getting_started +translation_of: Learn/CSS/First_steps/Getting_started +original_slug: Learn/CSS/First_steps/Com_començar_amb_CSS +--- +<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> |