initial commit

2 files changed, 265 insertions, 0 deletions

diff --git a/files/ca/learn/css/howto/generated_content/index.html b/files/ca/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..877bfefad7
--- /dev/null
+++ b/files/ca/learn/css/howto/generated_content/index.html
@@ -0,0 +1,179 @@
+---
+title: Contingut
+slug: Learn/CSS/Howto/Generated_content
+tags:
+  - Basic
+  - Beginner
+  - CSS
+  - CSS Background
+  - 'CSS:Getting_Started'
+  - Graphics
+  - Guide
+  - NeedsLiveSample
+  - NeedsUpdate
+  - Web
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Aquesta és la 9th 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> descriu algunes formes en què es pot utilitzar CSS per afegir contingut quan es visualitza un document. Modifiqueu la fulla d'estil per afegir el contingut del text i una imatge.</p>
+
+<h2 class="clearLeft" id="Informació_Contingut"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Contingut</span></span></h2>
+
+<p>Un dels avantatges importants de CSS és que ajuda a separar l'estil d'un document, del seu contingut. No obstant això, hi ha situacions en què té sentit especificar certs continguts com a part de la fulla d'estil, no com a part del document.</p>
+
+<p>El contingut especificat en una fulla d'estil pot constar de text o imatges. S'especifica el contingut de la fulla d'estils quan el contingut està estretament lligat a l'estructura del document.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Més detalls</div>
+
+<p>Especificar el contingut d'una fulla d'estil pot causar complicacions. Per exemple, es poden tenir diferents versions d'idioma del document que comparteix una fulla d'estil. Si una part de la fulla d'estil ha de ser traduït, vol dir que heu de posar parts de la fulla d'estil en arxius separats i encarregar-se de fer els vincles amb la versió d'idioma adequat a cada document.</p>
+
+<p>Aquestes complicacions no sorgeixen si el contingut que especifiqueu consisteix en símbols o imatges que s'apliquen en tots els idiomes i cultures.</p>
+
+<p>El contingut especificat en una fulla d'estil no es converteixi en part del DOM.</p>
+</div>
+
+<h3 id="Text_content" name="Text_content"><span id="result_box" lang="ca"><span>Contingut de</span> <span>text</span></span></h3>
+
+<p>CSS pot inserir el contingut de text abans o després d'un element. Per especificar això, fer una regla i afegir {{ cssxref("::before") }} o {{ cssxref("::after") }} al selector. En la declaració, especificar la propietat {{ cssxref("content") }} amb el contingut de text com el seu valor.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Exemple</div>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">A text where I need to &lt;span class="ref"&gt;something&lt;/span&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.ref::before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}</pre>
+
+<h4 id="Sortida">Sortida</h4>
+
+<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Més detalls</div>
+
+<p>El joc de caràcters d'una fulla d'estil és UTF-8 per defecte, però es pot especificar a l'enllaç, en la pròpia fulla d'estil o d'altres maneres. Per a més detalls, veure <a href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 representació de fulles d'estil CSS</a> en l'especificació CSS.</p>
+
+<p>Els caràcters individuals també poden ser especificats per un mecanisme d'escapament que utilitza la barra invertida com a caràcter d'escapament. Per exemple, \ 265B és el símbol d'escacs per a una reina negre ♛. Per a més detalls, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referència a caràcters que no estan representats en una codificació de caràcters</a> i també <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Caràcters i suposats</a> en l'especificació CSS.</p>
+</div>
+
+<h3 id="Contingut_d'image">Contingut d'image</h3>
+
+<p>Per afegir una imatge abans o després d'un element, especifiqueu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("content") }}.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Exemple</div>
+
+<p>Aquesta regla afegeix un espai i una icona després de cada vincle que té la classe <code>glossari</code>:</p>
+
+<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+</div>
+
+<p>Per afegir una imatge com a fons d'un element, introduïu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("background") }}. Aquesta és una propietat abreujada que especifica el color de fons, la imatge, com la imatge es repeteix i alguns altres detalls.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Exemple</div>
+
+<p>Aquesta norma estableix el fons d'un element específic, utilitzant una URL per especificar un fitxer d'imatge.</p>
+
+<p>El selector especifica el <code>id</code> de l'element. El valor <code>no-repeat</code> fa que la imatge aparegui una sola vegada:</p>
+
+<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+</pre>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Més detalls</div>
+
+<p>Per obtenir informació sobre les propietats individuals que afecten els fons, i sobre altres opcions quan s'especifican imatges de fons, veure la pàgina de referència {{ cssxref("background") }}.</p>
+</div>
+
+<h2 id="Acció_Afegir_una_imatge_de_fons">Acció: Afegir una imatge de fons</h2>
+
+<p>Aquesta imatge és un quadrat blanc amb una línia blava a la part inferior:</p>
+
+<table style="border: 2px solid #cccccc;">
+ <tbody>
+  <tr>
+   <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ol>
+ <li>Descarregueu l'arxiu d'imatge en el mateix directori que el fitxer CSS. (Per exemple, feu-hi clic per obtenir un menú de context, a continuació, selecciona Desar imatge com i especifiqueu el directori que utilitzeu per aquest tutorial.)</li>
+ <li>Editeu l'arxiu CSS i afegiu aquesta regla al cos, establint una imatge de fons per tota la pàgina.
+  <pre class="brush:css">background: url("Blue-rule.png");
+</pre>
+
+  <p>El valor de <code>repeat</code> és el valor per defecte, de manera que no necessita ser especificat. La imatge es repeteix horitzontal i verticalment, donant una aparença com de paper pautat:</p>
+
+  <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+  <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+  <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+  <div style="font-style: italic; width: 24em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p>
+  </div>
+
+  <div style="font-style: normal; padding-top: 2px; height: 8em;">
+  <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p>
+  </div>
+  </div>
+  </div>
+ </li>
+</ol>
+
+<div class="tuto_example">
+<div class="tuto_type">Repte</div>
+
+<p>Descarregueu aquesta imatge:</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>Afegiu una regla a la fulla d'estils perquè mostri la imatge al començament de cada línia:</p>
+
+<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
+<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
+
+<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
+<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div>
+
+<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div>
+</div>
+</div>
+
+<div class="tuto_details" id="tutochallenge">
+<div class="tuto_type">Possible solution</div>
+
+<p>Add this rule to your stylesheet:</p>
+
+<pre class="brush: css">p:before{
+  content: url("yellow-pin.png");
+}
+</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/Lists", "Llistes") }}Una forma comuna d'afegir contingut a les fulles d'estil és marcar elements en les llistes. La següent secció descriu com especificar l'estil d'elements de llista.</p>
diff --git a/files/ca/learn/css/howto/index.html b/files/ca/learn/css/howto/index.html
new file mode 100644
index 0000000000..1f087d3e22
--- /dev/null
+++ b/files/ca/learn/css/howto/index.html
@@ -0,0 +1,86 @@
+---
+title: Use CSS to solve common problems
+slug: Learn/CSS/Howto
+translation_of: Learn/CSS/Howto
+---
+<div>Translation in progress{{LearnSidebar}}</div>
+
+<p class="summary">The following links provide solutions to common problems you can solve with CSS.</p>
+
+<h2 id="Common_use_cases">Common use cases</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics">Basics</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li>
+</ul>
+
+<h3 id="CSS_and_text">CSS and text</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts">Boxes and layouts</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2>
+
+<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p>
+
+<h3 id="General">General</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects">Advanced effects</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
+</ul>
+
+<h3 id="Layout">Layout</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p>