diff options
Diffstat (limited to 'files/ca/web/guide')
24 files changed, 5210 insertions, 0 deletions
diff --git a/files/ca/web/guide/ajax/index.html b/files/ca/web/guide/ajax/index.html new file mode 100644 index 0000000000..4531a6fd92 --- /dev/null +++ b/files/ca/web/guide/ajax/index.html @@ -0,0 +1,26 @@ +--- +title: AJAX +slug: Web/Guide/AJAX +tags: + - AJAX + - Totes_les_categories +translation_of: Web/Guide/AJAX +--- +<p> </p> +<div class="callout-box"><strong><a href="/ca/AJAX/Primers_passos" title="ca/AJAX/Primers_passos">Primers passos</a></strong><br> +Una introducció a AJAX.</div> +<div> +<p>El <strong>JavaScript asincrònic i XML</strong>, (<em>Asynchronous JavaScript and XML, <strong>AJAX</strong>, en anglès</em>), no és una tecnologia per si mateixa, sinó un terme que descriu una «nova aproximació» davant de tecnologies ja existents com ara: <a href="/ca/HTML" title="ca/HTML">HTML</a> o <a href="/ca/XHTML" title="ca/XHTML">XHTML</a>, <a href="/ca/CSS" title="ca/CSS">fulls d'estil en cascada</a>, <a href="/ca/JavaScript" title="ca/JavaScript">JavaScript</a>, <a href="/ca/DOM" title="ca/DOM">el model d'objectes de document</a>, <a href="/ca/XML" title="ca/XML">XML</a>, <a href="/ca/XSLT" title="ca/XSLT">XSLT</a>, i l'<a href="/ca/XMLHttpRequest" title="ca/XMLHttpRequest">l'objecte XMLHttpRequest</a>. En combinar-les totes en el model d'AJAX, les aplicacions web poden fer actualitzacions ràpides i incrementals de la interfície d'usuari sense que calgui tornar a actualitzar la pàgina des del navegador. Això fa que l'aplicació respongui més ràpidament a les accions de l'usuari.</p> +</div> +<h4 id="Documentaci.C3.B3_d.27AJAX"><a href="/Special:Tags?tag=AJAX&language=ca" title="Special:Tags?tag=AJAX&language=ca">Documentació d'AJAX</a></h4> +<dl> <dt><a href="/ca/AJAX/Primers_passos" title="ca/AJAX/Primers_passos">AJAX:Primers passos</a></dt> <dd><small>Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina.</small></dd> +</dl> +<dl> <dt><a class="external" href="http://oriolmorell.cat/arxiu/categories/tecnologia/ajax/">Notes sobre AJAX</a></dt> <dd><small>Col·lecció d'apunts sobre AJAX.</small></dd> +</dl> +<h4 id="Temes_relacionats">Temes relacionats</h4> +<dl> <dd><a href="/ca/HTML" title="ca/HTML">HTML</a>, <a href="/ca/XHTML" title="ca/XHTML">XHTML</a>, <a href="/ca/CSS" title="ca/CSS">CSS</a>, <a href="/ca/DOM" title="ca/DOM">DOM</a>, <a href="/ca/JavaScript" title="ca/JavaScript">JavaScript</a>, <a href="/ca/XML" title="ca/XML">XML</a>, <a href="/ca/XMLHttpRequest" title="ca/XMLHttpRequest">XMLHttpRequest</a>, <a href="/ca/XSLT" title="ca/XSLT">XSLT</a>, <a href="/ca/DHTML" title="ca/DHTML">DHTML</a></dd> +</dl> +<p><span>Categories</span></p> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p>{{ languages( { "en": "en/AJAX", "es": "es/AJAX", "fr": "fr/AJAX", "ja": "ja/AJAX", "nl": "nl/AJAX", "pl": "pl/AJAX", "pt": "pt/AJAX" } ) }}</p> diff --git a/files/ca/web/guide/ajax/primers_passos/index.html b/files/ca/web/guide/ajax/primers_passos/index.html new file mode 100644 index 0000000000..ea59270ae8 --- /dev/null +++ b/files/ca/web/guide/ajax/primers_passos/index.html @@ -0,0 +1,192 @@ +--- +title: Primers passos +slug: Web/Guide/AJAX/Primers_passos +tags: + - AJAX + - Totes_les_categories +translation_of: Web/Guide/AJAX/Getting_Started +--- +<p> +Aquest article us guiarà a través dels principis bàsics d'AJAX i amb dos pràctics exemples per a anar per feina. +</p> +<h3 id="Qu.C3.A8_.C3.A9s_l.27AJAX.3F" name="Qu.C3.A8_.C3.A9s_l.27AJAX.3F"> Què és l'AJAX? </h3> +<p>El <b>JavaScript asincrònic i XML</b>, (<i>Asynchronous JavaScript and XML, <b>AJAX</b>, en anglès</i>) és un neologisme per a dues potents característiques de navegació que fa anys que existeixen, però que han estat ignorades per molts desenvolupadors web fins a la recent arribada d'aplicacions com Gmail, Google suggest o Google Maps. +</p><p>Les dues característiques en qüestió són poder: +</p> +<ul><li> Fer sol·licituds al vostre servidor sense haver d'actualitzar la pàgina +</li><li> Analitzar i treballar amb documents XML +</li></ul> +<h3 id="Primer_pas_.E2.80.93_Com_fer_una_sol.C2.B7licitud_HTTP" name="Primer_pas_.E2.80.93_Com_fer_una_sol.C2.B7licitud_HTTP"> Primer pas – Com fer una sol·licitud HTTP </h3> +<p>Per a fer una sol·licitud HTTP (HTTP request) al servidor fent servir JavaScript, us cal una instància d'una classe que us en proporcioni la funcionalitat. Aquest tipus de classe va introduir-se originalment a l'Internet Explorer com a objecte ActiveX, anomenant-se <code>XMLHTTP</code>. Més endavant, Mozilla i Safari implementaren una classe, <code>XMLHttpRequest</code>, que funciona amb els mètodes i propietats de l'objecte original ActiveX de Microsoft. +</p><p>Com a resultat, per a crear una instància (objecte) de la classe perquè funcioni a tots els navegadors, heu de fer: +</p> +<pre>if (window.XMLHttpRequest) { // Mozilla, Safari, ... + sol·licitud_HTTP = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE + sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP"); +} +</pre> +<p>(L'exemple anterior és una versió simplificada il·lustrativa del codi que s'utilitza per a crear una instància XMLHTTP. Per a un exemple del dia a dia, consulteu el tercer pas d'aquest article.) +</p><p>Algunes versions dels navegadors Mozilla no funcionaran correctament si la resposta del servidor no té una capçalera MIME XML. Per a satisfer aquesta exigència, podeu utilitzar una crida d'un mètode extra per a ignorar la capçalera que pogués enviar el servidor, si aquesta no fos <code>text/xml</code>. +</p> +<pre>sol·licitud_HTTP = new XMLHttpRequest(); +sol·licitud_HTTP.overrideMimeType('text/xml'); +</pre> +<p>Tot seguit, cal decidir què voleu fer després de rebre la resposta del servidor a la vostra sol·licitud. En aquest estadi, només cal que especifiqueu a l'objecte de sol·licitud HTTP quina funció de JavaScript processarà la resposta. +Això es fa definint la propietat <code>onreadystatechange</code> de l'objecte per al nom de la funció de JavaScript que penseu fer sevir, tal com es mostra a continuació: +</p><p><code>sol·licitud_HTTP.onreadystatechange = nom_de_la_funció;</code> +</p><p>Tingueu en compte que no hi ha parèntesis després del nom de la funció i no es passa cap paràmetre. A més, en comptes de donar un nom de funció, podeu utilitzar la tècnica de JavaScript de definir funcions al vol i les accions que en processaran la resposta, tal com es mostra a continuació: </p> +<pre>sol·licitud_HTTP.onreadystatechange = function(){ + // fes el que calgui +}; +</pre> +<p>Després d'haver declarat allò que passarà després de rebre la resposta, cal fer-ne la sol·licitud. Heu de cridar els mètodes <code>open()</code> i <code>send()</code> de la classe de sol·licitud HTTP, tal com es mostra a continuació: +</p> +<pre>sol·licitud_HTTP.open('GET', 'http://www.exemple.org/algun.fitxer', true); +sol·licitud_HTTP.send(null); +</pre> +<ul><li> El primer paràmetre de la crida a <code>open()</code> és el mètode de sol·licitud HTTP – GET, POST, HEAD o qualsevol altre mètode que ja vulgueu utilitzar i funcioni al vostre servidor. Escriviu-lo en majúscules atès que és un estàndard de l'HTTP; per altra banda, alguns navegadors (com el Firefox) podrien no processar la sol·licitud. Per a més informació dels mètodes de sol·licitud HTTP, podeu consultar les <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html" class="external">especificacions W3C</a> </li><li> El segon paràmetre és l'URL de la pàgina que esteu sol·licitant. Com a mesura de seguretat, no podeu cridar a pàgines en dominis de tercers. Assegureu-vos que utilitzeu el nom de domini exacte en totes les vostres pàgines o tindreu un error de «permís denegat» quan crideu a open(). Una trampa comuna és accedir al vostre lloc web amb domini.tld, però intentar cridar les pàgines amb www.domini.tld. +</li><li> El tercer paràmetre defineix si la sol·licitud és asincrònica. Si és així, <code>TRUE</code>, l'execució de la funció de JavaScript continuarà mentre la resposta del servidor no hagi arribat. Aquesta és l'A d'AJAX. +</li></ul> +<p>El paràmetre al mètode <code>send()</code> pot ser qualsevol dada que vulgueu enviar al servidor si s'envia la sol·licitud amb POST. Les dades cal que siguin de la forma d'una cadena de consulta com aquesta: +</p><p><code>nom=valor&un_altre_nom=un_altre_valor&i_així=anar_fent</code> +</p><p>Tingueu en compte que si voleu enviar dades amb POST, heu de canviar el tipus MIME de la sol·licitud utilitzant la següent línia: +</p> +<pre>sol·licitud_HTTP.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +</pre> +<p>Si no ho feu així, el servidor rebutjarà les dades que hi hàgiu enviat. +</p> +<h3 id="Segon_pas_.E2.80.93_Gestionar_la_resposta_del_servidor" name="Segon_pas_.E2.80.93_Gestionar_la_resposta_del_servidor"> Segon pas – Gestionar la resposta del servidor </h3> +<p>Recordeu que quan envieu la sol·licitud, també proporcioneu el nom de la funció JavaScript destinada a gestionar-ne la resposta. +</p><p><code>sol·licitud_HTTP.onreadystatechange = nom_de_la_funció;</code> +</p><p>Observem què hauria de fer aquesta funció. Primer, cal que comprovi l'estat de la sol·licitud. Si aquesta té el valor 4, vol dir que s'ha rebut una resposta total del servidor i podeu continuar processant-la. </p> +<pre>if (sol·licitud_HTTP.readyState == 4) { + // tot va bé, s'ha rebut la resposta +} else { + // encara no està preparada +} +</pre> +<p>La llista sencera de valors d'estat, <code>readyState</code>, és la següent: +</p> +<ul><li> 0 (sense inicialitzar) +</li><li> 1 (s'està carregant) +</li><li> 2 (carregat) +</li><li> 3 (interactiu) +</li><li> 4 (complerta) +</li></ul> +<p>(<a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp" class="external">Font</a>) +</p><p>A continuació, cal que comproveu el codi d'estat de la resposta de servidor HTTP. Tots els codis possible es llisten al <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html" class="external">lloc del W3C</a>. Per als nostres objectius, només ens interessa la resposta <code>200 OK</code>. +</p> +<pre>if (sol·licitud_HTTP.status == 200) { + // perfecte! +} else { + // hi ha hagut algun problema amb la sol·licitud + // per exemple, la resposta podria ser uns codis de resposta + // 404 (Not Found) o 500 (Internal Server Error) +} +</pre> +<p>Després d'haver comprovat l'estat de la sol·licitud i el codi d'estat HTTP de la resposta, heu de decidir què voleu fer amb les dades que el servidor us ha enviat. Teniu dues opcions per a accedir a les dades: +</p> +<ul><li> <code>sol·licitud_HTTP.responseText</code> – retornarà la resposta del servidor com una cadena de text. +</li><li> <code>sol·licitud_HTTP.responseXML</code> – retornarà la resposta com un objecte document XML, <code>XMLDocument</code>, que podeu recórrer utilitzant les funcions DOM de JavaScript. +</li></ul> +<h3 id="Tercer_pas_.E2.80.93_Un_exemple_simple" name="Tercer_pas_.E2.80.93_Un_exemple_simple"> Tercer pas – Un exemple simple </h3> +<p>Posem-ho tot junt i fem una sol·licitud HTTP simple. El nostre codi JavaScript sol·licitarà un document HTML, <code>prova.html</code>, que conté el text «Açò és un text.» i llavors notificarà, <code>alert()</code>, els continguts del fitxer <code>prova.html</code>. +</p> +<pre><script type="text/javascript" language="javascript"> + + + + function fes_sol·licitud(url) { + + var sol·licitud_HTTP = false; + + if (window.XMLHttpRequest) { // Mozilla, Safari,... + sol·licitud_HTTP = new XMLHttpRequest(); + if (sol·licitud_HTTP.overrideMimeType) { + sol·licitud_HTTP.overrideMimeType('text/xml'); + // Vegeu la nota a sota + } + } else if (window.ActiveXObject) { // IE + try { + sol·licitud_HTTP = new ActiveXObject("Msxml2.XMLHTTP"); + } catch (e) { + try { + sol·licitud_HTTP = new ActiveXObject("Microsoft.XMLHTTP"); + } catch (e) {} + } + } + + if (!sol·licitud_HTTP) { + alert('S\'abandona :( No es pot crear una instància d'XMLHTTP'); + return false; + } + sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); }; + sol·licitud_HTTP.open('GET', url, true); + sol·licitud_HTTP.send(null); + + } + + function notifica_continguts(sol·licitud_HTTP) { + + if (sol·licitud_HTTP.readyState == 4) { + if (sol·licitud_HTTP.status == 200) { + alert(sol·licitud_HTTP.responseText); + } else { + alert('Hi ha hagut un problema amb la sol·licitud.'); + } + } + + } +</script> +<span + style="cursor: pointer; text-decoration: underline" + onclick="fes_sol·licitud('prova.html')"> + Fes una sol·licitud +</span> +</pre> +<p><br> +En aquest exemple: +</p> +<ul><li> L'usuari fa un clic a l'enllaç «Fes una sol·licitud»; +</li><li> Açò crida a la funció <code>fes_sol·licitud()</code> amb un paràmetre – el nom <code>prova.html</code> d'un fitxer HTML en el mateix directori; +</li><li> Es fa la sol·licitud i llavors (<code>onreadystatechange</code>) l'execució es passa a <code>notifica_continguts()</code>; +</li><li> <code>notifica_continguts()</code> comprova si la resposta s'ha rebut, i si és correcta, llavors <code>alert()</code> notifica dels continguts al fitxer <code>prova.html</code>. +</li></ul> +<p>Podeu provar l'exemple <a href="http://www.w3clubs.com/mozdev/httprequest_test.html" class="external">ací</a> i veure el fitxer de prova <a href="http://www.w3clubs.com/mozdev/test.html" class="external">també ací</a>. +</p><p><b>Nota</b>: La línia <code>sol·licitud_HTTP.overrideMimeType('text/xml');</code> anterior donarà errors a la consola de Javascript al Firefox 1.5b tal com es documenta a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=311724" class=" link-https" rel="freelink">https://bugzilla.mozilla.org/show_bug.cgi?id=311724</a> si la pàgina que es crida per XMLHttpRequest no és un XML vàlid (p.ex., si és text net). +</p><p>Si obteniu un error de sintaxi (Syntax Error) o de mal format (Not Well Formed Error) en el navegador, i no esteu intentant carregar una pàgina XML per XMLHttpRequest, suprimiu aquesta línia del codi. +</p><p><b>Nota 2</b>: si envieu una sol·licitud a un codi que retorni XML, en comptes d'un fitxer XML estàtic, heu d'especificar-ne algunes capçaleres de resposta si la vostra pàgina ha de funcionar amb l'Internet Explorer a més d'amb el Mozilla. Si no hi definiu la capçalera, <code>Content-Type: application/xml</code>, l'IE llançarà un error de Javascript 'Object Expected' després de la línia des d'on intenteu accedir a un element XML. Si no hi definiu una capçalera, <code>Cache-Control: no-cache</code>, el navegador emmagatzemarà a la memòria cau la resposta i no tornarà mai a trametre la sol·licitud, fent llavors que la depuració sigui tot un repte. +</p><p><b>Nota 3</b>: si la variable sol·licitud_HTTP s'utilitza globalment, aquelles funcions «competidores» que cridin a fes_sol·licitud() poden anul·lar-se unes a les altres, provocant doncs una condició de cursa. En declarar sol·licitud_HTTP com una variable local a la funció i passar-la a la funció notifica_continguts() ho evita. +</p><p><b>Note 4</b>: Per a registrar la funció de resposta onreadystatechange, no podeu tenir cap argument: +</p> +<pre>sol·licitud_HTTP.onreadystatechange = function() { notifica_continguts(sol·licitud_HTTP); }; //1 (sol·licitud simultània) +sol·licitud_HTTP.onreadystatechange = notifica_continguts(sol·licitud_HTTP); //2 (no funciona) +sol·licitud_HTTP.onreadystatechange = notifica_continguts; //3 (variable global) +</pre> +<p>El mètode 1 us permet tenir diferent sol·licituds fetes simultàniament, el 2 no funciona, i el 3 s'utilitza si sol·licitud_HTTP és una variable global. +</p> +<h3 id="Quart_pas_.E2.80.93_Treballant_amb_la_resposta_XML" name="Quart_pas_.E2.80.93_Treballant_amb_la_resposta_XML"> Quart pas – Treballant amb la resposta XML </h3> +<p>En l'anterior exemple, després que es rebés la resposta a la sol·licitud HTTP, vam fer servir la propietat <code>reponseText</code> de l'objecte de sol·licitud i contenia els continguts del fitxer <code>prova.html</code>. Provem-ho ara amb la propietat <code>responseXML</code>. +</p><p>Comencem creant un document XML vàlid, que sol·licitarem més endavant. El document (prova.xml) conté el següent: +</p> +<pre><?xml version="1.0" ?> +<root> + Açò és una prova. +</root> +</pre> +<p>A la seqüència, només cal que canviar-hi la línia de sol·licitud per: +</p> +<pre>... +onclick="fes_sol·licitud('prova.xml')"> +... +</pre> +<p>Llavors a <code>notifica_continguts()</code> cal que reemplacem la línia amb <code>alert()</code> d'<code>alert(sol·licitud_HTTP.responseText);</code> per: +</p> +<pre>var document_xml = sol·licitud_HTTP.responseXML; +var node_arrel = document_xml.getElementsByTagName('root').item(0); +alert(node_arrel.firstChild.data); +</pre> +<p>D'aquesta forma prenem l'objecte <code>XMLDocument</code> donat per <code>responseXML</code> i utilitzem els mètodes DOM per a accedir a algunes dades que es troben al document XML. Podeu veure-ho a <code>prova.xml</code> <a href="http://www.w3clubs.com/mozdev/test.xml" class="external">ací</a> i la seqüència de prova actualizada <a href="http://www.w3clubs.com/mozdev/httprequest_test_xml.html" class="external">ací</a>. +</p><p>Per a més informació dels mètodes DOM, consulteu els documents de la <a href="http://www.mozilla.org/docs/dom/" class="external">implementació DOM de Mozilla</a>. +</p>{{ languages( { "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "es": "es/AJAX/Primeros_Pasos", "fr": "fr/AJAX/Premiers_pas", "ja": "ja/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar" } ) }} diff --git a/files/ca/web/guide/css/inici_en_css/caixes/index.html b/files/ca/web/guide/css/inici_en_css/caixes/index.html new file mode 100644 index 0000000000..536ea9b5e1 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/caixes/index.html @@ -0,0 +1,341 @@ +--- +title: Caixes +slug: Web/Guide/CSS/Inici_en_CSS/Caixes +tags: + - Basic + - Beginner + - CSS + - CSS Borders + - CSS Margin + - CSS Padding + - 'CSS:Getting_Started' + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Llistes") }}Aquesta és la 11th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> descriu com podeu utilitzar CSS per controlar l'espai que ocupa un element quan es mostra. En el document d'exemple, canviareu l'espaiat i afegireu regles decoratives.</p> + +<h2 class="clearLeft" id="Informació_Caixes">Informació: Caixes</h2> + +<p>Quan el navegador mostra un element, l'element ocupa espai. Hi ha quatre parts en l'espai que ocupa.</p> + +<p>Al mig, és l'espai que l'<em>element</em> necessita per mostrar el seu contingut. Al voltant d'això, hi ha un <em>padding (farciment)</em>. Al voltant d'això, hi ha un <em>border (vora)</em>. Al voltant d'això, hi ha un <em>margin (marge)</em> que separa l'element d'altres elements.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin (marge)</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border (vora)</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding (farciment)</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em><span class="short_text" id="result_box" lang="ca"><span>El gris</span> <span>pàl·lid</span> <span>mostra</span> <span>parts</span> <span>de la disposició.</span></span></em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>Això és el que es veu en el vostre navegador.</em></p> + </td> + </tr> + </tbody> +</table> + +<p>El farcit, vora i marge poden tenir diferents mides en la part superior, dret, inferior i esquerra de l'element. Qualsevol o totes aquestes mides poden ser zero.</p> + +<h3 id="Acolorir">Acolorir</h3> + +<p>El farcit és sempre del mateix color que el fons de l'element. Així que quan s'estableix el color de fons, es veu el color aplicat a l'element en si i el seu farcit. El marge és sempre transparent.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em><span class="short_text" id="result_box" lang="ca"><span>L'element</span> <span>té</span> <span>un fons</span> <span>verd.</span></span></em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>Això és el que es veu en el vostre navegador.</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Vores">Vores</h3> + +<p>Podeu utilitzar les vores per decorar elements amb línies o caixes.</p> + +<p>Per especificar la mateixa vora a tot al voltant d'un element, utilitzeu la propietat {{ cssxref("border") }}. Especificar l'ample (en píxels en general per a la seva visualització en una pantalla), l'estil i el color.</p> + +<p>Els estils són:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>També podeu establir l'estil a <code>none</code> o <code>hidden</code> per eliminar de forma explícita la vora, o establir el color a transparent per fer la vora invisible sense canviar el disseny.</p> + +<p>Especificar vores a un costat alhora, utilitzeu les propietats: {{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}. Podeu utilitzar aquests per especificar una vora en un sol costat, o diferentes vores en diferents costats.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla estableix el color de fons i la vora de la part superior dels elements d'encapçalament:</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> + </td> + </tr> + </tbody> +</table> + +<p>Aquesta regla fa que les imatges siguin més fàcils de veure, donant-los una vora gris mig en tot:</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<table> + <tbody> + <tr> + <td>Imatge:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Marges_i_farciment">Marges i farciment</h3> + +<p>Utilitzeu marges i farciment per ajustar les posicions dels elements i crear l'espai que els envolta.</p> + +<p>Utilitzeu la propietat {{ cssxref("margin") }} o la propietat {{ cssxref("padding") }} per establir els amples dels marges o de farciment, respectivament.</p> + +<p>Si s'especifica una amplada, s'aplica al voltant de tot l'element (a dalt, dreta, a sota i a l'esquerra).</p> + +<p>Si s'especifica dos amples, la primera s'aplica a la part superior i inferior, la segona a la dreta i l'esquerra.</p> + +<p>Podeu definir els quatre amplades en l'ordre: dalt, dreta, a sota, a l'esquerra.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla distingeix els paràgrafs amb la classe <code>remark</code>, donant-los una vora vermella al seu voltant.</p> + +<p>El farciment al seu voltant separa la vora del text una mica.</p> + +<p>Un marge esquerre sagna el paràgraf en relació amb la resta del text:</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<table> + <tbody> + <tr> + <td> + <p>Here is a normal paragraph.</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Quan s'utilitzan marges i farcit per ajustar la forma en què els elements es disposen, les seves regles d'estil interactuen amb els valors per defecte del navegador en formes que poden ser complexes.</p> + +<p>Els diferents navegadors posen elements de manera diferent. Els resultats podrien ser similar fins que la vostre fulla d'estil canvia les coses. A vegades això pot fer que les vostres fulles d'estil donin resultats sorprenents.</p> + +<p>Per obtenir el resultat desitjat, és possible que hàgiu de canviar el marcat del document. La pàgina següent d'aquest tutorial teniu més informació sobre això.</p> + +<p>Per a més informació sobre el farciment, marges i vores, vegeu la pàgina de referència <a href="/en-US/docs/Web/CSS/box_model" title="en-US/docs/Web/Guide/CSS/box model"><span class="external">Model de caixa</span></a>.</p> +</div> + +<h2 id="Acció_Afegir_vores">Acció: Afegir vores</h2> + +<p>Editeu l'arxiu CSS, <code>style2.css</code>. Afegiu aquesta regla per dibuixar una línia a través de la pàgina sobre cada capçalera:</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>Si vau prendre el repte de l'última pàgina, modifiqueu la regla que heu creat, en cas contrari afegiu aquesta nova regla, la d'afegir un espai sota cada element de la llista:</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>Actualitzeu el navegador per veure el resultat:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>Afegiu una regla a la fulla d'estils, fent una vora àmpla al voltant dels oceans en un color que recordi al mar, alguna cosa com això:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>(No hi ha necessitat perquè coincideixi amb l'amplada i el color que es veu aquí exactament.)</p> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny") }}En definir marges i farcit, heu modificat el disseny del document. A la pàgina següent es canvia el <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">disseny</a> del vostre document d'altres maneres.</p> diff --git a/files/ca/web/guide/css/inici_en_css/cascada_i_herència/index.html b/files/ca/web/guide/css/inici_en_css/cascada_i_herència/index.html new file mode 100644 index 0000000000..5fba4aea87 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/cascada_i_herència/index.html @@ -0,0 +1,150 @@ +--- +title: Cascada i herència +slug: Web/Guide/CSS/Inici_en_CSS/Cascada_i_herència +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Com funciona el CSS")}}Aquesta és la quarta secció del tutorial <span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a></span> ; descriu com els fulls d'estil interactuenen en cascada, i com els elements hereten l'estil dels seus pares. S'agrega a la vostre fulla d'estils d'exemple, utilitzant l'herència per alterar l'estil de moltes parts del document en un sol pas.</p> + +<h2 class="clearLeft" id="Informació_Cascada_i_herència"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Cascada i</span> <span>herència</span></span></h2> + +<p>L'estil final per a un element es pot especificar en molts llocs diferents, que poden interactuar d'una manera complexa. Aquesta interacció complexa fa que el CSS sigui de gran abast, però també pot fer que sigui confús i difícil de depurar.</p> + +<p><span id="result_box" lang="ca"><span>Tres</span> <span>fonts</span> <span>principals</span> <span>d'informació</span> <span>d'estil</span> <span>formen una</span> <span>cascada.</span> <span>Aqueste son:</span></span></p> + +<ul> + <li>Estils per defecte del navegador per al llenguatge de marques.</li> + <li>Estils especificats per un usuari que està llegint el document.</li> + <li>Els estils relacionats amb el document pel seu autor. Aquests es poden especificar en tres llocs: + <ul> + <li>En un arxiu extern: aquest tutorial discuteix principalment aquest mètode de definició d'estils.</li> + <li>En una definició al començament del document: utilitzar aquest mètode només per als estils que s'utilitzen només en aquesta pàgina.</li> + <li>En un element específic en el cos del document: aquest és el mètode menys mantenible, però pot ser utilitzat per a les proves.</li> + </ul> + </li> +</ul> + +<p>L'estil de l'usuari modifica l'estil per defecte del navegador. L'estil de l'autor del document modifica l'estil una mica més. En aquest tutorial, vosaltres sou l'autor del document d'exemple, i només es treballa amb fulls d'estil d'autor.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Quan llegiu aquest document en un navegador, part de l'estil que es veu prové dels valors per defecte del navegador per HTML.</p> + +<p>Part de l'estil podria venir de la configuració del navegador a mida o un arxiu de definició d'estil personalitzat. A Firefox, la configuració es pot personalitzar en el quadre de diàleg Preferències, o es pot especificar estils en un arxiu <code>userContent.css </code>arxiu anomenat en el vostre perfil de navegador.</p> + +<p>Part de l'estil prové de les fulles d'estil vinculades al document per part del servidor.</p> +</div> + +<p>En obrir el document d'exemple en el navegador, els elements {{ HTMLElement("strong") }} destacan més que la resta del text. Això ve de l'estil per defecte del navegador per HTML.</p> + +<p>Els elements {{ HTMLElement("strong") }} són de color vermell. Això ve de la pròpia fulla d'estils d'exemple.</p> + +<p>Els elements {{ HTMLElement("strong") }} també hereten gran part de l'estil de l'element {{HTMLElement ("p")}}, perquè són els seus fills. De la mateixa manera, l'element {{ HTMLElement("p") }} hereta gran part de l'estil de l'element {{ HTMLElement("body") }}.</p> + +<p>Per estils en cascada, els fulls d'estil d'autor tenen prioritat, a continuació els fulls d'estil del lector i seguidament els valors per defecte del navegador.</p> + +<p>Per estils heretats, l'estil propi d'un node fill té prioritat sobre l'estil heretat del seu pare.</p> + +<p>Aquestes no són les úniques prioritats que s'apliquen. Una pàgina més endavant en aquest tutorial s'explica més.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>CSS proporciona una manera perquè el lector pugui anul·lar l'estil de l'autor del document, mitjançant l'ús de la paraula clau <code>!important</code>.</p> + +<p>Això vol dir que, com a autor del document, no sempre es pot predir amb exactitud el que els vostres lectors veuran.</p> + +<p>Si vols conèixer tots els detalls de cascada i herència, consulteu <a class="external" href="https://www.w3.org/TR/CSS/#css">Assignació de valors de les propietats, Cascada i herència</a> en l'especificació CSS.</p> +</div> + +<h2 id="Acció_L'ús_de_l'herència"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>L'ús</span> <span>de l'herència</span></span></h2> + +<ol> + <li><span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Edita l'arxiu CSS d'exemple.</span></span></li> + <li>Afegir aquesta línia copiant-la i enganxant-la. Realment no importa si l'afegeixes per damunt o per sota de la línia ja existent. No obstant això, afegir-la en la part superior és el mes lògic, ja que en el document l'element {{ HTMLElement("p") }} és el pare de l'element {{ HTMLElement("strong") }}: + <pre class="brush:css">p {color: blue; text-decoration: underline;} +</pre> + </li> + <li>Actualitzar el navegador per veure l'efecte en el document d'exemple. El subratllat afecta a tot el text en el paràgraf, incloent les lletres inicials. Els elements {{ HTMLElement("strong") }} han hagut d'heretar l'estil subratllat del seu pare, l'element {{ HTMLElement("p") }}.<br> + + <p>Però els elements {{ HTMLElement("strong") }} estan sent vermells. El color vermell correspont el seu propi estil, pel que té prioritat sobre el color blau del seu pare, l'element {{ HTMLElement("p") }}.</p> + </li> +</ol> + +<h2 id="Before" name="Before">Abans</h2> + +<h3 id="Contingut_HTML">Contingut HTML</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<h3 id="Contingut_CSS">Contingut CSS</h3> + +<pre class="brush: css">strong {color:red} +</pre> + +<p>{{ EmbedLiveSample('Before') }}</p> + +<h2 id="After" name="After">Després</h2> + +<h3 id="Contingut_HTML_2">Contingut HTML</h3> + +<pre class="brush: html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p></pre> + +<h3 id="Contingut_CSS_2">Contingut CSS</h3> + +<pre class="brush:css" dir="rtl">p {color:blue; text-decoration:underline} +strong {color:red}</pre> + +<p>{{ EmbedLiveSample('After') }}</p> + +<p> </p> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> +Modifiqueu el full d'estils perquè només les lletres vermelles estiguin subratllades: + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> + +<pre class="brush: css">p {color: blue; } +strong {color: red; text-decoration: underline;} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<p> </p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}El full d'estils d'exemple especifica els estils per a les etiquetes <p> i <strong>, modificant l'estil dels elements corresponents a tot el document. La següent secció descriu com especificar l'estil de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">manera més selectiva</a>.</p> diff --git a/files/ca/web/guide/css/inici_en_css/color/index.html b/files/ca/web/guide/css/inici_en_css/color/index.html new file mode 100644 index 0000000000..3dfb2be55c --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/color/index.html @@ -0,0 +1,353 @@ +--- +title: Color +slug: Web/Guide/CSS/Inici_en_CSS/Color +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estils de text")}}Aquesta és la 8th secció del tutorial<span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started"> CSS Getting Started</a> tutorial;</span>explica com especificar el color en CSS. En la vostre fulla d'estil d'exemple, s'introdueix colors de fons.</p> + +<h2 class="clearLeft" id="Informació_Color">Informació: Color</h2> + +<p>En aquest tutorial fins al moment, s'ha utilitzat un nombre limitat de colors amb nom. CSS2 suporta 17 colors amb nom en tots. Alguns dels noms pot ser que no sigui l'esperat:</p> + +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>negre (black)</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gris (gray)</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>plata (silver)</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>blanc (white)</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primaris</td> + <td>vermell (red)</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>Llima (lime)</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blau (blue)</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secundaris</td> + <td>groc (yellow)</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aigua (aqua)</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fúcsia (fuchsia)</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>marró (maroon)</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>taronge (orange)</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>oliva (olive)</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>porpra (purple)</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>verd (green)</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>blau marí (navy)</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td><span class="short_text" id="result_box" lang="ca"><span>verd</span> <span>blavós</span></span> (teal)</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<div class="tuto_details"> +<div class="tuto_type">Detalls</div> + +<p>El vostre navegador pot suportar molts més colors amb nom, com:</p> + +<table style="background-color: inherit; border: 0px; margin: .5em 0px .5em 2em; text-align: right;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> +</table> + +<p>Per a més detalls d'aquesta llista ampliada, consulteu: <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> en CSS 3 mòdul de colors. Aneu amb compte d'utilitzar noms de colors que els lectors dels navegadors no siguin compatibles.</p> +</div> + +<p>Per a una paleta gran, especifiqueu els components vermell, verd i blau del color que desitgeu mitjançant l'ús d'un signe de nombre (hash) i tres dígits hexadecimals en el rang de 0 - 9, a - f. Les lletres a - f representen els valors de 10 - 15:</p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>negre (black)</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>vermell (pure red)</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>verd (pure green)</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>blau (pure blue)</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>blanc (white)</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> + +<p><br> + <span id="result_box" lang="ca"><span>Per a la</span> <span>paleta</span> <span>completa,</span> <span>especificar</span> <span>dos dígits</span> <span>hexadecimals</span> <span>per a cada</span> <span>component</span><span>:</span></span></p> + +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>negre (black)</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>vermell (pure red)</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>verd (pure green)</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>blau (pure blue)</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>blanc (white)</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> + +<p>Normalment, es poden obtenir aquests codis hexadecimals de sis dígits d'un programa de gràfics o alguna altra eina.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Amb una mica de pràctica, podeu ajustar els colors de tres dígits manualment per a la majoria de propòsits:</p> + +<table style="background-color: #fffff4; border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Comenceu</span> <span>amb</span> <span>el vermell</span> <span>pur</span></span> :</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td><span id="result_box" lang="ca"><span>Perquè sigui</span> <span>més</span> <span>clar</span><span>, afegir una mica</span> <span>de verd</span> <span>i blau</span></span> :</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>Perquè sigui més taronja, afegir una mica de verd addicional:</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Per enfosquir</span><span>, reduir</span> <span>tots els seus</span> <span>components</span></span>:</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>Per reduir la saturació, fer els seus components més iguals:</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>Si feu tots ells exactament iguals, s'obté gris:</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> +</table> + +<p><span class="short_text" id="result_box" lang="ca"><span>Per</span> <span>un to</span> <span>pastís</span> <span>com</span> <span>el blau</span> <span>pàl·lid</span><span>:</span></span></p> + +<table style="background-color: #fffff4; border: 0px none; height: 83px; margin-left: 2em; width: 376px;"> + <tbody> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Comenceu</span> <span>amb</span> <span>blanc</span> <span>pur</span><span>:</span></span></td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td><span class="short_text" id="result_box" lang="ca"><span>Reduir els</span> <span>altres</span> <span>components</span> <span>una mica</span><span>:</span></span></td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>També podeu especificar un color utilitzant valors decimals RGB en el rang de 0-255 o percentatges.</p> + +<p>Per exemple, aquest és de color granat (vermell fosc):</p> + +<pre class="brush:css">rgb(128, 0, 0) +</pre> + +<p>Per a més detalls sobre com especificar els colors, consulteu: <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> en l'especificació CSS.</p> + +<p>Per obtenir informació sobre l'adequació dels colors del sistema de Menú i ThreeDFace, consulteu: <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">Colors del Sistema en CSS2</a> en l'especificació CSS.</p> +</div> + +<h3 id="Propietats_de_color"><span class="short_text" id="result_box" lang="ca"><span>Propietats de</span> <span>color</span></span></h3> + +<p>Ja heu utilitzat la propietat {{ cssxref("color") }} en el text.</p> + +<p>També podeu utilitzar la propietat {{ cssxref("background-color") }} per canviar el fons dels elements.</p> + +<p>Els fons els podeu configurar com <code>transparent</code> per eliminar de forma explícita qualsevol color, deixant al descobert el fons de l'element pare.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Les caixes d'<strong>exemple</strong> en aquest tutorial utilitza aquest fons de color groc pàl·lid:</p> + +<pre class="brush:css">background-color: #fffff4; +</pre> + +<p>Les caixes de <strong>Més detalls</strong> utilitza aquest color gris pàl·lid:</p> + +<pre class="brush:css">background-color: #f4f4f4; +</pre> +</div> + +<p> </p> + +<h2 id="Acció_L'ús_dels_codis_de_color"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>L'ús dels</span> <span>codis de</span> <span>color</span></span></h2> + +<h2 id="Color_page" name="Color_page">C<span class="short_text" id="result_box" lang="ca"><span>olor</span> <span>de la pàgina</span></span></h2> + +<ol> + <li>Editeu l'arxiu CSS.</li> + <li>Feu el canvi que es mostra aquí sota, per donar a les lletres inicials d'un fons blau pàl·lid. (La disposició i comentaris a l'arxiu probablement difereixen de l'arxiu que es mostra aquí. Mantenir la disposició i els comentaris de la manera que preferiu.)</li> + <li> + <h3 id="Contingut_HTML">Contingut HTML</h3> + + <pre class="brush: html"><p id = "first"> <strong>C</strong>ascading <strong class="spinach">S</strong>tyle <strong class="spinach">S</strong>heets</p> +<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</p> +</pre> + + <h3 id="Contingut_CSS">Contingut CSS</h3> + + <pre class="brush: css">/*** CSS Tutorial: Color page ***/ + +/* page font */ +body { + font: 16px "Comic Sans MS", cursive; +} + +/* paragraphs */ +p { + color: blue; +} +#first { + font-style: italic; +} + +/* initial letters */ +strong { + background-color: #ddf; + color: red; + font: 200% serif; +} + +.spinach { + color: green; + background-color: #ddf; +} + +</pre> + </li> + <li>Deseu el fitxer i actualitzeu el navegador per veure el resultat.</li> + <li>El resultat ha de ser com aquest:</li> +</ol> + +<p>{{ EmbedLiveSample('Color_page', '', '', '', 'Web/Guide/CSS/Getting_started/Color') }}</p> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>A l'arxiu CSS, canviar els noms de colors als codis de color de 3 dígits sense afectar el resultat.</p> + +<p>Això no es pot fer exactament, però es pot aconseguir aproximadament. Per fer-ho exactament es necessita codis de 6 dígits, i cal buscar l'especificació CSS o utilitzar una eina gràfica per a que coincideixi amb els colors.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>The following values are reasonable approximations of the named colors:</p> + +<pre class="brush: css">strong { + color: #f00; /* red */ + background-color: #ddf; /* pale blue */ + font: 200% serif; +} + +.carrot { + color: #fa0; /* orange */ +} + +.spinach { + color: #080; /* dark green */ +} + +p { + color: #00f; /* blue */ +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut")}}El document d'exemple i la seva fulla d'estil d'exemple separen el contingut de l'estil de forma estricta. La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">següent secció</a> explica com es pot fer excepcions a aquesta estricta separació.</p> diff --git a/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html b/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html new file mode 100644 index 0000000000..4a2732c584 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/com_funciona_el_css/index.html @@ -0,0 +1,129 @@ +--- +title: Com funciona el CSS +slug: Web/Guide/CSS/Inici_en_CSS/Com_funciona_el_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?") }}Aquesta tercera secció del tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> </span>explica com funciona CSS en el navegador i el propòsit del Document Object Model (DOM). També aprendreu com analitzar el document de mostra.</p> + +<h2 class="clearLeft" id="Informació_Com_funciona_el_CSS">Informació: Com funciona el CSS</h2> + +<p>Quan un navegador mostra un document, s'ha de combinar el contingut del document amb la seva informació d'estil. El document es processa en dues etapes:</p> + +<ol> + <li>El navegador converteix el llenguatge de marcat i el CSS en el <a href="/en-US/docs/DOM" title="/en-US/docs/HTML/DOM"><em>DOM</em></a> (Document Object Model). El DOM representa el document a la memòria de l'ordinador. Combina el contingut del document amb el seu estil.</li> + <li>El navegador mostra el contingut de la DOM.</li> +</ol> + +<p>Un llenguatge de marcat utilitza <em>elements</em> per definir l'estructura del document. Es marca un element mitjançant <em>etiquetes</em>, que són cadenes que comencen amb '<' i acaban amb '>'. La majoria dels elements tenen un parell d'etiquetes, una etiqueta d'inici i una etiqueta final. Per l'etiqueta d'inici, col·locar el nom de l'element entre '<' i '>'. Per l'etiqueta final, col·locar un '/' després que el '<' i abans que el nom de l'element.</p> + +<p>Depenent del llenguatge de marques, alguns elements només tenen una etiqueta d'inici, o una sola etiqueta on el '/' ve després que el nom de l'element. Un element també pot ser un contenidor i incloure altres elements entre la seva etiqueta inicial i final. Recordeu sempre de tancar les etiquetes dins del contenidor.</p> + +<p>Un DOM té una estructura en forma d'arbre. Cada element, atribut i extensió de text, en el llenguatge de marcat, es converteix en un <em>node</em> en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb altres nodes DOM. Alguns elements són els pares dels nodes fills, i els nodes fills tenen germans.</p> + +<p>La comprensió del DOM ajuda a dissenyar, depurar i mantenir la CSS, pel fet que el DOM és on el CSS i el contingut del document es reuneixen.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<div class="tuto_type"> </div> +En el vostre document d'exemple, l'etiqueta <p> i la seva etiqueta de tancament </p> creen un contenidor: + +<pre class="brush:html"><p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets +</p> +</pre> + +<p><strong>Exemple en directe</strong></p> + +<p>{{ EmbedLiveSample('Information.3A_How_CSS_works', '', '', '', 'Web/Guide/CSS/Getting_started/How_CSS_works') }}</p> + +<p>En el DOM, el node corresponent P és un pare. Els seus fills són els nodes STRONG i els nodes de text. Els nodes STRONG són ells mateixos els pares, amb els nodes de text com els seus fills;</p> + +<pre><span style="color: black;">P</span> +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">C</span>" +├─"<span style="color: black;">ascading</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +├─"<span style="color: black;">tyle</span>" +├─<span style="color: black;">STRONG</span> +│ └─"<span style="color: black;">S</span>" +└─"<span style="color: black;">heets</span>"</pre> +</div> + +<h2 id="Acció_Anàlisi_d'un_DOM">Acció: Anàlisi d'un DOM</h2> + +<h3 id="L'ús_de_DOM_Inspector">L'ús de DOM Inspector</h3> + +<p>Per analitzar un DOM, es necessita un programari especial. Podeu utilitzar el complement <a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> de Mozilla (DOMi) per analitzar un DOM. Només haureu de instal·lar el complement (veure més detalls a continuació).</p> + +<ol> + <li>Utilitzeu el navegador Mozilla per obrir el document HTML d'exemple.</li> + <li>Des de la barra de menú del navegador, seleccioneu <strong>Tools > DOM Inspector</strong>, or <strong>Tools > Web Development > DOM Inspector</strong>. + <div class="tuto_details"> + <div class="tuto_type">Més detalls</div> + + <p>Si el navegador Mozilla no té DOMI, podeu <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalar-ho des de la web de complements</a> i reiniciar el navegador. A continuació, tornar a aquest tutorial.</p> + + <p>Si no voleu instal·lar DOMi (o esteu fent servir un navegador que no és Mozilla), poodeu utilitzar Web X-Ray Goggles, tal com es descriu en la següent secció. O bé, podeu ometre aquesta secció i anar directament a la pàgina següent. Saltar-se aquesta secció no interfereix amb la resta del programa d'aprenentatge.</p> + </div> + </li> + <li>En DOMi, s'expandeixi els nodes del document fent clic a les fletxes. + <p><strong>Nota: </strong>Els espais creats en el arxiu HTML pot causar que DOMi mostri alguns nodes de text buits, que podeu ignorar.</p> + + <p>Part del resultat podria tenir aquest aspecte, depenent de quins nodes heu expandit:</p> + + <pre>│ ▼╴<span style="color: black;">P</span> +│ │ │ ▼╴<span style="color: black;">STRONG</span> +│ │ └<span style="color: darkblue;">#text</span> +│ ├╴<span style="color: darkblue;">#text</span> +│ ►╴<span style="color: black;">STRONG</span> +│ │</pre> + + <p>En seleccionar qualsevol dels nodes, podeu utilitzar el panell de la dreta de DOMi per esbrinar més sobre ell. Per exemple, quan es selecciona un node de text, DOMi mostra el text en el panell de la dreta.</p> + + <p>Quan se selecciona un node element, DOMi analitza i ofereix una enorme quantitat d'informació en el seu panell de la dreta. La informació d'estil és només part de la informació que proporciona.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>En DOMi, feu clic en un node <code>STRONG</code>.</p> + +<p>Utilitzeu el panell de la dreta de DOMi per esbrinar on el color del node és vermell, i on la seva aparença es fa més destacable que el text normal.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h3 id="Utilitzar_Web_X-Ray_Goggles">Utilitzar Web X-Ray Goggles</h3> + +<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a>mostra menys informació que DOM Inspector, però és més fàcil d'instal·lar i utilitzar.</p> + +<ol> + <li>Anar a la pàgina principal de <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> + <li>Arrossegar el enllaç de marcador a la pàgina de la barra d'eines del navegador.</li> + <li>Obriu el document HTML d'exemple.</li> + <li>Activar Web X-Ray Goggles fent clic al marcador a la barra d'eines.</li> + <li>Moure el punter del ratolí per sobre del document, per veure els elements del document.</li> +</ol> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència") }}Si heu pres el repte, veureu que la informació d'estil de més d'un lloc interacciona per crear l'estil final per a un element. La <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">pàgina següent</a> explica més sobre aquestes interaccions.</p> diff --git a/files/ca/web/guide/css/inici_en_css/css_llegible/index.html b/files/ca/web/guide/css/inici_en_css/css_llegible/index.html new file mode 100644 index 0000000000..d04a30ab4b --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/css_llegible/index.html @@ -0,0 +1,173 @@ +--- +title: CSS llegible +slug: Web/Guide/CSS/Inici_en_CSS/CSS_llegible +tags: + - CSS + - 'CSS:Getting_Started' + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - Web +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}Aquesta és la 6th secció del tutorial <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>; s'analitza l'estil i la gramàtica del propi llenguatge CSS. Es canvia la forma en què es veu el vostre arxiu CSS d'exemple, perquè sigui més llegible.</p> + +<h2 class="clearLeft" id="Informació_CSS_Llegible"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>CSS</span> <span>Llegible</span></span></h2> + +<p>Podeu afegir espais en blanc i comentaris en les fulles d'estil perquè siguin més llegibles. També es poden agrupar selectors, quan les mateixes regles d'estil s'apliquen als elements seleccionats de diferents maneres.</p> + +<h3 id="Espai_en_blanc">Espai en blanc</h3> + +<p>L'espai en blanc vol dir espais reals, tabuladors i noves línies. Podeu afegir espais en blanc per fer les fulles d'estil més llegible.</p> + +<p>En el context del disseny de la pàgina i composició, l'<strong>espai en blanc</strong> és la part de la pàgina que es deixa sense marcar: marges, separacions, i l'espai entre columnes i línies de text.</p> + +<p>El arxiu CSS d'exemple actualment té una regla per línia, i gairebé el mínim d'espai en blanc. En un full d'estil complex aquesta disposició seria difícil de llegir, de manera que difilcutaria el seu manteniment.</p> + +<p>El disseny escullit sol ser una preferència personal, però si els fulls d'estil són part de projectes compartits, aquests projectes podrian tenir les seves pròpies convencions.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemples</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>Hi ha qui</span></span> els agrada el disseny compacte que hem estat utilitzant, i només divideixen una línia quan es fa molt llarga:</p> + +<pre class="brush: css">.carrot {color: orange; text-decoration: underline; font-style: italic;} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Hi ha qui prefereix</span> <span>una propietat</span><span>-</span><span>valor per</span> <span>línia</span><span>:</span></span></p> + +<pre class="brush: css">.carrot +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Hi ha qui</span></span> utilitza la sagnia de dos espais, quatre espais, o una tabulació són comuns:</p> + +<pre class="brush: css">.carrot { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + +<p>Hi ha qui els agrada que tot estigui alienat verticalment (però un disseny com aquest és difícil de mantenir):</p> + +<pre class="brush: css">.carrot + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + +<p>Hi ha qui fa servir espais en blanc mixtes per millorar la lectura.</p> + +<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px } +.vegetable.carrot { color: orange; height: 90px; width: 10px } +.vegetable.spinach { color: darkgreen; height: 30px; width: 30px } +</pre> +</div> + +<p>Hi ha qui utilitza tabulacions per al disseny. Hi ha qui només utilitza espais.</p> + +<h3 id="Comentaris">Comentaris</h3> + +<p>Els comentaris en CSS comencen amb <code>/*</code> i acaban amb <code>*/</code>.</p> + +<p>Podeu utilitzar els comentaris per fer comentaris reals en el full d'estil, i també per <em>comentar</em> parts d'ell temporalment per a propòsits de prova.</p> + +<p>Per comentar part d'un full d'estil, col·locar aquesta part en un comentari perquè el navegador ho ignori. Aneu amb compte on s'inicia i acaba el comentari. La resta del full d'estil ha de tenir una sintaxi correcta.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<pre class="brush: css">/* style for initial letter C in first paragraph */ +.carrot { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> +</div> + +<h3 id="Selectors_agrupats"><span class="short_text" id="result_box" lang="ca"><span>Selectors</span> <span>agrupats</span></span></h3> + +<p>Quan molts elements tenen el mateix estil, podeu especificar un grup de selectors, separant-los per comes. La declaració és vàlida per a tots els elements seleccionats.</p> + +<p>En una altra part del full d'estils es poden especificar els mateixos selectors de nou de forma individual, per aplicar les regles d'estil individuals a ells.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla fa que els elements {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} i {{ HTMLElement("h3") }} tinguin el mateix color.</p> + +<p>És convenient especificar el color en un sol lloc, en el cas en què hagi de ser canviat.</p> + +<pre class="brush: css">/* color for headings */ +h1, h2, h3 {color: navy;} +</pre> +</div> + +<h2 id="Acció_Afegir_comentaris_i_millorar_el_disseny">Acció: Afegir comentaris i millorar el disseny</h2> + +<ol> + <li>Editeu l'arxiu CSS, i assegurar-se que té aquestes regles (en qualsevol ordre): + <pre class="brush: css">strong {color: red;} +.carrot {color: orange;} +.spinach {color: green;} +#first {font-style: italic;} +p {color: blue;} +</pre> + </li> + <li>Feu que sigui més llegible reordenant-ho d'una manera que ho trobeu lògic, i mitjançant l'afegit d'espais en blanc i comentaris de la millor manera que us sembli.</li> + <li>Deseu el fitxer i refresqueu la pantalla del navegador, per assegurar-se que els canvis no afectin el funcionament de la fulla d'estil: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details"> +<div class="tuto_type">Repte</div> + +<p>Comenteu una part de la fulla d'estils, sense canviar res més, perquè la primera lletra del document sigui vermella:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>(Hi ha més d'una manera de fer això.)</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> +One way to do this is to put comment delimiters around the rule for <code>.carrot</code>: + +<pre class="brush: css">/*.carrot { + color: orange; +}*/</pre> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Estil de text") }}En el estil d'exemple s'ha utilitzat el text en cursiva i subratllat. La pàgina següent descriu més formes d'<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">especificar l'aspecte del text</a> en el document.</p> diff --git a/files/ca/web/guide/css/inici_en_css/dades_xml/index.html b/files/ca/web/guide/css/inici_en_css/dades_xml/index.html new file mode 100644 index 0000000000..8885cbb036 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/dades_xml/index.html @@ -0,0 +1,241 @@ +--- +title: Dades XML +slug: Web/Guide/CSS/Inici_en_CSS/Dades_XML +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsUpdate + - Web +translation_of: Archive/Beginner_tutorials/XML_data +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p><span id="result_box" lang="ca"><span>Aquesta</span> <span>pàgina</span> <span>conté</span> <span>un exemple</span> <span>de com</span> <span>es</span> <span>pot</span> <span>utilitzar CSS</span> <span>amb</span> <span>dades</span> <span>XML.</span></span></p> + +<p>Es crea un document XML d'exemple, i una fulla d'estil que s'utilitzarà per mostrar en el vostre navegador.</p> + +<p>Aquesta és la 3rd secció de la Part II del <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started">tutorial CSS</a>.<br> + Secció anterior : <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS">SVG</a><br> + Secció següent : <a href="/en/CSS/Getting_Started/XBL_bindings" title="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">XBL binding</a></p> + +<h3 id="Information:_XML_data" name="Information:_XML_data">Informació: Dades XML</h3> + +<p><em><a href="/en/XML" title="en/XML">XML</a></em> (eXtensible Markup Language) és un llenguatge de propòsit general per a qualsevol tipus de dades estructurades.</p> + +<p>Per defecte, el navegador Mozilla mostra XML en un format molt similar a les dades originals d'un arxiu XML. Es veuen les etiquetes reals que defineixen l'estructura de les dades.</p> + +<p>En vincular una fulla d'estil CSS amb el document XML, pot definir altres formes de mostrar la mateixa. Per a això, la fulla d'estils utilitza regles que assignen les etiquetes en el document XML als tipus de visualització que utilitza HTML.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Exemple</caption> + <tbody> + <tr> + <td>Les dades d'un document XML utilitza etiquetes <code><INFO></code>. Voleu que els elements <code>INFO</code> del document es mostrin com paràgrafs HTML. + <p>En la fulla d'estil del document, s'especifica com els elements <code>INFO</code> es mostraran:</p> + + <div style="width: 30em;"> + <pre class="eval"> +INFO { + display: block; + margin: 1em 0; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Els valors més comuns per a la propietat <code>display</code> són:</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="padding-right: 2em;"><code>block</code></td> + <td>Es mostra com HTML <code>DIV</code> (per a les capçaleres, paràgrafs)</td> + </tr> + <tr> + <td><code>inline</code></td> + <td>Es mostra com HTML <code>SPAN</code> (per major èmfasi en el text)</td> + </tr> + </tbody> +</table> + +<p>Afegiu les vostres pròpies regles d'estil que especifiquin el tipus de lletra, espaiat i altres detalls de la mateixa manera que per a HTML.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Més detalls</caption> + <tbody> + <tr> + <td>Altres valors de <code>display</code> mostren l'element com un element de llista, o com un component d'una taula. + <p>Per veure la llista completa de tipus de pantalla, consulteu <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">La propietat display</a> en l'Especificació CSS.</p> + + <p>Utilitzant CSS sol, l'estructura de la pantalla ha de ser la mateixa que l'estructura del document. Altres tecnologies poden modificar l'estructura de la pantalla - per exemple, XBL pot afegir contingut, JavaScript i pot modificar el DOM.</p> + + <p>Per obtenir més informació sobre XML en Mozilla, vegeu la pàgina <a href="/en/XML" title="en/XML">XML</a> en aquesta wiki.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Action:_An_XML_demonstration" name="Action:_An_XML_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>XML</span></span></h3> + +<p><span id="result_box" lang="ca"><span>Fer un</span> <span>nou arxiu</span> <span>XML</span></span> , <code>doc9.xml</code>. <span id="result_box" lang="ca"> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>:</span></span></p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre><?xml version="1.0"?> +<!-- XML demonstration --> + +<?xml-stylesheet type="text/css" href="style9.css"?> + +<!DOCTYPE planet> +<planet> + +<ocean> +<name>Arctic</name> +<area>13,000</area> +<depth>1,200</depth> +</ocean> + +<ocean> +<name>Atlantic</name> +<area>87,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Pacific</name> +<area>180,000</area> +<depth>4,000</depth> +</ocean> + +<ocean> +<name>Indian</name> +<area>75,000</area> +<depth>3,900</depth> +</ocean> + +<ocean> +<name>Southern</name> +<area>20,000</area> +<depth>4,500</depth> +</ocean> + +</planet> +</pre> +</div> + +<p>Feu un nou arxiu CSS, <code>style9.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>:</span></span></p> + +<div style="width: 48em; height: 12em; overflow: auto;"> +<pre>/*** XML demonstration ***/ + +planet:before { + display: block; + width: 8em; + font-weight: bold; + font-size: 200%; + content: "Oceans"; + margin: -.75em 0px .25em -.25em; + padding: .1em .25em; + background-color: #cdf; + } + +planet { + display: block; + margin: 2em 1em; + border: 4px solid #cdf; + padding: 0px 1em; + background-color: white; + } + +ocean { + display: block; + margin-bottom: 1em; + } + +name { + display: block; + font-weight: bold; + font-size: 150%; + } + +area { + display: block; + } + +area:before { + content: "Area: "; + } + +area:after { + content: " million km\B2"; + } + +depth { + display: block; + } + +depth:before { + content: "Mean depth: "; + } + +depth:after { + content: " m"; + } +</pre> +</div> + +<p>Obriu el document en el navegador:</p> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="border: 2px solid #cdf; border-bottom: none; padding: .5em 8em 1em .5em;"> + <p style="font-size: 150%; font-weight: bold; margin: -1em 0px 0px 0px; padding: .1em .25em; background-color: #cdf; width: 8em;">Oceans</p> + + <p style="font-size: 75%; margin: .25em 0px 0px 0px; line-height: 110%;"><strong>Arctic</strong><br> + Area: 13,000 million km²<br> + Mean depth: 1,200 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>Atlantic</strong><br> + Area: 87,000 million km²<br> + Mean depth: 3,900 m</p> + + <p style="font-size: 75%; margin: .5em 0px 0px 0px; line-height: 110%;"><strong>. . .</strong></p> + </div> + </td> + </tr> + </tbody> +</table> + +<p><br> + Notes sobre aquesta demostració:</p> + +<ul> + <li>El superíndex 2 (en "milions km²") un caràcter Unicode, codificat com \ B2 a l'arxiu CSS.</li> + <li>La capçalera, "Oceans", té un marge superior negatiu, movent-lo cap amunt de manera que es mostri en la part superior de la vora.</li> +</ul> + +<p> </p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Repte</caption> + <tbody> + <tr> + <td>Canvieu la fulla d'estils perquè mostri el document com una taula. + <p>(Vegeu el capítol <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Taules</a> en l'especificació CSS per exemples que es poden adaptar.)</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="What_next.3F" name="What_next.3F">I ara què?</h4> + +<p>Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="https://developer.mozilla.org/Talk:en/CSS/Getting_Started/JavaScript">discussió</a>.</p> + +<p>Aquesta és l'última pàgina del tutorial. Per obtenir més informació sobre CSS en Mozilla, consulteu la pàgina principal de <a href="/en/CSS" title="en/CSS">CSS</a> en aquesta wiki.</p> diff --git a/files/ca/web/guide/css/inici_en_css/disseny/index.html b/files/ca/web/guide/css/inici_en_css/disseny/index.html new file mode 100644 index 0000000000..3ebf8912d6 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/disseny/index.html @@ -0,0 +1,382 @@ +--- +title: Disseny +slug: Web/Guide/CSS/Inici_en_CSS/Disseny +tags: + - CSS + - CSS Float + - CSS Text Align + - CSS Unit + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/CSS_layout +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes")}}Aquesta és la 12th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> descriu algunes maneres d'ajustar el disseny del document. Es canvia el disseny del vostre document d'exemple.</p> + +<h2 class="clearLeft" id="Informació_Disseny">Informació: Disseny</h2> + +<p>Feu servir CSS per especificar diversos efectes visuals que canvïin el disseny del document. Algunes de les tècniques especifiques de disseny son avançades, i van més enllà de l'àmbit d'aquest tutorial bàsic.</p> + +<p>En dissenyar una presentació que tingui un aspecte similar en diferents navegadors, la vostre fulla d'estil interactua amb la fulla d'estil i el motor de disseny predeterminats del navegador de formes que poden ser complexes. Aquest és també un tema avançat, que va més enllà de l'àmbit d'aquest tutorial bàsic.</p> + +<p>Aquesta pàgina descriu algunes tècniques simples que podeu intentar.</p> + +<h3 id="Estructura_del_document"><span id="result_box" lang="ca"><span>Estructura del</span> <span>document</span></span></h3> + +<p>Si voleu controlar el disseny del document, llavors és possible que hagiu de canviar la seva estructura.</p> + +<p>El llenguatge de marcat del document podria tenir etiquetes d'ús general per a la creació de l'estructura. Per exemple, en HTML podeu utilitzar l'element {{ HTMLElement("div") }} per crear l'estructura.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>En el vostre document d'exemple, els paràgrafs numerats (Numbered paragraphs), en el marc del segon epígraf, no tenen un contenidor propi.</p> + +<p>La vostre fulla d'estil no pot dibuixar una vora al voltant d'aquests paràgrafs, perquè no hi ha cap element per especificar en el selector.</p> + +<p>Per solucionar aquest problema estructural, es pot afegir una etiqueta {{ HTMLElement("div") }} al voltant dels paràgrafs. Aquesta etiqueta és única, pel que pot ser identificada per un atribut <code>id</code>:</p> + +<pre class="brush:html;highlight:[2,8]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</pre> + +<p>Ara a la vostre fulla d'estil podeu utilitzar una regla per especificar les vores al voltant de les dues llistes:</p> + +<pre class="brush:css">ul, #numbered { + border: 1em solid #69b; + padding-right:1em; +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Unitats_de_mida"><span class="short_text" id="result_box" lang="ca"><span>Unitats</span> <span>de mida</span></span></h3> + +<p>Fins ara, en aquest tutorial, s'han especificat les mides en píxels <code>(px)</code>. Aquestes són apropiades, en determinats casos, en un dispositiu de visualització com una pantalla d'ordinador. Però quan l'usuari canvia la mida de la font, el disseny pot semblar inadequat.</p> + +<p>Per a molts propòsits, és millor especificar les mides com un percentatge o en ems <code>(em)</code>. Un em és nominalment la mida de la font actual (l'amplada d'una lletra m). Quan l'usuari canvia la mida de la lletra, el seu disseny s'ajusta automàticament.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>La vora de l'esquerra d'aquest text té la mida definida en píxels.</p> + +<p>La vora de la dreta té la mida definida en ems.</p> + +<p>En el vostre navegador, al canviar la mida de la font veureu com la vora de la dreta s'ajusta, però la vora de l'esquerra no ho fa:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <div style="">RESIZE ME PLEASE</div> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p><span id="result_box" lang="ca"><span>Per a altres</span> <span>dispositius</span><span>, altres unitats</span> <span>de longitud són</span> <span>les adequades.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Hi ha més</span> <span>informació</span> <span>sobre</span> <span>això en una</span> <span>pàgina</span> <span>posterior d'aquest</span> <span>tutorial.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Per als</span> <span>detalls</span> <span>complets dels</span> <span>valors</span> <span>i</span> <span>les</span> <span>unitats que</span> <span>es</span> <span>poden</span> <span>utilitzar</span><span>, consulteu</span></span> <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Valors</a> <span id="result_box" lang="ca"><span>en</span> <span>l'especificació</span> <span>CSS.</span></span></p> +</div> + +<h3 id="Disposició_del_text">Disposició del text</h3> + +<p>Dues propietats defineixen com el contingut d'un element és alineat. Els podeu utilitzar per realitzar ajustos sencills en el disseny:</p> + +<dl> + <dt>{{ cssxref("text-align") }}</dt> + <dd>Alinea el contingut. Utilitzeu un d'aquests valors: <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code></dd> + <dt>{{ cssxref("text-indent") }}</dt> + <dd>Sagna el contingut en una quantitat que especifiqueu.</dd> +</dl> + +<p>Aquestes propietats s'apliquen a qualsevol text contingut en l'element, no només al text real. Recordeu que són heretats pels fills de l'element, així que pot ser que hagiu de desactivar-los explícitament en els fills per evitar resultats sorprenents.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Per centrar les capçaleres:</p> + +<pre class="brush:css">h3 { + border-top: 1px solid gray; + text-align: center; +} +</pre> + +<p>Resultant:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> + </td> + </tr> + </tbody> +</table> + +<p>En un document HTML, el contingut que es veu per sota d'una capçalera no està estructuralment contingut per la capçalera. Així que quan s'alinea una capçalera com aquesta, les etiquetes sota de l'encapçalament no hereten l'estil.</p> +</div> + +<h3 id="Flotants">Flotants</h3> + +<p>La propietat {{ cssxref("float") }} força un element cap a l'esquerra o cap a la dreta. Aquesta és una forma senzilla per controlar la seva posició i mida.</p> + +<p>La resta del contingut del document flueix normalment al voltant de l'element flotant. Això es pot controlar mitjançant l'ús de la propietat {{ cssxref("clear") }} en altres elements per fer que es quedin allunyats dels flotants.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>En el vostre document d'exemple, les llistes s'estenen a través de la finestra. Això es pot evitar fent que flotin cap a l'esquerra</p> + +<p>Per mantenir les capçaleress en el seu lloc, també heu d'especificar que es mantinguin allunyades dels flotants de la seva esquerra:</p> + +<pre class="brush:css">ul, #numbered {float: left;} +h3 {clear: left;} +</pre> +</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><strong>1: </strong>Lorem ipsum</p> + + <p><strong>2: </strong>Dolor sit</p> + + <p><strong>3: </strong>Amet consectetuer</p> + + <p><strong>4: </strong>Magna aliquam</p> + + <p><strong>5: </strong>Autem veleum</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>(Una mica de farciment (padding) es necessita a la dreta de les caixes, on la vora (border) està massa a prop del text.)</p> + +<h3 id="Posicionament">P<span id="result_box" lang="ca"><span>osicionament</span></span></h3> + +<p>Podeu definir la posició d'un element de quatre maneres, especificant la propietat {{ cssxref ("position") }} i un dels següents valors.</p> + +<p>Aquestes són les propietats avançades. És possible utilitzar-les en formes simples, és per això que s'esmenten en aquest tutorial bàsic. Però el seu ús per a dissenys complexos pot ser difícil.</p> + +<dl> + <dt><code>relative</code></dt> + <dd>La posició de l'element es desplaça respecte a la seva posició normal. Utilitzeu aquesta opció per a desplaçar un element en una quantitat especificada. De vegades es pot utilitzar el marge de l'element per aconseguir el mateix efecte.</dd> + <dt><code>fixed</code></dt> + <dd>La posició de l'element és fix. Definir la posició de l'element respecte a la finestra del document. Fins i tot si la resta del document es desplaça, l'element roman fix.</dd> + <dt><code>absolute</code></dt> + <dd>La posició de l'element es fixa en relació amb un element pare. Solsament un pare que estugui posicionat amb <code>relative</code>, <code>fixed</code> o <code>absolute</code>. Es pot fer que qualsevol element pare sigui adequat especificant <code>position:relative</code>; però sense especificar cap canvi.</dd> + <dt><code>static</code></dt> + <dd> + <p>El valor per defecte. Utilitzeu aquest valor si cal desactivar el posicionament de manera explícita.</p> + </dd> +</dl> + +<p>Juntament amb aquests valors de la propietat <code>position</code> (a excepció de <code>static</code>), especifiqueu una o més de les propietats: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code> per identificar on voleu que aparegui l'element, i potser també la seva grandària.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Per situar dos elements en un sobre l'altre, crear un contenidor pare en el vostre document amb els dos elements en el seu interior:</p> + +<pre class="brush:html"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</pre> + +<p>En la vostre fulla d'estil, fer la posició dels pares <code>relative</code>. No hi ha necessitat d'especificar qualsevol canvi real. Fer la posició dels fills <code>absolute</code>:</p> + +<pre class="brush:css">#parent-div { + position: relative; + font: bold 200% sans-serif; +} + +#forward, #back { + position: absolute; + margin:0px; /* no margin around the elements */ + top: 0px; /* distance from top */ + left: 0px; /* distance from left */ +} + +#forward { + color: blue; +} + +#back { + color: red; +} +</pre> + +<p>El resultat es veu així, amb la barra invertida a la part superior de la barra inclinada:</p> + +<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + +<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> +</div> + +<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>La història completa de posicionament ocupa dos capítols complexes en l'especificació CSS <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Model de format Visual </a>i <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Detalls del model de format visual</a>.</p> + +<p>Si esteu dissenyant fulles d'estil per a treballar en molts navegadors, llavors també cal tenir en compte les diferències en la manera com els navegadors interpreten la norma, i potser els errors en determinades versions de navegadors particulars.</p> +</div> + +<h2 id="Acció_Especificació_del_disseny"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Especificació</span> <span>del disseny</span></span></h2> + +<ol> + <li>Canvieu el document d'exemple, <code>doc2.html</code>, i la fulla d'estil, <code>style2.css</code>, utilitzant els exemples de més amunt en la secció <a href="#Document_structure" title="#Document structure"><strong>Estructura del document</strong></a> i <a href="#Floats" title="#Floats"><strong>Flotants</strong></a>.</li> + <li>En l'exemple <a href="#Floats" title="#Floats"><strong>Flotants</strong></a> afegir farciment per separar el text de la vora dret en 0,5 em.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Reptes</div> + +<p>Modifiqueu el document d'exemple, <code>doc2.html</code>, afegint aquesta etiqueta prop del final, just abans de <code></body></code>.</p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</pre> + +<p>Si no heu descarregat l'arxiu d'imatge al principi d'aquest tutorial, descarregar-ho ara, i ho col·loqueu en el mateix directori que els altres arxius d'exemple:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Predir on la imatge apareixerà en el document. A continuació, actualitzeu el navegador per veure si és correcte.</p> + +<p>Afegiu una regla a la fulla d'estil que col·loqui la imatge a la part superior dreta del document.</p> + +<p>Actualitzeu el navegador i fer la finestra petita. Comproveu que la imatge es queda a la part superior dreta, fins i tot quan es desplaça el document</p> + +<div style="position: relative; width: 29.5em; height: 18em;"> +<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + +<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> +<ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> +</ul> +</div> + +<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + +<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> +<p><strong>1: </strong>Lorem ipsum</p> + +<p><strong>2: </strong>Dolor sit</p> + +<p><strong>3: </strong>Amet consectetuer</p> + +<p><strong>4: </strong>Magna aliquam</p> + +<p><strong>5: </strong>Autem veleum</p> +</div> + +<p style=""> </p> + +<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> +</div> +</div> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules") }}S'han cobert gairebé tots els temes d'aquest tutorial bàsic de CSS. La pàgina següent descriu selectors més avançats per a regles CSS, i algunes formes específiques en el disseny de taules.</p> diff --git a/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html b/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html new file mode 100644 index 0000000000..1ed66628e4 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/estils_de_text/index.html @@ -0,0 +1,161 @@ +--- +title: Estils de text +slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text +tags: + - Beginner + - CSS + - CSS Fonts + - 'CSS:Getting_Started' + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>; </span>es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.</p> + +<h2 class="clearLeft" id="Informació_Estils_de_text"><span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Informació: Estils de text </span></span></h2> + +<p>CSS té diverses propietats d'estil de text.</p> + +<p>Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:</p> + +<ul> + <li>Negreta (Bold), Cursiva (Italic) i Majúscula petita (small-caps) (versaleta)</li> + <li>Mida (Size)</li> + <li><span id="result_box" lang="ca"><span>alçada de la</span> <span>línia</span></span> (Line height)</li> + <li><span id="result_box" lang="ca"><span>Tipus de</span> <span>lletra</span></span> (Font typeface)</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<pre class="brush:css">p { +font: italic 75%/125% "Comic Sans MS", cursive; +} +</pre> + +<p>Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.</p> + +<p>La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).</p> + +<p>El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).</p> + +<p>La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a <code>normal</code>).</p> +</div> + +<h3 id="Tipus_de_fonts">Tipus de fonts</h3> + +<p>No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.</p> + +<p>Acabar la llista amb un dels tipus de lletra per defecte incorporats: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> o <code>monospace</code>.</p> + +<p>Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.</p> + +<p>Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.</p> + +<h3 id="Les_mides_de_la_font">Les mides de la font</h3> + +<p>Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.</p> + +<p>Podeu utilitzar alguns valors incorporats per mides de font, com <code>small</code>, <code>medium</code> i <code>large</code>. També podeu utilitzar valors relatius a la mida de font de l'element pare com: <code>smaller</code>, <code>larger</code>, <code>150%</code> o <code>1.5em</code>. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.</p> + +<p>Si cal, podeu especificar una mida real com: <code>14px</code> (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.</p> + +<p>Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.</p> + +<h3 id="Alçada_de_la_línia"><span class="short_text" id="result_box" lang="ca"><span>Alçada de la</span> <span>línia</span></span></h3> + +<p><span id="result_box" lang="ca"><span>L'alçada de la</span> <span>línia especifica</span> <span>l'espaiat</span> <span>entre línies.</span> <span>Si</span> <span>el document</span> <span>té els</span> <span>paràgrafs</span> <span>llargs</span> <span>amb</span> <span>moltes</span> <span>línies, una</span> <span>separació</span> <span>més</span> <span>gran del normal</span> <span>fa que</span> <span>sigui</span> <span>més</span> <span>fàcil</span> <span>de llegir,</span> <span>especialment si</span> <span>la mida de la</span> <span>font</span> <span>és petita.</span></span></p> + +<p>Per especificar <span class="short_text" id="result_box" lang="ca"><span>l'alçada de la</span> <span>línia</span></span>, utilitzar la propietat {{ cssxref("line-height") }}.</p> + +<h3 id="Decoració">Decoració</h3> + +<p>A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el <code>subratllat(underline)</code> o <code>ratllat(line-through)</code>. Podeu configurar-ho a <code>none</code> per eliminar explícitament qualsevol decoració.</p> + +<h3 id="Altres_propietats">Altres propietats</h3> + +<p><span class="short_text" id="result_box" lang="ca"><span>Per especificar</span> <span>cursiva, utilitzar</span></span> <code>{{ cssxref("font-style") }}: italic;</code><br> + <span class="short_text" id="result_box" lang="ca"><span>Per especificar</span> <span>negreta</span></span> , <span class="short_text" id="result_box" lang="ca"><span>utilitzar</span></span> <code>{{ cssxref("font-weight") }}: bold;</code><br> + <span class="short_text" id="result_box" lang="ca"><span>Per especificar</span></span> majúscules petites , utilitzar <code>{{ cssxref("font-variant") }}: small-caps;</code></p> + +<p>Per desactivar qualsevol d'ells individualment, especificar el valor <code>normal</code> o <code>inherit</code>.</p> + +<div class="tuto_details"> +<div class="tuto_type">Mé detalls</div> + +<p>Podeu especificar els estils de text d'altres maneres variades.</p> + +<p>Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.</p> + +<p>En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).</p> + +<p>Per a més detalls de les propietats que es relacionen amb les fonts, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> en l'especificació CSS. Per a més detalls de decoració del text, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> + +<p>Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.</p> +</div> + +<h2 id="Acció_Especificació_de_les_fonts"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Especificació</span> <span>de les</span> <span>fonts</span></span></h2> + +<p>Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.</p> + +<ol> + <li>Editeu l'arxiu CSS.</li> + <li>Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis: + <pre class="eval">body { +font: 16px "Comic Sans MS", cursive; +} +</pre> + </li> + <li>Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.</li> + <li>Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia:: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Des de la barra de menú del navegador, seleccioneu <strong>View > Text Size > Increase</strong> (o <strong>View > Zoom > Zoom In</strong>). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.</li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:</p> + +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add the following style declaration to the <code>strong</code> rule:</p> + +<pre class="brush: css"> font: 200% serif; +</pre> +If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.</p> diff --git a/files/ca/web/guide/css/inici_en_css/index.html b/files/ca/web/guide/css/inici_en_css/index.html new file mode 100644 index 0000000000..839b8e8341 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/index.html @@ -0,0 +1,55 @@ +--- +title: Inici en CSS +slug: Web/Guide/CSS/Inici_en_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Guide + - Needs + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/First_steps +--- +<p>Aquest tutorial és una introducció a les característiques bàsiques i llenguatge (la sintaxi) per als <strong><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">fulls d'estil en cascada</a></strong><span class="seoSummary"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS"><strong>(Cascading Style Sheets)</strong></a> (CSS). </span>S'utilitza CSS per canviar l'aspecte d'un document estructurat, com ara una pàgina web. El tutorial també inclou exemples d'exercicis que podeu provar en el vostre ordinador per veure els efectes de les CSS i les característiques que funcionen en els navegadors moderns.</p> + +<p>El tutorial és per a principiants i per qualsevol persona que desitji revisar els conceptes bàsics de CSS. Si teniu més experiència amb CSS, la pàgina principal de CSS <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS">enumera</a> els recursos més avançats.</p> + +<nav class="fancyTOC"><a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">Què és CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Per què utilitzar CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'How CSS works' of the CSS tutorial">Com funciona el CSS</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">Cascada i herència</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Selectors</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">CSS Llegible</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Estils de text</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Color</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Contingut</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Llistes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Caixes</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Disseny</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Taules</a> <a class="button" href="/en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Media</a></nav> + +<h2 id="Que_es_necessita_per_començar"><span class="short_text" id="result_box" lang="ca"><span>Que</span> <span>es</span> <span>necessita</span> <span>per començar</span></span></h2> + +<ul> + <li><span id="result_box" lang="ca"><span>Un editor</span> <span>de text</span></span></li> + <li><span id="result_box" lang="ca"><span>Un navegador</span> <span>modern</span></span></li> + <li>Alguna experiència treballant amb editor de text i navegador</li> +</ul> + +<p>Encara que els exercicis poden ajudar-te a aprendre, no és necessari realitzar-los. Simplement podeu llegir el tutorial i mirar les imatges.</p> + +<p><strong>Nota:</strong> <span id="result_box" lang="ca"><span>El tutorial</span> <span>s'explica</span> <span>com funciona</span> <span>CSS</span> <span>amb el color.</span> <span>Serà més</span> <span>fàcil</span> <span>per</span> <span>completar aquestes</span> <span>seccions</span> <span>amb una pantalla</span> <span>a color</span> <span>i visió de</span> <span>color</span> <span>normal.</span></span></p> + +<h2 id="Com_utilitzar_aquest_tutorial"><span class="short_text" id="result_box" lang="ca"><span>Com</span> <span>utilitzar</span> <span>aquest tutorial</span></span></h2> + +<p>Per utilitzar aquest tutorial, llegiu les pàgines amb cura i de forma seqüencial. Si es salta una pàgina, pot ser difícil d'entendre les pàgines següents en el tutorial.</p> + +<h3 id="Part_I_Els_fonaments_del_CSS"><span class="short_text" id="result_box" lang="ca"><span>Part</span> <span>I: Els</span> <span>fonaments de</span>l<span> CSS</span></span></h3> + +<p>A cada pàgina, utilitzeu la secció d'<em>informació</em> per entendre com funciona CSS. Utilitzeu la secció Acció per probar l'ús de CSS en el vostre ordinador.</p> + +<p>Per posar a prova la vostre comprensió, prendre el repte al final de cada pàgina. Les solucions als reptes estan vinculats en virtut dels reptes, pel que no és necessari mirar-los si no ho desitjeu.</p> + +<p>Per comprendre CSS amb més profunditat, llegiu la informació que es troba en les caselles de subtítols <em>Més detalls</em>. Utilitzeu els enllaços que hi ha per trobar informació de referència sobre CSS</p> + +<h3 id="Part_II_L'Abast_del_CSS"><span class="short_text" id="result_box" lang="ca"><span>Part II</span><span>:</span> <span>L'Abast</span> <span>del CSS</span></span></h3> + +<p><span id="result_box" lang="ca"><span>Una segona</span> <span>part</span> <span>del programa d'aprenentatge</span> <span>proporciona</span> <span>exemples, que</span> <span>mostren l'abast</span> <span>de CSS</span> <span>amb</span> <span>altres tecnologies</span> <span>web i</span> <span>Mozilla</span></span>.</p> + +<ol> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></li> +</ol> diff --git a/files/ca/web/guide/css/inici_en_css/javascript/index.html b/files/ca/web/guide/css/inici_en_css/javascript/index.html new file mode 100644 index 0000000000..8fd453b50c --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/javascript/index.html @@ -0,0 +1,146 @@ +--- +title: JavaScript i CSS +slug: Web/Guide/CSS/Inici_en_CSS/JavaScript +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsUpdate + - Web +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>Aquesta és la primera secció de la Part II del <a href="/en/CSS/Getting_Started" title="https://developer.mozilla.org/en/CSS/Getting_Started">tutorial CSS</a>. La Part II conté alguns exemples que mostren l'abast de CSS utilitzat amb altres tecnologies web i Mozilla.</p> + +<p>Cada pàgina en la part II il·lustra com interactua amb CSS alguna altra tecnologia. Aquestes pàgines no estan dissenyades per ensenyar com utilitzar aquestes altres tecnologies. Aneu a altres tutorials per aprendre sobre elles en detall.</p> + +<p>En lloc d'això, aquestes pàgines estan dissenyades per il·lustrar els molts usos de CSS. Per utilitzar aquestes pàgines, heu de tenir algun coneixement de CSS, però no cal cap coneixement d'unes altres tecnologies.</p> + +<p>Secció anterior (Part I): <a href="/en/CSS/Getting_Started/Media" title="https://developer.mozilla.org/en/CSS/Getting_Started/Media">Mitjà</a><br> + Secció següent: <a href="/en/CSS/Getting_Started/SVG_graphics" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics">SVG</a></p> + +<h3 id="Information:_JavaScript" name="Information:_JavaScript"><span id="result_box" lang="ca"><span>Informació</span><span>: JavaScript</span></span></h3> + +<p>JavaScript és un <em>llenguatge de programació</em>. JavaScript s'utilitza àmpliament per proporcionar interactivitat en els llocs web i aplicacions.</p> + +<p>JavaScript pot interactuar amb les fulles d'estil, permetent-li escriure programes que canvien l'estil d'un document de forma dinàmica.</p> + +<p>Hi ha tres maneres de fer això:</p> + +<ul> + <li>Treballant amb la llista de fulles d'estil del document, per exemple: afegir, eliminar o modificar una fulla d'estil.</li> + <li>Treballant amb les regles en una fulla d'estil, per exemple: afegir, eliminar o modificar una regla.</li> + <li>Treballant amb un element individual en el DOM, modificant el seu estil independentment de les fulles d'estil del document.</li> +</ul> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Més detalls</caption> + <tbody> + <tr> + <td>Per obtenir més informació sobre JavaScript, vegeu la pàgina de <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a> en aquest wiki.</td> + </tr> + </tbody> +</table> + +<h3 id="Action:_A_JavaScript_demonstration" name="Action:_A_JavaScript_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>de JavaScript</span></span></h3> + +<p>Feu un nou document HTML, <code>doc5.html</code>. Copieu i enganxeu el contingut d'aquí, assegurar-vos de deplaçar-vos per obtenir tota ella;</p> + +<div style="width: 48em;"> +<pre class="brush:html;"><!DOCTYPE html> +<html> + +<head> +<title>Mozilla CSS Getting Started - JavaScript demonstration</title> +<link rel="stylesheet" type="text/css" href="style5.css" /> +<script type="text/javascript" src="script5.js"></script> +</head> + +<body> +<h1>JavaScript sample</h1> +<div id="square"></div> +<button>Click Me</button> + +</body> +</html> +</pre> +</div> + +<p>Feu una nova fulla d'estil CSS, <code>style5.css</code>. Copieu i enganxeu el contingut d'aquí:</p> + +<div style="width: 48em;"> +<pre class="brush:css;"> #square { + width: 120px; + height: 120px; + border: 2px inset gray; + margin-bottom: 1em; + } + + button { + padding: .5em 2em; + }</pre> +</div> + +<p>Feu un nou arxiu de text, <code>script5.js</code>. Copieu i enganxeu el contingut d'aquí:</p> + +<div style="width: 48em;"> +<pre class="brush:js;">// JavaScript demonstration +var changeBg = function (event) { + console.log("method called"); + var me = event.target + , square = document.getElementById("square"); + square.style.backgroundColor = "#ffaa44"; + me.setAttribute("disabled", "disabled"); + setTimeout(function () { clearDemo(me) }, 2000); +} + +function clearDemo(button) { + var square = document.getElementById("square"); + square.style.backgroundColor = "transparent"; + button.removeAttribute("disabled"); +} + +var button = document.querySelector("button"); +button.addEventListener("click", changeBg); +console.log(button); +</pre> +</div> + +<p><span id="result_box" lang="ca"><span>Obriu el</span> <span>document</span> <span>en el navegador i</span> <span>premeu el</span> <span>botó</span> <span>o vegeu</span> <span>una mostra</span> <span>del treball</span> <span>a continuació.</span></span></p> + +<p>{{ EmbedLiveSample('Action:_A_JavaScript_demonstration', 320,320) }}</p> + +<div class="note"><strong>Notes importants</strong> sobre aquesta demostració: + +<ul> + <li>El document HTML vincula la fulla d'estil com de costum, i també vincula el script.</li> + <li>L'script funciona amb elements individuals en el DOM. Modifica l'estil del cuadrat directament. Modifica l'estil del botó indirectament pel canvi d'un atribut.</li> + <li>En JavaScript, <code>document.getElementById("square")</code> és similar en funció al selector CSS <code>#square</code>.</li> + <li>En JavaScript, backgroundColor correspon a la propietat CSS <code>background-color</code>. JavaScript no permet guions en noms, de manera que "camelCase" s'utilitza en el seu lloc.</li> + <li>El vostre navegador té una regla CSS incorporada per <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> que canvia l'aspecte del botó quan està desactivat.</li> +</ul> +</div> + +<div class="warning"> +<p>De fet, el document HTML anterior pot tenir una condició de competència (informació relacionada en aquesta pàgina <a href="http://www.w3.org/TR/2014/REC-html5-20141028/single-page.html#common-pitfalls-to-avoid-when-using-the-scripting-apis">W3C</a>), ja que té l'element <em>script</em> dins de l'element head podent inicar-se l'execució del codi JavaScript abans que la pàgina acabi de carregar-se i el codi no funcionarà perquè la variable <em>button</em> serà nul.la. En moure l'element <em>script</em> sota de l'element button (just damunt de l'etiqueta de tancament <em>body</em>) en el marcat HTML hauria de resoldre aquest problema.</p> +</div> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: .5em; padding: 1em;"> + <caption>Repte</caption> + <tbody> + <tr> + <td>Canvieu el script perquè el quadre salti a la dreta 20 em quan el seu color canviï, i salti cap a enrere després.</td> + </tr> + </tbody> +</table> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#JavaScript" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#JavaScript">Veure la solució per el repte.</a></p> + +<h3 id="I_ara_què">I ara què?</h3> + +<p>Si teniu dificultats per entendre aquesta pàgina o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="https://developer.mozilla.org/Talk:en/CSS/Getting_Started/JavaScript">discussió</a>.</p> + +<p>En aquesta demostració, el document HTML vincula el script tot i que només l'element button utilitza el script. Mozilla estén CSS de manera que pugui vincular codi JavaScript (i també contingut i altres fulles d'estil) per als elements seleccionats. La pàgina següent mostra això: <strong><a href="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">vincles XBL</a></strong></p> diff --git a/files/ca/web/guide/css/inici_en_css/llistes/index.html b/files/ca/web/guide/css/inici_en_css/llistes/index.html new file mode 100644 index 0000000000..6792f86eb7 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/llistes/index.html @@ -0,0 +1,275 @@ +--- +title: Llistes +slug: Web/Guide/CSS/Inici_en_CSS/Llistes +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsUpdate + - Web +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Contingut") }} Aquesta és la 10th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>; descriu com es pot utilitzar CSS per especificar l'aspecte de les llistes. Heu de crear un nou document d'exemple que contindrà les llistes, i un nova fulla d'estil que és el estil de les llistes.</p> + +<h2 class="clearLeft" id="Informació_Llistes">Informació: Llistes</h2> + +<p>Si vau aprendre el repte en l'<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">última secció</a>, llavors va veure com es podia afegir contingut abans de qualsevol element perquè aparegués com un element de la llista.</p> + +<p>CSS proporciona propietats especials que estan dissenyades per a les llistes. En general, és convenient utilitzar aquestes propietats sempre que pugueu.</p> + +<p>Per especificar l'estil a una llista, utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador.</p> + +<p>El selector en la seva regla CSS pot seleccionar els elements de la llista d'elements (per exemple, {{ HTMLElement("li") }} ) o es pot seleccionar l'element de la llista dels pares (per exemple, {{ HTMLElement ("ul") }}) de manera que els elements de la llista hereten l'estil.</p> + +<h3 id="Llistes_no_ordenades">Llistes no ordenades</h3> + +<p>En una llista <em>no ordenada</em>, cada element de la llista està marcat de la mateixa manera.</p> + +<p>CSS té tres tipus de marcadors, i aquí es veu com el navegador els mostra:</p> + +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> + +<p>També podeu especificar l'adreça URL d'una imatge.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p><span id="result_box" lang="ca"><span>Aquestes</span> <span>regles</span> <span>especifiquen</span> <span>diferents</span> <span>marcadors</span> <span>per a diferents</span> <span>classes</span> <span>d'element</span>s <span>de la llista</span><span>:</span></span></p> + +<pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + +<p>Quan aquestes classes s'utilitzen en una llista, distingeix entre els elements oberts i tancats (per exemple, en una llista de tasques pendents):</p> + +<pre class="brush: html"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<p>{{ EmbedLiveSample('Unordered_lists', '', '', '') }}</p> +</div> + +<h3 id="Llistes_ordenades">Llistes ordenades</h3> + +<p>En una llista <em>ordenada</em>, cada element de la llista es marca de manera diferent per mostrar la seva posició en la seqüència.</p> + +<p>Utilitzeu la propietat {{ cssxref("list-style") }} per especificar el tipus de marcador:</p> + +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla especifica que els elements en {{ HTMLElement ("ol") }} amb la classe <code>info</code>, els elements s'identifiquen amb lletres majúscules.</p> + +<pre class="brush: html"><ol class="info"> + <li>Lorem ipsum</li> + <li>Dolor sit</li> + <li>Amet consectetuer</li> + <li>Magna aliquam</li> + <li>Autem veleum</li> +</ol></pre> + +<pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + +<p>El elements {{ HTMLElement ("li") }} en la llista hereten aquest estil:</p> + +<p>{{ EmbedLiveSample('Ordered_lists', '', '', '') }}</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>La propietat {{ cssxref ("list-style") }} és una propietat abreujada. En les fulles d'estil complexes és possible que preferiu utilitzar les propietats independents per establir els valors per separat. Per als enllaços a aquestes propietats separades, i més detalls de com CSS especifica les llistes, consulteu la pàgina de referència {{ cssxref ("list-style") }}.</p> + +<p>Si utilitzeu un llenguatge de marques com l'HTML que proporciona marques convencionals per llistes no ordenades ({{ HTMLElement("ul") }}) i llistes ordenades ({{ HTMLElement("ol") }}), llavors és una bona pràctica utilitzar les etiquetes en la forma en què estan destinades. No obstant això, podeu utilitzar CSS per fer que {{ HTMLElement("ul") }} aparegui ordenat i {{ HTMLElement("ol") }} aparegui desordenat si ho desitjeu.</p> + +<p>Els navegadors difereixen en la forma d'aplicar els estils de llistes. No espereu que la vostre fulla d'estil doni resultats idèntics en tots els navegadors.</p> +</div> + +<h3 id="Comptadors">C<span class="short_text" id="result_box" lang="ca"><span>omptadors</span></span></h3> + +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> +<p><strong>Note: </strong> Alguns navegadors no suporten comptadors. La pàgina <a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">continguts CSS i compatibilitat del navegador</a> en el <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">lloc Quirks Mode</a> conté un gràfic detallat de la compatibilitat dels navegadors per això i altres característiques CSS. Pàgines individuals en la <a href="/en-US/docs/Web/CSS/Reference" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS_Reference">Referència CSS</a> d'aquest lloc, també tenen taules de compatibilitat del navegador.</p> +</div> + +<p>Podeu utilitzar comptadors per enumerar els elements, no només els elements de la llista. Per exemple, en alguns documents és possible que vulgueu numerar les capçaleres o paràgrafs.</p> + +<p>Per especificar la numeració, es necessita un comptador amb un nom que definiu.</p> + +<p>En algun element abans que el recompte s'iniciï, reinicieu el comptador amb la propietat {{ cssxref("counter-reset") }} i el nom del seu comptador. El pare dels elements que està comptant és un bon lloc per fer-ho, però podeu utilitzar qualsevol element que vingui abans que els elements de la llista.</p> + +<p>Per cada element en el qual s'incrementa el comptador, utilitzeu la propietat {{ cssxref("counter-increment") }} i el nom del seu comptador.</p> + +<p>Per mostrar el comptador, afegiu {{ cssxref("::before") }} o {{ cssxref("::after") }} per al selector i l'ús de la propietat <code>content</code> (com ho va fer en la pàgina anterior, <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Content" title="en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a></strong>).</p> + +<p>En el valor de la propietat <code>content</code>, especifiqueu <code>counter()</code> amb el nom del vostre comptador. També podeu indicar un tipus. Els tipus són els mateixos que en la secció anterior de <strong>llistes ordenades</strong>.</p> + +<p>Normalment, l'element que mostra el comptador també l'incrementa.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla inicialitza un comptador per a cada element {{ HTMLElement("h3") }} amb la classe <code>numbered</code>:</p> + +<pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + +<p>Aquesta regla mostra i incrementa el comptador per a cada element {{ HTMLELement("p") }} amb la classe <code>numbered</code>:</p> + +<pre class="brush: html"><p class="numbered">Lorem ipsum</p> +<p class="numbered">Dolor sit</p> +<p class="numbered">Amet consectetuer</p> +<p class="numbered">Magna aliquam</p> +<p class="numbered">Autem veleum</p> +</pre> + +<pre class="brush:css">body { + counter-reset: mynum; +} +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>El resultat</span> <span>és el</span> <span>següent</span><span>:</span></span></p> + +<p>{{ EmbedLiveSample("Counters", '300', '200', '') }}</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>No podeu utilitzar comptadors a menys que sàpigueu que tot el que llegeixi el document té un navegador compatible amb ells.</p> + +<p>Si sou capaços d'utilitzar els comptadors, tenen l'avantatge que podeu donar estil els comptadors per separat dels elements de la llista. En l'exemple anterior, els comptadors estan en negreta, però els elements de la llista no ho estan.</p> + +<p>També podeu utilitzar els comptadors en formes més complexes, per exemple, al nombre de seccions, títols, subtítols i paràgrafs en els documents formals. Per a més detalls, consulteu <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Comptadors i numeració automàtica</a> en l'especificació CSS.</p> +</div> + +<h2 id="Acció_Llistes_amb_estil">Acció: Llistes amb estil</h2> + +<p>Feu un nou document HTML, <code>doc2.html</code>. Copieu i enganxeu el contingut d'aquí:</p> + +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> + +<p>Feu un nova fulla d'estil, <code>style2.css</code>. Copieu i enganxeu el contingut d'aquí:</p> + +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> + +<p>Si la disposició i el comentari no són del vostre gust, canvieu-los.</p> + +<p>Obriu el document en el navegador. Si el navegador és compatible amb els comptadors, es veurà alguna cosa semblant com l'exemple a continuació. Si el vostre navegador no suporta comptadors, llavors no veureu els números (i probablement ni tan sols els dos punts):</p> + +<p>{{ EmbedLiveSample('Action_Styled_lists', '300', '400', '') }}</p> + +<div class="tuto_example"> +<div class="tuto_type">Reptes</div> + +<p>Afegiu una regla a la fulla d'estil, per numerar els oceans utilitzant nombres romans de l'I al V:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>Canvieu la fulla d'estil per identificar les capçaleres amb lletres majúscules i en parèntesi com aquest:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + + <p><strong>. . .</strong></p> + + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Caixes") }}Quan el navegador mostra el document d'exemple, es crea un espai al voltant dels elements quan els col·loca a la pàgina. La pàgina següent descriu com podeu utilitzar CSS per treballar amb les formes subjacents d'elements, <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">caixes</a>.</p> diff --git a/files/ca/web/guide/css/inici_en_css/mitjà/index.html b/files/ca/web/guide/css/inici_en_css/mitjà/index.html new file mode 100644 index 0000000000..f3b14fb062 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/mitjà/index.html @@ -0,0 +1,402 @@ +--- +title: Mitjà +slug: Web/Guide/CSS/Inici_en_CSS/Mitjà +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}</p> + +<p>Aquesta és la 14th secció de la Part I del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> Moltes de les pàgines d'aquest tutorial s'han centrat en les propietats CSS i els valors que es poden utilitzar per especificar com mostrar un document. Aquesta pàgina es veu de nou en el propòsit i l'estructura de les fulles d'estil CSS.</p> + +<h2 class="clearLeft" id="Informació_Mitjà">Informació: Mitjà</h2> + +<p>El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.</p> + +<p>Per exemple, és probable que estigueu llegint aquesta pàgina en un dispositiu de visualització. Però també pot ser que el vulgueu projectar en una pantalla per a una gran audiència, o imprimir-ho. Aquests diferents mitjans poden tenir característiques diferents. CSS proporciona formes de presentar un document de manera diferent en diferents mitjans.</p> + +<p>Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu {{CSSXref("@media")}} seguit pel tipus de mitjà, seguit de claus que tanquen les regles.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.</p> + +<p>En el llenguatge de marcat, l'element pare de l'àrea de navegació té el <strong>id</strong> <code>nav-area</code>. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)</p> + +<p>Quan s'imprimeix el document, l'àrea de navegació no té cap propòsit, de manera que la fulla d'estil l'elimina per complet:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>Alguns dels tipus</span> <span>de mitjans</span> <span>comuns</span> <span>són</span><span>:</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Color pantalla ordinador</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Mitjans paginats</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Pantalla projectada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Tots els mitjans (per defecte)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.</p> + +<p>El llenguatge de marcat del document pot permetre que s'especifiqui el tipus de mitjà quan la fulla d'estil està vinculada al document. Per exemple, en HTML es pot especificar opcionalment el tipus de mitjà amb un atribut <code>media</code> en l'etiqueta LINK.</p> + +<p>En CSS podeu utilitzar {{CSSXref("@import")}} a l'inici d'una fulla d'estil per importar un altre fulla d'estil des d'una URL, especificant opcionalment el tipus de mitjà.</p> + +<p>Mitjançant l'ús d'aquestes tècniques es poden separar regles d'estil per a diferents tipus de mitjans en diferents arxius. Això de vegades és una forma útil d'estructurar les fulles d'estil.</p> + +<p>Per a més detalls sobre els tipus de mitjans, vegeu <a href="http://www.w3.org/TR/CSS21/media.html">Mtjà</a> en l'especificació CSS.</p> + +<p>Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">dades XML</a>.</p> +</div> + +<h3 id="Impressió">I<span id="result_box" lang="ca"><span>mpressió</span></span></h3> + +<p>CSS té algun suport específic per a la impressió i dels mitjans paginats en general.</p> + +<p>Un regla {{cssxref("@page")}} pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a <code>@page:left</code> i <code>@page:right</code>.</p> + +<p>Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (<code>in</code>) i punts (pt = 1/72 polzades) o centímetres (<code>cm</code>) i mil·límetres (<code>mm</code>). És igualment apropiat utilitzar ems (<code>em</code>) perquè coincideixi amb la mida de font i percentatges (<code>%</code>).</p> + +<p>Podeu controlar la forma en què el contingut del document es divideix entre els límits de pàgina, mitjançant l'ús de les propietats {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} i {{cssxref("page-break-inside")}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:</p> + +<pre class="brush:css">@page {margin: 1in;} +</pre> + +<p>Aquesta regla assegura que cada element <code>H1</code> comença en una nova pàgina:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per als detalls complets de suport de CSS per als mitjans paginats, veure <a href="http://www.w3.org/TR/CSS21/page.html">Mitjans paginats</a> en l'especificació CSS.</p> + +<p>Igual que altres característiques de CSS, la impressió depèn del navegador i la seva configuració. Per exemple, el navegador Mozilla subministra marges predeterminats, capçaleres i peus quan s'imprimeix. Quan altres usuaris imprimeixin el document, és probable que no sapigan quin navegador és i quina configuració té, de manera que és possible que no poguin controlar completament els resultats.</p> +</div> + +<h3 id="Interfícies_d'usuari">I<span id="result_box" lang="ca"><span>nterfícies</span> <span>d'usuari</span></span></h3> + +<p>CSS té algunes propietats especials per als dispositius que suporten una interfície d'usuari, com pantalles d'ordinador. Això fa que l'aspecte del document canvii dinàmicament a mesura que l'usuari treballa amb la interfície.</p> + +<p>No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.</p> + +<p>Hi ha cinc selectors especials:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el punter</span> <span>sobre ell</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el focus del</span> <span>teclat</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td><span id="result_box" lang="ca"><span>L'element</span> <span>E</span> <span>que està</span> <span>implicat</span> <span>en l'acció</span> <span>de l'usuari actual</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari <em>no</em></span> <span>ha visitat</span> <span>recentment</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari ha</span> <span>visitat</span> <span>recentment</span></span></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota: </strong>La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacitat i el selector :visited</a> per a més detalls.</p> +</div> + +<p>La propietat {{cssxref("cursor")}} especifica la forma del punter: Algunes de les formes comunes són els següents. Col·loqueu el ratolí sobre els elements de la llista per veure les formes de punter reals en el vostre navegador:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indica un vincle</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indica que el programa no pot acceptar l'entrada</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indica que el programa està funcionant, encara pot acceptar l'entrada</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><span class="short_text" id="result_box" lang="ca"><span>El</span> <span>valor per</span> <span>defecte</span> <span>(</span><span>normalment una</span> <span>fletxa</span><span>)</span></span></td> + </tr> + </tbody> +</table> + +<p>Una propietat {{cssxref("outline")}} crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat {{cssxref("border")}}, excepte que no es poden definir els costats individualment.</p> + +<p>Algunes altres característiques de les interfícies d'usuari s'implementen utilitzant atributs, en la forma normal. Per exemple, un element que és deshabilitat o de només lectura té l'atribut <strong>disabled</strong> o l'atribut <strong>readonly</strong>. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p><span id="result_box" lang="ca"><span>Aquestes regles</span> <span>especifiquen els</span> <span>estils</span> <span>per a un</span> <span>botó</span> <span>que canvia</span> <span>dinàmicament</span> <span>a mesura</span> <span>que l'usuari</span> <span>interactua</span> <span>amb</span> <span>ell</span><span>:</span></span></p> + +<pre class="brush:css">.green-button { + background-color:#cec; + color:#black; + border:2px outset #cec; + } + +.green-button[disabled] { + background-color:#cdc; + color:#777; + } + +.green-button:active { + border-style: inset; + } +</pre> + +<p>Aquest wiki no és compatible amb una interfície d'usuari en la pàgina, pel que aquests botons no "fan clic". Aquestes són algunes de les imatges estàtiques per il·lustrar la idea:</p> + +<table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>deshabilitat</td> + <td>normal</td> + <td>actiu</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>Un botó completament funcional també té un contorn fosc al voltant de tot el botó quan el valor és per defecte, i un contorn en línia de punts a la cara del botó quan té el focus del teclat. També podria tenir un efecte estacionari quan el punter es troba a sobre d'ell.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu <a href="http://www.w3.org/TR/CSS21/ui.html">Interfície d'usuari</a> en l'especificació CSS.</p> + +<p>Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.</p> +</div> + +<h2 id="Acció_Impressió_d'un_document">A<span id="result_box" lang="ca"><span>cció</span><span>:</span> <span>Impressió</span> <span>d'un</span> <span>document</span></span></h2> + +<ol> + <li><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document HTML,</span> <code><span>doc4.html</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + + <pre class="brush:html"><!DOCTYPE html> +<html> + <head> + <title>Print sample</title> + <link rel="stylesheet" href="style4.css"> + </head> + <body> + <h1>Section A</h1> + <p>This is the first section...</p> + <h1>Section B</h1> + <p>This is the second section...</p> + <div id="print-head"> + Heading for paged media + </div> + <div id="print-foot"> + Page: + </div> +</body> +</html> +</pre> + </li> + <li>Feu una nova fulla d'estil, <code>style4.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + <pre class="brush:css">/*** Print sample ***/ + +/* defaults for screen */ +#print-head, +#print-foot { + display: none; + } + +/* print only */ +@media print { + +h1 { + page-break-before: always; + padding-top: 2em; + } + +h1:first-child { + page-break-before: avoid; + counter-reset: page; + } + +#print-head { + display: block; + position: fixed; + top: 0pt; + left:0pt; + right: 0pt; + + font-size: 200%; + text-align: center; + } + +#print-foot { + display: block; + position: fixed; + bottom: 0pt; + right: 0pt; + + font-size: 200%; + } + +#print-foot:after { + content: counter(page); + counter-increment: page; + } + +} /* end print only */ +</pre> + </li> + <li>Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.</li> + <li>Imprimir (o vista prèvia d'impressió) el document; la fulla d'estil col·loca cada secció en una pàgina separada, i s'afegeix una capçalera i peu de pàgina per a cada pàgina. Si el navegador és compatible amb els comptadors, s'agrega un número de pàgina al peu de pàgina. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Reptes</caption> + <tbody> + <tr> + <td>Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. + <p>Llegiu la pàgina de referència {{CSSXref("@import")}} per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil <code>style4.css</code>.</p> + + <p>Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>Si teniu dificultats per entendre aquesta pàgina, o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussió</a>.</p> + +<p>Fins al moment, totes les regles d'estil en aquest tutorial s'han especificat en els arxius. Les regles i els seus valors són fixos. La pàgina següent descriu com poden canviar les regles de forma dinàmica mitjançant l'ús d'un llenguatge de programació: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> diff --git a/files/ca/web/guide/css/inici_en_css/per_què_utilitzar_css/index.html b/files/ca/web/guide/css/inici_en_css/per_què_utilitzar_css/index.html new file mode 100644 index 0000000000..d69cf9cdcf --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/per_què_utilitzar_css/index.html @@ -0,0 +1,110 @@ +--- +title: Per què utilitzar CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Per_què_utilitzar_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "Que és CSS?") }}Aquesta segona secció del tutorial <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> </span>explica la relació entre la CSS i els documents. En l'exercici aprendreu com afegir un full d'estil CSS en el document d'exemple que vam crear en la primera secció.</p> + +<h2 class="clearLeft" id="Informació_Per_què_utilitzar_CSS">Informació: Per què utilitzar CSS?</h2> + +<p>S'utilitza CSS per definir estils en els documents, incloent el disseny, la disposició i les variacions en la imatge per als diferents dispositius i mides de pantalla. Podeu posar el CSS en el <head> d'un document amb un full d'estils incrustat, o adjuntar un arxiu separat que defineix els estils amb un full d'estils extern. Per enllaçar un full d'estils extern al document, se li afegeix simplement un enllaç al full d'estils en el <head> del document.</p> + +<p>Un full d'estil extern té molts avantatges. Mantenir els estils separats del seu contingut HTML:</p> + +<ul> + <li>Ajuda a evitar la duplicació</li> + <li>Facilita el manteniment</li> + <li>Permet fer un canvi de tot el lloc en un sol lloc</li> +</ul> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>L'ús de CSS, permet emmagatzemar la informació d'estil en arxius comuns que comparteixen totes les pàgines. Per exemple, quan els documents enllaçan amb el mateix full d'estil que defineix el color de les capçaleres h2, es pot aplicar l'estil de les etiquetes de capçalera h2 globalment, canviant un atribut css.</p> + +<p>Quan un usuari visualitza una pàgina web, el navegador de l'usuari carrega la informació d'estil juntament amb el contingut de la pàgina.</p> + +<p>Quan un usuari imprimeix una pàgina web, pot proporcionar informació de diferent estil que fa que la pàgina impresa sigui fàcil de llegir.</p> +</div> + +<p>Com fer que HTML i CSS treballin junts? En general, s'utilitza HTML per descriure el contingut del document, no el seu estil. CSS s'utilitza per especificar l'estil del document, no el seu contingut. Més endavant en aquest tutorial, veureu algunes excepcions a aquesta disposició.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Un llenguatge de marcatge com l'HTML també proporciona algunes formes d'establir estil.</p> + +<div>Per exemple, en HTML es pot utilitzar una etiqueta <b> per fer el text en negreta, i establir el color de fons d'una pàgina en la seva etiqueta <body>.</div> + +<div> </div> + +<p>Quan s'utilitza CSS, normalment s'evita l'ús d'aquestes característiques del llenguatge de marcat, de manera que tota la informació d'estil del document està en un sol lloc.</p> +</div> + +<h2 id="Acció_Crear_un_full_d'estil"><span>Acció</span><span>:</span> C<span>rear un full</span> <span>d'estil</span></h2> + +<ol> + <li>Creeu un altre arxiu de text en el mateix directori que el document doc1.html que vau crear en la primera secció.</li> + <li>Guardeu el document com: style1.css. Aquest fitxer serà el full d'estil.</li> + <li>A l'arxiu CSS, copieu i enganxeu aquesta línia, a continuació, deseu el fitxer: + <pre class="brush: css">strong {color: red;} +</pre> + </li> +</ol> + +<h3 id="Vincular_el_document_al_full_d'estils"><span class="short_text" id="result_box" lang="ca"><span>Vincular el</span> <span>document</span> <span>al full</span> <span>d'estils</span></span></h3> + +<ol> + <li><span>Per</span> <span>enllaçar</span> <span>el document</span> <span>al full</span> <span>d'estils</span><span>, editar</span> <span>l'arxiu HTML.</span> <span>Afegiu-hi la</span> <span>línia</span> <span>ressaltada</span> <span>aquí</span><span>:</span> + + <pre class="brush: html; highlight:[6];"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li>Deseu el fitxer i refrescar la pantalla del navegador. El full d'estil fa que les lletres inicials siguin de color vermell, com aixó:</li> +</ol> + +<p>{{ EmbedLiveSample('Action_Creating_a_stylesheet', '', '', '', 'Web/Guide/CSS/Getting_started/Why_use_CSS') }}</p> + +<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> + +<div class="tuto_example" id="challenge"> +<div class="tuto_type">Repte</div> + +<p><span id="result_box" lang="ca"><span>A més de</span> <span>vermell</span><span>, CSS</span> <span>permet a alguns</span> <span>altres noms</span> <span>de colors.</span></span></p> + +<p>Sense buscar una referència, trobar cinc noms més de colors que treballin en el full d'estil.</p> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte</a></div> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "Com funciona el CSS.")}}Ara teniu un document de mostra vinculat a un full d'estil separat, ja esteu llestos per <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprendre més</a> sobre com el navegador les combina quan es mostra el document.</p> diff --git a/files/ca/web/guide/css/inici_en_css/que_és_css/index.html b/files/ca/web/guide/css/inici_en_css/que_és_css/index.html new file mode 100644 index 0000000000..70d89e8306 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/que_és_css/index.html @@ -0,0 +1,119 @@ +--- +title: Que és CSS? +slug: Web/Guide/CSS/Inici_en_CSS/Que_és_CSS +tags: + - Beginner + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - Web +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<div>{{CSSTutorialTOC}}</div> + +<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Inici en CSS")}} Aquesta primera secció del tutorial <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a> explica breument les fulles d'estil en cascada (CSS). També es crearà un document senzill per utilitzar en els exercicis CSS en les seccions següents.</p> + +<h2 class="clearLeft" id="Informació_Que_és_CSS">Informació: Que és CSS?</h2> + +<p><span id="result_box" lang="ca"><span>Fulles</span> <span>d'estil en</span> <span>cascada</span></span> (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) <span lang="ca"><span>és un llenguatge</span> <span>per</span> <span>especificar com</span> <span>els</span> <span>documents</span> <span>es</span> <span>presenten als</span> <span>usuaris.</span> <span>Aquests</span> <span>documents</span> <span>estan</span> <span>escrits</span> <span>en un llenguatge</span> <span>de marcat</span> <span>com ara <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a></span><span>.</span></span></p> + +<p>Un document és un recull d'informació que s'estructura utilitzant un <em>llenguatge de marcat</em>.</p> + +<p>La <em>presentació</em> d'un document a un usuari vol dir convertir-lo en una format utilitzable per al seu públic. Navegadors, com Firefox, Chrome o Internet Explorer, estan dissenyats per a presentar documents visuals, per exemple, en una pantalla d'ordinador, un projector o una impressora.</p> + +<div class="tuto_example"> +<p><strong>Exemples</strong></p> + +<ul> + <li>Una pàgina web com la què esteu llegint és un document. La informació que es veu en una pàgina web sol estructurar-se utilitzant el llenguatge de marcat HTML (HyperText Markup Language).</li> + <li>Quadres de diàleg en una aplicació, també anomenades finestres modals, són sovint documents.Tals diàlegs també es poden estructurar utilitzant un llenguatge de marcat, com XUL (XML User Interface Language), que es troba en algunes aplicacions de Mozilla.</li> +</ul> +</div> + +<p>En aquest tutorial, caixes amb el subtítol, <strong>Més detalls</strong>, com la de baix, contenen informació opcional i enllaços a més recursos en un concepte o tema tractat en una secció. Llegir-los com els veieu, seguir els enllaços, o ometre aquestes caixes i tornar a llegir-los més tard.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Un document no és el mateix que un arxiu. Però, es pot desar un document en un arxiu.</p> + +<p>El document que esteu llegint en aquest moment no està emmagatzemat en un arxiu. Quan el navegador demana aquesta pàgina, el servidor consulta una base de dades i genera el document, recollint les parts del document de diferents arxius. No obstant això, aquest tutorial també pot treballar amb documents emmagatzemats en arxius.</p> + +<p>Podeu trobar més informació sobre els documents i llenguatges de marcatge en altres àrees d'aquest lloc web:</p> + +<table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td> + <td>per pàgines web</td> + </tr> + <tr> + <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td> + <td><span id="result_box" lang="ca"><span>per documents</span> <span>estructurats en</span> <span>general</span></span></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td> + <td>per gràfics</td> + </tr> + <tr> + <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td> + <td><span id="result_box" lang="ca"><span>per interfícies</span> <span>d'usuari en</span> <span>Mozilla</span></span></td> + </tr> + </tbody> +</table> + +<p>A la Part II d'aquest tutorial podreu veure exemples d'aquests llenguatges de marques.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>En la terminologia formal de CSS, el programa que presenta un document a un usuari se anomenat un <em>agent d'usuari</em> (UA). Un navegador és un tipus d'UA. CSS no és només per a navegadors o presentació visual, però en la part I d'aquesta guia, solament es treballarà amb CSS en un navegador.</p> + +<p>Per a les definicions formals de terminologia relatives a la CSS, consulteu <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> en l'especificació CSS del World Wide Web Consortium (W3C), una comunitat internacional que estableix estàndards oberts per al web.</p> +</div> + +<h2 id="Acció_Creació_d'un_document"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Creació</span> <span>d'un</span> <span>document</span></span></h2> + +<ol> + <li>Creeu un nou directori en l'ordinador per guardar i organitzar els exercicis del tutorial.</li> + <li>Obriu un editor de text i crear un nou arxiu de text. Aquest arxiu contindrà el document per als pròxims exercicis tutorials.</li> + <li>Copieu i enganxeu el codi HTML que es mostra a continuació. Deseu el fitxer amb el nom doc1.html + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + </head> + + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html></pre> + + <p>{{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}</p> + </li> + <li>Obriu una nova pestanya o una nova finestra, a continuació, obriu el fitxer que acabeu de crear. + <p>Hauria de veure el text amb les lletres inicials en negreta, com aquestes:</p> + + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>El que veieu en el navegador pot no ser exactament el mateix a causa de la configuració del navegador i d'aquesta wiki. Algunes diferències en el tipus de lletra, espaiat i colors no són importants.</p> + </li> +</ol> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Per què utilitzar CSS?")}} El document encara no utilitza CSS. A la següent secció farem servir CSS per l'estil del document.</p> diff --git a/files/ca/web/guide/css/inici_en_css/selectors/index.html b/files/ca/web/guide/css/inici_en_css/selectors/index.html new file mode 100644 index 0000000000..32eaccf00b --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/selectors/index.html @@ -0,0 +1,455 @@ +--- +title: Selectors +slug: Web/Guide/CSS/Inici_en_CSS/Selectors +tags: + - Beginner + - CSS + - CSS Selector + - 'CSS:Getting_Started' + - Example + - Guide + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada & herència")}}Aquesta 5th secció del tutorial <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.</p> + +<h2 class="clearLeft" id="Informació_Selectors">Informació: Selectors</h2> + +<p>CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:</p> + +<pre class="brush: css">strong { + color: red; +} +</pre> + +<p>En la terminologia de CSS, tota aquesta línia és una <em>regla</em>. Aquesta regla s'inicia amb strong, que és un <em>selector</em> (o una llista de <em>selectors</em>). Es selecciona quins elements del DOM s'aplica la regla.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>La part dins de les claus és la <em>declaració</em>.</p> + +<p>L'identificador color és una <em>propietat</em>, i el vermell és un <em>valor</em>.</p> + +<p>El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.</p> + +<p>En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de <em>tipus</em>.</p> +</div> + +<p>Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.</p> + +<p>A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.</p> + +<p>Dos atributs tenen un estatus especial per CSS. Són <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> i <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> + +<h3 id="Selectors_class">Selectors class</h3> + +<p>Utilitzeu l'atribut <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.</p> + +<p>En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.</p> + +<h3 id="Selectors_ID">Selectors ID</h3> + +<p>Utilitzeu l'atribut <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.</p> + +<p>En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> +Aquesta etiqueta HTML té tant un atribut <code>class</code> com un atribut <code>id</code>: + +<pre class="brush: html"><p class="key" id="principal"> +</pre> + +<p>El valor <strong>id</strong>, <code>principal</code>, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, <code>key</code>.</p> + +<p>En un full d'estil CSS, aquesta regla fa que tots els elements amb la class <code>key</code> siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)</p> + +<pre class="brush: css">.key { + color: green; +} +</pre> + +<p>Aquesta regla fa que l'únic element amb el <strong>id</strong> <code>principal</code> sigui negreta:</p> + +<pre class="brush: css">#principal { + font-weight: bolder; +} +</pre> +</div> + +<h3 id="Selectors_d'atributs"><span class="short_text" id="result_box" lang="ca"><span>Selectors</span> <span>d'atributs</span></span></h3> + +<p>No està limitat als dos atributs especials, <code>class</code> i <code>id</code>. Podeu especificar <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">altres atributs</a> mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:</p> + +<dl> + <dt><code>[disabled]</code></dt> + <dd>Selecciona tots els elements amb un atribut "disabled".</dd> + <dt><code>[type='button']</code></dt> + <dd>Selecciona els elements amb un tipus "button".</dd> + <dt><code>[class~=key]</code></dt> + <dd>Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a <code>.key</code>.</dd> + <dt><code>[lang|=es]</code></dt> + <dd>Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).</dd> + <dt>[title*="example" i]</dt> + <dd>Selecciona elements title els quals conté "example", <span id="result_box" lang="ca"><span>ignorant</span> <span>majúscules i</span> <span>minúscules</span></span> . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.</dd> + <dt><code>a[href^="https://"]</code></dt> + <dd>Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.</dd> + <dt><code>img[src$=".png"]</code></dt> + <dd>Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).</dd> +</dl> + +<h3 id="Selectors_de_pseudo-classes">Selectors de pseudo-classes</h3> + +<p>Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.</p> + +<p>Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu <a href="http://www.w3.org/TR/selectors/#selectors">especificació CSS3 Selectors working</a>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Sintaxi</div> + +<pre class="brush:css">selector:pseudo-class { + property: value; +} +</pre> +</div> + +<h4 id="Llista_de_pseudo-classes">Llista de pseudo-classes</h4> + +<ul> + <li>{{ Cssxref(":link") }}</li> + <li>{{ Cssxref(":visited") }}</li> + <li>{{ Cssxref(":active") }}</li> + <li>{{ Cssxref(":hover") }}</li> + <li>{{ Cssxref(":focus") }}</li> + <li>{{ Cssxref(":first-child") }}</li> + <li>{{ Cssxref(":last-child") }}</li> + <li>{{ Cssxref(":nth-child") }}</li> + <li>{{ Cssxref(":nth-last-child") }}</li> + <li>{{ Cssxref(":nth-of-type") }}</li> + <li>{{ Cssxref(":first-of-type") }}</li> + <li>{{ Cssxref(":last-of-type") }}</li> + <li>{{ Cssxref(":empty") }}</li> + <li>{{ Cssxref(":target") }}</li> + <li>{{ Cssxref(":checked") }}</li> + <li>{{ Cssxref(":enabled") }}</li> + <li>{{ Cssxref(":disabled") }}</li> +</ul> + +<h3 id="Llista_de_selectors">Llista de selectors</h3> + +<p>Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> +En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta. + +<pre class="brush:css">.content-1, .content-2 { + font-weight: bold; +} +</pre> +</div> + +<h2 id="Informació_Especificitat"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Especificitat</span></span></h2> + +<p>Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">específic</a> que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.</p> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>També es poden combinar selectors, fent un selector més específic. Per exemple, el selector <code>.key</code> selecciona tots els elements que tenen el nom de classe <code>key</code>. El selector <code>p.key</code> selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe <code>key</code>.</p> +</div> + +<p>Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.</p> + +<p>Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.</p> + +<h2 id="Informació_Els_selectors_basats_en_relacions"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Els</span> <span>selectors</span> <span>basats</span> <span>en relacions</span></span></h2> + +<p>CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.</p> + +<table id="relselectors"> + <caption>Selectors comuns basats en les relacions</caption> + <tbody> + <tr> + <td style="width: 10em;"><strong>Selector</strong></td> + <td><strong>Seleccions</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Qualsevol element E que és un <em>descendent</em> d'un element A (que és: un fill, o un fill d'un fill, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Qualsevol element E que és un <em>fill</em> (és a dir, descendent directe) d'un element A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Qualsevol element E que és el <em>primer fill</em> del seu pare</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Qualsevol element E que és el següent <em>germà</em> d'un element B (és a dir: el següent fill del mateix pare)</td> + </tr> + </tbody> +</table> + +<p>Es poden combinar aquests per expressar relacions complexes.</p> + +<p>També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Una taula HTML té un atribut <code>id</code>, però les seves files i cel·les no tenen identificadors individuals:</p> + +<pre class="brush: html"><table id="data-table-1"> +... +<tr> +<td>Prefix</td> +<td>0001</td> +<td>default</td> +</tr> +... +</pre> + +<p>Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:</p> + +<pre class="brush:css"> #data-table-1 td:first-child {text-decoration: underline;} + #data-table-1 td:first-child + td {text-decoration: line-through;} +</pre> + +<p>Aquest és el resultat:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 18em;"> + <tbody> + <tr> + <td><u>Prefix</u></td> + <td><s>0001</s></td> + <td>default</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.</p> + +<p>Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs <code>class</code> o <code>id</code> en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.</p> + +<p>En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.</p> + +<p>Per a més exemples sobre taules, consulteu <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Taules</a> en la pàgina Referència CSS..</p> +</div> + +<h2 id="Acció_Ús_dels_selectors_class_i_ID">Acció: Ús dels selectors class i ID</h2> + +<ol> + <li>Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.</li> + <li>A continuació, afegir els atributs <strong>id</strong> i <strong>class</strong> a la primera còpia, i un atribut <strong>id</strong> a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou: + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p id="first"> + <strong class="carrot">C</strong>ascading + <strong class="spinach">S</strong>tyle + <strong class="spinach">S</strong>heets + </p> + <p id="second"> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> + </li> + <li><span id="result_box" lang="ca"><span>Ara</span> <span>editeu el fitxer</span> <span>CSS.</span> <span>Substituir</span> <span>tot</span> <span>el contingut</span> <span>per</span><span>:</span></span> + <pre class="brush:css">strong { color: red; } +.carrot { color: orange; } +.spinach { color: green; } +#first { font-style: italic; } +</pre> + </li> + <li>Guardeu els arxius i actualitzar el navegador per veure el resultat: + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.</p> + + <p>Els selectors class <code>.carrot</code> i <code>.spinach</code> tenen prioritat sobre el selector d'etiqueta <code>strong</code>.</p> + + <p>El selector ID <code>#first</code> té prioritat sobre els selectors class i tag.</p> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Reptes</div> + +<ol> + <li>Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> + <li>Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau: + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </li> +</ol> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<ol> + <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: + + <pre class="brush: css">#second { color: blue; } +</pre> + A more specific selector, <code>p#second</code> also works.</li> + <li>Change the selector of the new rule to be a tag selector using <code>p</code>: + <pre class="brush: css">p { color: blue; } +</pre> + </li> +</ol> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div> + +<h2 id="Acció_L'ús_de_selectors_de_pseudo-classes">Acció: L'ús de selectors de pseudo-classes</h2> + +<ol> + <li><span class="short_text" id="result_box" lang="ca"><span>Creeu un arxiu</span> <span>HTML amb el</span> <span>següent</span> <span>contingut</span><span>:</span></span> + + <pre class="brush: html"><!doctype html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document</title> + <link rel="stylesheet" href="style1.css"> + </head> + <body> + <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> + </body> +</html> +</pre> + </li> + <li>Ara editeu el fitxer CSS. Substituir tot el contingut per: + <pre class="brush: css">a.homepage:link, a.homepage:visited { + padding: 1px 10px 1px 10px; + color: #fff; + background: #555; + border-radius: 3px; + border: 1px outset rgba(50,50,50,.5); + font-family: georgia, serif; + font-size: 14px; + font-style: italic; + text-decoration: none; +} + +a.homepage:hover, a.homepage:focus, a.homepage:active { + background-color: #666; +} +</pre> + </li> + <li>Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte): + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td>Anem-nos <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> + </tr> + </tbody> + </table> + </li> +</ol> + +<h2 id="Acció_L'ús_de_selectors_basats_en_les_relacions_i_pseudo-classes"><span id="result_box" lang="ca"><span>Acció</span><span>: L'ús de</span> <span>selectors</span> <span>basats en</span> <span>les</span> <span>relacions</span> <span>i pseudo</span><span>-</span><span>classes</span></span></h2> + +<p>Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear <strong>menús desplegables en CSS pur</strong> (això només és CSS, sense necessitat d'utilitzar<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"> JavaScript</a>). L'essència d'aquesta tècnica és la creació d'una regla com la següent:</p> + +<pre class="brush: css">div.menu-bar ul ul { + display: none; +} + +div.menu-bar li:hover > ul { + display: block; +}</pre> + +<p><span id="result_box" lang="ca"><span class="alt-edited">per a ser aplicat a una estructura HTML com la següent:</span></span></p> + +<pre class="brush: html"><div class="menu-bar"> + <ul> + <li> + <a href="example.html">Menu</a> + <ul> + <li> + <a href="example.html">Link</a> + </li> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li> + <a class="menu-nav" href="example.html">Submenu</a> + <ul> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + <li><a href="example.html">Link</a></li> + </ul> + </li> + </ul> + </li> + </ul> +</div> +</pre> + +<p>Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.</p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">fàcil de llegir</a> la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}</p> diff --git a/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html b/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html new file mode 100644 index 0000000000..6dac20b5a6 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/svg_i_css/index.html @@ -0,0 +1,223 @@ +--- +title: SVG i CSS +slug: Web/Guide/CSS/Inici_en_CSS/SVG_i_CSS +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsLiveSample + - NeedsUpdate + - SVG + - Web +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +<div>{{CSSTutorialTOC}}</div> + +<p>Aquesta pàgina il·lustra l'aplicació de CSS per al llenguatge especialitzat en la creació de gràfics: <a href="/en-US/docs/SVG">SVG</a>.</p> + +<p>Crea una demostració senzilla que s'executa en el vostre navegador habilitat per SVG.</p> + +<p>Aquesta és la 2nd secció de la Part II del <a href="/en-US/docs/Web/Guide/CSS/Getting_started">tutorial CSS</a>.<br> + Secció anterior: <a href="/en-US/docs/Web/JavaScript/Getting_Started">JavaScript</a><br> + Secció següent: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">XML data</a></p> + +<h3 id="Information:_SVG" name="Information:_SVG"><span id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>SVG</span></span></h3> + +<p><span id="result_box" lang="ca"><em><span>SVG</span></em> <span>(</span><span>Scalable</span> <span>Vector</span> <span>Graphics</span><span>)</span> <span>és</span> <span>un llenguatge</span> <span>basat</span> <span>en XML</span> <span>per a la</span> <span>creació</span> <span>de gràfics</span><span>.</span></span></p> + +<p><span id="result_box" lang="ca"><span>Es</span> <span>pot</span> <span>utilitzar</span> <span>per a imatges</span> <span>estàtiques,</span> <span>i</span> <span>també</span> <span>per a animacions</span> <span>i interfícies</span> <span>d'usuari.</span></span></p> + +<p>Igual que altres llenguatges basats en XML, SVG suporta fulles d'estil CSS perquè pugui separar l'estil d'un gràfic del seu contingut.</p> + +<p>A més, les fulles d'estil que s'utilitzen amb altres llenguatges de marcat de documents poden especificar l'adreça URL d'un gràfic SVG on es requereix una imatge. Per exemple, una fulla d'estil que s'utilitza amb un document HTML pot especificar l'adreça URL d'un gràfic SVG en el valor d'una propietat <code>background</code>.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em; width: 100%;"> + <caption>Més detalls</caption> + <tbody> + <tr> + <td> + <p>En el moment d'escriure (mitjans 2011), la majoria dels navegadors moderns tenen suport bàsic per a SVG, incloent Internet Explorer 9 o superior. Algunes de les característiques de SVG són compatibles parcialment o no en alguns navegadors. Consulteu les <a href="http://caniuse.com/#search=SVG">taulae SVG en caniuse.com</a> per a una visió general de suport per SVG, o les taules de compatibilitat <a href="/en-US/docs/SVG/Element">referència de l'element SVG</a> per al suport de determinats elements.</p> + + <p>Podeu afegir suport SVG a altres versions mitjançant la instal·lació d'un plug-in, com el proporcionat per <a href="http://www.adobe.com/svg/viewer/install/main.html">Adobe</a>.</p> + + <p>Per obtenir més informació sobre SVG en Mozilla, consulteu la pàgina principal de <a href="/en-US/docs/SVG">SVG</a> al wiki.</p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Action:_An_SVG_demonstration" name="Action:_An_SVG_demonstration"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Una demostració</span> <span>SVG</span></span></h3> + +<p><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document</span> <span>SVG</span> <span>com</span> <span>un arxiu de</span> <span>text</span> <span>pla,</span> <code><span>doc8.svg</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> + +<?xml-stylesheet type="text/css" href="style8.css"?> + +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> + +<svg width="600px" height="600px" viewBox="-300 -300 600 600" + xmlns="http://www.w3.org/2000/svg" version="1.1" + xmlns:xlink="http://www.w3.org/1999/xlink"> + +<title>SVG demonstration</title> +<desc>Mozilla CSS Getting Started - SVG demonstration</desc> + +<defs> + <g id="segment" class="segment"> + <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/> + <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/> + </g> + <g id="quadrant"> + <use xlink:href="#segment"/> + <use xlink:href="#segment" transform="rotate(18)"/> + <use xlink:href="#segment" transform="rotate(36)"/> + <use xlink:href="#segment" transform="rotate(54)"/> + <use xlink:href="#segment" transform="rotate(72)"/> + </g> + <g id="petals"> + <use xlink:href="#quadrant"/> + <use xlink:href="#quadrant" transform="rotate(90)"/> + <use xlink:href="#quadrant" transform="rotate(180)"/> + <use xlink:href="#quadrant" transform="rotate(270)"/> + </g> + <radialGradient id="fade" cx="0" cy="0" r="200" + gradientUnits="userSpaceOnUse"> + <stop id="fade-stop-1" offset="33%"/> + <stop id="fade-stop-2" offset="95%"/> + </radialGradient> + </defs> + +<text id="heading" x="-280" y="-270"> + SVG demonstration</text> +<text id="caption" x="-280" y="-250"> + Move your mouse pointer over the flower.</text> + +<g id="flower"> + <circle id="overlay" cx="0" cy="0" r="200" + stroke="none" fill="url(#fade)"/> + <use id="outer-petals" xlink:href="#petals"/> + <use id="inner-petals" xlink:href="#petals" + transform="rotate(9) scale(0.33)"/> + </g> + +</svg> +</pre> + +<p>Feu una nou arxiu CSS, <code>style8.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí</span><span>,</span> <span>assegurant-se que</span> us <span>desplaceu</span> <span>per obtenir</span> <span>tota ella</span><span>;</span></span></p> + +<pre class="brush: css">/*** SVG demonstration ***/ + +/* page */ +svg { + background-color: beige; + } + +#heading { + font-size: 24px; + font-weight: bold; + } + +#caption { + font-size: 12px; + } + +/* flower */ +#flower:hover { + cursor: crosshair; + } + +/* gradient */ +#fade-stop-1 { + stop-color: blue; + } + +#fade-stop-2 { + stop-color: white; + } + +/* outer petals */ +#outer-petals { + opacity: .75; + } + +#outer-petals .segment-fill { + fill: azure; + stroke: lightsteelblue; + stroke-width: 1; + } + +#outer-petals .segment-edge { + fill: none; + stroke: deepskyblue; + stroke-width: 3; + } + +#outer-petals .segment:hover > .segment-fill { + fill: plum; + stroke: none; + } + +#outer-petals .segment:hover > .segment-edge { + stroke: slateblue; + } + +/* inner petals */ +#inner-petals .segment-fill { + fill: yellow; + stroke: yellowgreen; + stroke-width: 1; + } + +#inner-petals .segment-edge { + fill: none; + stroke: yellowgreen; + stroke-width: 9; + } + +#inner-petals .segment:hover > .segment-fill { + fill: darkseagreen; + stroke: none; + } + +#inner-petals .segment:hover > .segment-edge { + stroke: green; + } +</pre> + +<p>Obriu el document en el navegador habilitat per SVG. Moure el punter del ratolí sobre el gràfic.</p> + +<p>Aquest wiki no suporta SVG en les pàgines, de manera que no es pot mostrar la demostració aquí. El gràfic es veu així:</p> + +<table style="border: 2px outset #3366bb;"> + <tbody> + <tr> + <td><img alt="SVG demonstration" src="https://mdn.mozillademos.org/files/719/SVG-flower.png"></td> + </tr> + </tbody> +</table> + +<p>Notes sobre aquesta demostració:</p> + +<ul> + <li><span id="result_box" lang="ca"><span>El document</span> <span>SVG</span> <span>vincula</span> la<span> fulla</span> <span>d'estil de</span> <span>la forma</span> <span>habitual.</span></span></li> + <li>SVG té les seves pròpies propietats i valors CSS. Algunes d'elles són similars a les propietats CSS per a HTML.</li> +</ul> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> + <caption>Repte</caption> + <tbody> + <tr> + <td>Canvieu la fulla d'estil perquè els pètals interns es tornin tots de color rosa quan el punter del ratolí està sobre qualsevol d'ells, sense canviar la forma en què els pètals externs funcionen.</td> + </tr> + </tbody> +</table> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#SVG_and_CSS">Veure la solució per el repte.</a></p> + +<h4 id="What_next.3F" name="What_next.3F">I ara què?</h4> + +<p>En aquesta demostració, el vostre navegador habilitat per SVG ja sap com mostrar els elements SVG. La fulla d'estil només modifica la visualització de certes maneres. Això també és cert per als documents HTML i XUL. Però es pot utilitzar CSS per a documents XML d'ús general, on no hi ha un camí predefinit per mostrar els elements. La pàgina següent mostra això: <a href="/en-US/docs/Web/Guide/CSS/Getting_started/XML_data">dades XML</a></p> diff --git a/files/ca/web/guide/css/inici_en_css/taules/index.html b/files/ca/web/guide/css/inici_en_css/taules/index.html new file mode 100644 index 0000000000..c12e76f397 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/taules/index.html @@ -0,0 +1,474 @@ +--- +title: Taules +slug: Web/Guide/CSS/Inici_en_CSS/Taules +tags: + - CSS + - CSS Tables + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<p>{{CSSTutorialTOC}}{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Disseny")}}</p> + +<p>Aquesta és la 13th secció del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; descriu selectors més avançats, i algunes formes específiques en el disseny de taules. Es crea un nou document d'exemple que conté una taula, i un full d'estil per a això.</p> + +<h2 class="clearLeft" id="Informació_Taules">Informació: Taules</h2> + +<p>Una taula és una disposició de la informació en una reixeta rectangular. Algunes taules poden ser complexes, i per a taules complexes, diferents navegadors poden donar resultats diferents.</p> + +<p>En dissenyar el vostre document, utilitzeu una taula per expressar les <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">relacions</a> entre els elements d'informació. Llavors no importa si els diferents navegadors presenten la informació de manera lleugerament diferent, ja que el significat segueix sent clar.</p> + +<p>No utilitzeu taules en formes inusuals per produir determinats dissenys visuals. Les tècniques de la pàgina anterior d'aquest tutorial (<strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="en-US/docs/Web/Guide/CSS/Getting_Started/Layout">Disseny</a></strong>) són millors per a aquest propòsit.</p> + +<h3 id="Estructura_de_la_taula">E<span id="result_box" lang="ca"><span>structura de la taula</span></span></h3> + +<p>En una taula, cada peça d'informació es mostra en una <em>cel·la</em>.</p> + +<p>Les cel·les en una línia de la pàgina constitueix una <em>fila</em>.</p> + +<p>En algunes taules, les files poden ser agrupades. Un grup especial de files en l'inici de la taula és la <em>capçalera (header)</em>. Un grup especial de files al final de la taula és el <em>peu de pàgina (footer)</em>. Les principals files de la taula són el <em>cos (body)</em>, i que també podrien estar en grups.</p> + +<p>Les cel·les en una línia de la pàgina conformen una columna, però les columnes tenen un ús limitat en la CSS de les taules.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>La taula de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors#relselectors">Selectors basats en relacion</a> en la pàgina <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">Selectors</a> té deu cel·les en cinc files.</p> + +<p>La primera fila és la capçalera. Les altres quatre files són el cos. No hi ha peu de pàgina.</p> + +<p>Té dues columnes.</p> +</div> + +<p>Aquest tutorial només cobreix taules simples, on els resultats són bastant predictibles. En una taula simple, cada cel·la ocupa només una fila i columna. Es pot utilitzar CSS per a taules complexes en les cel·les que s'estenen (s'estenen a través) més d'una fila o columna, però les taules com aquestes estan més enllà de l'abast d'aquest tutorial bàsic.</p> + +<h3 id="Vores">Vores</h3> + +<p>Les cel·les no tenen marges.</p> + +<p>Les cel·les tenen vores i farciment. Per defecte, les vores estan separades pel valor de la propietat {{cssxref("border-spacing")}} de la taula. També podeu eliminar completament l'espai mitjançant l'establiment de la propietat {{cssxref ("border-collapse")}} de la taula a <code>col·lapsar (collapse)</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquí hi ha tres taules.</p> + +<p>La taula de l'esquerra té 0,5 em espaiat de vores. La taula del centre té espaiat de vores zero. La taula de la dreta ha col·lapsat les vores:</p> + +<pre class="hidden brush: html"><table style="background-color:white; border:2px outset #36b; padding:1em"> + <tbody> + <tr> + <td style="padding-right:2em;"> + <table style="border-spacing:.5em"> + <tbody> + <tr> + <td style="border:1px solid #c00;text-align:center;">Clubs</td> + <td style="border:1px solid #c00;text-align:center;">Hearts</td> + </tr> + <tr> + <td style="border:1px solid #c00;text-align:center;">Diamonds</td> + <td style="border:1px solid #c00;text-align:center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right:2em;"> + <table style="border-spacing:0px"> + <tbody> + <tr> + <td style="border:1px solid #c00;text-align:center;">Clubs</td> + <td style="border:1px solid #c00;text-align:center;">Hearts</td> + </tr> + <tr> + <td style="border:1px solid #c00;text-align:center;">Diamonds</td> + <td style="border:1px solid #c00;text-align:center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right:6em;"> + <table style="border-collapse:collapse"> + <tbody> + <tr> + <td style="border:1px solid #c00;text-align:center;">Clubs</td> + <td style="border:1px solid #c00;text-align:center;">Hearts</td> + </tr> + <tr> + <td style="border:1px solid #c00;text-align:center;">Diamonds</td> + <td style="border:1px solid #c00;text-align:center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div></pre> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> + <tbody> + <tr> + </tr> + </tbody> +</table> + +<p>{{embedLiveSample('Borders', 600)}}</p> +</div> + +<h3 id="Llegendes">Llegendes</h3> + +<p>Un element {{HTMLElement("caption")}} és una etiqueta que s'aplica a tota la taula. Per defecte, es mostra a la part superior de la taula.</p> + +<p>Per moure'l a la part inferior, establiu la seva propietat {{cssxref("caption-side")}} a baix. La propietat s'hereta, de manera que, alternativament, es pot establir sobre la taula o un altre element antecessor.</p> + +<p>Per l'estil del text de la Llegenda, utilitzeu qualsevol de les propietats usuals de text.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>Aquesta taula</span> <span>té</span> <span>una llegenda</span> <span>a la part inferior</span></span>.</p> + +<pre class="brush: css">#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; +} +</pre> + +<pre class="hidden brush: html"><table style="background-color:white; border:2px outset #36b; padding:1em 6em 1em 1em"> + <tbody> + <tr> + <td> + <table> + <caption style="caption-side: bottom;font-style: italic;text-align: right;">Suits</caption> + <tbody> + <tr> + <td> + <table style="border-collapse:collapse"> + <tbody> + <tr> + <td style="border:1px solid gray;text-align:center;">Clubs</td> + <td style="border:1px solid gray;text-align:center;">Hearts</td> + </tr> + <tr> + <td style="border:1px solid gray;text-align:center;">Diamonds</td> + <td style="border:1px solid gray;text-align:center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table></pre> + +<p>{{embedLiveSample('Captions', 300)}}</p> +</div> + +<h3 id="Cel·les_buides"><span id="result_box" lang="ca"><span>Cel·les</span> <span>buides</span></span></h3> + +<p>Es poden mostrar cel·les buides (és a dir, les seves vores i fons) especificant {{cssxref("empty-cells")}}: show; per a l'element de la taula.</p> + +<p>Es poden amagar mitjançant l'especificació <code>empty-cells: hide</code>;. Llavors, si l'element pare d'una cel·la té un fons, es mostra a través de la cel.la buida.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquestes taules tenen un fons de color verd pàl·lid. Les seves cel·les tenen un fons gris clar i unes vores gris fosc.</p> + +<p>A la taula de l'esquerra, es mostra la cel·la buida. A la dreta, està oculta:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #ddffdd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #ddffdd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Hearts</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Diamonds</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Spades</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Detalls</div> + +<p>Per obtenir informació detallada sobre les taules, vegeu <a href="http://www.w3.org/TR/CSS21/tables.html">Taules</a> en l'especificació CSS.</p> + +<p>La informació no va més enllà d'aquest tutorial, però no cobreix les diferències entre els navegadors que poden afectar a taules complexes.</p> +</div> + +<h2 id="Acció_Estil_d'una_taula"><span id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Estil</span> <span>d'una</span> <span>taula</span></span></h2> + +<ol> + <li>Feu un nou document HTML, <code>doc3.html</code>. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Sample document 3</title> + <link rel="stylesheet" href="style3.css"> + </head> + <body> + <table id="demo-table"> + <caption>Oceans</caption> + <thead> + <tr> + <th></th> + <th>Area</th> + <th>Mean depth</th> + </tr> + <tr> + <th></th> + <th>million km<sup>2</sup></th> + <th>m</th> + </tr> + </thead> + <tbody> + <tr> + <th>Arctic</th> + <td>13,000</td> + <td>1,200</td> + </tr> + <tr> + <th>Atlantic</th> + <td>87,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Pacific</th> + <td>180,000</td> + <td>4,000</td> + </tr> + <tr> + <th>Indian</th> + <td>75,000</td> + <td>3,900</td> + </tr> + <tr> + <th>Southern</th> + <td>20,000</td> + <td>4,500</td> + </tr> + </tbody> + <tfoot> + <tr> + <th>Total</th> + <td>361,000</td> + <td></td> + </tr> + <tr> + <th>Mean</th> + <td>72,000</td> + <td>3,800</td> + </tr> + </tfoot> + </table> + </body> +</html> +</pre> + </li> + <li>Feu un nova fulla d'estil, <code>style3.css</code>. Copieu i enganxeu el contingut d'aquí, assegurant-se que es desplaça per obtenir tota ella; + <pre class="brush: css">/*** Style for doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; +} + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; +} + + +/* basic shared rules */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; +} + +#demo-table th { + font-weight: bold; + padding-left: .5em; +} + + +/* header */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; +} + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; +} + +/* fix size of superscript */ +#demo-table sup { + font-size: 75%; +} + +/* body */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; +} + +#demo-table tbody th:after { + content: ":"; +} + + +/* footer */ +#demo-table tfoot { + font-weight: bold; +} + +#demo-table tfoot th { + color: blue; +} + +#demo-table tfoot th:after { + content: ":"; +} + +#demo-table > tfoot td { + background-color: #cee; +} + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; +} +</pre> + </li> + <li>Obriu el document en el navegador. Ha de tenir un aspecte molt similar a aquest:<br> + {{EmbedLiveSample("Action_Styling_a_table", 400, 380)}}</li> + <li>Compareu les regles de la fulla d'estil amb la taula que es mostra, per assegurar-se que compreneu l'efecte de cada regla. Si trobeu una regla que no esteu segur sobre ella, comentar-la i refresqueu el navegador per veure què passa. Aquí hi ha algunes notes sobre aquesta taula: + <ul> + <li>La llegenda es troba fora de la vora de la taula.</li> + <li>Si teniu una mida de punt mínim establert en les Opcions, podria afectar el superíndex en km<sup>2</sup>.</li> + <li>Hi ha tres cel·les buides. Dos d'elles permeten mostrar el fons de la taula a través. El tercer té un fons i una vora superior.</li> + <li>Els dos punts son afegits per la fulla d'estil.</li> + </ul> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Repte</div> + +<p>Modifiqueu la fulla d'estils per fer que la taula tingui aquest aspecte:</p> + +<table style="background-color: white; border: 2px outset #3366bb; padding: 1em 6em 1em 1em;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="background-color: #eeffee; border-collapse: collapse; font: 100% sans-serif; padding-right: .5em; text-align: right;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Area</th> + <th style="padding-left: .5em; padding-right: .5em;">Mean depth</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">million km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1,200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantic:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacific:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indian:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3,900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Southern:</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20,000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4,500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Mean:</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72,000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3,800</td> + </tr> + </tbody> + </table> + </div> + + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Oceans</p> + </div> + </td> + </tr> + </tbody> +</table> +</div> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Tables">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Aquesta és l'última pàgina d'aquest tutorial que se centra en les propietats i els valors CSS. Per a un resum complet de les propietats i valors, vegeu <a href="http://www.w3.org/TR/CSS21/propidx.html">Taula de propietats completa </a>en l'especificació CSS</p> + +<p>En la següent pàgina <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Media">es veu de nou</a> el propòsit i l'estructura de les fulles d'estil CSS.</p> diff --git a/files/ca/web/guide/gràfics/index.html b/files/ca/web/guide/gràfics/index.html new file mode 100644 index 0000000000..a65c99ec66 --- /dev/null +++ b/files/ca/web/guide/gràfics/index.html @@ -0,0 +1,49 @@ +--- +title: Gràfics en la Web +slug: Web/Guide/Gràfics +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - Web + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +<p>Els llocs web i les aplicacions sovint necessiten presentar gràfics. Les imatges estàtiques poden visualitzar-se fàcilment usant l'element {{HTMLElement("img")}} o configurant el fons dels elements HTML utilitzant la propietat {{cssxref("background-image")}}. També podeu construir gràfics sobre la marxa o manipular imatges després de fetes. Aquests articles proporcionen informació sobre com podeu aconseguir-ho.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Gràfics_2D">Gràfics 2D</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Canvas">Canvas</a></dt> + <dd>L'element {{HTMLElement("canvas")}} <span id="result_box" lang="ca"><span>proporciona APIs per dibuixar gràfics 2D utilitzant JavaScript.</span></span></dd> + <dt><a href="/en-US/docs/Web/SVG">SVG</a></dt> + <dd>Els Gràfics Vectorials Escalables (SVG) permeten utilitzar línies, corbes i altres formes geomètriques per representar gràfics. Amb vectors, podeu crear imatges que s'escalen netament a qualsevol grandària.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">Veure Tot...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Gràfics_3D">Gràfics 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Web/WebGL">WebGL</a></dt> + <dd>Una guia per començar amb WebGL, l'API de gràfics 3D per a la web. Aquesta tecnologia permet utilitzar OpenGL ES estàndard en contingut web.</dd> +</dl> + +<h2 id="Vídeo">Vídeo</h2> + +<dl> + <dt><a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Ús d'àudio i vídeo HTML5 </a></dt> + <dd>Incrustar vídeo i/o àudio en una pàgina web i controlar la seva reproducció.</dd> + <dt><a href="/en-US/docs/WebRTC">WebRTC</a></dt> + <dd>El RTC en WebRTC significa Comunicacions en Temps Real, tecnologia que permet la transmissió d'àudio/vídeo i l'intercanvi de dades entre clients del navegador (parells).</dd> +</dl> +</div> +</div> diff --git a/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html b/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html new file mode 100644 index 0000000000..6c683a8156 --- /dev/null +++ b/files/ca/web/guide/html/_consells_per_crear_pàgines_html_de_càrrega_ràpida/index.html @@ -0,0 +1,186 @@ +--- +title: Consells per crear pàgines HTML de càrrega ràpida +slug: Web/Guide/HTML/_Consells_per_crear_pàgines_HTML_de_càrrega_ràpida +tags: + - Advanced + - Guide + - HTML + - NeedsUpdate + - Performance + - Web +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p><span id="result_box" lang="ca"><span>Aquests consells</span> <span>es</span> <span>basen</span> <span>en el coneixement</span> <span>i</span> <span>l'experimentació</span> <span>comuna.</span></span></p> + +<p>Una pàgina web optimitzada no només preveu un lloc més sensible per als seus visitants, sinó que també redueix la càrrega dels servidors web i la connexió a Internet. Això pot ser crucial per als llocs d'alt volum o dels llocs que tenen un pic en el tràfic a causa de circumstàncies inusuals, com ara notícies d'última hora.</p> + +<p>Optimitzar el rendiment de càrrega de pàgina no és només per a contingut que serà vist pels visitants de dispositius telefònics o mòbils de banda estreta. És igual d'important que el contingut en banda ampla i pot conduir a millores espectaculars fins i tot per als seus visitants amb les connexions més ràpides.</p> + +<h2 id="Consells">Consells</h2> + +<h3 id="Reduir_el_pes_de_la_pàgina"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>el pes</span> <span>de la pàgina</span></span></h3> + +<p>El pes de la pàgina és, de bon tros, el factor més important en el rendiment de càrrega de pàgines.</p> + +<p>La reducció del pes de la pàgina a través de l'eliminació d'espais en blanc i comentaris innecessaris, comunament coneguda com la reducció al mínim, i movent el script en línia i CSS en arxius externs, pot millorar el rendiment de descàrrega amb una necessitat mínima d'altres canvis en l'estructura de la pàgina.</p> + +<p>Eines com ara <a class="external" href="http://www.html-tidy.org">HTML Tidy</a> pot treure automàticament espais en blanc i les línies en blanc addicionals del codi HTML vàlid. Altres eines poden "comprimir" JavaScript canviant el format o per ofuscació de la font i la substitució dels identificadors llargs amb versions més curtes.</p> + +<h3 id="Reduir_al_mínim_el_nombre_d'arxius"><span class="short_text" id="result_box" lang="ca"><span>Reduir al</span> <span>mínim el</span> <span>nombre d'arxius</span></span></h3> + +<p>La reducció del nombre d'arxius que es fa referència en una pàgina web redueix el nombre de connexions <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> necessaries per descarregar una pàgina.</p> + +<p>Depenent de la configuració de la memòria cau d'un navegador, es pot enviar una petició <code>If-Modified-Since</code> al servidor web per a cada arxiu CSS, JavaScript o imatge, preguntant si l'arxiu ha estat modificat des de l'última vegada que es va descarregar.</p> + +<p>En reduir el nombre d'arxius que es fa referència en una pàgina web, es redueix el temps necessari perquè aquestes peticions siguin enviades, i per les respostes que es rebin.</p> + +<p>Si utilitzeu moltes imatges de fons en el vostre CSS, es pot reduir la quantitat de cerques HTTP necessaries mitjançant la combinació de les imatges en una, conegut com un sprite d'imatge. A continuació, només s'aplica la mateixa imatge cada vegada que ho necessiteu per a un fons, i ajustant les coordenades x/y de manera apropiada. Aquesta tècnica funciona millor amb els elements que tenen dimensions limitades, i no funcionarà per a cada ús d'una imatge de fons. No obstant això, el menor nombre de peticions HTTP i l'emmagatzematge en memòria cau d'una sola imatge pot ajudar a reduir el temps pageload.</p> + +<p>L'excés de temps dedicat a la consulta de l'última modificació dels arxius de referència pot retardar la visualització inicial d'una pàgina web, ja que el navegador ha de comprovar el temps de modificació per a cada arxiu CSS o JavaScript, abans de processar la pàgina.</p> + +<h3 id="Reduir_la_recerca_de_dominis"><span class="short_text" id="result_box" lang="ca"><span>Reduir</span> <span>la recerca</span> <span>de dominis</span></span></h3> + +<p>Atès que cada domini per separat porta temps en la recerca de DNS, el temps de càrrega de la pàgina creixerà juntament amb el nombre de dominis independents que apareguin en link(s) CSS i src(es) JavaScript i imatge.</p> + +<p>Això no sempre és pràctic; no obstant això, sempre s'ha de tenir en compte d'utilitzar només el nombre mínim necessari dels diferents dominis en les vostres pàgines.</p> + +<h3 id="Contingut_reutilitzat_en_memòria_cau"><span class="short_text" id="result_box" lang="ca"><span>Contingut</span> <span>reutilitzat</span> <span>en memòria cau</span></span></h3> + +<p>Assegureu-vos que qualsevol contingut que es pugui emmagatzemar en memòria cau, s'emmagatzemi en memòria cau, i amb els temps de caducitat apropiades.</p> + +<p>En concret, presteu atenció a la capçalera <code>Last-Modified</code>. Permet d'una manera eficient l'emmagatzematge en memòria cau de la pàgina; per mitjà d'aquesta capçalera, la informació es transmet a l'agent d'usuari sobre l'arxiu que vol carregar, com quan es va modificar per última vegada. La majoria dels servidors web afegeixen automàticament la capçalera <code>Last-Modified</code> a pàgines estàtiques (per exemple <code>.html, .css</code>), d'acord amb la data d'última modificació emmagatzemada en el sistema d'arxius. Amb les pàgines dinàmiques (per exemple, <code>.php, .aspx</code>), això, per descomptat, no es pot fer, i la capçalera no s'envia.</p> + +<p>Així, en particular, per a les pàgines que es generen de forma dinàmica, una mica de recerca sobre aquest tema és beneficiós. Pot ser una mica complicat, però s'estalviarà molt en les sol·licituds de pàgina en les pàgines que normalment no serien emmagatzemades en memòria cau.</p> + +<p>Més informació:</p> + +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> + <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> +</ol> + +<h3 id="Ordenar_de_manera_òptima_els_components_de_la_pàgina">Ordenar de manera òptima els components de la pàgina</h3> + +<p>Descarregar el contingut de la pàgina en primer lloc, juntament amb qualsevol CSS o JavaScript que pugui ser necessàri per a la seva visualització inicial, de manera que l'usuari obté una resposta aparent més ràpida durant la càrrega de les pàgines. Aquest contingut és normalment de text, i per tant pot beneficiar-se de la compressió del text en trànsit, proporcionant així una resposta fins i tot més ràpida per a l'usuari.</p> + +<p>Cap característica dinàmica que requereixi la pàgina per completar la càrrega abans de ser utilitzada, ha de ser desactivada inicialment, i només es permet després que la pàgina s'hagi carregat. Això farà que el JavaScript es carregui després del contingut de la pàgina, el que millorarà l'aspecte general de la càrrega de la pàgina.</p> + +<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Reduir el nombre de scripts en línia</h3> + +<p>Els scripts en línia poden ser costosos per a la càrrega de la pàgina, ja que l'analitzador ha d'assumir que un script en línia podria modificar l'estructura de la pàgina, mentre que l'anàlisi està en curs. Reduir l'ús de scripts en línia en general, i reduir l'ús de <code>document.write()</code> per a continguts de sortida en particular, pot millorar la càrrega total de la pàgina. Utilitzeu mètodes moderns d'<a href="https://developer.mozilla.org/en-US/docs/AJAX">AJAX</a> per manipular el contingut de la pàgina per als navegadors moderns, en lloc dels antics enfocaments basats en <code>document.write()</code>.</p> + +<h3 id="Utilitzar_CSS_modern_i_marcat_vàlid"><span class="short_text" id="result_box" lang="ca"><span>Utilitzar</span> <span>CSS</span> <span>modern</span> <span>i</span> <span>marcat</span> <span>vàlid</span></span></h3> + +<p>L'ús de CSS modern redueix la quantitat de marcat, pot reduir la necessitat d'imatges (spacer), en termes de disseny, i molt sovint pot substituir les imatges de text estilitzat - el "cost" és molt més que l'equivalent de text-i-CSS.</p> + +<p>L'ùs del marcat vàlid té altres avantatges. En primer lloc, els navegadors no tenen necessitat de dur a terme la correcció d'errors a l'analitzar el codi HTML (això és, a part de la qüestió filosòfica, de si s'ha de permetre la variació de format a l'entrada de l'usuari, i després mitjançant programació "corregir" o normalitzar aquest o si, en canvi, fer complir un estricte format d'entrada, no tolerància).</p> + +<p>D'altra banda, el marcat vàlid permet el lliure ús d'altres eines les quals poden pre-processar les vostres pàgines web. Per exemple, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> pot eliminar espais en blanc i les etiquetes opcionals de tancament; però, es negarà a executar una pàgina amb greus errors de marcat.</p> + +<h3 id="Part_del_teu_contingut">Part del teu contingut</h3> + +<p>Les taules de dissenys són un mètode llegat que no ha de ser utilitzat més. Dissenys que utilitzen blocs {{HTMLElement ("div")}}, i en un futur pròxim, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">CSS3 Multi-column Layout</a> o <a href="/en-US/docs/Using_flexbox" title="en-US/docs/Using_flexbox">CSS3 Flexible Box Layout</a>, s'han d'utilitzar al seu lloc.</p> + +<p>Les taules encara es consideren marcat vàlid, però han de ser utilitzades per a la visualització de dades tabulars. Per ajudar al navegador a processar la vostre pàgina més ràpidament, heu d'evitar niar les vostres taules.</p> + +<p>En lloc de niar profundament les taules com en:</p> + +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>utilitzar</span> <span>taules no</span> <span>niats</span> <span>o</span> <span>divs</span> <span>com</span> <span>a</span></span>:</p> + +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> + +<p>Veure: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> i <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p> + +<h3 id="Minimitzar_i_comprimir_recursos_SVG">Minimitzar i comprimir recursos SVG</h3> + +<p>SVG produït per la majoria de les aplicacions de dibuix, sovint conté metadades innecessaries que es poden treure. Configureu els servidors per aplicar la compressió gzip per als recursos SVG.</p> + +<h3 id="Especificar_les_mides_de_les_imatges_i_taules"><span class="short_text" id="result_box" lang="ca"><span>Especificar</span> <span>les mides de les</span> <span>imatges</span> <span>i</span> <span>taules</span></span></h3> + +<p>Si el navegador pot determinar immediatament l'altura i/o amplada de les vostres imatges i taules, serà capaç de mostrar una pàgina web sense haver de reorganitzar el contingut. Això no només accelera la visualització de la pàgina, sinó que evita els molestos canvis en el disseny d'una pàgina quan la pàgina completa la càrrega. Per aquesta raó, <code>height</code> i <code>width</code> s'han d'especificar per a les imatges, sempre que sigui possible.</p> + +<p><span id="result_box" lang="ca"><span>Les</span> <span>taules</span> <span>han d'utilitzar la combinació CSS</span> <span>selector:propietat</span><span>:</span></span></p> + +<pre> table-layout: fixed; +</pre> + +<p>i ha de precisar les amplades de les columnes utilitzant les etiquetes HTML <code>COL</code> i <code>COLGROUP</code>.</p> + +<h3 id="Trieu_els_vostres_requisits_d'agent_d'usuari_sàviament">Trieu els vostres requisits d'agent d'usuari sàviament</h3> + +<p>Per aconseguir les millores més importants en el disseny de la pàgina, assegureu-vos que els requisits raonables d'agent d'usuari s'especifiquin en els projectes. No requereix que el seu contingut aparegui un píxel perfecte en tots els navegadors, especialment no en els navegadors de versions més antigues.</p> + +<p>L'ideal és que, els requisits mínims bàsics s'han de basar en la consideració dels navegadors moderns que suporten les normes pertinents. Això pot incloure les versions recents de Firefox, Internet Explorer, Google Chrome, Opera i Safari.</p> + +<p>Recordeu, però, que molts dels consells que apareixen en aquest article són tècniques de sentit comú que s'apliquen a qualsevol agent d'usuari, i que es poden aplicar a qualsevol pàgina web, independentment dels requisits de compatibilitat amb els navegadors.</p> + +<h2 id="Example_page_structure" name="Example_page_structure">Exemple de l'estructura d'una pàgina</h2> + +<p>· <code>HTML</code></p> + +<dl> + <dd>· <code>HEAD</code></dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>LINK </code>...<br> + arxius CSS necessaris per l'aparença de la pàgina. Minimitzar el nombre d'arxius per el rendiment, mentre es manté CSS no relacionat en arxius separats per al manteniment.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + arxius JavaScript per a funcions requerides durant la càrrega de la pàgina, però no qualsevol DHTML que només es pot executar després de càrrega de la pàgina.</dd> + <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd> + </dl> + </dd> +</dl> + +<dl> + <dd>· <code>BODY</code></dd> + <dd>· Contingut de la pàgina, visible per a l'usuari, en trossos petits (taules/divs) que es poden visualitzar sense esperar que la pàgina completi la seva descàrrega.</dd> +</dl> + +<dl> + <dd> + <dl> + <dd>· <code>SCRIPT </code>...<br> + Qualsevol script que s'utilitzarà per realitzar DHTML. El script DHTML normalment es pot executar després que la pàgina s'hagi carregat completament i tots els objectes necessaris hagin estat inicialitzats. No hi ha necessitat de carregar aquests scripts abans que el contingut de la pàgina. Això només ralenteix l'aparença inicial de la càrrega de la pàgina.</dd> + <dd>Minimitzar el nombre d'arxius per el rendiment, mentre es manté JavaScript no relacionat en arxius separats per al manteniment.</dd> + <dd>Si s'utilitzen les imatges per a efectes rollover, s'ha de carregar prèviament aquí després que el contingut de la pàgina s'hagi descarregat.</dd> + </dl> + </dd> +</dl> + +<h2 id="Utilitzar_asyn_i_defer_si_és_possible">Utilitzar asyn i defer, si és possible</h2> + +<p>Fer que els scripts de JavaScript siguin compatibles tant amb <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> i <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> i utilitzar <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que sigui possible, especialment si té diverses etiquetes de script. Amb això, la pàgina pot aturar el processament, mentre que encara s'estigui carregant JavaScript. En cas contrari, el navegador no renderizará res que estigui darrere de les etiquetes de script que no tinguin aquests atributs.</p> + +<p>Nota: Tot i que aquests atributs ens ajuden molt per a la primera vegada que es carrega una pàgina, s'han d'usar, però no dependre de que funcionarà en tots els navegadors. Si seguiu totes les pautes per fer un bon codi JavaScript, no hi ha necessitat de canviar el codi.</p> + +<h2 id="Enllaços_relacionats"><span class="short_text" id="result_box" lang="ca"><span>Enllaços</span> <span>relacionats</span></span></h2> + +<ul> + <li>Llibre: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> + <li><span id="result_box" lang="ca"><span>Les</span> <span>excel·lents i</span> <span>molt</span> <span>completes</span></span> <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> + <li><span id="result_box" lang="ca"><span>Eines</span> <span>per a l'anàlisi</span> <span>i</span> <span>l'optimització</span> <span>del rendiment</span></span> : <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> + <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> +</ul> diff --git a/files/ca/web/guide/html/html5/index.html b/files/ca/web/guide/html/html5/index.html new file mode 100644 index 0000000000..6ed392c033 --- /dev/null +++ b/files/ca/web/guide/html/html5/index.html @@ -0,0 +1,171 @@ +--- +title: HTML5 +slug: Web/Guide/HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - Overview + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +<p><span class="seoSummary"><strong>HTML5</strong></span> <span id="result_box" lang="ca"><span>és l'última</span> <span>evolució</span> <span>de la norma que</span> <span>defineix</span> <a href="https://developer.mozilla.org/en-US/docs/HTML">HTML</a><span>.</span> <span>El terme</span> <span>representa</span> <span>dos conceptes</span> <span>diferents</span><span>:</span></span></p> + +<ul> + <li>És una nova versió del llenguatge HTML, amb nous elements, atributs i comportaments<span class="seoSummary">,</span></li> + <li>i un ampli conjunt de tecnologies que permet les més diverses i potents aplicacions i llocs web. Aquest conjunt es diu de vegades <em>HTML5 i amics</em> i, sovint escurçat a simplement <em>HTML5</em>.</li> +</ul> + +<p>Dissenyat per a ser utilitzable per tots els desenvolupadors de la Web Oberta, aquesta pàgina de referència enllaça a nombrosos recursos sobre tecnologies HTML5, que es classifiquen en diversos grups segons la seva funció.</p> + +<ul> + <li><em>Semàntica: </em>us permet descriure amb major precisió quin és el seu contingut.</li> + <li><em>Connectivitat</em>: us permet comunicar-vos amb el servidor de formes noves i innovadores.</li> + <li><em>Fora de línia i emmagatzematge</em>: permetre que les pàgines web emmagatzemin les dades localment en el client i funcionin de forma més eficient.</li> + <li><em>Multimèdia</em>: fer ciutadans de primera classe d'àudio i vídeo a la Web Oberta.</li> + <li><em>Gràfics i efectes 2D/3D</em>: permetre una gamma molt més àmplia d'opcions de presentació.</li> + <li><em>Rendiment i integració</em>: proporcionar una major optimització de la velocitat i un millor ús del maquinari de l'equip.</li> + <li><em>Accés al dispositiu</em>: permetre l'ús de diversos dispositius d'entrada i de sortida..</li> + <li><em>Estil</em>: deixar que els autors escriuen temes més sofisticats.</li> +</ul> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 id="SemàntIcA" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SemàntIcA</h2> + +<dl> + <dt><a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Seccions i esquemes en HTML5</a></dt> + <dd>Una ullada als nous elements d'esquema i secció en HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}} i {{HTMLElement("aside")}}.</dd> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Ús d'àudio i vídeo en HTML5</a></dt> + <dd>Els elements {{HTMLElement ("àudio")}} i {{HTMLElement ("vídeo")}} incrustats, permeten la manipulació dels nous continguts multimèdia.</dd> + <dt><a href="/en-US/docs/HTML/Forms_in_HTML" title="Forms in HTML5">Formularis en HTML5</a></dt> + <dd>Una mirada a les millores en els formularis web en HTML5: l'API de validació restringida, diversos atributs nous, nous valors per l'atribut {{htmlattrxref("type", "input")}} de l'element {{HTMLElement("input")}} i l'element nou {{HTMLElement("output")}}.</dd> + <dt><span id="result_box" lang="ca"><span class="alt-edited">Nous elements semàntics</span></span></dt> + <dd>Al costat dels elements de seccions, de medis i de formularis, hi ha nombrosos elements nous, com {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} o {{HTMLElement("meter")}} i {{HTMLElement("main")}}, <span class="short_text" id="result_box" lang="ca"><span>augmentant la</span> <span>quantitat</span> <span>d'</span></span><a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elements HTML5 vàlids</a>.</dd> + <dt><span id="result_box" lang="ca"><span>Millora en</span> <span>{</span><span>{</span><span>HTMLElement</span> <span>(</span><span>"</span><span>iframe</span><span>"</span><span>)</span><span>}</span><span>}</span></span></dt> + <dd>Utilitzant els atributs {{htmlattrxref("sandbox", "iframe")}} i {{htmlattrxref("srcdoc", "iframe")}}, els autors ara poden ser precisos sobre el nivell de seguretat i la representació desitjada d'un element {{HTMLElement("iframe")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>incorporació directa</span> <span>de fórmules</span> <span>matemàtiques.</span></span></dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducció a HTML5</a></dt> + <dd>Aquest article presenta com indicar al navegador que utilitzeu HTML5 en el vostre disseny web o una aplicació web.</dd> + <dt><a href="/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analitzador HTML5 compatible</a></dt> + <dd>L'analitzador, que converteix els bytes d'un document HTML en un DOM, s'ha ampliat i ara defineix amb precisió el comportament d'utilitzar en tots els casos, fins i tot quan s'enfronten amb HTML vàlid. Això condueix a una major previsibilitat i interoperabilitat entre els navegadors compatibles amb HTML5.</dd> +</dl> + +<h2 id="Conectivitat" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Conectivitat</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd><span id="result_box" lang="ca"><span>Permet la</span> <span>creació</span> <span>d'una connexió</span> <span>permanent</span> <span>entre la pàgina</span> <span>i el servidor</span> <span>i l'intercanvi</span> <span>de dades no</span> <span>HTML</span> <span>a través d'</span><span>aquest mitjà.</span></span></dd> + <dt><a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Esdeveniments enviats pel servidor</a></dt> + <dd>Permet a un servidor enviar esdeveniments a un client, en lloc del paradigma clàssic en què el servidor podria enviar les dades només en resposta a la petició d'un client.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complament o una aplicació externa.</dd> +</dl> + +<h2 id="Sense_connexió_emmagatzematge" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sense connexió & emmagatzematge</h2> + +<dl> + <dt><a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sense connexió: El cau de l'aplicació</a></dt> + <dd>Firefox és totalment compatible amb l'especificació de recursos sense connexió d'HTML5. La majoria dels altres recursos sense connexió tenen suport en un cert nivell.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb i sense connexió</a></dt> + <dd>Firefox 3 suporta WHATWG, esdeveniments amb i sense connexió, que permeten a les aplicacions i extensions detectar si hi ha o no una connexió a Internet, així com tambien, detectar quan la connexió es perd o es recupera.</dd> + <dt><a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG sessió del costat client i emmagatzamatge continu (emmagatzamatge DOM)</a></dt> + <dd><span id="result_box" lang="ca"><span>Sessió</span> <span>del costat</span> <span>client</span> <span>i</span> <span>l'emmagatzematge</span> <span>continu</span> <span>permet a les</span> <span>aplicacions</span> <span>web emmagatzemar</span> <span>dades estructurades</span> <span>al</span> <span>costat</span> <span>del client.</span></span></dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd><span id="result_box" lang="ca"><span>IndexedDB</span> <span>és</span> <span>un estàndard</span> <span>web</span> <span>per a l'emmagatzematge</span> <span>de grans</span> <span>quantitats</span> <span>de dades estructurades</span> <span>en el navegador i</span> <span>per a les</span> <span>recerques</span> <span>d'alt</span> <span>rendiment</span> <span>d'aquestes dades</span> <span>mitjançant</span> <span>índexs</span></span> .</dd> + <dt><a href="/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Ús d'arxius des d'aplicacions web</a></dt> + <dd>El suport per a la nova API d'arxius d'HTML5 ha estat afegit a Gecko, per la qual cosa és possible que les aplicacions d'Internet accedeixin als arxius locals seleccionats per l'usuari. Això inclou el suport per a la selecció de diversos arxius utilitzant l'element HTML <span style="font-family: monospace;">{{HTMLElement("input")}}</span> de <a href="/en-US/docs/HTML/Element/Input#attr-type" title="HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">file</span> amb el nou atribut <a href="/en-US/docs/HTML/Element/Input#attr-multiple" title="HTML/Element/input#attr-multiple"><strong>multiple</strong></a>. També hi ha <a href="/en-US/docs/DOM/FileReader" title="DOM/FileReader"><code>FileReader</code></a>.</dd> +</dl> + +<h2 id="Multimèdia" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Multimèdia</h2> + +<dl> + <dt><a href="/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">L'ús àudio i vídeo en HTML5</a></dt> + <dd>Els elements {{HTMLElement("audio")}} i {{HTMLElement("video")}} incrustats permeten la manipulació dels nous continguts multimèdia.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>Aquesta tecnologia, on RTC és sinònim de comunicació en temps real, permet la connexió amb altres persones i el control de la videoconferència directament en el navegador, sense necessitat d'un complement o una aplicació externa.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt> + <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd> + <dt>Pista i WebVTT</dt> + <dd>L'element {{HTMLElement("track")}} permet subtítols i capítols. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> és un format de pista de text.</dd> +</dl> + +<h2 id="Gràfics_i_efectes_3D" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Gràfics i efectes 3D</h2> + +<dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Tutorial Canvas</a></dt> + <dd>Aprendre sobre el nou element {{HTMLElement("canvas")}} i com dibuixar gràfics i altres objectes en Firefox.</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de text HTML5 per elements <code><canvas></code></a></dt> + <dd>L'API de text HTML5 és ara compatible amb elements {{HTMLElement("canvas")}}..</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>WebGL porta gràfics en 3D a la web mitjançant la introducció d'una API que s'ajusta estretament a OpenGL ÉS 2.0 que pot ser utilitzat en elements HTML5 {{HTMLElement("canvas")}}.</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>Un format basat en XML d'imatges vectorials que pot ser directament incrustat en el codi HTML.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Rendiment_i_Integració" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;"><span id="result_box" lang="ca"><span>Rendiment</span> <span>i Integració</span></span></h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Permet delegar l'avaluació de JavaScript a subprocessos en segon pla, permetent que aquestes activitats evitin alentir esdeveniments interactius.</dd> + <dt><code><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> nivell 2</dt> + <dd>Permet anar a buscar de forma asíncrona algunes parts de la pàgina, la qual cosa li permet mostrar contingut dinàmic, variant segons el temps i les accions de l'usuari. Aquesta és la tecnologia que hi ha darrere d'<a href="/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> + <dt>Motors JavaScript un compilador JIT</dt> + <dd><span id="result_box" lang="ca"><span>La nova</span> <span>generació</span> <span>de motors</span> <span>de JavaScript</span> <span>són</span> <span>molt més</span> <span>potents</span><span>, el que porta</span> <span>a un major</span> <span>rendiment</span></span>.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">API historial</a></dt> + <dd>Permet la manipulació del històrial del navegador. Això és especialment útil per a les pàgines que carreguen interactivament nova informació.</dd> + <dt><a href="/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">L'atribut contentEditable: Transformeu el vostre lloc web en una wiki!</a></dt> + <dd>HTML5 ha estandarditzat l'atribut contentEditable. Més informació sobre aquesta característica.</dd> + <dt><a href="/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrosegar i deixar anar</a></dt> + <dd>El API d'arrossegar i deixar anar d'HTML5 permet el suport per arrossegar i deixar anar elements dins i entre llocs web. Això també proporciona una API senzilla per a l'ús d'extensions i aplicacions basats en Mozilla.</dd> + <dt><a href="/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestió del focus en HTML</a></dt> + <dd>Els nous atributs d'HTML5 <code>activeElement</code> i <code>hasFocus</code> són compatibles.</dd> + <dt><a href="/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Controladors de protocols basats en la Web</a></dt> + <dd>Ara podeu registrar aplicacions web com controladors de protocol utilitzant el mètode <code>navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="/en-US/docs/Web/API/Window/requestAnimationFrame" style="font-weight: bold;" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> + <dd>Permet controlar les animacions de renderitzat per obtenir un rendiment òptim.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Pantalla completa</a></dt> + <dd>Controla l'ús de tota la pantalla per a una pàgina Web o aplicació, sense que es mostri la interfície d'usuari del navegador.</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt> + <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd> + <dt><a href="/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Esdeveniments amb línia i sense línia</a></dt> + <dd>Amb la finalitat de construir una bona aplicació web sense connexió, necessiteu saber quan la vostra aplicació està realment fora de línia. Per cert, també necessiteu saber quan la vostra aplicació ha tornat a un estat en línia de nou.</dd> +</dl> + +<h2 id="accés_al_dispositiu" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 66px; padding-right: 0.5em; vertical-align: middle; width: 77px;">accés al dispositiu</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Ús de l'API de la càmera</a></dt> + <dd>Permet utilitzar, manipular i emmagatzemar una imatge des de la càmera de l'ordinador.</dd> + <dt><a href="/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Esdeveniments tàctils</a></dt> + <dd>Manipuladors per reaccionar als esdeveniments creats per un usuari pressionant pantalles tàctils.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using geolocation">Ús de la geolocalització</a></dt> + <dd>Permet als navegadors localitzar la posició de l'usuari mitjançant la geolocalització.</dd> + <dt><a href="/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detecció de l'orientació del dispositiu</a></dt> + <dd>Obtenir la informació quan el dispositiu en el qual s'executa el navegador canvia l'orientació. Això pot ser usat com un dispositiu d'entrada (per exemple, per fer jocs que reaccionen a la posició del dispositiu) o per adaptar el disseny d'una pàgina a l'orientació de la pantalla (vertical o horitzontal)..</dd> + <dt><a href="/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API Bloqueig del punter</a></dt> + <dd>Permet bloquejar el punter al contingut, de manera que els jocs i aplicacions similars no perdin el focus quan el punter arriba al límit de la finestra.</dd> +</dl> + +<h2 id="ESTIL" style="margin: 0pt 0pt 0.25em; font: 200 24px/1 'Bebas Neue','League Gothic',Haettenschweiler,'Arial Narrow',sans-serif; letter-spacing: 1px; text-transform: uppercase; border: medium none;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ESTIL</h2> + +<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="/en-US/docs/CSS" title="CSS">CSS</a> s'ha ampliat per ser capaç de poder donar estil als elements en una forma molt més complexa. Això es coneix com <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, encara que CSS no és una especificació monolítica i els diferents mòduls no estan tots en el nivell 3: alguns són en el nivell 1 i altres al nivell 4, amb tots els nivells intermedis coberts.</p> + +<dl> + <dt>Noves característiques d'estil de fons</dt> + <dd>Ara és possible posar una ombra a una caixa, mitjançant {{cssxref ("box-shadow")}} i es poden configurar <a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple_backgrounds">diversos fons</a>.</dd> + <dt>Més vores de luxe</dt> + <dd>No només ara és possible usar imatges per a l'estil de vores, usant {{cssxref ("border-image")}} i les seves propietats associades, també les vores arrodonides són suportades a través de la propietat {{cssxref("border-radius")}}.</dd> + <dt>Animació del vostre estil</dt> + <dd>Usant <a href="/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> per animar entre diferents estats o usar <a href="/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a> per animar parts de la pàgina sense un esdeveniment desencadenant, ara podeu controlar elements mòbils en la vostra pàgina.</dd> + <dt>Tipografia millorada</dt> + <dd>Els autors tenen un millor control per arribar a una millor tipografia. Poden controlar {{cssxref ("text-overflow")}} i la separació de síl·labes <a href="/en-US/docs/CSS/hyphens" title="CSS/hyphens">(hyphenation)</a>, però també poden afegir una ombra <a href="/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">(shadow)</a> a ella o controlar amb més precisió les seves decoracions <a href="/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">(decorations)</a>. Tipus de lletra personalitzades poden ser descarregades i aplicades gràcies a la nova regla {{cssxref ("@ font-face")}}.</dd> + <dt>Nous dissenys de presentació</dt> + <dd>Per tal de millorar la flexibilitat dels dissenys, s'han afegit dos nous dissenys: el <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> i <a href="/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> +</dl> +</div> +</div> diff --git a/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html new file mode 100644 index 0000000000..5da074b341 --- /dev/null +++ b/files/ca/web/guide/html/us_de_seccions_i_esquemes_en_html/index.html @@ -0,0 +1,341 @@ +--- +title: Us de seccions i esquemes en HTML 5 +slug: Web/Guide/HTML/Us_de_seccions_i_esquemes_en_HTML +tags: + - Advanced + - Example + - Guide + - HTML + - HTML5 + - Outlines + - Overview + - Sections + - Web +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +<div class="warning"> +<p><strong>Important</strong>: Actualment no existeixen implementacions de l'algorisme d'esquema en els navegadors gràfics o agents d'usuari de tecnologia d'assistència, encara que l'algorisme s'executa a un altre programari, com comprobadors de conformitat. Per tant, l'algorisme d'<a href="http://www.w3.org/TR/html5/sections.html#outline">esquema</a> no pot ser invocat per transmetre l'estructura dels documents als usuaris. Es recomana als autors a utilitzar les capçaleres de <a href="http://www.w3.org/TR/html5/sections.html#rank">rang</a> (<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h1</a></code>-<code><a href="http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements">h6</a></code>) per transmetre l'estructura.</p> +</div> + +<p>L'especificació HTML5 aporta diversos elements nous als desenvolupadors web que els permet descriure l'estructura d'un document web amb la semàntica estàndard. En aquest document es descriuen aquests elements i la forma d'utilitzar-los per definir el contorn desitjat per a qualsevol document.</p> + +<h2 id="Estructura_de_un_document_en_HTML_4">Estructura de un document en HTML 4</h2> + +<p>L'estructura d'un document, és a dir, l'estructura semàntica del que està entre <code><body></code> i <code></body></code>, és fonamental per a la presentació de la pàgina a l'usuari. HTML 4 utilitza la noció de seccions i subseccions d'un document per a descriure la seva estructura. Una secció està definida per un element ({{HTMLElement("div")}}) amb elements de capçalera ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} o {{HTMLElement("h6")}}) dins d'ella, definint el seu títol. Les relacions d'aquests elements dóna lloc a l'estructura del document i el seu contorn.</p> + +<p>Així que el següent marcat:</p> + +<div style="overflow: hidden;"> +<pre class="brush:xml"><div class="section" id="forest-elephants" > + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <div class="subsection" id="forest-habitat" > + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </div> +</div> +</pre> +</div> + +<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> + +<pre>1. Forest elephants + 1.1 Habitat +</pre> + +<p>Els elements {{HTMLElement("div")}} no són obligatoris per definir una nova secció. La mera presència d'un element capçalera és suficient perquè impliqui una nova secció. Per tant aixó,</p> + +<pre class="brush:xml"><h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + <h2>Diet</h2> +<h1>Mongolian gerbils</h1> +</pre> + +<p>condueix al següent esquema:</p> + +<pre>1. Forest elephants + 1.1 Habitat + 1.2 Diet +2. Mongolian gerbils +</pre> + +<h2 id="Problemes_resolts_per_HTML5">Problemes resolts per HTML5</h2> + +<p>La definició d'HTML 4 de l'estructura d'un document i el seu algoritme d'esquematització implícit és molt perillos i condueix a nombrosos problemes:</p> + +<ol> + <li>L'ús de {{HTMLElement("div")}} per definir seccions semàntiques, sense definir valors específics per als atributs class fa impossible l'automatització de l'algoritme d'esquema ( "És que {{HTMLElement("div")}} part de la esquema de la pàgina, defineix una secció o un subsecció? "o" és només una presentació de {{HTMLElement ( "div")}}, unicament utilitzat per a l'estil? "). En altres termes, l'especificació HTML 4 és molt imprecisa en el que és una secció i com es defineix el seu àmbit. La generació automàtica dels esquemes és important, especialment per la <a class="external" href="http://en.wikipedia.org/wiki/Assistive_technology" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologia d'assistència</a>, que és possible adaptar-la a la forma en què es presenta la informació als usuaris, d'acord a l'estructura del document. HTML5 elimina la necessitat d'elements {{HTMLElement ( "div")}} de l'algoritme d'esquema mitjançant la introducció d'un nou element, {{HTMLElement("section")}}, l'element HTML Section.</li> + <li>La fusió de diversos documents és difícil: la inclusió d'un sub-document en un document principal significa canviar el nivell de elements d'encapçalament HTML de manera que es mantigui l'esquema. Això es soluciona en HTML5 amb els elements de seccionament recentment introduïts ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} i {{HTMLElement("aside")}}), són sempre subseccions de la secció del seu ancestre més proper, independentment de quines seccions són creades per les capçaleres internes.</li> + <li>En HTML 4, cada secció és part de l'esquema del document. Però els documents sovint no són tan lineals. Un document pot tenir seccions especials que contenen informació que no és part de, tot i que està relacionat amb el flux principal, com un bloc d'anunci o una caixa d'explicació. HTML 5 introdueix l'element {{HTMLElement("aside")}} que permet aquestes seccions per no ser part de l'esquema principal.</li> + <li>Un cop més, en HTML 4, ja que cada secció és part de l'esquema del document, no hi ha manera de tenir seccions que continguin informació relacionada no amb el document, sinó a tot el lloc, com logotips, menús, taula de continguts, o la informació de copyright i avisos legals . Amb aquesta finalitat, HTML 5 introdueix tres nous elements: {{HTMLElement("nav")}} per a les col·leccions d'enllaços, com una taula de continguts, {{HTMLElement("footer")}} i {{HTMLElement("header")}} per obtenir informació relacionada amb el lloc. Recordeu que {{HTMLElement("header")}} i {{HTMLElement("footer")}} no seccionan el contingut com {{HTMLElement("section")}}, sinó que hi són per a marcar semànticament parts d'una secció.</li> +</ol> + +<p>De manera més general, HTML5 aporta precisió a les característiques de seccionament i encapçalament, permetent que l'esquema del document pogui ser predictible i utilitzat pel navegador per millorar l'experiència de l'usuari.</p> + +<h2 id="Algoritme_d'esquema_HTML5">A<span class="short_text" id="result_box" lang="ca"><span>lgoritme</span> <span>d'esquema</span> <span>HTML5</span></span></h2> + +<p>Anem a considerar els algoritmes subjacents la forma en que HTML s'encarrega de les seccions i esquemes.</p> + +<h3 id="Definir_seccions">Definir seccions</h3> + +<p>Tot el contingut situat a l'interior de l'element {{HTMLElement("body")}} és part d'una secció. Les seccions en HTML5 es poden niar. Al costat de la secció principal, definit per l'element {{HTMLElement("body")}}, els límits de secció es defineixen de manera explícita o implícita. Les seccions definides de forma explícita, són els continguts dins de les etiquetes {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}}.</p> + +<div class="note">Cada secció pot tenir la seva pròpia jerarquia de encapçalaments. Per tant, fins i tot una secció niada pot tenir un {{HTMLElement("h1")}}. Veure {{anch("Defining headings")}}</div> + +<p>Vegem un exemple - aquí tenim un document amb una secció de nivell superior i un peu de pàgina definit. Dins de la secció de nivell superior tenim tres subseccions, que es defineixen per dos elements {{htmlelement("section")}} i un element {{htmlelement("aside")}}:</p> + +<pre class="brush:xml"><section> + + <h1>Forest elephants</h1> + + <section> + <h1>Introduction</h1> + <p>In this section, we discuss the lesser known forest elephants.</p> + </section> + + <section> + <h1>Habitat</h1> + <p>Forest elephants do not live in trees but among them.</p> + </section> + + <aside> + <p>advertising block</p> + </aside> + +</section> + +<footer> + <p>(c) 2010 The Example company</p> +</footer></pre> + +<p>Això ens porta al següent esquema::</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat +</pre> + +<h3 id="Definir_encapçalaments">Definir encapçalaments</h3> + +<p>Mentre que els elements de seccionament HTML defineixen l'estructura del document, un esquema també necessita encapçalaments per ser útil. La regla bàsica és simple: el primer element d'encapçalament HTML (un de {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}})) defineix el encapçalament de la secció actual.</p> + +<p>Els elements de capçalera tenen un <em>rang</em> donat pel nombre en el nom de l'element, on {{HTMLElement ("h1")}} té el rang més <em>alt</em>, i {{HTMLElement ("H6")}} té el rang més <em>baix</em>. Temes de classificació relativa només dins d'una secció; l'estructura de les seccions determina el esquema, no el rang d'encapçalament de les seccions. Per exemple, considereu aquest codi:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... + </section> +</section> +<section> + <h3>Mongolian gerbils</h3> + <p>In this section, we discuss the famous mongolian gerbils. + ...this section continues... +</section></pre> + +<p>Aixó crea el següent esquema:</p> + +<pre>1. Forest elephants + 1.1 Habitat +2. Mongolian gerbils</pre> + +<p>Recordeu que el rang de l'element d'encapçalament (en l'exemple {{HTMLElement("h1")}} per a la primera secció de nivell superior, {{HTMLElement("h2")}} per a la subsecció i {{HTMLElement("h3")}} per a la segona secció de nivell superior) no és important. (Qualsevol rang es pot utilitzar com l'encapçalament d'una secció definida de manera explícita, encara que no es recomana aquesta pràctica.)</p> + +<h3 id="Seccionament_implícit">Seccionament implícit</h3> + +<p>A causa que el Seccionament d'elements HTML5 no són obligatoris per definir un esquema, per mantenir la compatibilitat amb la web existent, dominat per HTML 4, hi ha una manera de definir seccions sense ells. Això es diu <em>seccionament implícit</em>.</p> + +<p>Els elements de capçalera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) defineixen una nova secció implícita, quan no són el primer encapçalament de les seccions explícites dels seue pares. La forma implícita d'aquesta secció es posiciona en l'esquema que es defineix per la seu rang relatiu amb l'encapçalat anterior en la seva secció per a pares. Si es tracta d'un rang inferior al de l'encapçalat anterior, s'obre una subsecció de la secció implícita. Aquest codi:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3 class="implicit subsection">Habitat</h3> + <p>Forest elephants do not live in trees but among them. + ...this subsection continues... +</section></pre> + +<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> + +<pre>1. Forest elephants + 1.1 Habitat <em>(implicitly defined by the h3 element)</em> +</pre> + +<p>Si es tracta del mateix rang que l'encapçalat anterior, es tanca la secció anterior (que pot haver estat explícit!) I s'obre una nova implícita en el mateix nivell: </p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h1 class="implicit section">Mongolian gerbils</h1> + <p>Mongolian gerbils are cute little mammals. + ...this section continues... +</section></pre> + +<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> + +<pre>1. Forest elephants +2. Mongolian gerbils <em>(implicitly defined by the h1 element, which closed the previous section at the same time)</em> +</pre> + +<p>Si es tracta d'un rang més alt que l'encapçalat anterior, es tanca la secció anterior i s'obre una nova implícita en el nivell superior:</p> + +<pre class="brush:xml"><body> + <h1>Mammals</h1> + <h2>Whales</h2> + <p>In this section, we discuss the swimming whales. + ...this section continues... + <section> + <h3>Forest elephants</h3> + <p>In this section, we discuss the lesser known forest elephants. + ...this section continues... + <h3>Mongolian gerbils</h3> + <p>Hordes of gerbils have spread their range far beyond Mongolia. + ...this subsection continues... + <h2>Reptiles</h2> + <p>Reptiles are animals with cold blood. + ...this section continues... + </section> +</body></pre> + +<p><span id="result_box" lang="ca"><span>condueix</span> <span>al següent</span> <span>esquema</span><span>:</span></span></p> + +<pre>1. Mammals + 1.1 Whales <em>(implicitly defined by the h2 element)</em> + 1.2 Forest elephants <em>(explicitly defined by the section element)</em> + 1.3 Mongolian gerbils <em>(implicitly defined by the h3 element, which closes the previous section at the same time)</em> +2. Reptiles <em>(implicitly defined by the h2 element, which closes the previous section at the same time)</em> +</pre> + +<p>Aquest no és l'esquema que es podria esperar fent una ullada ràpida a les etiquetes d'encapçalament. Per fer un marcat humà comprensible, és una bona pràctica utilitzar etiquetes explícites per a l'obertura i tancament de seccions, i per a que coincideixi amb el rang d'encapçalament a nivell de niament de secció previst. No obstant això, no és requerit per l'especificació HTML5. Si trobeu que els navegadors mostran el seu esquema de document de manera inesperada, comproveu si té seccions que es tanquen de manera implícita pels elements d'encapçalament.</p> + +<p>Una excepció a la regla general és que el rang d'encapçalament ha de coincidir amb el nivell de niament de secció, és per a les seccions que poden ser reutilitzades en múltiples documents. Per exemple, una secció podria ser emmagatzemada en un sistema de gestió de continguts i muntada en documents en temps d'execució. En aquest cas, una bona pràctica és començar per {{HTMLElement("h1")}} per al nivell d'encapçalament superior de la secció reutilitzable. El nivell de niament de la secció reutilitzable serà determinat per la jerarquia de les seccions del document en què apareix. Les etiquetes de secció explícites són encara útils en aquest cas.</p> + +<h3 id="Arrels_de_seccionament"><a name="sectioning_root">Arrels de seccionament</a></h3> + +<p>Una <a id="sectioning root" name="sectioning root">arrel de seccionament</a> és un element HTML que pot tenir el seu propi esquema, però les seccions i encapçalaments en el seu interior no contribueixen a l'esquema del seu ancestre. Al costat de {{HTMLElement("body")}} que és l'arrel de seccionament lògica d'un document, aquests són sovint elements que introdueixen contingut extern a la pàgina: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} i {{HTMLElement("td")}}.</p> + +<p>Exemple:</p> + +<pre class="brush:xml"><section> + <h1>Forest elephants</h1> + <section> + <h2>Introduction</h2> + <p>In this section, we discuss the lesser known forest elephants</p> + </section> + <section> + <h2>Habitat</h2> + <p>Forest elephants do not live in trees but among them. Let's + look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p> + <blockquote> + <h1>Borneo</h1> + <p>The forest element lives in Borneo...</p> + </blockquote> + </section> +</section> +</pre> + +<p>El resultat d'aquest exemple en el següent esquema:</p> + +<pre>1. Forest elephants + 1.1 Introduction + 1.2 Habitat</pre> + +<p>Aquest esquema no conté el esquema intern de l'element {{HTMLElement("blockquote")}}, que sent una citació externa, és una arrel de seccionament i aïlla el seu esquema intern.</p> + +<h3 id="Seccions_fora_de_l'esquema">Seccions fora de l'esquema</h3> + +<p>HTML 5 introdueix dos nous elements que permeten definir seccions que no pertanyen el esquema principal d'un document web:</p> + +<ol> + <li>L'element de secció HTML Aside ({{HTMLElement("aside")}}) defineix una secció que, encara que es relaciona amb l'element principal, no pertany al corrent principal, com un quadre d'explicació o un anunci. Té el seu propi esquema, però no pertany a la principal.</li> + <li>L'element de secció HTML de navegació ({{HTMLElement("nav")}}) defineix una secció que conté enllaços de navegació. Pot haver-hi diversos d'ells en un document, per exemple, una pàgina amb enllaços interns com una taula de continguts, i un altre amb el lloc d'enllaços de navegació. Aquests enllaços no són part del flux principal del document i esquema, i en general no són mostrats inicialment pels lectors de pantalla i tecnologies de suport similars.</li> +</ol> + +<h3 id="Encapçalats_i_peus_de_pàgina">Encapçalats i peus de pàgina</h3> + +<p>HTML5 també introdueix dos nous elements que es poden utilitzar per marcar la capçalera i el peu de pàgina d'una secció:</p> + +<ol> + <li>L'element Header HTML ({{HTMLElement("header")}}) defineix una capçalera de la pàgina - en general conté el logotip i el nom del lloc i, possiblement, un menú horitzontal - o encapçalament de secció, que potser conté la capçalera de la secció, el nom de l'autor, etc.. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir la seva pròpia {{HTMLElement("header")}}. Malgrat el seu nom, no necessàriament es col·locat al començament de la pàgina o secció.</li> + <li>L'element Footer HTML ({{HTMLElement("footer")}}) defineix un peu de pàgina - en general conté el dret d'autor i avisos legals i, de vegades alguns enllaços - o secció de peu de pàgina, que potser conté la data de publicació de la secció, la informació de llicència, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}} i {{HTMLElement("nav")}} poden tenir el seu pròpi {{HTMLElement("footer")}}. Malgrat el seu nom, no necessàriament es col·locat al final de la pàgina o secció.</li> +</ol> + +<p>Aquests no creen noves seccions en l'esquema, més aviat, marcan el contingut dins de les seccions de la pàgina.</p> + +<h2 id="Adreces_en_elements_de_seccionament">Adreces en elements de seccionament</h2> + +<p>L'autor d'un document, sovint, vol publicar alguna informació de contacte, com el nom i l'adreça de l'autor. HTML 4 permet això a través de l'element {{HTMLElement("address")}}, que s'ha ampliat en HTML5.</p> + +<p>Un document pot estar fet de diferentes seccions per diferents autors. Una secció d'un altre autor, que el de la pàgina principal, es defineix mitjançant l'element {{HTMLElement("article")}}. En conseqüència, l'element {{HTMLElement("address")}} està enllaçat al seu més proper ancestre {{HTMLElement("body")}} o {{HTMLElement("article")}}.</p> + +<h2 id="Usar_elements_HTML5_en_navegadors_no_HTML5">Usar elements HTML5 en navegadors no HTML5</h2> + +<p>Els elements de seccions i capçaleres han de treballar en la majoria dels navegadors no HTML5. Tot i que no són compatibles, no necessiten una interfície especial DOM i només necessiten un estil CSS específic com a elements desconeguts, que son, se'ls dóna estil amb <code>display:inline</code> per defecte:</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> + +<p>Per descomptat, el desenvolupador web els pot donar estil de manera diferent però tinguen en compte que en un navegador no HTML5, l'estil per defecte és diferent del que s'espera per a aquest tipus d'elements. També tingueu en compte que l'element {{HTMLElement("time")}} no s'ha inclòs, ja que l'estil predeterminat per a ell en un navegador no HTML 5 és el mateix que en un amb HTML5 compatible.</p> + +<p>Aquest mètode té les seves limitacions, ja que alguns navegadors no permeten un estil d'elements no compatibles. Aquest és el cas d'Internet Explorer (versió 8 i anteriors), que necessiten un script específic per permetre això:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> +<![endif]--></pre> + +<p>Aquest script significa que, en el cas d'Internet Explorer (8 i anteriors), el script ha d'estar habilitat per tal de mostrar els elements de seccionament HTML5 i de capçaleres correctament. Si no és així, no es mostraran, la qual cosa pot ser problemàtic, ja que aquests elements són propensos a definir l'estructura de la pàgina sencera. És per això que un element explícit {{HTMLElement( "noscript")}} ha de ser afegit per a aquest cas:</p> + +<pre class="brush:xml"><noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are simulated using JScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. +</noscript></pre> + +<p>Això ens porta al següent codi per permetre el suport dels elements de seccions HTML5 i capçaleres en els navegadors no HTML5, fins i tot per a Internet Explorer (8 i anteiors), amb un retorn adequat per al cas en què aquest últim navegador estigui configurat per no utilitzar scripts:</p> + +<pre class="brush:xml"><!--[if lt IE 9]> + <script> + document.createElement("header" ); + document.createElement("footer" ); + document.createElement("section"); + document.createElement("aside" ); + document.createElement("nav" ); + document.createElement("article"); + document.createElement("hgroup" ); + document.createElement("time" ); + </script> + <noscript> + <strong>Warning !</strong> + Because your browser does not support HTML5, some elements are created using JavaScript. + Unfortunately your browser has disabled scripting. Please enable it in order to display this page. + </noscript> +<![endif]--></pre> + +<h2 id="Conclusió">Conclusió</h2> + +<p>Els nous elements semàntics introduïts en HTML5 tene la capacitat de descriure l'estructura i l'esquema d'un document web d'una manera estàndard. Aporten una gran avantatge per a les persones que tenen navegadors HTML5 i que necessitan l'estructura per ajudar-los a entendre la pàgina, per exemple les persones que necessiten l'ajuda d'una mica de tecnologia d'assistència. Aquests nous elements semàntics són senzills d'usar i, amb molt poques càrregues, es poden fer funcionar també en els navegadors no HTML5. Per tant han de ser utilitzats sense restriccions.</p> + +<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/ca/web/guide/index.html b/files/ca/web/guide/index.html new file mode 100644 index 0000000000..d8bb064439 --- /dev/null +++ b/files/ca/web/guide/index.html @@ -0,0 +1,56 @@ +--- +title: Web developer guides +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +<p><strong>Aquests articles proporcionen una guia pràctica d'informació per ajudar a fer ús de les tecnologies i les API específiques.</strong></p> + +<div class="row topicpage-table"> +<div class="section"> +<dl> + <dt class="landingPageList"><a href="/en-US/docs/Learn/HTML">HTML Àrea d'Aprenentatge</a></dt> + <dd class="landingPageList"><strong>HyperText Markup Language (HTML)</strong> és el nucli del llenguatge de gairebé tot el contingut web. La major part del que veieu a la pantalla en el vostre navegador es descrit, fonamentalment, amb l'ús d'HTML.</dd> + <dt class="landingPageList"> <a href="/en-US/docs/Learn/CSS">CSS Àrea d'Aprenentatge</a></dt> + <dd class="landingPageList"><span id="result_box" lang="ca"><span>Fulles</span> <span>d'estil en</span> <span>cascada</span> <span>(</span><span>CSS</span><span>)</span> <span>és</span> <span>un llenguatge de</span> <span>full d'estil</span> <span>s'utilitza</span> <span>per descriure la</span> <span>presentació</span> <span>d'un</span> <span>document</span> <span>escrit</span> <span>en HTML.</span></span></dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Events">Esdeveniments guia per a desenvolupador</a></dt> + <dd class="landingPageList">Esdeveniments es refereix tant a un patró de disseny utilitzat per al maneig asíncrona de diversos incidents que es produeixen en el curs de la vida d'una pàgina web i a la nomenclatura, la caracterització i l'ús d'un gran nombre d'incidents de diferents tipus</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Graphics">Gràfics a la Web</a></dt> + <dd class="landingPageList">Els llocs web moderns i aplicacions sovint han de presentar gràfics de complexitat variable.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API">Guia de les Web APIs</a></dt> + <dd class="landingPageList">Una llista de totes les API Web i el que fan.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></dt> + <dd>JavaScript és un potent llenguatge de scripting usat per crear aplicacions per a la Web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Localizations_and_character_encodings">Localizacions i codificaciones de caràcter</a></dt> + <dd class="landingPageList">Els navegadors procesan el text internament com Unicode. No obstant això, una forma de representar caràcters en termes de bytes (codificació de caràcters) s'utilitza per a la transferència de text a través de la xarxa al navegador. The <a class="external external-icon" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#charset">L'especificació HTML recomana l'ùs de la codificació UTF-8 </a> (que pot representar a tots Unicode), i independentment de la codificació utilitzada requereix de contingut web per declarar aquesta codificació.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Mobile">Mòvil Desenvolupament Web</a></dt> + <dd class="landingPageList">Aquesta pàgina ofereix una visió general d'algunes de les principals tècniques necessàries per dissenyar llocs web que funcionen correctament en dispositius mòbils. Si esteu buscant informació sobre el projecte Firefox OS de Mozilla, vegeu la pàgina de <a href="https://developer.mozilla.org/en/Mozilla/Firefox_OS" title="Boot to Gecko">Firefox OS</a>. O si esteu interessat en els detalls sobre <a href="https://developer.mozilla.org/en/Mozilla/Firefox_for_Android">Firefox per Android</a>.</dd> +</dl> +</div> + +<div class="section"> +<dl> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance">Optimització i rendiment</a></dt> + <dd class="landingPageList">En la construcció d'aplicacions i llocs web moderns, és important que el seu contingut funcioni de forma ràpida i eficient. Això permetrà que es realitzi de manera efectiva tant per als potents sistemes d'escriptori com per els dispositius portatils més febles.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Parsing_and_serializing_XML">Anàlisi i serialització XML</a></dt> + <dd class="landingPageList">La plataforma web ofereix diferents mètodes d'anàlisi sintàctica i la serialització XML, cadascun amb els seus propis avantatges i desavantatges.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF">La Web Open Font Format (WOFF)</a></dt> + <dd class="landingPageList"><strong>WOFF</strong> (<strong>Web Open Font Format</strong>) és un format d'arxiu font que és lliure perquè qualsevol el faci servir a la web.</dd> + <dt class="landingPageList"><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects">L'ùs d'objectes FormData</a></dt> + <dd class="landingPageList">L'objecte <a href="https://developer.mozilla.org/en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> permet compilar un conjunt de parells clau/valor per enviar mitjançant XMLHttpRequest. Està destinat principalment a l'enviament de dades de formularis, però pot ser utilitzat independentment dels formularis per tal de transmetre dades codificades. La transmissió està en el mateix format que el mètode submit() dels formularis per enviar les dades del formulari si el tipus de codificació s'estableix en "multipart/form-data".</dd> + <dt class="landingPageList"><a href="/en-US/docs/Glossary">Glossari</a></dt> + <dd class="landingPageList">Defineix nombrosos termes tècnics relacionats amb la Web i Internet.</dd> +</dl> +</div> +</div> + +<h2 id="Veure">Veure</h2> + +<ul> + <li><a href="/en-US/docs/Web/Reference" title="/en-US/docs/Web/Reference">Web Developer Reference</a></li> +</ul> |