unslug es: move

3 files changed, 377 insertions, 0 deletions

diff --git a/files/es/learn/css/howto/css_faq/index.html b/files/es/learn/css/howto/css_faq/index.html
new file mode 100644
index 0000000000..36c2fa1317
--- /dev/null
+++ b/files/es/learn/css/howto/css_faq/index.html
@@ -0,0 +1,118 @@
+---
+title: Preguntas frecuentes sobre CSS
+slug: Web/CSS/Preguntas_frecuentes_sobre_CSS
+tags:
+  - CSS
+  - Proyecto MDC
+translation_of: Learn/CSS/Howto/CSS_FAQ
+---
+<h4 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mi CSS es válida, pero no se representa correctamente</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores utilizan la declaración <code>DOCTYPE</code> para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El uso de una declaración <code>DOCTYPE</code> correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Los navegadores modernos tienen fundamentalmente dos modos de renderizado:</span></span></p>
+<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Quirks mode</em> (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los documentos con una declaración <code>DOCTYPE</code> incompleta, incorrecta o faltante o con una declaración <code>DOCTYPE</code> conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Standards Mode</em> (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración <code>DOCTYPE</code> moderna será renderizada con el Modo estándar.</span></span></li>
+</ul>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores basados en Gecko tienen un tercer <em><a href="/en/Gecko's_&quot;Almost_Standards&quot;_Mode" title="en/Gecko's &quot;Almost Standards&quot; Mode">Modo casi estándar</a></em> que tiene solo una peculiaridades menores.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta es una lista de las declaraciones <code>DOCTYPE</code> más utilizadas que activarán el Modo estándar o el Modo casi estándar:</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/loose.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/strict.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</span></span>
+</pre>
+<h4 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Diferencia entre <code>id</code> y <code>class</code></span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos HTML pueden tener un atributo <code>id</code> y / o un atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>id</code> asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>class</code> asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS te permite aplicar estilos a un atributo <code>id</code> y / o <code>class</code> concreto.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Utiliza un estilo específico de <code>id</code> cuando desees restringir las reglas de estilo a un bloque o elemento concreto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este estilo lo usará <strong>un solo</strong> elemento con ese <code>id</code> concreto.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usa un estilo específico de <code>class</code> cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors">Selectores CSS</a></span></span></p>
+<h4 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Restaurar el valor de la propiedad predeterminado</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como <code>p</code> ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.</span></span></p>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a la naturaleza <em>en cascada</em> de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.</span></span></p>
+<h4 id="Derived_styles" name="Derived_styles"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estilos derivados</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS no permite que se defina un estilo según los términos de otro.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(Consulta la <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685" title="http://archivist.incutio.com/viewlist/css-discuss/2685">nota de Eric Meyer acerca de la postura del Grupo de trabajo)</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.</span></span></p>
+<h4 id="Assigning_multiple_classes" name="Assigning_multiple_classes"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Asignación de múltiples clases</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo <code>class</code>, con un espacio en blanco para separarlas.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;style type="text/css"&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { background: black; color: white; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.today { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/style&gt;</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">&lt;div class="news today"&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">... contenido de las noticias de hoy ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El orden de las clases en el atributo <code>class</code> no es relevante.</span></span></p>
+<h4 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Normas de estilo que no funcionan</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes utilizar las <em>Reglas de estilo de CSS</em> del <a href="/en/DOM_Inspector" title="en/DOM Inspector">Inspector DOM</a> para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.</span></span></p>
+<h5 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Jerarquía de los elementos HTML</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { color: black; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">. corpName {font-weight: bold; color: red;}</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita --&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div class="news"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">(Reuters) &lt;span class="corpName"&gt; General Electric &lt;/ span&gt; (GE.NYS) anunció el jueves ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.</span></span></p>
+<h5 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Regla de estilo explícitamente redefinida</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En las hojas de estilo CSS el orden <strong>es</strong> importante.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si defines una regla y luego vuelves a definirla, se usará la última definición.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { color: red; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/*  otras reglas             */</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font-weight: normal; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita --&gt;</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.</span></span></p>
+<h5 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property"><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso de una propiedad abreviada</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font: 14px Arial; color: red; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="stockTicker"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas <strong>es</strong> importante.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker {</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">font-weight: bold;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">font: 12px Verdana; / * font-weight es ahora normal * /</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span>
+</pre>
+<h5 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso del selector <code>*</code></span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El selector <code>*</code> se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">body * { font-weight: normal; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font: 12px Verdana; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.corpName { font-weight: bold; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockUp { color: red; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="section"&gt;</span></span>
+   <span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;/ div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En este ejemplo, el selector <code>body *</code> aplica la regla a todos los elementos dentro del cuerpo (<em>body</em>), en cualquier nivel de jerarquía, incluyendo <em>redtext.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Así <code>font-weight: bold;</code> aplicada a la clase <em>boldtext</em> se reemplaza por <code>font-weight: normal;</code> aplicada a <em>redtext.</em></span></span></p>
+<h5 id="Specificity_in_CSS" name="Specificity_in_CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Especificidad en CSS</span></span></h5>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El estilo en línea (en los atributos HTML <code>style</code>) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.</span></span></p>
+<pre><span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">div { color: black; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#orange { color: orange; }</span></span>
+<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.green { color: green; }</span></span>
+
+<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;</span></span>
+</pre>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Las reglas son más complicadas cuando el selector tiene varias partes.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el <a class=" external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="http://www.w3.org/TR/CSS21/cascade.html#specificity">capítulo 6.4.3 de la Especificación CSS 2.1</a></span></span></p>
+<h4 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">¿Qué hacen las propiedades -moz-*?</span></span></h4>
+<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por favor, consulta la página <a class="internal" href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Extensiones CSS de Mozilla</a>.</span></span></p>
+<p> </p>
+<p>{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}</p>
diff --git a/files/es/learn/css/howto/generated_content/index.html b/files/es/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..605e87f9e2
--- /dev/null
+++ b/files/es/learn/css/howto/generated_content/index.html
@@ -0,0 +1,178 @@
+---
+title: Usando CSS para generar contenido
+slug: Learn/CSS/Sábercomo/Generated_content
+tags:
+  - CSS
+  - Fundamentos
+  - Guía
+  - Principiante
+  - Web
+  - graficos
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<p>{{ CSSTutorialTOC() }}</p>
+
+<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.</p>
+
+<h2 class="clearLeft" id="Informacion_Contenido">Informacion: Contenido</h2>
+
+<p>Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.</p>
+
+<p>El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">
+<p>Más detalles</p>
+
+<p>Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.</p>
+
+<p>Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.</p>
+
+<p>El contenido especificado en una hoja de estilo no se convierte en parte del DOM.</p>
+</div>
+</div>
+
+<h3 id="Text_content" name="Text_content">Texto contenido</h3>
+
+<p>CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">Un texto donde necesito &lt;span class="ref"&gt;alguna cosa&lt;/span&gt;
+</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.ref::before {
+  font-weight: negrita;
+  color: navy;
+  content: "Reference: ";
+}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Mas detalles</div>
+
+<p>El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.</p>
+
+<p>Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.</p>
+</div>
+
+<h3 id="Imagen_contenido">Imagen contenido</h3>
+
+<p>Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:</p>
+
+<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+</pre>
+</div>
+
+<p>Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.</p>
+
+<div class="tuto_example">
+<div class="tuto_type">Ejemplo</div>
+
+<p>Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.</p>
+
+<p>El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:</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">Mas detalles</div>
+
+<p>Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.</p>
+</div>
+
+<h2 id="Acción_Añadir_una_imagen_de_fondo">Acción: Añadir una imagen de fondo</h2>
+
+<p>Esta imagen es un cuadrado blanco con una línea azul en la parte 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>Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).</li>
+ <li>Edit your CSS file and add this rule to the body, setting a background image for the entire page.</li>
+ <li>
+  <pre class="brush:css">background: url("Blue-rule.png");
+</pre>
+
+  <p>La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:</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">Reto</div>
+
+<p>Descarga esta imagen:</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>Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:</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">Ver la solución a este reto.</a></div>
+
+<h2 id="Qué_sigue">Qué sigue?</h2>
+
+<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">especificar estilos para una lista de elementos.</a></p>
diff --git a/files/es/learn/css/howto/index.html b/files/es/learn/css/howto/index.html
new file mode 100644
index 0000000000..ffff1653c0
--- /dev/null
+++ b/files/es/learn/css/howto/index.html
@@ -0,0 +1,81 @@
+---
+title: Usa CSS para resolver problemas comunes
+slug: Learn/CSS/Sábercomo
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.</p>
+
+<h2 id="Casos_de_uso_común">Casos de uso común</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Básicos">Básicos</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cómo aplicar CSS al 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">Cómo escribir comentarios en CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">Cómo seleccionar elementos mediante nombre del elemento, clase o ID</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">Cómo seleccionar elementos mediante nombre del atributo y contenido</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">Cómo usar pseudo-clases</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">Cómo usar pseudo-elementos</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">Cómo aplicar múltiples selectores a la misma regla</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">Cómo especificar colores en CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Cómo depurar CSS en el navegador</a></li>
+</ul>
+
+<h3 id="CSS_y_texto">CSS y texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Cómo dar estilo al texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Cómo personalizar una lista de elementos</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">Cómo dar estilo a links</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">Cómo agregar sombras al texto</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Cajas_y_diseños">Cajas y diseños</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Cómo redimensionar cajas CSS</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">Cómo controlar el contenido que desborda</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">Cómo controlar la parte de una caja CSS en la que se dibuja el fondo</a></li>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Cómo defino un elemento inline, block o 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_or_advanced_techniques">Uncommon or advanced techniques</h2>
+
+<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest 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>
+</ul>