initial commit

16 files changed, 3560 insertions, 0 deletions

diff --git a/files/es/learn/css/building_blocks/cascada_y_herencia/index.html b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html
new file mode 100644
index 0000000000..91a359181f
--- /dev/null
+++ b/files/es/learn/css/building_blocks/cascada_y_herencia/index.html
@@ -0,0 +1,333 @@
+---
+title: Cascada y herencia
+slug: Learn/CSS/Building_blocks/Cascada_y_herencia
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>El objetivo de este artículo es desarrollar la comprensión de algunos de los conceptos fundamentales de CSS (cascada, especificidad y herencia) que controlan cómo se aplica el CSS al HTML y cómo se resuelven los conflictos.</p>
+
+<p>A medida que avances en este apartado verás que puede resultar menos relevante y un poco más académico que otros artículos, pero la comprensión de estas cuestiones te ahorrará problemas más adelante. Te animamos a que trabajes meticulosamente este apartado y verifiques que entiendes los conceptos antes de continuar.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender qué son la cascada y la especificidad, y cómo funciona la herencia en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Reglas_conflictivas">Reglas conflictivas</h2>
+
+<p>CSS significa <strong> hojas de estilo en cascada</strong> (cascading style sheets), y es muy importante entender la palabra <em>cascada</em>. La forma en que se comporta la cascada es la clave para comprender el CSS.</p>
+
+<p>En algún momento trabajarás en un proyecto y encontrarás que el CSS que pensabas que debería aplicarse a un elemento no funciona. Por lo general, el problema suele ser que has creado dos normas que podrían aplicarse al mismo elemento. La <strong>cascada</strong>, y el concepto estrechamente relacionado de <strong>especificidad</strong> son mecanismos que controlan qué regla se aplica cuando aparecen tales conflictos. Es posible que la regla que se apliuca finalmente a tu elemento no sea la que esperas, por lo que debes comprender cómo funcionan estos mecanismos.</p>
+
+<p>También es significativo el concepto de <strong>herencia</strong>, que significa que algunas propiedades CSS heredan por defecto los valores establecidos en el elemento padre, pero otras no. Esto también puede causar una respuesta diferente a la que esperas.</p>
+
+<p>Vamos a empezar por echar un vistazo rápido a los principales elementos que nos interesan, y a continuación veremos cómo interactúan entre sí y con tu CSS. Pueden resultar un poco difíciles de entender, pero a medida que practiques escribiendo CSS te resultará más fácil de entender la manera cómo funcionan.</p>
+
+<h3 id="Cascada">Cascada</h3>
+
+<p>En un primer nivel de simplicidad, la <strong>cascada</strong> en las hojas de estilo significa que el orden de las reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que aparece en último lugar en el CSS.</p>
+
+<p>En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al <code>h1</code>. El <code>h1</code> acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Especificidad">Especificidad</h3>
+
+<p>La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la especificidad mide cuán específica es la selección de un selector:</p>
+
+<ul>
+ <li>Un selector de elemento es menos específico (selecciona todos los elementos de aquel tipo que aparecen en la página) por lo que presenta una puntuación más baja en especificidad.</li>
+ <li>Un selector de clase es más específico (selecciona solo los elementos de una página que tienen un valor de atributo <code>class</code> dado), y por tanto recibe una puntuación mayor.</li>
+</ul>
+
+<p>Veamos un ejemplo. Aquí abajo encontrarás dos reglas que pueden aplicarse al elemento <code>h1</code>. Este elemento <code>h1</code> termina siendo de color rojo: el selector de clase confiere a esta regla una mayor especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más abajo en el orden del código.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Profundizaremos en la especificidad más adelante.</p>
+
+<h3 id="Herencia">Herencia</h3>
+
+<p>La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.</p>
+
+<p>Por ejemplo, si para un elemento se establece el color (<code>color</code>) y el tipo de letra (<code>font-family</code>), cada elemento que se encuentre dentro de él también se mostrará de ese color y con ese tipo de letra, a menos que les se haya aplicado un color y un tipo de letra diferentes directamente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho {{cssxref("width")}} del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si este fuera el caso, ¡sería muy frustrante usar CSS!</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En las páginas de referencia de las propiedades CSS de MDN encontrarás un cuadro con información técnica (por lo general, en la parte inferior de la sección de especificaciones) que enumera una serie de puntos sobre cada propiedad, incluyendo cuáles se heredan y cuáles no. Véase, por ejemplo, la <a href="/es/docs/Web/CSS/color#Especificaciones">sección de especificaciones de la propiedad color</a>.</p>
+</div>
+
+<h2 id="Comprender_cómo_trabajan_juntos_estos_conceptos">Comprender cómo trabajan juntos estos conceptos</h2>
+
+<p>Estos tres conceptos controlan qué CSS se aplica a qué elemento. En las secciones siguientes veremos cómo funcionan en conjunto. A veces puede parecer un poco complicado, pero lo irás recordando a medida que ganes experiencia con el CSS, y siempre puedes consultar los detalles si se te olvidan. ¡Incluso los desarrolladores experimentados lo hacen!</p>
+
+<h2 id="Comprender_la_herencia">Comprender la herencia</h2>
+
+<p>Vamos a empezar con la herencia. En el ejemplo siguiente tenemos un elemento {{HTMLElement( "ul")}} con dos niveles de listas no ordenadas anidadas en él. Hemos establecido para el <code>&lt;ul&gt;</code> exterior un borde, un relleno y un color de fuente.</p>
+
+<p>El color se ha aplicado a los hijos directos y también a los hijos indirectos: los elementos hijo <code>&lt;li&gt;</code> inmediatos y los que están dentro de la primera lista. A continuación, hemos añadido a la segunda lista anidada una clase especial y le hemos aplicado un color diferente, que los elementos hijo de esta heredarán.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>La anchura (como se mencionó anteriormente), los márgenes, el relleno y los bordes no se heredan. Si los elementos hijo de nuestra lista heredaran los bordes, todas las listas y los elementos de lista ganarían un borde cada vez ¡y no es probable que vez quieras un efecto así!</p>
+
+<p>Las propiedades que se heredan por defecto y las que no son cuestión, en gran medida, de sentido común.</p>
+
+<h3 id="Control_de_la_herencia">Control de la herencia</h3>
+
+<p>CSS proporciona cuatro valores de propiedad universales especiales para el control de la herencia. Todas las propiedades CSS aceptan estos valores.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Establece que el valor de la propiedad que se aplica a un elemento determinado sea exactamente igual al del elemento padre. En la práctica, esto "activa la herencia".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Establece que el valor de la propiedad que se aplica a un elemento seleccionado tenga el mismo valor que esté establecido para esa propiedad en la hoja de estilo por defecto del navegador.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Restablece la propiedad a su valor natural, lo que significa que si la propiedad se hereda de forma natural, actúa como <code>inherit</code>, y en caso contrario como <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También hay un valor más reciente, {{cssxref ("revert")}}, que todavía admiten pocos navegadores.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Véase la sección <a href="/en-US/docs/Web/CSS/Cascade#Origin_of_CSS_declarations" title="Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.">El origen de las declaraciones CSS</a> en el artículo <a href="/en-US/docs/Web/CSS/Cascade" title=" Este artículo explica qué es la cascada, el orden de la secuencia en cascada de las declaraciones CSS, y cómo esto afecta al desarrollador web.">Introducción al concepto de cascada en CSS </a> para obtener más información sobre cada uno de estos valores y el modo en que funcionan.</p>
+</div>
+
+<p>A continuación veremos una lista de enlaces y exploraremos cómo funcionan los valores universales. El ejemplo en vivo de abajo te permite jugar con el CSS y ver lo que sucede cuando se hacen cambios. Jugar con el código es la mejor forma de enfrentarse al HTML y el CSS.</p>
+
+<p>Por ejemplo:</p>
+
+<ol>
+ <li>Se ha aplicado la clase <code>my-class-1</code> al segundo elemento de lista. Esto establece por herencia el color del elemento <code>&lt;a&gt;</code> que está anidado en él. ¿Cómo cambia el color del enlace si quitamos esta regla?</li>
+ <li>¿Entiendes por qué el tercer y el cuarto enlace se ven de este color? En caso contrario, comprueba la descripción de los valores anteriores.</li>
+ <li>¿Cuál de los enlaces va a cambiar de color si se define un nuevo color para el elemento <code>&lt;a&gt;</code>, por ejemplo, <code>a { color: red; }</code>?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Restablecer_todos_los_valores_de_propiedad">Restablecer todos los valores de propiedad</h3>
+
+<p>La propiedad CSS abreviada <code>all</code> se puede utilizar para aplicar uno de estos valores de herencia a (casi) todas las propiedades a la vez. Su valor puede ser cualquiera de los valores de herencia (<code>inherit</code>, <code>initial</code>, <code>unset</code>, o <code>revert</code>). Es una forma práctica de deshacer los cambios realizados respecto al estilo para que puedas volver a un punto de partida conocido antes de empezar a introducir cambios.</p>
+
+<p>En el ejemplo siguiente hay dos bloques de cita. El primero ya tiene un estilo aplicado al propio elemento de cita, mientras que el segundo tiene una clase aplicada al bloque de cita que establece el valor <code>all</code> en <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Prueba a establecer el valor de <code>all</code> al resto de valores disponibles y observa la diferencia.</p>
+
+<h2 id="Comprender_la_cascada">Comprender la cascada</h2>
+
+<p>Ahora entendemos por qué un párrafo que está anidado en la estructura del HTML es del mismo color que el CSS aplicado al cuerpo (<code>body</code>) del HTML y, a partir de los artículos de introducción sabemos cómo cambiar el CSS aplicado a algo en cualquier parte del documento, ya sea mediante la asignación de CSS a un elemento o la creación de una clase. Ahora vamos a echar un vistazo a la forma en que el concepto de cascada define qué reglas CSS se aplican cuando más de un elemento de estilo puede aplicar estilo a un elemento.</p>
+
+<p>Hay que considerar tres factores, que se enumeran a continuación en orden de importancia creciente. Los posteriores invalidan los anteriores:</p>
+
+<ol>
+ <li><strong>Orden en el código</strong></li>
+ <li><strong>Especificidad</strong></li>
+ <li><strong>Importancia</strong></li>
+</ol>
+
+<p>Vamos a explicarlos para ver cómo los navegadores determinan exactamente que CSS deben aplicar.</p>
+
+<h3 id="Orden_en_el_código">Orden en el código</h3>
+
+<p>Ya hemos visto cómo el orden en el código es importante en el concepto de cascada. Si tienes más de una regla con exactamente el mismo peso, la que ocupa el último lugar en el CSS gana. Puedes entenderlo como que las reglas que están más cerca del elemento considerado sobreescriben las anteriores hasta que la última gana y da formato al elemento.</p>
+
+<h3 id="Especificidad_2">Especificidad</h3>
+
+<p>Una vez entendido el hecho de que el orden de los elementos en el código es importante, te encontrarás en alguna situación en la que sabes cuál es la última norma en la hoja de estilo, pero se aplica una regla anterior. Esto se debe a que la regla anterior tiene <strong>una especificidad mayor</strong>, es decir, es más específica y, por lo tanto, el navegador la escoge como la que debe dar forma al elemento.</p>
+
+<p>Como hemos visto anteriormente en este mismo artículo, un selector de clase tiene más peso que un selector de elemento, por lo que las propiedades que se definen en la clase tienen prioridad sobre las que se aplican directamente en el elemento.</p>
+
+<p>Un elemento que hay que tener en cuenta es que aunque pensamos en términos de selectores y reglas que se aplican a lo que estos seleccionan, no es toda la regla lo que se sobrescribe, sino solo las propiedades que entran en conflicto.</p>
+
+<p>Este comportamiento ayuda a evitar repeticiones en el CSS. Una práctica común es definir estilos genéricos para los elementos básicos y luego, crear clases para los elementos que son diferentes. Por ejemplo, en la hoja de estilo que mostramos a continuación hemos definido estilos genéricos para los encabezados de nivel 2; posteriormente hemos creado algunas clases que solo cambian algunas de las propiedades y los valores. Los valores definidos inicialmente se aplican a todos los encabezados, y entonces los valores más específicos se aplican a los encabezados con las clases.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Ahora vamos a echar un vistazo a cómo el navegador calcula la especificidad. Ya sabemos que un selector de elemento tiene una especificidad baja y se puede sobrescribir con un elemento de clase. Esencialmente se otorga un valor de puntos a los diferentes tipos de selectores y la suma de estos establece la importancia de ese selector en particular, que a continuación puede evaluarse ante otras posibles coincidencias.</p>
+
+<p>La cantidad de especificidad de un selector se mide usando cuatro valores diferentes (o componentes), que pueden describirse como millares, centenas, decenas y unidades (cuatro dígitos individuales dispuestos en cuatro columnas):</p>
+
+<ol>
+ <li><strong>Millares</strong>: Se suma un punto en esta columna si la declaración está en un atributo de {{htmlattrxref ("style")}} o, como suelen denominarse, estilos en línea. Tales declaraciones no tienen selectores, por lo que su especificidad siempre es 1000.</li>
+ <li><strong>Centenas</strong>: Se suma un punto en esta columna por cada selector con ID particular que esté contenido en el selector general.</li>
+ <li><strong>Decenas</strong>: Se suma un punto en esta columna por cada selector de clase, de atributo o pseudoclase que estén contenidos en el selector general.</li>
+ <li><strong>Unidades</strong>: Se suma un punto en esta columna por cada selector o pseudoelemento que esté contenido en el selector general.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: El selector universal (<code>*</code>), los operadores de combinación (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' ') y la pseudo-clase de negación (<code>:not</code>) no tienen ningún efecto sobre la especificidad.</p>
+</div>
+
+<p>La tabla siguiente muestra algunos ejemplos concretos para ayudarte a entenderlo mejor. Analízalos y trata de entender por qué tienen la especificidad que les hemos dado. Aun no hemos explicado los selectores de forma detallada, pero puedes encontrar detalles de cada selector en los <a href="/es/docs/Web/CSS/Selectores_CSS">selectores de referencia</a> de MDN.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Millares:</th>
+   <th scope="col">Centenas:</th>
+   <th scope="col">Decenas:</th>
+   <th scope="col">Unidades:</th>
+   <th scope="col">Especificidad total</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>Sin selector, con una regla en el atributo de un elemento {{htmlattrxref("style")}}</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Antes de continuar, vamos a ver un ejemplo:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>¿Qué pasa aquí? En primer lugar, estamos interesados solo en las primeras siete reglas de este ejemplo y, como te habrás dado cuenta, hemos incluido sus valores de especificidad en un comentario antes de cada una.</p>
+
+<ul>
+ <li>Los dos primeros selectores compiten sobre el estilo del color del fondo del vínculo (el segundo gana y por eso el color de fondo es azul, porque en la cadena hay un selector con ID particular extra: la especificidad es de 201 contra 101).</li>
+ <li>El tercer y el cuarto selector compiten sobre el estilo del color del texto del enlace (el segundo gana y hace que el texto sea blanco porque, aunque tiene un selector de elemento de menos, el selector que falta se sustituye por un selector de clase, con un valor de decena en vez de un valor de unidad). Así que la especificidad es de 113 contra 104.</li>
+ <li>Los selectores 5-7 compiten por el estilo del borde del vínculo cuando el cursor se desplaza sobre estos. El sexto selector pierde claramente ante el quinto con una especificidad de 23 contra 24. En la cadena hay un selector de elemento de menos. El séptimo selector, sin embargo, los supera a ambos: en la cadena hay el mismo número de estos subselectores que en el quinto, pero se ha intercambiado un elemento por un selector de clase. Así que la especificidad es de 33 contra 23 y 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Esto solo es un ejemplo aproximado para facilitar la comprensión. En realidad, cada tipo de selector tiene su nivel de especificidad propio, que no pueden sobrescribir los selectores con un nivel de especificidad menor. Por ejemplo, un <em>millar</em> de selectores de <strong>clase</strong> combinados no serían capaces de sobrescribir las reglas de <em>un</em> selector <strong>ID</strong>.</p>
+
+<p>Una forma más precisa de evaluar la especificidad sería anotar los niveles de especificidad individualmente de mayor a menor. Solo cuando hay empate entre las puntuaciones de los selectores dentro de un nivel especifico será necesario evaluar el nivel inferior siguiente; de lo contrario, puedes prescindir de los selectores de especificidad de los niveles inferiores, ya que nunca pueden sobrescribir los niveles de especificidad más altos.</p>
+</div>
+
+<h3 id="Propiedad_!important">Propiedad <code>!important</code></h3>
+
+<p>Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: <code>!important</code>. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.</p>
+
+<p>Echa un vistazo a este ejemplo en el que se muestran dos párrafos, uno de los cuales tiene un elemento ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Vamos a observarlo con detenimiento para ver qué sucede. Elimina algunas de las propiedades para ver lo que sucede si te cuesta entender lo que ocurre:</p>
+
+<ol>
+ <li>Verás que se han aplicado los valores de {{cssxref("color")}} y {{cssxref("padding")}} de la tercera regla pero no el de {{cssxref("background-color")}}. ¿Por qué? Deberían haberse aplicado para los tres porque las reglas que se encuentran más adelante en el orden en el código fuente prevalecen sobre las reglas anteriores.</li>
+ <li>Sin embargo, ganan las reglas que están antes porque los selectores de clase tienen mayor especificidad que selectores de elemento.</li>
+ <li>En ambos bloques de código hay una clase {{htmlattrxref("class")}} con el valor <code>better</code>, pero en el segundo bloque de código hay un {{htmlattrxref("id")}} con el valor <code>winning</code>. Puesto que los identificadores tienen una especificidad <em>incluso mayor</em> que las clases (solo puede haber un elemento con un determinado ID en cada página, mientras que puede haber muchos elementos de la misma clase: los selectores ID son <em>muy específicos</em> con lo que delimitan), el primer bloque de código tendría un fondo de color gris y ningún borde, según lo que especifica la clase, mientras que al segundo bloque de código se aplicarían tanto el color de fondo rojo como el borde negro de 1 píxel.</li>
+ <li>El segundo elemento, en cambio, se muestra con el fondo de color rojo pero sin borde. ¿Por qué? Porque la declaración <code>!important</code> que hay en la segunda regla, después de <code>border: none</code> significa que esta declaración tendrá más valor que la regla anterior, aunque el ID de esta tenga mayor especificidad.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: La única manera de anular la declaración <code>!important</code> sería incluir otra declaración <code>!important</code> en una declaración con la <em>misma especificidad</em> que aparezca más adelante en el orden del código fuente, o con una especificidad superior.</p>
+</div>
+
+<p>Es útil saber que <code>!important</code> existe para que sepas qué es cuando te lo encuentres en el código de otras personas. <strong>Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario.</strong> <code>!important</code> cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.</p>
+
+<p>Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.</p>
+
+<h2 id="El_efecto_de_la_ubicación_del_CSS">El efecto de la ubicación del CSS</h2>
+
+<p>Por último, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Las declaraciones contradictorias se aplicarán en el orden siguiente (recuerda que las últimas prevalecen sobre las anteriores):</p>
+
+<ol>
+ <li>Declaraciones en las hojas de estilo de agente de usuario (por ejemplo, estilos predeterminados del navegador, que se utilizan cuando no hay otro estilo).</li>
+ <li>Declaraciones normales en las hojas de estilo del usuario (estilos personalizados creados por un usuario).</li>
+ <li>Declaraciones normales en las hojas de estilo de autor (los estilos que creamos nosotros, los desarrolladores web).</li>
+ <li>Declaraciones <code>!important</code> en las hojas de estilo de autor</li>
+ <li>Declaraciones <code>!important</code> en las hojas de estilo del usuario</li>
+</ol>
+
+<p>Para los desarrolladores tiene sentido que sus hojas de estilo anulen a las de usuario para mantener el diseño según lo previsto, pero, como hemos visto, a veces los usuarios tienen buenas razones para anular las directrices de los desarrolladores web. Esto puede lograrse con el uso de <code>!important</code> en sus reglas.</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa einformación en <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_tasks">Test your skills: the Cascade</a>.</p>
+
+<h2 id="¿Qué_sigue">¿Qué sigue?</h2>
+
+<p>Si has entendido la mayor parte de este artículo, ¡enhorabuena! Has comenzado a familiarizarte con la mecánica fundamental del CSS. En el artículo siguiente vamos a ver con detalle los selectores.</p>
+
+<p>Si todavía no tienes una comprensión completa de los conceptos de cascada, especificidad y herencia, ¡no te preocupes! Es, sin duda, lo más complejo que hemos expuesto hasta ahora y es algo que incluso los desarrolladores web profesionales encuentran difícil. Te aconsejamos que regreses a este artículo cuantas veces necesites a medida que avances con el curso.</p>
+
+<p>Regresa a esta página si empiezas a toparte con problemas extraños o con que los estilos no se aplican de la forma que esperas. Podría ser un problema de especificidad.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudo-clases y los pseudo-elementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/contenido_desbordado/index.html b/files/es/learn/css/building_blocks/contenido_desbordado/index.html
new file mode 100644
index 0000000000..808a519c12
--- /dev/null
+++ b/files/es/learn/css/building_blocks/contenido_desbordado/index.html
@@ -0,0 +1,123 @@
+---
+title: Contenido desbordado
+slug: Learn/CSS/Building_blocks/Contenido_desbordado
+translation_of: Learn/CSS/Building_blocks/Overflowing_content
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo veremos otro concepto importante en CSS: el <strong>desbordamiento</strong>. El desbordamiento es lo que sucede cuando hay demasiado contenido para que pueda caber cómodamente en una caja. En esta guía aprenderás qué es y cómo administrarlo.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender el desbordamiento y cómo gestionarlo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_el_desbordamiento">¿Qué es el desbordamiento?</h2>
+
+<p>Ya sabemos que todo en CSS está dentro de una caja, y que podemos restringir el tamaño de estas cajas asignándoles los valores {{cssxref ("width")}} y {{cssxref ("height")}} (o {{cssxref("inline-size")}} y {{cssxref("block-size")}}). <strong>El desbordamiento es lo que sucede cuando hay demasiado contenido en una caja, y no cabe cómodamente en ella.</strong> El CSS te proporciona varias herramientas para administrar este desbordamiento, y además es un concepto que resulta útil de conocer desde las primeras etapas. Te encontrarás con situaciones de desbordamiento con bastante frecuencia al escribir CSS, especialmente cuando profundices en compaginación con CSS.</p>
+
+<h2 id="El_CSS_trata_de_evitar_«la_pérdida_de_datos»">El CSS trata de evitar «la pérdida de datos»</h2>
+
+<p>Vamos a comenzar con dos ejemplos que demuestran cómo se comporta el CSS por defecto cuando ocurre un desbordamiento.</p>
+
+<p>El primero consiste en una caja que a la que se le ha restringido la dimensión al darle una altura. Luego hemos añadido más contenido del que cabe en la caja. El contenido se desborda y se distribuye desordenadamente sobre el párrafo que hay debajo de la caja.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+
+<p>El segundo consiste en una palabra dentro de una caja cuya dimensión en línea está restringida. La caja se ha hecho demasiado pequeña para que esa palabra quepa, y se desborda.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+
+<p>Te debes estar preguntando por qué el CSS ha tomado por defecto el enfoque más bien desarreglado de provocar el desbordamiento desordenado del contenido. ¿Por qué no ocultar el contenido adicional o hacer crecer la caja?</p>
+
+<p>Siempre que sea posible, el CSS no oculta su contenido; hacerlo provocaría la pérdida de datos, que generalmente es un problema. En términos de CSS, esto significa que una parte del contenido desaparece. El problema con que desaparezca contenido es que podría ser que no notaras que ha desaparecido. Tus visitantes podrían no darse cuenta de que ha desaparecido contenido. Si se trata del botón de envío de datos en un formulario, nadie podría completar el formulario, y ¡eso es un gran problema! Así que, en vez de esto, el CSS tiende a desbordarse de un modo que sea visible. Es probable que te des cuenta de ese desarreglo, o en el peor de los casos, que un visitante de tu sitio web te informe de que una parte del contenido se superpone y debas arreglarlo.</p>
+
+<p>Si has restringido el tamaño de una caja con una anchura o una altura determinadas, el CSS asume que sabes lo que haces y que gestionas correctamente el potencial de desbordamiento. En general, restringir el tamaño de un bloque es problemático cuando el texto se va a poner en una caja, porque puede haber más texto del que te esperabas al diseñar el sitio o el tamaño del texto puede ser mayor, por ejemplo, si el usuario lo aumenta.</p>
+
+<p>En los artículos siguientes veremos diferentes modos de controlar el tamaño que podrían ser menos propensos a desbordarse. Sin embargo, si necesitas un tamaño fijo, también puedes controlar cómo se comporta el desbordamiento. ¡Sigue leyendo!</p>
+
+<h2 id="La_propiedad_overflow">La propiedad <code>overflow</code></h2>
+
+<p>La propiedad {{cssxref ("overflow")}} es el modo como tomas el control del desbordamiento de un elemento y le dices al navegador cómo desea que se comporte. El valor predeterminado para la propiedad <code>overflow</code> es <code>visible</code>, por lo que, de forma predeterminada vamos a poder ver cuándo se desborda nuestro contenido.</p>
+
+<p>Si deseas cortar el contenido cuando se desborda, puedes establecer el valor <code>overflow: hidden</code> en tu caja, que hace exactamente lo que dice: ocultar el desbordamiento. Esto puede hacer que las cosas desaparezcan, por lo que solo debes utilizar esta opción si ocultar contenido no te va a causar ningún problema.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+
+<p>Quizás te gustaría añadir barras de desplazamiento cuando el contenido se desborde. Si usas <code>overflow: scroll</code>, tu navegador siempre mostrará barras de desplazamiento, incluso cuando no haya suficiente contenido para que pueda desbordarse. Es posible que desees hacer esto, porque evita que aparezcan y desaparezcan barras de desplazamiento según el contenido.</p>
+
+<p><strong>Si en la caja siguiente eliminas parte del contenido, observarás que las barras de desplazamiento permanecen aun sin que haya nada que desplazar (o, como mucho, solo las pistas de la barra de desplazamiento).</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+
+<p>En el ejemplo anterior solo necesitamos desplazarnos en el eje <code>y</code>, sin embargo, obtenemos barras de desplazamiento en ambos ejes. En su lugar, puedes usar la propiedad {{cssxref ("overflow-y")}}, y establecer <code>overflow-y: scroll</code> para poder desplazarte solo por el eje <em>y</em>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+
+<p>También puedes desplazarte por el eje <em>x</em> usando {{cssxref ("overflow-x")}}, aunque esta no es una forma recomendada para manejar palabras largas. Si necesitas lidiar con una palabra larga en una caja pequeña, puedes consultar las propiedades {{cssxref ("word-break")}} o {{cssxref ("overflow-wrap")}}. Además, algunos de los métodos expuestos en el artículo <a href="/es/docs/Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS">Elementos de dimensionado en CSS</a> pueden ayudarte a crear cuadros que se adapten mejor a cantidades variables de contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+
+<p>Al igual que con el desplazamiento, obtendrás una barra de desplazamiento en la dimensión de desplazamiento independientemente de si hay suficiente contenido para provocar una barra de desplazamiento.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: observa que puedes especificar un desplazamiento en <em>x</em> y en <em>y</em> utilizando la propiedad <code>overflow</code> y pasando dos valores. Si especificas dos palabras clave, la primera se aplica a <code>overflow-x</code> y la segunda a <code>overflow-y</code>. De lo contrario, tanto <code>overflow-x</code> como <code>overflow-y</code> se fijan en el mismo valor. Por ejemplo, <code>overflow: scroll hidden</code> establece <code>overflow-x</code> en <code>scroll</code> y <code>overflow-y</code> en <code>hidden</code>.</p>
+</div>
+
+<p>Si deseas que aparezcan barras de desplazamiento solo si hay más contenido del que cabe en la caja, utiliza <code>overflow: auto</code>. En este caso, el navegador decide si muestra las barras de desplazamiento o no. Los navegadores de escritorio solo suelen hacerlo cuando hay contenido suficiente para causar desbordamiento.</p>
+
+<p><strong>En el ejemplo siguiente, elimina parte del contenido hasta que quepa en la caja y observarás que las barras de desplazamiento desaparecen.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+
+<h2 id="overflow_establece_un_contexto_de_formato_de_bloque"><code>overflow</code> establece un contexto de formato de bloque</h2>
+
+<p>En CSS hay un concepto conocido como <strong>block formatting context</strong> o BFC (<em>contexto de formato de bloque</em>). No es algo de lo que debas preocuparte demasiado en este momento, pero es útil saber que cuando usas un valor de <code>overflow</code>, como <code>scroll</code> o <code>auto</code>, creas un BFC. El resultado es que el contenido de la caja al que acabas de cambiar el valor <code>overflow</code> se convierte en un minidiseño propio. Las cosas que están fuera del contenedor no pueden meterse en él, y nada puede sobresalir de esa caja hacia el diseño circundante. Esto es para permitir un comportamiento con desplazamiento, porque para poder crear una experiencia de desplazamiento consistente todo el contenido de tu caja ha de estar contenido en algo, y no puede superponerse con otros elementos de la página.</p>
+
+<h2 id="Desbordamiento_no_deseado_en_diseño_web">Desbordamiento no deseado en diseño web</h2>
+
+<p>Los métodos de diseño modernos (explicados en el módulo <a href="/es/docs/Learn/CSS/CSS_layout">Diseñar con el CSS</a>) gestionan muy bien el desbordamiento. Han sido diseñados para hacer frente al hecho de que tendemos a no poder predecir cuánto contenido habrá en la web. Sin embargo, en el pasado, los desarrolladores a menudo usaban alturas fijas para tratar de alinear los fondos de cajas que en realidad no tenían relación entre sí. Este método era frágil y, en una aplicación heredada, ocasionalmente puede aparecer una caja en que el contenido se superpone a otro contenido de la página. Si ves esto, sabrás que se trata de desbordamiento. Lo ideal sería volver a calcular el diseño para no tener que confiar tamaños de caja fijos.</p>
+
+<p>Al desarrollar un sitio web, siempre debes tener en cuenta los problemas de desbordamiento. Debes probar diseños con cantidades grandes y pequeñas de contenido, aumentar el tamaño de letra... y asegurarte de que tu CSS puede hacerle frente sin ningún problema. Es probable que cambiar el valor de <code>overflow</code> para ocultar contenido o añadir barras de desplazamiento sea algo que debas reservar solo para unos pocos casos especiales, en que realmente desees una caja con barra de desplazamiento, por ejemplo.</p>
+
+<h2 id="Pon_a_prueba_tus_conocimientos">Pon a prueba tus conocimientos</h2>
+
+<p>Hay mucho que absorber en esta lección. ¿Recuerdas la información más importante? Para comprobarlo, ve a <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Test your skills: overflow</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este breve artículo ha introducido el concepto de desbordamiento; ahora comprendes que el CSS intenta no hacer invisible el desbordamiento de contenido, porque esto provoca la pérdida de datos. Has descubierto que puedes gestionar el desbordamiento potencial y también que debes probar tu trabajo para asegurarte de que no causa un desbordamiento problemático accidentalmente.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores y unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilo de las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/depurar_el_css/index.html b/files/es/learn/css/building_blocks/depurar_el_css/index.html
new file mode 100644
index 0000000000..5f04fdd756
--- /dev/null
+++ b/files/es/learn/css/building_blocks/depurar_el_css/index.html
@@ -0,0 +1,198 @@
+---
+title: Depurar el CSS
+slug: Learn/CSS/Building_blocks/Depurar_el_CSS
+translation_of: Learn/CSS/Building_blocks/Debugging_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Al escribir CSS te puedes encontrar que, a veces, alguna parte de tu CSS no hace lo que esperas. Tal vez creas que cierto selector debería coincidir con un elemento, pero no sucede nada; o una caja tiene un tamaño diferente al que esperabas. Este artículo te orientará sobre cómo solucionar un problema de CSS y te mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarte a descubrir qué sucede.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los conceptos básicos de las DevTools que hay en los navegadores y de cómo inspeccionar y editar el CSS de un modo fácil.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cómo_acceder_a_las_DevTools_de_los_navegadores">Cómo acceder a las DevTools de los navegadores</h2>
+
+<p>El artículo <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">¿Qué son las herramientas de desarrollo de los navegadores?</a> es una guía actualizada que explica cómo acceder a las herramientas en varios navegadores y plataformas. Si bien puedes optar por desarrollar principalmente en un navegador en particular y, por lo tanto, te familiarizarás más con las herramientas incluidas en ese navegador, vale la pena saber cómo acceder a ellas en otros navegadores. Esto ayudará si haces pruebas de las representaciones que dan diferentes navegadores.</p>
+
+<p>También te darás cuenta de que los diversos navegadores han optado por centrarse en áreas diferentes al crear sus DevTools. Por ejemplo, en Firefox hay algunas herramientas excelentes para trabajar visualmente con la compaginación con CSS, que te permiten inspeccionar y editar <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Compaginaciones de cuadrícula</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> y <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">formas</a>. Sin embargo, todos los navegadores tienen herramientas fundamentales similares. Por ejemplo, para inspeccionar las propiedades y los valores que se aplican a los elementos de tu página, y hacer cambios desde el editor.</p>
+
+<p>En este artículo veremos algunas características útiles de Firefox DevTools para trabajar con CSS. Para hacerlo, usaremos <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">un archivo de ejemplo</a>. Carga esto en una pestaña nueva si deseas seguir adelante y abre tus DevTools como se describe en el artículo del enlace anterior.</p>
+
+<h2 id="El_DOM_y_View_Source">El DOM y "View Source"</h2>
+
+<p>Algo que puede hacer tropezar a los recién llegados a DevTools es la diferencia entre lo que ves cuando <a href="/es/docs/Tools/View_source">miras el código fuente</a> de una página web, o miras el archivo HTML que colocas en el servidor, y lo que puedes ver en la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_HTML">ventana HTML</a> de DevTools. Aunque ves más o menos lo mismo que puedes ver desde View Source (Ver código fuente de la página), hay algunas diferencias.</p>
+
+<p>En el DOM procesado, el navegador puede haber corregido algunos HTML mal escritos por ti. Si cerraste un elemento incorrectamente, por ejemplo, por abrir con un <code>&lt;h2&gt;</code> y cerrar con un <code>&lt;/h3&gt;</code>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <code>&lt;h2&gt;</code> de apertura correctamente con un <code>&lt;/h2&gt;</code>. El navegador también normaliza todo el HTML, y el DOM también muestra los cambios que hace JavaScript.</p>
+
+<p>En comparación, View Source es simplemente el código fuente HTML tal como está almacenado en el servidor. El <a href="/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_HTML#%C3%81rbol_HTML">árbol HTML</a> de tus DevTools muestra exactamente lo que el navegador representa en un momento dado, y te da una idea de lo que sucede en realidad.</p>
+
+<h2 id="Inspección_del_CSS_aplicado">Inspección del CSS aplicado</h2>
+
+<p>Selecciona un elemento de tu página, ya sea haciendo clic con el botón derecho o pulsando la tecla ctrl para seleccionar la opción <em>Inspect</em>, o seleccionándolo del árbol HTML que hay a la izquierda de la pantalla de la interfaz DevTools. Selecciona el elemento con la clase <code>box1</code>; este es el primer elemento de la página con una caja alrededor.</p>
+
+<p><img alt="La página de ejemplo para este tutorial con DevTools abiertas." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+
+<p>Si observasla  <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS">vista de reglas</a>, que está a la derecha de tu HTML, deberías poder ver las propiedades y los valores CSS aplicados sobre ese elemento. Verás las reglas aplicadas directamente a la clase <code>box1</code> y también el CSS que la caja hereda de su elemento padre, en este caso <code>&lt;body&gt;</code>. Esto es útil para cuando ves que se aplica un CSS que no esperabas. Tal vez se esté heredando de un elemento padre y necesites añadir una regla para sobrescribirlo en el contexto de este elemento.</p>
+
+<p>También es útil la capacidad de expandir las propiedades abreviadas. En nuestro ejemplo se usa la abreviación <code>margin</code>.</p>
+
+<p><strong>Haz clic en la pequeña flecha para expandir la vista, que muestra las diferentes propiedades sin abreviar y sus valores.</strong></p>
+
+<p><strong>Puedes activar y desactivar los valores en la vista de reglas, cuando ese panel esté activo; si mantienes el ratón sobre él, aparecerán casillas de verificación. Desmarca la casilla de verificación de una regla, por ejemplo <code>border-radius</code>, y el CSS dejará de aplicarse.</strong></p>
+
+<p>Puedes usar esto para hacer una comparación entre A y B, decidir si algo se ve mejor con una regla aplicada o sin aplicar, y también para ayudar a depurarlo. Por ejemplo, si un diseño falla e intentas determinar qué propiedad causa el problema.</p>
+
+<h2 id="Editar_valores">Editar valores</h2>
+
+<p>Además de activar y desactivar las propiedades, puedes editar sus valores. ¿Quieres ver si quizá otro color se ve mejor, o deseas modificar algún tamaño? Las DevTools pueden ahorrarte mucho tiempo a la hora de editar una hoja de estilo y volver a cargar la página.</p>
+
+<p><strong>Selecciona <code>box1</code> y haz clic en la muestra (el pequeño círculo de color) que muestra el color aplicado al borde. Se abrirá un selector de color y puedes probar con colores diferentes, que se actualizarán en tiempo real en la página. De manera similar puedes cambiar el ancho o el estilo del borde.</strong></p>
+
+<p><img alt="Ventana de aplicación de estilos de DevTools con un selector de color abierto." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+
+<h2 id="Añadir_una_propiedad_nueva">Añadir una propiedad nueva</h2>
+
+<p>Puedes añadir propiedades usando las DevTools. ¿Te has dado cuenta de que quizá no quieres que tu caja herede el tamaño de letra del elemento <code>&lt;body&gt;</code> y quieres establecer tu propio tamaño de letra específico? Pruébalo en DevTools antes de añadirlo a tu archivo CSS.</p>
+
+<p><strong>Puedes hacer clic en la llave de cierre de la regla para comenzar a introducir una declaración nueva, y en ese momento puedes comenzar a escribir la nueva propiedad y DevTools te mostrará una lista de propiedades coincidentes que se completará automáticamente. Después de seleccionar <code>font-size</code>, introduce el valor que deseas probar. También puede hacer clic en el botón + para añadir una regla adicional con el mismo selector y tus reglas nuevas.</strong></p>
+
+<p><img alt="La ventana DevTools, que añade una propiedad nueva a las reglas, con el autocompletado para font-open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También hay otras funciones útiles en la vista de reglas; por ejemplo, las declaraciones con valores no válidos están tachadas. Puedes obtener más información en <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a>.</p>
+</div>
+
+<h2 id="Comprender_el_modelo_de_cajas">Comprender el modelo de cajas</h2>
+
+<p>En artículos anteriores hemos expuesto el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de cajas</a>, y el hecho de que tengamos un modelo de cajas alternativo que cambia la forma en que se calcula el tamaño de los elementos en función del tamaño que les asignas, más el relleno y los bordes. Las DevTools realmente pueden ayudarte a comprender cómo se calcula el tamaño de un elemento.</p>
+
+<p><a href="/es/docs/Tools/Page_Inspector/UI_Tour#Panel_CSS">El panel de disposición</a> muestra un diagrama del modelo de cajas en el elemento seleccionado, junto con una descripción de las propiedades y los valores que cambian la forma en que el elemento se presenta. Esto incluye una descripción de las propiedades que puedes no haber utilizado explícitamente en el elemento, pero que tienen valores iniciales establecidos.</p>
+
+<p>En esta ventana, una de las propiedades que se detallan es la propiedad <code>box-sizing</code>, que controla qué modelo de cajas usa el elemento.</p>
+
+<p><strong>Compara las dos cajas con las clases <code>box1</code> y <code>box2</code>. Ambas tienen el mismo ancho aplicado (400 px), sin embargo, <code>box1</code> es visualmente más ancha. En la ventana de diseño puedes ver que usa <code>content-box</code>. Este es el valor que toma el tamaño que asignas al elemento y luego añade el área de relleno y el ancho del borde.</strong></p>
+
+<p>El elemento con una clase <code>box2</code> usa <code>border-box</code>, por lo que aquí el área de relleno y el borde se restan del tamaño que has asignado al elemento. Esto significa que el espacio que la caja ocupa en la página es el tamaño exacto que se ha especificado, en nuestro caso <code>width: 400px</code>.</p>
+
+<p><img alt="La ventana de diseño de DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Descubre más en <a href="/es/docs/Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel">Examinar e inspeccionar el modelo de cajas</a>.</p>
+</div>
+
+<h2 id="Resolver_problemas_de_especificidad">Resolver problemas de especificidad</h2>
+
+<p>A veces, durante el desarrollo, pero en particular cuando necesitas editar el CSS de un sitio ya publicado, te resultará difícil conseguir que se aplique un determinado CSS. No importa lo que hagas, el elemento simplemente no parece aceptar tu CSS. Lo que suele suceder aquí es que un selector más específico anula tus cambios, y en este caso DevTools te será de gran ayuda.</p>
+
+<p>En nuestro archivo de ejemplo hay dos palabras incluidas en un elemento <code>&lt;em&gt;</code>. Uno se muestra en color naranja y el otro en rosa. En el CSS hemos aplicado:</p>
+
+<pre class="brush: css notranslate">em {
+  color: hotpink;
+  font-weight: bold;
+}</pre>
+
+<p>Sin embargo, un poco más arriba en la hoja de estilo hay una regla con un selector <code>.special</code>:</p>
+
+<pre class="brush: css notranslate">.special {
+  color: orange;
+}</pre>
+
+<p>Como recordarás del artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia"> cascada y herencia</a>, en que hablamos sobre la especificidad, los selectores de clase son más específicos que los selectores de elemento, por lo que este es el valor que se aplica. DevTools puede ayudarte a encontrar estos problemas, especialmente si la información está oculta en algún lugar de una extensa hoja de estilo.</p>
+
+<p><strong>Inspecciona <code>&lt;em&gt;</code> con la clase <code>.special</code> y DevTools te mostrará que el naranja es el color que se aplica, y también te muestra la propiedad <code>color</code> aplicada al em tachado. Aquí puedes ver que la clase anula el selector de elemento.</strong></p>
+
+<p><img alt="Selecciona un em y mira en DevTools qué solapa el color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+
+<h2 id="Descubre_más_sobre_las_DevTools_de_Firefox">Descubre más sobre las DevTools de Firefox</h2>
+
+<p>Hay mucha información aquí en MDN sobre las DevTools de Firefox. Echa un vistazo a la <a href="/es/docs/Tools">sección principal de las DevTools</a>, y consulta las <a href="/es/docs/Tools/Page_Inspector#How_to">Guías prácticas</a> para obtener información más detallada sobre las cosas que hemos expuesto brevemente en este artículo.</p>
+
+<h2 id="Problemas_al_depurar_en_CSS">Problemas al depurar en CSS</h2>
+
+<p>Las DevTools pueden ser de gran ayuda a la hora de resolver problemas con el CSS, pero ¿cómo resuelves una situación en la que el CSS no se comporta como esperas? Los siguientes pasos deberían ayudarte.</p>
+
+<h3 id="Aléjate_del_problema">Aléjate del problema</h3>
+
+<p>Cualquier problema de código puede ser frustrante, especialmente los problemas de CSS, porque a menudo no recibes un mensaje de error que buscar en línea para ayudarte a encontrar una solución. Si te sientes frustrado, aléjate del problema por un tiempo: sal a caminar, tómate una copa, habla con un compañero de trabajo o trabaja en otra cosa por un tiempo. A veces, la solución aparece mágicamente cuando dejas de pensar en el problema, e incluso si no llega, trabajar en ello cuando te sientas más fresco te será mucho más fácil.</p>
+
+<h3 id="¿Tu_HTML_y_CSS_son_válidos">¿Tu HTML y CSS son válidos?</h3>
+
+<p>Los navegadores esperan que tu CSS y HTML estén escritos correctamente, sin embargo, los navegadores también son muy indulgentes y harán todo lo posible para mostrar tus páginas web incluso si tiene errores en el marcado o en la hoja de estilo. Si tienes errores en el código, el navegador trata de adivinar lo que quieres decir, y podría tomar una decisión diferente a lo que tenías en mente. Además, dos navegadores diferentes pueden hacer frente al problema de dos maneras diferentes. Por lo tanto, un buen primer paso es pasar tu HTML y CSS por un validador, que detectar cualquier error.</p>
+
+<ul>
+ <li><a href="https://jigsaw.w3.org/css-validator/">Validador de CSS</a></li>
+ <li><a href="https://validator.w3.org/">Validador de HTML</a></li>
+</ul>
+
+<h3 id="¿La_propiedad_y_el_valor_son_compatibles_con_el_navegador">¿La propiedad y el valor son compatibles con el navegador?</h3>
+
+<p>Los navegadores simplemente ignoran el CSS que no entienden. Si la propiedad o el valor que utilizas no es compatible con el navegador en el que lo pruebas, no se romperá nada, pero ese CSS no se aplicará. Las DevTools en general destacan de alguna manera las propiedades y los valores que no son compatibles. En la captura de pantalla siguiente, el navegador no admite el valor de subcuadrícula {{cssxref ("grid-template-columns")}}.</p>
+
+<p><img alt="Imagen de las DevTools del navegador con la cuadrícula-plantilla-columnas: subcuadrícula tachada porque el valor de la subcuadrícula no es compatible." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+
+<p>También puedes echar un vistazo a las tablas de compatibilidad de navegadores en la parte inferior de cada página de propiedades del proyecto MDN. Te muestran la compatibilidad de cada navegador para esa propiedad, a menudo desglosado si hay compatibilidad para un uso de la propiedad y no para otros. La tabla siguiente muestra los datos de compatibilidad para la propiedad {{cssxref ("shape-outside")}}.</p>
+
+<p>{{compat("css.shape-outside")}}</p>
+
+<h3 id="¿Hay_algo_más_que_anule_tu_CSS">¿Hay algo más que anule tu CSS?</h3>
+
+<p>Aquí es donde la información que has aprendido sobre la especificidad será muy útil. Si tienes algo más específico que anula lo que intentas hacer, puedes entrar en un juego muy frustrante de tratar de resolverlo sin saber qué tienes que resolver. Sin embargo, como hemos dicho, las DevTools te mostrarán qué CSS se ha aplicado y así puedes averiguar cómo hacer que el nuevo selector sea lo suficientemente específico como para anularlo.</p>
+
+<h3 id="Haz_un_caso_de_prueba_reducido_del_problema">Haz un caso de prueba reducido del problema</h3>
+
+<p>Si el problema no se resuelve con los pasos anteriores, deberás investigar un poco más. Lo mejor que puedes hacer en este momento es crear lo que se conoce como un caso de prueba reducido. Ser capaz de «reducir un problema» es una habilidad muy útil. Te ayudará a encontrar problemas en tu propio código y en el de tus colegas, y también te permitirá informar de errores y solicitar ayuda de manera más efectiva.</p>
+
+<p>Un caso de prueba reducido es un ejemplo de código que muestra el problema de la manera más simple posible, sin contenido ni estilo circundante. Esto significa a menudo sacar el código problemático de tu diseño para hacer un pequeño ejemplo que solo muestre ese código o característica.</p>
+
+<p>Para crear un caso de prueba reducido:</p>
+
+<ol>
+ <li>Si tu marcado se genera dinámicamente, por ejemplo desde un CMS, crea una versión estática de la salida que muestre el problema. Un sitio para compartir código como <a href="https://codepen.io/">CodePen</a> es útil para alojar casos de prueba reducidos, porque son accesibles en línea y puedes compartirlos fácilmente con tus colegas. Puedes comenzar por hacer un View Source de la página y copiar el HTML en CodePen, luego toma cualquier CSS y JavaScript relevante e inclúyelo también. Después de eso, puedes verificar si el problema sigue ahí.</li>
+ <li>Si eliminar el JavaScript no soluciona el problema, no incluyas el JavaScript. Si eliminar el JavaScript hace desaparecer el problema, elimina la mayor cantidad de JavaScript que puedas; deja solo las causas del problema.</li>
+ <li>Elimina cualquier HTML que no contribuya al problema. Elimina componentes o incluso elementos principales del diseño. Nuevamente, intenta reducir al mínimo la cantidad de código que aún muestra el problema.</li>
+ <li>Elimina cualquier CSS que no afecte al problema.</li>
+</ol>
+
+<p>En el proceso, puedes descubrir qué causa el problema, o al menos ser capaz de ponerlo o quitarlo al eliminar algo específico. Vale la pena añadir algunos comentarios a tu código a medida que vas descubriendo cosas. Si tienes que pedir ayuda, estos comentarios indicarán a la persona que te ayuda lo que ya has intentado. Esto puede proporcionarte bastante información para permitirte buscar posibles problemas por sondeo y soluciones alternativas.</p>
+
+<p>Si todavía tienes dificultades para solucionar el problema, tener un caso de prueba reducido te ofrece algo con lo que pedir ayuda, publicarlo en un foro o mostrarlo a un compañero de trabajo. Es mucho más probable que obtengas ayuda si antes de pedir la ayuda muestras que has hecho el trabajo de reducir el problema e identificar dónde sucede exactamente. Un desarrollador más experimentado va a poder detectar el problema con rapidez y orientarte en la dirección correcta, y aunque no sea así, echarle un vistazo rápido a tu caso de prueba reducido y, con suerte, ofrecerte al menos algo de ayuda.</p>
+
+<p>En el caso de que tu problema sea en realidad un error en un navegador, también puedes usar un caso de prueba reducido para presentar un informe de error al proveedor del navegador correspondiente (por ejemplo, en el sitio de <a href="https://bugzilla.mozilla.org">Bugzilla</a> de Mozilla).</p>
+
+<p>A medida que adquieras más experiencia con CSS, descubrirás que vas adquiriendo rapidez para descubrir de dónde vienen los problemas. Sin embargo, incluso los más experimentados a veces nos preguntamos qué pasa. Adoptar un enfoque metódico, hacer un caso de prueba reducido y explicar el problema a otra persona suele dar un buen resultado para encontrar una solución.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html
new file mode 100644
index 0000000000..81759abccc
--- /dev/null
+++ b/files/es/learn/css/building_blocks/dimensionar_elementos_en_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Dimensionar elementos en CSS
+slug: Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS
+translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En los diversos artículos vistos hasta ahora, has aprendido varias formas de dimensionar elementos en una página web utilizando CSS. Es importante que comprendas qué tamaños van a tener los diferentes elementos de tu diseño, y en este artículo vamos a resumir las diversas formas en que puedes asignar tamaños a los elementos con CSS y definir algunos términos relativos al dimensionado que te ayudarán en el futuro.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender las diferentes formas en que podemos dimensionar las cosas en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="El_tamaño_natural_o_intrínseco_de_las_cosas">El tamaño natural o intrínseco de las cosas</h2>
+
+<p>Los elementos HTML tienen un tamaño natural, establecido antes de que se vean afectados por cualquier código CSS. Un ejemplo sencillo es una imagen. Una imagen tiene un ancho y una altura que están definidos en el archivo de imagen que está incrustando en la página. Este tamaño se describe como el <strong>tamaño intrínseco</strong>, que proviene de la imagen misma.</p>
+
+<p>Si colocas una imagen en una página y no cambias su altura y ancho, ya sea usando atributos en la etiqueta <code>&lt;img&gt;</code> o el CSS, se mostrará con ese tamaño intrínseco. En el ejemplo siguiente le hemos dado un borde a la imagen para que puedas ver la extensión del archivo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+
+<p>Sin embargo, un elemento {{htmlelement ("div")}} vacío no tiene tamaño propio. Si añades un elemento {{htmlelement ("div")}} sin contenido a tu HTML, entonces debes darle un borde como hemos hecho con la imagen y verás una línea en la página. Se trata del borde del elemento replegado sobre sí mismo porque no hay contenido para mantenerlo abierto. En nuestro ejemplo siguiente, ese borde se extiende por todo el ancho del contenedor, porque es un elemento de nivel de bloque, un comportamiento con el que deberías comenzar a familiarizarte. No tiene altura (o tamaño en la dimensión de bloque) porque no hay contenido.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+
+<p>En el ejemplo anterior, añade texto al elemento vacío. Ahora el borde contiene ese texto porque la altura del elemento queda definida por el contenido. Por lo tanto, el tamaño de este elemento <code>&lt;div&gt;</code> en la dimensión del bloque proviene del tamaño del contenido. Nuevamente, este es el tamaño intrínseco del elemento: su tamaño está definido por su contenido.</p>
+
+<h2 id="Configurar_un_tamaño_específico">Configurar un tamaño específico</h2>
+
+<p>Por supuesto, podemos dar a los elementos de nuestro diseño un tamaño específico. Cuando asignas un tamaño a un elemento (al cual deberá ajustarse el contenido del elemento) nos referimos a este como <strong>tamaño extrínseco</strong>. Toma nuestro elemento <code>&lt;div&gt;</code> del ejemplo anterior: podemos darle valores específicos como {{cssxref ("width")}} y {{cssxref ("height")}}, y así tendrá ese tamaño sea cual sea su contenido. Como descubrimos en <a href="/es/docs/Learn/CSS/Building_blocks/Contenido_desbordado">nuestro artículo anterior sobre el desbordamiento</a>, una altura establecida puede causar el desbordamiento del contenido si hay más contenido del que cabe en el elemento.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+
+<p>Debido a este problema de desbordamiento, fijar la altura de los elementos con longitudes o porcentajes es algo que debemos hacer con mucho cuidado en la web.</p>
+
+<h3 id="El_uso_de_porcentajes">El uso de porcentajes</h3>
+
+<p>En muchos sentidos, los porcentajes actúan como unidades de longitud, y como discutimos en el <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">artículo sobre valores y unidades</a>, a menudo se pueden usar indistintamente con longitudes. Cuando usas un porcentaje, debes tener claro de qué es porcentaje. En el caso de una caja dentro de otro contenedor, si a la caja secundaria le asignas un porcentaje al ancho, será un porcentaje del ancho del contenedor principal.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+
+<p>Esto se debe a que los porcentajes se refieren al tamaño del bloque contenedor. Sin un porcentaje aplicado, nuestro elemento <code>&lt;div&gt;</code> ocuparía el 100% del espacio disponible, porque es un elemento de nivel de bloque. Si le damos un ancho porcentual, este se convierte en un porcentaje del espacio que normalmente ocuparía.</p>
+
+<h3 id="Porcentaje_de_márgenes_y_áreas_de_relleno">Porcentaje de márgenes y áreas de relleno</h3>
+
+<p>Si configuras <code>margins</code> y <code>padding</code> como un porcentaje, puede que observes un comportamiento extraño. En el ejemplo siguiente hay una caja. Hemos asignado a la caja interna un margen ({{cssxref ("margin")}}) del 10% y una área de relleno ({{cssxref ("padding")}}) del 10%. El área de relleno y el margen de la parte superior e inferior de la caja son del mismo tamaño que el margen de la izquierda y de la derecha.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+
+<p>Podrías esperar, por ejemplo, que el porcentaje de los márgenes superior e inferior sea un porcentaje de la altura del elemento, y el porcentaje de los márgenes izquierdo y derecho sea un porcentaje del ancho del elemento. Sin embargo, ¡este no es el caso!</p>
+
+<p>Cuando utilizas el margen y el área de relleno en porcentajes, el valor se calcula a partir del <strong>tamaño en línea</strong> del elemento, es decir, el ancho del elemento cuando se trabaja en un lenguaje horizontal. En nuestro ejemplo, todos los márgenes y el área de relleno son del 10% del ancho del elemento. Esto significa que puedes tener márgenes y relleno alrededor de la caja del mismo tamaño. Este es un hecho que vale la pena recordar si utilizas porcentajes de esta manera.</p>
+
+<h2 id="Tamaños_mínimo_y_máximo">Tamaños mínimo y máximo</h2>
+
+<p>Además de asignar a las cosas un tamaño fijo, podemos pedirle al CSS que asigne a un elemento un tamaño mínimo o máximo. Si tienes una caja que puede contener una cantidad variable de contenido y deseas que tenga siempre <em>al menos</em> una altura determinada, puedes establecer la propiedad {{cssxref ("min-height")}}. La caja siempre tendrá al menos esta altura, pero crecerá si hay más contenido del que la caja puede contener.</p>
+
+<p>En el ejemplo siguiente puedes ver dos cuadros, ambos con una altura definida de 150 píxeles. La caja de la izquierda tiene 150 píxeles de alto; la de la derecha contiene contenido que necesita más espacio, por lo que su tamaño supera los 150 píxeles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+
+<p>Esto es muy útil para trabajar con cantidades de contenido variables y asimismo evitar desbordamientos.</p>
+
+<p>Un uso común de {{cssxref ("max-width")}} es para reducir el tamaño de las imágenes si no hay suficiente espacio para mostrarlas en su ancho intrínseco, al asegurarte de que no serán mayores que ese ancho.</p>
+
+<p>A modo de ejemplo, si para una imagen tienes que establecer <code>width: 100%</code> y su ancho intrínseco es menor que su contenedor, la imagen se verá obligada a expandirse y agrandarse, y se pixelará. Si su ancho intrínseco es mayor que su contenedor, se desbordará. No es probable que desees que suceda ninguno de estos casos.</p>
+
+<p>Si en lugar de ello usas <code>max-width: 100%</code>, la imagen puede encogerse con respecto a su tamaño intrínseco, pero no se agranda más allá del 100% de su tamaño.</p>
+
+<p>En el ejemplo siguiente hemos utilizado la misma imagen dos veces. La primera imagen tiene <code>width: 100%</code> y está en un contenedor que es más grande, por lo que se extiende hasta el ancho del contenedor. La segunda imagen tiene <code>max-width: 100%</code> y, por lo tanto, no se estira para llenar el recipiente. La tercera caja contiene la misma imagen de nuevo, también con <code>max-width: 100%</code>; pero en este caso puedes ver cómo se ha reducido para encajar en la caja.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+
+<p>Esta técnica se utiliza para dar a las imágenes una respuesta <em>adaptativa</em>, de modo que se reduzcan adecuadamente cuando se visualizan en un dispositivo más pequeño. Sin embargo, no es conveniente usar esta técnica para cargar imágenes demasiado grandes y luego reducirlas en el navegador. Las imágenes deben tener el tamaño adecuado, no deben ser más grandes de lo que sea necesario para el tamaño más grande que se muestran en el diseño. Descargar imágenes muy grandes ralentizará tu sitio y puede costarles más dinero a los usuarios si tienen una conexión tarifada.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Obtén más información sobre las <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">técnicas adaptativas para las imágenes</a>.</p>
+</div>
+
+<h2 id="Unidades_de_ventana_gráfica">Unidades de ventana gráfica</h2>
+
+<p>La ventana gráfica es el área visible de tu página en el navegador que utilizas para ver un sitio, y también tiene un tamaño. En CSS hay unidades que asociadas con el tamaño de la ventana gráfica: las unidades <code>vw</code> para el ancho y <code>vh</code> para la altura. Con estas unidades puedes establecer tamaños relativos a la ventana gráfica del usuario.</p>
+
+<p><code>1vh</code> es igual al 1% de la altura de visualización, y <code>1vw</code> es igual al 1% de la anchura. Puedes usar estas unidades para dimensionar cajas, pero también texto. En el ejemplo siguiente hay un cuadro que tiene un tamaño de 20vh y 20vw. La caja contiene una letra <code>A</code>, a la que se le ha dado un valor para {{cssxref ("font-size")}} de 10vh.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+
+<p><strong>Si cambias los valores <code>vh</code> y <code>vw</code>, cambia el tamaño de la caja o de la letra; cambiar el tamaño de la ventana gráfica también cambia esos tamaños porque están dimensionados en relación con el de la ventana gráfica. Para ver el cambio del ejemplo cuando cambias el tamaño de la ventana gráfica, debes cargar el ejemplo en una ventana nueva del navegador, que pueda cambiar de tamaño (ya que tu ventana gráfica es el <code>&lt;iframe&gt;</code> incrustado que contiene el ejemplo que se muestra arriba). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Abre el ejemplo</a>, cambia el tamaño de la ventana del navegador y observa lo que ocurre con el tamaño de la caja y el texto.</strong></p>
+
+<p>Cambiar los tamaños según la ventana gráfica puede ser útil en tus diseños. Por ejemplo, si deseas mostrar una sección principal a pantalla completa antes del resto del contenido, haz que esa parte de tu página de 100vh empuje el resto del contenido por debajo de la ventana gráfica, de modo que solo aparezca cuando desplacen los contenidos del documento con la barra de desplazamiento.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Este artículo te ha dado un resumen de algunos problemas clave con los que puedes encontrarte al dimensionar cosas en la web. Cuando llegues al artículo <a href="/es/docs/Learn/CSS/CSS_layout">Compaginar con CSS</a>, el tamaño va a ser un aspecto muy importante para dominar los diferentes métodos de compaginación, por lo que, antes de continuar, vale la pena comprender los conceptos que hemos expuesto en este artículo.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html
new file mode 100644
index 0000000000..dbc0d644f8
--- /dev/null
+++ b/files/es/learn/css/building_blocks/el_modelo_de_caja/index.html
@@ -0,0 +1,343 @@
+---
+title: El modelo de caja
+slug: Learn/CSS/Building_blocks/El_modelo_de_caja
+translation_of: Learn/CSS/Building_blocks/The_box_model
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Todo en CSS tiene una caja alrededor, y comprender estas cajas es clave para poder crear diseños con CSS o para alinear elementos con otros elementos. En este artículo, echaremos un vistazo más de cerca al <em>modelo de cajas</em> en CSS con el que vas a poder crear diseños de compaginación más complejos con una comprensión de cómo funciona y la terminología relacionada.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de cómo <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender sobre el modelo de cajas en CSS, en qué consiste el modelo de cajas y cómo cambiar al modelo alternativo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Cajas_en_bloque_y_en_línea">Cajas en bloque y en línea</h2>
+
+<p>En CSS, en general, hay dos tipos de cajas: <strong>cajas en bloque</strong> y <strong>cajas en línea</strong>. Estas características se refieren al modo como se comporta la caja en términos de flujo de página y en relación con otras cajas de la página:</p>
+
+<p>Si una caja se define como un bloque, se comportará de las maneras siguientes:</p>
+
+<ul>
+ <li>La caja fuerza un salto de línea al llegar al final de la línea.</li>
+ <li>La caja se extenderá en la dirección de la línea para llenar todo el espacio disponible que haya en su contenedor. En la mayoría de los casos, esto significa que la caja será tan ancha como su contenedor, y llenará el 100% del espacio disponible.</li>
+ <li>Se respetan las propiedades {{cssxref ("width")}} y {{cssxref ("height")}}.</li>
+ <li>El relleno, el margen y el borde mantienen a los otros elementos alejados de la caja.</li>
+</ul>
+
+<p>A menos que decidamos cambiar el tipo de visualización a en línea, elementos como los encabezados (por ejemplo, <code>&lt;h1&gt;</code>) y todos los elementos <code>&lt;p&gt;</code> usan por defecto <code>block</code> como tipo de visualización externa.</p>
+
+<p>Si una caja tiene una visualización externa de tipo <code>inline</code>, entonces:</p>
+
+<ul>
+ <li>La caja no fuerza ningún salto de línea al llegar al final de la línea.</li>
+ <li>Las propiedades {{cssxref ("width")}} y {{cssxref ("height")}} no se aplican.</li>
+ <li>Se aplican relleno, margen y bordes verticales, pero no mantienen alejadas otras cajas en línea.</li>
+ <li>Se aplican relleno, margen y bordes horizontales, y mantienen alejadas otras cajas en línea.</li>
+</ul>
+
+<p>El elemento <code>&lt;a&gt;</code>, que se utiliza para los enlaces, y los elementos <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> y <code>&lt;strong&gt;</code> son ejemplos de elementos que se muestran en línea por defecto.</p>
+
+<p>El tipo de caja que se aplica a un elemento está definido por los valores de propiedad {{cssxref ("display")}}, como <code>block</code> y <code>inline</code>, y se relaciona con el valor <strong>externo</strong> (<em>outer</em>) de visualización (<code>display</code>).</p>
+
+<h2 id="Aparte_tipos_de_visualización_interna_y_externa">Aparte: tipos de visualización interna y externa</h2>
+
+<p>En este punto, será mejor que también expliquemos los tipos de visualización <strong>interna</strong> y <strong>externa</strong>. Como se mencionó anteriormente, las cajas en CSS tienen un tipo de visualización <em>externa</em>, que define si se trata de una caja en bloque o en línea.</p>
+
+<p>Sin embargo, las cajas también tienen un tipo de visualización <em>interna</em>, que determina cómo se disponen los elementos dentro de esa caja. De forma predeterminada, los elementos dentro de una caja se presentan en <strong><a href="/es/docs/Learn/CSS/CSS_layout/Flujo_normal">flujo normal</a></strong>, lo que significa que se comportan como otros elementos de tipo en bloque o en línea (como se explicó anteriormente).</p>
+
+<p>Sin embargo, podemos cambiar el tipo de visualización interna utilizando valores de <code>display</code>, como <code>flex</code>. Si en un elemento establecemos <code>display: flex;</code>, el tipo de visualización externa es de tipo bloque (<code>block</code>), pero el tipo de visualización interna cambia a flexible (<code>flex</code>). Cualquier elemento que sea hijo directo de esta caja pasará a comportarse como un elemento de tipo flex, de acuerdo con las reglas que se establecen en la especificación de <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, tema que veremos más adelante.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Para obtener más información acerca de los valores de visualización y el modo como funcionan las cajas en las disposiciones en bloque y en línea, echa un vistazo a la guía <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposiciones en bloque y en línea</a> de MDN.</p>
+</div>
+
+<p>A medida que vayas aprendiendo más detalles sobre el diseño CSS, te irás encontrando con el valor <code>flex</code> y con otros valores internos que puedan presentar tus cajas, por ejemplo, <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+
+<p>Sin embargo, la disposición en bloque y en línea es la forma predeterminada cómo se comportan las cosas en la web; como ya dijimos, a veces esto se conoce como <em>flujo normal</em>, porque nuestras cajas se dispondrán en bloque o en línea, si no reciben ninguna otra instrucción.</p>
+
+<h2 id="Ejemplos_de_diferentes_tipos_de_visualización">Ejemplos de diferentes tipos de visualización</h2>
+
+<p>Sigamos adelante y veamos algunos ejemplos. A continuación tenemos tres elementos HTML diferentes, todos con visualización externa de tipo <code>block</code>. El primero es un párrafo, que tiene un borde añadido con CSS. El navegador representa esto como una caja en bloque, por lo que el párrafo comienza en una línea nueva y se expande por todo el ancho disponible.</p>
+
+<p>El segundo es una lista, que se presenta usando <code>display: flex</code>. Esto establece una disposición flexible para los elementos que están dentro del contenedor; sin embargo, la lista en sí misma es una caja que se comporta en bloque y, como el párrafo, se expande por todo el ancho del contenedor y fuerza un salto de línea al llegar al final de línea.</p>
+
+<p>Debajo hay un párrafo a nivel de bloque, dentro del cual hay dos elementos <code>&lt;span&gt;</code>. Estos elementos normalmente serían de tipo <code>inline</code>; sin embargo, uno de los elementos tiene una clase de bloque, y lo hemos establecido como <code>display: block</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+
+<p>Podemos ver cómo se comportan los elementos <code>inline</code> en el ejemplo siguiente. Los elementos <code>&lt;span&gt;</code> del primer párrafo están en línea de manera predeterminada y, por lo tanto, no fuerzan ningún salto de línea.</p>
+
+<p>También hay un elemento <code>&lt;ul&gt;</code> que se establece como <code>display: inline-flex</code>, que crea una caja con un comportamiento de tipo en línea alrededor de algunos elementos de tipo <code>flex</code>.</p>
+
+<p>Finalmente, hay dos párrafos configurados con <code>display: inline</code>. El contenedor flexible en línea y los párrafos fluyen todos juntos en línea, en lugar de dividirse en líneas nuevas como lo harían si se mostraran como elementos de bloque.</p>
+
+<p><strong>En el ejemplo puedes cambiar <code>display: inline</code> por <code>display: block</code> o <code>display: inline-flex</code> y por <code>display: flex</code> para alternar entre estos modos de visualización.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+
+<p>En artículos posteriores encontrarás cosas como el diseño flexible. El aspecto clave a recordar aquí es que cambiar el valor de la propiedad <code>display</code> puede cambiar entre el modo de visualización exterior en bloque y en línea de una caja, que cambia la forma en que se presenta junto con otros elementos en la disposición en pantalla.</p>
+
+<p>En el resto de este artículo, nos concentraremos en el tipo de visualización externa.</p>
+
+<h2 id="¿Qué_es_el_modelo_de_cajas_CSS">¿Qué es el modelo de cajas CSS?</h2>
+
+<p>El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo.</p>
+
+<h3 id="Partes_de_una_caja">Partes de una caja</h3>
+
+<p>Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes:</p>
+
+<ul>
+ <li>El <strong>contenido de la caja</strong> (o <em>content box</em>): El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como {{cssxref ("width")}} y {{cssxref ("height")}}.</li>
+ <li>El <strong>relleno de la caja</strong> (o <em>padding box</em>): El relleno es espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad {{cssxref ("padding")}} y otras propiedades relacionadas.</li>
+ <li>El <strong>borde de la caja</strong> (o <em>border box</em>): El borde de la caja envuelve el contenido y el de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad {{cssxref ("border")}} y otras propiedades relacionadas.</li>
+ <li>El <strong>margen de la caja</strong> (o <em>margin box</em>): El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad {{cssxref ("margin")}} y otras propiedades relacionadas.</li>
+</ul>
+
+<p>El diagrama siguiente muestra estas capas:</p>
+
+<p><img alt="Diagrama del modelo de cajas" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p>
+
+<h3 id="El_modelo_de_cajas_CSS_estándar">El modelo de cajas CSS estándar</h3>
+
+<p>En el modelo de cajas estándar, cuando estableces los atributos <code>width</code> y <code>height</code> para una caja, defines el ancho y el alto del <em>contenido de la caja</em>. Cualquier área de relleno y borde se añade a ese ancho y alto para obtener el tamaño total que ocupa la caja. Esto se muestra en la imagen que encontrarás a continuación.</p>
+
+<p>Si suponemos que la caja tiene el CSS siguiente, que establece los valores para las propiedades <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, y <code>padding</code>:</p>
+
+<pre class="brush: css notranslate">.box {
+  width: 350px;
+  height: 150px;
+  margin: 10px;
+  padding: 25px;
+  border: 5px solid black;
+}
+</pre>
+
+<p>El espacio que ocupa nuestra caja usando el modelo de cajas estándar será en realidad de 410 px (350 + 25 + 25 + 5 + 5); y su altura, de 210 px (150 + 25 + 25 + 5 + 5), porque el área de relleno y el borde se añaden al ancho que se utiliza para el contenido de la caja.</p>
+
+<p><img alt="Mostrar el tamaño de la caja cuando se usa el modelo de cajas estándar." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El margen no se cuenta para el tamaño real de la caja; por supuesto, afecta al espacio total que la caja ocupa en la página, pero solo al espacio de fuera de la caja. El área de la caja se termina en el borde, no se extiende hasta el margen.</p>
+</div>
+
+<h3 id="El_modelo_de_cajas_CSS_alternativo">El modelo de cajas CSS alternativo</h3>
+
+<p>Podrías pensar que es más bien incómodo tener que sumar el borde y el área de relleno para obtener el tamaño real de la caja, ¡y tienes razón! Por este motivo, CSS introdujo un modelo de caja alternativo algún tiempo después del modelo de cajas estándar. Con este modelo, cualquier ancho es el ancho de la caja visible en la página, por lo tanto, el ancho del área de contenido es ese ancho menos el ancho para el relleno y el borde. El mismo CSS que hemos usado antes daría entonces el resultado siguiente (ancho = 350 px, altura = 150 px).</p>
+
+<p><img alt="Mostrar el tamaño de la caja cuando se usa el modelo de cajas alternativo." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p>
+
+<p>Por defecto, los navegadores usan el modelo de cajas estándar. Si deseas activar el modelo de cajas alternativo para un elemento, hazlo configurando <code>box-sizing: border-box</code>. Con ello, le dices al navegador que tome como el borde de la caja el área definida por cualquier tamaño que establezcas.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  box-sizing: border-box;
+} </code></pre>
+
+<p>Si quieres que todos tus elementos usen el modelo de cajas alternativo (opción común entre los desarrolladores) debes establecer la propiedad <code>box-sizing</code> en el elemento <code>&lt;html&gt;</code>. Luego debes configurar todos los demás elementos para que hereden ese valor, como se ve en el fragmento de código siguiente. Si deseas comprender qué hay detrás, consulta el <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">artículo de <em>CSS-Tricks</em> sobre el tamaño de las cajas</a>.</p>
+
+<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span>
+<span class="punctuation token">}</span>
+<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+  <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Un dato curioso es que Internet Explorer usaba por defecto el modelo de cajas alternativo, y no disponía de ningún mecanismo para cambiarlo.</p>
+</div>
+
+<h2 id="Jugar_con_los_modelos_de_cajas">Jugar con los modelos de cajas</h2>
+
+<p>En el ejemplo siguiente puedes ver dos cajas. Ambas tienen una clase <code>.box</code>, lo que les da los mismos atributos <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> y <code>padding</code>. La única diferencia es que la segunda caja se ha configurado para utilizar el modelo de cajas alternativo.</p>
+
+<p><strong>¿Puedes cambiar el tamaño de la segunda caja (añadiendo CSS a la clase <code>.alternate</code>) para que su anchura y altura coincidan con las de la primera caja?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Puedes encontrar la solución <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">aquí</a>.</p>
+</div>
+
+<h3 id="Utilizar_las_DevTools_del_navegador_para_ver_el_modelo_de_cajas">Utilizar las DevTools del navegador para ver el modelo de cajas</h3>
+
+<p>Las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas del desarrollador de tu navegador</a> pueden facilitar la comprensión del modelo de cajas. Si inspeccionas un elemento con las DevTools de Firefox, puedes ver el tamaño del elemento más su margen, área de relleno y borde. Inspeccionar un elemento de esta manera es un modo excelente de descubrir si tu caja es en realidad del tamaño que crees que es.</p>
+
+<p><img alt="Inspeccionar el modelo de cajas de un elemento utilizando Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p>
+
+<h2 id="Márgenes_relleno_y_bordes">Márgenes, relleno y bordes</h2>
+
+<p>Ya has visto las propiedades {{cssxref ("margin")}}, {{cssxref ("padding")}} y {{cssxref ("border")}} que usamos en el ejemplo anterior. Las propiedades que hemos usado en ese ejemplo son <strong>propiedades abreviadas</strong> y nos permiten establecer los cuatro lados de la caja a la vez. Estas propiedades abreviadas también tienen propiedades sin abreviar equivalentes, que permiten tener control sobre los diferentes lados de la caja de forma individual.</p>
+
+<p>Vamos a explorar estas propiedades más detalladamente.</p>
+
+<h3 id="Margen">Margen</h3>
+
+<p>El margen es un espacio invisible que hay alrededor de la caja. Aleja el resto de elementos de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Tanto si utilizas el modelo de cajas estándar como el alternativo, el margen siempre se añade después de haber calculado el tamaño de la caja que se ve.</p>
+
+<p>Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad {{cssxref ("margin")}}, o cada lado individualmente usando las propiedades equivalentes sin abreviar:</p>
+
+<ul>
+ <li>{{cssxref("margin-top")}}</li>
+ <li>{{cssxref("margin-right")}}</li>
+ <li>{{cssxref("margin-bottom")}}</li>
+ <li>{{cssxref("margin-left")}}</li>
+</ul>
+
+<p><strong>En el ejemplo siguiente, cambia los valores de margen para ver cómo se empuja la caja debido al espacio que el margen crea o se elimina (si es un margen negativo) entre este elemento y el elemento que lo contiene.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+
+<h4 id="Colapso_del_margen">Colapso del margen</h4>
+
+<p>Un punto clave a la hora de entender los márgenes es el concepto de colapso del margen. Si tienes dos elementos cuyos márgenes se tocan, esos márgenes se combinan para convertirse en un solo margen, cuyo tamaño es el del margen más grande.</p>
+
+<p>En el ejemplo siguiente hay dos párrafos. El párrafo superior tiene un atributo <code>margin-bottom</code> de 50 píxeles. El segundo párrafo tiene un atributo <code>margin-top</code> de 30 píxeles. Los márgenes colapsan, por lo que el margen real entre las cajas es de 50 píxeles, y no el total de ambos márgenes.</p>
+
+<p><strong>Pruébalo ajustando el atributo <code>margin-top</code> del segundo párrafo a 0. El margen visible entre los dos párrafos no cambiará, sino que conservará los 50 píxeles fijados en el atributo <code>bottom-margin</code> del primer párrafo.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+
+<p>Hay una serie de reglas que establecen cuándo los márgenes colapsan y cuándo no. Para obtener más información, consulta la página web sobre <a href="/es/docs/Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing">entender el colapso de márgenes</a>. Por ahora solo debes recordar que el colapso de los márgenes es algo que puede suceder. Si creas un espacio con márgenes y no obtienes el espacio que esperas, probablemente es que se haya producido algún colapso de márgenes.</p>
+
+<h3 id="Bordes">Bordes</h3>
+
+<p>El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos <code>width</code> y <code>height</code> que establecen el alto y el ancho de la caja. Si utilizas el modelo de cajas alternativo, el tamaño del borde reduce el tamaño de la caja de contenido, porque ocupa una parte del alto y el ancho disponibles.</p>
+
+<p>Hay una gran cantidad de propiedades que sirven para aplicar estilo a los bordes: hay cuatro bordes y cada borde tiene un estilo, un ancho y un color que podemos modificar.</p>
+
+<p>Puedes establecer el ancho, el estilo o el color de los cuatro bordes a la vez utilizando la propiedad {{cssxref ("border")}}.</p>
+
+<p>Para establecer las propiedades de cada lado de forma individual, puedes utilizar:</p>
+
+<ul>
+ <li>{{cssxref("border-top")}}</li>
+ <li>{{cssxref("border-right")}}</li>
+ <li>{{cssxref("border-bottom")}}</li>
+ <li>{{cssxref("border-left")}}</li>
+</ul>
+
+<p>Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente:</p>
+
+<ul>
+ <li>{{cssxref("border-width")}}</li>
+ <li>{{cssxref("border-style")}}</li>
+ <li>{{cssxref("border-color")}}</li>
+</ul>
+
+<p>Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas:</p>
+
+<ul>
+ <li>{{cssxref("border-top-width")}}</li>
+ <li>{{cssxref("border-top-style")}}</li>
+ <li>{{cssxref("border-top-color")}}</li>
+ <li>{{cssxref("border-right-width")}}</li>
+ <li>{{cssxref("border-right-style")}}</li>
+ <li>{{cssxref("border-right-color")}}</li>
+ <li>{{cssxref("border-bottom-width")}}</li>
+ <li>{{cssxref("border-bottom-style")}}</li>
+ <li>{{cssxref("border-bottom-color")}}</li>
+ <li>{{cssxref("border-left-width")}}</li>
+ <li>{{cssxref("border-left-style")}}</li>
+ <li>{{cssxref("border-left-color")}}</li>
+</ul>
+
+<p><strong>En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes. Juega con las diferentes propiedades para comprobar que entiendes cómo funcionan. Las páginas de MDN sobre las propiedades de los bordes te proporcionan información sobre los diferentes estilos entre los que puedes elegir para los bordes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+
+<h3 id="Relleno">Relleno</h3>
+
+<p>El relleno se encuentra entre el borde y el área de contenido. A diferencia de los márgenes, el relleno no puede tomar valores negativos, por lo que el valor debe ser 0 o positivo. Cualquier fondo aplicado a tu elemento se mostrará detrás del área de relleno y, generalmente, se usa para mantener el contenido alejado del borde.</p>
+
+<p>Podemos controlar el área de relleno para todos los lados de un mismo elemento usando la propiedad {{cssxref ("padding")}}, o para cada lado uno de los lados usando las propiedades equivalentes:</p>
+
+<ul>
+ <li>{{cssxref("padding-top")}}</li>
+ <li>{{cssxref("padding-right")}}</li>
+ <li>{{cssxref("padding-bottom")}}</li>
+ <li>{{cssxref("padding-left")}}</li>
+</ul>
+
+<p><strong>Si cambias los valores para el elleno en la clase <code>.box</code> del ejemplo siguiente, puedes ver que cambia dónde comienza el texto en relación con la caja.</strong></p>
+
+<p><strong>También puedes cambiar el relleno en la clase <code>.container</code>, que abrirá el espacio entre el contenedor y la caja. El área de relleno se puede cambiar para cualquier elemento y abrirá espacio entre su borde y lo que esté dentro del elemento.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+
+<h2 id="El_modelo_de_cajas_y_las_cajas_en_línea">El modelo de cajas y las cajas en línea</h2>
+
+<p>Todo lo anterior se aplica por completo a las cajas en bloque. Algunas de las propiedades también pueden aplicarse a las cajas en línea, como las que crea un elemento <code>&lt;span&gt;</code>.</p>
+
+<p>En el ejemplo siguiente hay un elemento <code>&lt;span&gt;</code> dentro de un párrafo al que hemos aplicado las propiedades <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, y <code>padding</code> Puedes ver que la anchura y la altura se ignoran. Se respetan el margen, el relleno y el borde, pero no cambian la relación de otro contenido con respecto a nuestra caja en línea, por lo que el relleno y el borde se superponen a otras palabras en el párrafo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+
+<h2 id="El_uso_de_display_inline-block">El uso de display: inline-block</h2>
+
+<p>Hay un valor especial de <code>display</code> que proporciona un punto medio entre <code>inline</code> y <code>block</code>. Esto es útil para situaciones en las que no deseas que un elemento fuerce un salto de línea, pero sí deseas que se respeten las propiedades <code>width</code> y <code>height</code> para evitar superposiciones como la que se ve arriba.</p>
+
+<p>Un elemento con <code>display: inline-block</code> conforma un subconjunto de los elementos en bloque que ya conocemos:</p>
+
+<ul>
+ <li>Se respetan las propiedades de ancho y alto.</li>
+ <li>El relleno, el margen y el borde mantienen los otros elementos alejados de la caja.</li>
+</ul>
+
+<p>Sin embargo, no se fuerza un salto de línea, y solo se hace más grande que su contenido si añades las propiedades <code>width</code> y <code>height</code> explícitamente.</p>
+
+<p><strong>En el ejemplo siguiente hemos añadido <code>display: inline-block</code> a nuestro elemento <code>&lt;span&gt;</code>. Cámbialo por <code>display: block</code> o elimina la línea para ver la diferencia entre ambos modelos de visualización.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+
+<p>Esto puede ser útil cuando deseas dar a un enlace un área de impacto más grande añadiendo <code>padding</code>. <code>&lt;a&gt;</code> es un elemento en línea como <code>&lt;span&gt;</code>; puedes usar <code>display: inline-block</code> para configurar el área de relleno para facilitar al usuario hacer clic en el enlace.</p>
+
+<p>Esto se ve con bastante frecuencia en las barras de navegación. La navegación siguiente se muestra en una fila usando <code>flexbox</code> y hemos añadido una área de relleno al elemento <code>&lt;a&gt;</code> porque queremos poder cambiar su color de fondo (<code>background-color</code>) cuando se pasa el ratón por encima de <code>&lt;a&gt;</code>. El área de relleno parece superponerse al borde del elemento <code>&lt;ul&gt;</code>. Esto se debe a que <code>&lt;a&gt;</code> es un elemento en línea.</p>
+
+<p><strong>Añade <code>display: inline-block</code> a la regla con el selector <code>.links-list a</code> y verás cómo se soluciona este problema, al hacer que otros elementos respeten el área de relleno.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que has retenido esa información en <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Box_Model_Tasks">Test your skills: The Box Model</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Eso es lo que hay que entender sobre el modelo de cajas. Es posible que en el futuro desees volver a este artículo si alguna vez te lías con los tamaños de las cajas en la disposición de tu página web.</p>
+
+<p>En el artículo siguiente veremos cómo se pueden usar los <a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">fondos y bordes</a> para hacer que tus simples cajas presenten un aspecto más interesante.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS </a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/fondos_y_bordes/index.html b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html
new file mode 100644
index 0000000000..0de93e1eb1
--- /dev/null
+++ b/files/es/learn/css/building_blocks/fondos_y_bordes/index.html
@@ -0,0 +1,306 @@
+---
+title: Fondos y bordes
+slug: Learn/CSS/Building_blocks/Fondos_y_bordes
+translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo, veremos algunas de las cosas creativas que puedes hacer con los fondos y los bordes de CSS. Añadir degradados, imágenes de fondo o redondear esquinas; los fondos y los bordes son la solución para una gran cantidad de cuestiones de estilo en CSS.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a diseñar el fondo y los bordes de las cajas.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Aplicar_estilo_a_los_fondos_en_CSS">Aplicar estilo a los fondos en CSS</h2>
+
+<p>La propiedad {{cssxref ("background")}} de CSS es una propiedad abreviada de una serie de propiedades de fondo que vamos a ver en este artículo. Si descubres una propiedad de fondo compleja en una hoja de estilo, puede parecer un poco difícil de entender porque pueden estarse pasando muchos valores a la vez.</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
+  url(big-star.png) center no-repeat, rebeccapurple;
+} </code>
+</pre>
+
+<p>Más adelante en este tutorial regresaremos a cómo funcionan las propiedades abreviadas, pero primero echemos un vistazo a las diferentes cosas que puedes hacer con los fondos en CSS, a partir de observar las propiedades de fondo individuales.</p>
+
+<h3 id="Los_colores_de_fondo">Los colores de fondo</h3>
+
+<p>La propiedad {{cssxref ("background-color")}} define el color de fondo de cualquier elemento en CSS. La propiedad admite cualquier <code><a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a></code> válido. Un color de fondo (<code>background-color</code>) se extiende por debajo del contenido y el relleno del elemento.</p>
+
+<p>En el ejemplo siguiente hemos utilizado varios valores de color para añadir un color de fondo a la caja, a un encabezado y a un elemento {{htmlelement ("span")}}.</p>
+
+<p><strong>Juega un poco con ellos; usa cualquier valor <a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a> disponible.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p>
+
+<h3 id="Las_imágenes_de_fondo">Las imágenes de fondo</h3>
+
+<p>La propiedad {{cssxref ("background-image")}} permite visualizar una imagen de fondo en un elemento. En el ejemplo siguiente hay dos cajas: una tiene una imagen de fondo que es más grande que la caja misma, la otra tiene una imagen pequeña en forma de estrella.</p>
+
+<p>Este ejemplo demuestra dos cosas sobre las imágenes de fondo. De forma predeterminada, la imagen grande no se reduce para ajustarse a la caja, por lo que solo vemos una pequeña esquina de esta, mientras que la imagen pequeña aparece en forma de mosaico hasta llenar la caja. En este caso, la imagen es en realidad una sola estrella.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p>
+
+<p><strong>Si especificas un color de fondo además de una imagen de fondo, la imagen se muestra encima del color de fondo. Añade una propiedad <code>background-color</code> al ejemplo anterior y obsérvalo en acción.</strong></p>
+
+<h4 id="Controlar_background-repeat">Controlar background-repeat</h4>
+
+<p>La propiedad {{cssxref ("background-repeat")}} se usa para controlar el comportamiento de tipo mosaico de las imágenes. Los valores disponibles son:</p>
+
+<ul>
+ <li><code>no-repeat</code>: evita que el fondo se repita.</li>
+ <li><code>repeat-x</code>: repite horizontalmente.</li>
+ <li><code>repeat-y</code>: repite verticalmente.</li>
+ <li><code>repeat</code>: es el valor por defecto; repite en ambas direcciones.</li>
+</ul>
+
+<p><strong>Prueba estos valores en el ejemplo siguiente. Hemos establecido el valor <code>no-repeat</code>, así que solo verás una estrella. Prueba los diferentes valores (<code>repeat-x</code> y <code>repeat-y</code>) y observa cuáles son los efectos.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p>
+
+<h4 id="Dimensionar_la_imagen_de_fondo">Dimensionar la imagen de fondo</h4>
+
+<p>En el ejemplo anterior hay una imagen grande que aparece recortada porque es más grande que el fondo. En este caso, podríamos usar la propiedad {{cssxref ("background-size")}}, que puede tomar valores de <a href="/es/docs/Web/CSS/length">longitud</a> o <a href="/es/docs/Web/CSS/porcentaje">porcentaje</a>, para ajustar el tamaño de la imagen para que quepa dentro del fondo.</p>
+
+<p>También puedes utilizar palabras clave:</p>
+
+<ul>
+ <li><code>cover</code>: el navegador agrandará la imagen lo suficientemente grande como para que esta cubra por completo el área de la caja sin que pierda su relación de aspecto. En este caso, es probable que parte de la imagen quede fuera de la caja.</li>
+ <li><code>contain</code>: el navegador adecuará el tamaño de la imagen para que quepa dentro de la caja. En este caso, pueden quedar huecos a ambos lados o en la parte superior e inferior de la imagen si la relación de aspecto de la imagen es diferente de la de la caja.</li>
+</ul>
+
+<p>En el ejemplo siguiente hemos usado la imagen más grande del ejemplo anterior y unidades de longitud para establecer sus dimensiones dentro de la caja. Puedes ver que esto ha distorsionado la imagen.</p>
+
+<p>Prueba lo siguiente:</p>
+
+<ul>
+ <li>Cambia las unidades de longitud que has utilizado para modificar el tamaño del fondo.</li>
+ <li>Elimina las unidades de longitud y observa qué sucede cuando usas <code>background-size: cover</code> o <code>background-size: contain</code>.</li>
+ <li>Si tu imagen es más pequeña que la caja, puedes cambiar el valor <code>background-repeat</code> para que la imagen se repita.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p>
+
+<h4 id="Posicionar_la_imagen_de_fondo">Posicionar la imagen de fondo</h4>
+
+<p>La propiedad {{cssxref ("background-position")}} te permite elegir la posición en la que aparece la imagen de fondo dentro de la caja a la que está asociada. Para ello se utiliza un sistema de coordenadas en el que la esquina superior izquierda de la caja es <code>(0,0)</code>, y la caja se coloca sobre los ejes horizontal (<code>x</code>) y vertical (<code>y</code>).</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: El valor predeterminado de <code>background-position</code> es <code>(0,0)</code>.</p>
+</div>
+
+<p>Los valores de <code>background-position</code> más comunes toman dos valores independientes: un valor horizontal seguido de un valor vertical.</p>
+
+<p>Puedes usar palabras clave como <code>top</code> y <code>right</code> (busca todas las demás en la página sobre la propiedad {{cssxref ("background-position")}}):</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top center;
+} </code>
+</pre>
+
+<p>Y también <a href="/es/docs/Web/CSS/length">longitudes</a> y <a href="/es/docs/Web/CSS/porcentaje">porcentajes</a>:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: 20px 10%;
+} </code>
+</pre>
+
+<p>También puedes mezclar valores de palabras clave con longitudes o porcentajes, por ejemplo:</p>
+
+<pre class="brush: css notranslate">.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px;
+}</pre>
+
+<p>Por último, también puedes usar una sintaxis de 4 valores para indicar una distancia desde ciertos bordes del cuadro: la unidad de longitud en este caso es un desplazamiento del valor que la precede. Entonces, en el CSS siguiente, colocamos el fondo a 20 px desde la parte superior y a 10 px desde la derecha:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  background-image: url(star.png);
+  background-repeat: no-repeat;
+  background-position: top 20px right 10px;
+} </code></pre>
+
+<p><strong>Utiliza el ejemplo siguiente para jugar con estos valores y mover la estrella por la caja.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: <code>background-position</code> es una propiedad abreviada de {{cssxref("background-position-x")}} y {{cssxref("background-position-y")}}, que te permiten configurar los diferentes valores de posición del eje por separado.</p>
+</div>
+
+<h3 id="Degradados_de_fondo">Degradados de fondo</h3>
+
+<p>Un degradado, cuando se usa para un fondo, actúa como una imagen y también se establece usando la propiedad {{cssxref("background-image")}}.</p>
+
+<p>Puedes leer más sobre los diferentes tipos de degradados y sobre qué puedes hacer con ellos en la página sobre el tipo de datos <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code> de MDN. Una forma divertida de jugar con degradados es usar uno de los muchos generadores de degradados CSS que hay disponibles en la web, <a href="https://cssgradient.io/">como este</a>. Puedes crear un degradado y luego copiar y pegar el código fuente que lo genera.</p>
+
+<p>Prueba algunos degradados diferentes en el ejemplo siguiente. En las dos cajas hay, respectivamente, un degradado lineal que se extiende por toda la caja, y un degradado radial con un tamaño establecido, que por lo tanto se repite.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p>
+
+<h3 id="Múltiples_imágenes_de_fondo">Múltiples imágenes de fondo</h3>
+
+<p>También es posible poner múltiples imágenes de fondo: puedes especificar múltiples valores <code>background-image</code> para un solo atributo, separados cada uno por una coma.</p>
+
+<p>Si haces esto, las imágenes de fondo pueden quedar superpuestas entre sí. Los fondos se superponen con la última imagen de fondo que hay en la parte inferior de la lista, y cada imagen anterior se apila encima de la que sigue en el código.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Los degradados se pueden mezclar con imágenes de fondo normales.</p>
+</div>
+
+<p>Las otras propiedades <code>background-*</code> también pueden tener valores múltiples separados por comas, de la misma manera que <code>background-image</code>:</p>
+
+<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+background-repeat: no-repeat, repeat-x, repeat;
+background-position: 10px 20px,  top right;</pre>
+
+<p>Cada valor de las diversas propiedades coincide con los valores que están en la misma posición en las otras propiedades. Arriba, por ejemplo, el valor para la propiedad <code>background-repeat</code> de <code>image1</code> será <code>no-repeat</code>. Sin embargo, ¿qué sucede cuando diferentes propiedades tienen una cantidad diferente de valores? La respuesta es que los valores que ocupan las posiciones más pequeñas se alternan cíclicamente: en el ejemplo anterior hay cuatro imágenes de fondo pero solo dos valores <code>background-position</code>. Los primeros dos valores de posición se aplicarán a las dos primeras imágenes, luego los valores volverán a asignarse cíclicamente: a <code>image3</code> se le dará el primer valor de posición, y a <code>image4</code> se le dará el segundo valor de posición.</p>
+
+<p><strong>Vamos a jugar. En el ejemplo siguiente hemos incluido dos imágenes. Para demostrar el orden de superposición, cambia la imagen de fondo que aparece primero en la lista. O juega con las otras propiedades para cambiar la posición, el tamaño o repite los valores.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p>
+
+<h3 id="Anclaje_del_fondo">Anclaje del fondo</h3>
+
+<p>Otra opción que hay disponible para fondos es especificar cómo se desplazan cuando se desplaza el contenido. Esto se controla con la propiedad {{cssxref ("background-attachment")}}, que puede tomar los valores siguientes:</p>
+
+<ul>
+ <li><code>scroll</code>: Hace que el fondo del elemento se desplace cuando te desplazas por el contenido de la página. Si te desplazas por el contenido del elemento, el fondo no se mueve. El efecto resultante es que el fondo está anclado a la página en una posición fija, por lo que se desplaza a medida que la página se desplaza.</li>
+ <li><code>fixed</code>: Hace que el fondo de un elemento quede fijo con respecto a la ventana gráfica, de modo que no se desplace cuando te desplazas por la página o el contenido del elemento. Siempre permanece en la misma posición de la pantalla.</li>
+ <li><code>local</code>: Este valor se añadió posteriormente (solo es compatible con Internet Explorer 9+, mientras que los otros son compatibles con IE4+) porque el valor <code>scroll</code> es bastante confuso y en muchos casos no hace lo que deseas. El valor <code>local</code> ancla el fondo al elemento en el que está configurado, de modo que cuando te desplazas por el contenido del elemento, el fondo se desplaza con este.</li>
+</ul>
+
+<p>La propiedad {{cssxref ("background-attachment")}} solo tiene efecto cuando hay contenido por el que puedas desplazarte, por lo que hemos preparado un ejemplo para demostrar las diferencias entre los tres valores: echa un vistazo a <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (También puedes consultar el <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">código fuente</a> aquí).</p>
+
+<h3 id="Usar_la_propiedad_abreviada_para_el_fondo">Usar la propiedad abreviada para el fondo</h3>
+
+<p>Como mencionamos al comienzo de este artículo, a menudo verás fondos que están especificados usando la propiedad {{cssxref ("background")}}. Esta forma abreviada te permite configurar todas las diferentes propiedades a la vez.</p>
+
+<p>Si utilizas varios fondos, debes especificar todas las propiedades para el primer fondo y luego añadir el fondo siguiente separado por una coma. En el ejemplo siguiente hay un degradado con un tamaño y una posición, luego un fondo de imagen con <code>no-repeat</code> y una posición y, por último, un color.</p>
+
+<p>Al escribir los valores abreviados de las imágenes de fondo es necesario seguir algunas reglas, por ejemplo:</p>
+
+<ul>
+ <li>Solo es posible especificar un color de fondo (<code>background-color</code>) después de la coma final.</li>
+ <li>El valor para <code>background-size</code> solo puede incluirse inmediatamente después de <code>background-position</code>, separado con el carácter '/', así: <code>center/80%</code>.</li>
+</ul>
+
+<p>Consulta la página para el atributo {{cssxref ("background")}} de MDN para ver todas las posibilidades.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p>
+
+<h3 id="Consideraciones_de_accesibilidad_con_los_fondos">Consideraciones de accesibilidad con los fondos</h3>
+
+<p>Al colocar texto sobre una imagen o un color de fondo, debes asegurarte de que tiene suficiente contraste para que tus visitantes puedan leer el texto. Si estableces una imagen de fondo y el texto se coloca encima de la imagen, también debes especificar un color de fondo (<code>background-color</code>) que permita leer el texto si la imagen no se carga.</p>
+
+<p>Los lectores de pantalla no pueden analizar las imágenes de fondo, por lo tanto, deben ser puramente decorativas; cualquier contenido importante debe ser parte de la página HTML y no debe estar contenido en un fondo.</p>
+
+<h2 id="Bordes">Bordes</h2>
+
+<p>Al aprender sobre el modelo de cajas descubrimos cómo los bordes afectan al tamaño de nuestra caja. En este artículo veremos cómo usar los bordes de una manera creativa. Por lo general, cuando a un elemento le añadimos bordes con CSS, usamos una propiedad abreviada que establece el color, el ancho y el estilo del borde en una línea de CSS.</p>
+
+<p>Podemos establecer un borde para los cuatro lados de una caja con {{cssxref ("border")}}:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border: 1px solid black;
+} </code></pre>
+
+<p>O podemos establecer solo un borde de la caja, por ejemplo:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top: 1px solid black;
+} </code></pre>
+
+<p>Cada una de las propiedades de estas propiedades abreviadas sería:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-width: 1px;
+  border-style: solid;
+  border-color: black;
+} </code></pre>
+
+<p>Y las no abreviadas:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-width: 1px;
+  border-top-style: solid;
+  border-top-color: black;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Estas propiedades para el borde superior, derecho, inferior e izquierdo también tienen propiedades <em>lógicas</em> asignadas que se relacionan con el modo de escritura del documento (por ejemplo, texto de izquierda a derecha o de derecha a izquierda, o de arriba a abajo). Exploraremos esto en la próxima lección, que expone el <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">uso de diferentes direcciones de texto</a>.</p>
+</div>
+
+<p><strong>Hay una variedad de estilos que puedes usar para los bordes. En el ejemplo siguiente, hemos utilizado un estilo de borde diferente para los cuatro lados de la caja. Juega con el estilo, el ancho y el color del borde para ver cómo funcionan los bordes.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p>
+
+<h3 id="Esquinas_redondeadas">Esquinas redondeadas</h3>
+
+<p>El redondeo de esquinas en una caja se logra mediante el uso de la propiedad {{cssxref ("border-radius")}} y otras propiedades asociadas que se relacionan con cada esquina de la caja. Como valor pueden usarse dos longitudes o porcentajes: el primer valor define el radio horizontal y el segundo el radio vertical. En muchos casos, solo se pondrá un valor, que se utilizará para ambos.</p>
+
+<p>Por ejemplo, para hacer que las cuatro esquinas de una caja tengan un radio de 10 píxeles:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-radius: 10px;
+} </code></pre>
+
+<p>O para hacer que la esquina superior derecha tenga un radio horizontal de 1 em y un radio vertical del 10%:</p>
+
+<pre class="brush: css notranslate"><code>.box {
+  border-top-right-radius: 1em 10%;
+} </code></pre>
+
+<p>En el ejemplo siguiente hemos establecido las cuatro esquinas, y luego cambiamos los valores de la esquina superior derecha para que sea diferente. Juega con los valores para cambiar las esquinas. Echa un vistazo a la página de la propiedad {{cssxref ("border-radius")}} para ver las opciones de sintaxis disponibles.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p>
+
+<h2 id="Pon_a_prueba_tus_habilidades">Pon a prueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más relevante? Encontrarás más pruebas para verificar que retienes la información antes de seguir adelante en<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders"> Test your skills: Backgrounds and Borders</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos expuesto bastantes conceptos y puedes ver que hay mucho para añadir a un fondo o a un borde de una caja. Explora las diferentes páginas de propiedades si deseas obtener más información sobre cualquiera de las características que hemos discutido. Todas las páginas de MDN contienen más ejemplos de uso, para que juegues y mejores tus conocimientos.</p>
+
+<p>En el próximo artículo descubriremos cómo interacciona el modo de escritura de tu documento con tu CSS. ¿Qué sucede cuando el texto no fluye de izquierda a derecha?</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html b/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html
new file mode 100644
index 0000000000..db0f522728
--- /dev/null
+++ b/files/es/learn/css/building_blocks/imágenes_medios_y_elementos_de_formulario/index.html
@@ -0,0 +1,193 @@
+---
+title: 'Imágenes, medios y elementos de formulario'
+slug: Learn/CSS/Building_blocks/Imágenes_medios_y_elementos_de_formulario
+translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+
+<p>En este artículo vamos a ver cómo se tratan ciertos elementos especiales en CSS. Las imágenes y otros medios y los elementos de formulario presentan un comportamiento algo distinto que otros elementos CSS, como las cajas, en cuanto a aplicación de estilo. Comprender qué es y qué no es posible te ahorrará frustraciones, y en este artículo vamos a destacar algunas de las cuestiones principales que necesitas saber.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Comprender el modo en que algunos elementos se comportan de manera inusual cuando se diseñan con CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Elementos_de_reemplazo">Elementos de reemplazo</h2>
+
+<p>Las imágenes y los vídeos se describen como <strong><a href="/es/docs/Web/CSS/Elemento_reemplazo">elementos de reemplazo</a></strong>. Esto significa que el CSS no puede intervenir en aspectos del diseño interno de estos elementos, sino solo a su posición en la página y algunos otros aspectos. Sin embargo, como veremos, hay varias cosas que el CSS puede hacer con una imagen.</p>
+
+<p>También se describen ciertos elementos de reemplazo que, como las imágenes y vídeos, presentan una <strong>relación de aspecto</strong>. Esto significa que tienen un tamaño definido tanto en la dimensión horizontal (x) como en la vertical (y), y por defecto se mostrarán con las dimensiones intrínsecas del archivo.</p>
+
+<h2 id="El_tamaño_de_las_imágenes">El tamaño de las imágenes</h2>
+
+<p>Como ya conoces de estos artículos, todo en CSS genera una caja. Si colocas una imagen dentro de una caja que es más pequeña o más grande que las dimensiones intrínsecas del archivo de imagen en cualquier dirección, aparecerá más pequeño que la caja o se desbordará. Debes decidir qué hacer con el desbordamiento.</p>
+
+<p>En el ejemplo siguiente hay dos cajas, ambas de 200 píxeles de tamaño:</p>
+
+<ul>
+ <li>Una contiene una imagen que es más pequeña de 200 píxeles: es más pequeña que la caja y no se expande para rellenarla.</li>
+ <li>La otra es más grande de 200 píxeles y desborda la caja.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+
+<p>¿Qué podemos hacer con el problema del desbordado?</p>
+
+<p>Como aprendimos en <a href="/es/docs/Learn/CSS/Building_blocks/Dimensionar_elementos_en_CSS">nuestro artículo anterior</a>, una técnica común es hacer que el la propiedad {{cssxref ("max-width")}} de una imagen sea 100%. Esto permite que la imagen tenga un tamaño menor que la caja, pero no que tenga un tamaño mayor. Esta técnica funciona con otros elementos de reemplazo, como <code><a href="/es/docs/Web/HTML/Elemento/video">&lt;video&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Elemento/iframe">&lt;iframe&gt;</a></code>.</p>
+
+<p><strong>Añade <code>max-width: 100%</code> al elemento <code>&lt;img&gt;</code> del ejemplo anterior. Verás que la imagen más pequeña permanece sin cambios, pero la más grande se reduce hasta caber en la caja.</strong></p>
+
+<p>Puedes tomar otras decisiones sobre las imágenes dentro de los contenedores. Por ejemplo, es posible que desees cambiar el tamaño de una imagen para que cubra una caja por completo.</p>
+
+<p>La propiedad {{cssxref ("object-fit")}} puede ser de gran ayuda. Cuando se usa <code>object-fit</code>, el elemento de reemplazo puede dimensionarse para adaptarse a una caja de varias maneras.</p>
+
+<p>A continuación, hemos utilizado el valor <code>cover</code>, que reduce el tamaño de la imagen a la vez que mantiene la relación de aspecto hasta que rellena toda la caja. Al mantenerse la relación de aspecto, la caja corta algunas partes de la imagen.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+
+<p>Si usamos el valor <code>contain</code>, la imagen se reduce hasta que es lo bastante pequeña para caber dentro de la caja. Esto puede dar lugar a un formato panorámico si la imagen no presenta la misma relación de aspecto que la caja.</p>
+
+<p>También puedes probar el valor <code>fill</code>, que rellena la caja, pero no mantiene la relación de aspecto.</p>
+
+<h2 id="Elementos_de_reemplazo_en_una_compaginación">Elementos de reemplazo en una compaginación</h2>
+
+<p>A medida que vayas usando diversas técnicas de diseño CSS en elementos de reemplazo, irás descubriendo que se comportan de manera ligeramente diferente a otros elementos. Por ejemplo, en un diseño flexible o en un diseño de página de cuadrícula, los elementos se expanden por defecto hasta que llenan toda el área. En cambio, las imágenes no se expanden, sino que se alinean con el inicio del área de la cuadrícula o del contenedor flexible.</p>
+
+<p>Puedes ver esto en el ejemplo siguiente, en que hay un contenedor de con dos columnas y dos filas, que tiene cuatro elementos. Todos los elementos <code>&lt;div&gt;</code> tienen un color de fondo y se estiran para llenar la fila y la columna. La imagen, sin embargo, no se expande.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+
+<p>Si sigues estos artículos en orden, no habrás llegado todavía a la compaginación. Ten en cuenta solo que cuando los elementos de reemplazo forman parte de una cuadrícula o un diseño flexible, presentan comportamientos predeterminados diferentes, en esencia para evitar que el diseño los expanda de manera extraña.</p>
+
+<p>Para forzar que la imagen se expanda para llenar la celda de la cuadrícula en la que se encuentra, tendrías que hacer algo como lo siguiente:</p>
+
+<pre class="brush: css">img {
+  width: 100%;
+  height: 100%;
+}</pre>
+
+<p>Sin embargo, esto deformaría la imagen, por lo que probablemente no es lo que querrías hacer.</p>
+
+<h2 id="Los_elementos_de_formulario">Los elementos de formulario</h2>
+
+<p>Los elementos de formulario pueden ser un problema si queremos diseñar con CSS, y el <a href="/es/docs/Learn/HTML/Forms">artículo sobre formularios web</a> contiene guías detalladas sobre los aspectos más complicados relativos a este tema, que no vamos a repetir en este artículo. Hay algunos conceptos básicos clave que vale la pena destacar en esta sección.</p>
+
+<p>Muchos controles de formulario se añaden con el elemento <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>: este elemento define desde campos de formulario simples, como entradas de texto, hasta campos más complejos añadidos en HTML5, como selectores de color y fecha. Hay algunos elementos adicionales, como <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> para la entrada de texto multilínea, y también elementos que se utilizan para contener y etiquetar partes de formularios como <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> y <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code>.</p>
+
+<p>El HTML5 también incluye atributos que permiten a los desarrolladores web indicar qué campos son obligatorios e incluso el tipo de contenido que debe introducirse. Si el usuario añade algo inesperado o deja un campo obligatorio en blanco, el navegador puede mostrar un mensaje de error. Los diversos navegadores no presentan ningún estilo coherente ni ninguna homogeneización en cuanto a la personalización que permiten para tales elementos.</p>
+
+<h3 id="Aplicar_estilo_a_los_elementos_de_entrada_de_texto">Aplicar estilo a los elementos de entrada de texto</h3>
+
+<p>Los elementos que permiten la entrada de texto, como <code>&lt;input type="text"&gt;</code>, algunos tipos específicos como <code>&lt;input type="email"&gt;</code> y el elemento <code>&lt;textarea&gt;</code> son bastante fáciles de diseñar y tienden a comportarse como otras cajas de tu página. Sin embargo, el estilo predeterminado de estos elementos es diferente según el sistema operativo y el navegador con el que el usuario visite el sitio.</p>
+
+<p>En el ejemplo siguiente hemos diseñado algunas entradas de texto con CSS: puedes ver que algunos elementos como los bordes, los márgenes y el área de relleno se aplican como es de esperar. Utilizamos selectores de atributos para apuntar a los diferentes tipos de entrada. Intenta cambiar el aspecto de este formulario ajustando los bordes, añadiendo colores de fondo a los campos y cambiando las fuentes y área de relleno.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+
+<div class="blockIndicator warning">
+<p><strong>¡Importante!</strong>: Al cambiar el estilo de los elementos de formulario debes asegurarte de que para el usuario sigue siendo obvio que se trata de elementos de formulario. Podrías crear una entrada de formulario sin bordes y un fondo que sea casi indistinguible del contenido que lo rodea, pero esto haría que sea muy difícil de reconocer y completar.</p>
+</div>
+
+<p>Como se explica en los artículos sobre <a href="/es/docs/Learn/HTML/Forms/Styling_HTML_forms">el diseño de formularios</a> en la parte HTML de esta web, el sistema operativo presenta muchos de los tipos de entrada más complejos y son inaccesibles para el diseño. Por lo tanto, siempre debes suponer que los formularios se verán de manera bastante diferentes para los distintos visitantes, y deberás probar los formularios complejos en diversos navegadores.</p>
+
+<h3 id="Herencia_y_elementos_de_formulario">Herencia y elementos de formulario</h3>
+
+<p>En algunos navegadores, los elementos de formulario no heredan el estilo de letra por defecto. Por lo tanto, si deseas asegurarte de que tus campos de formulario usan la letra que se define para el cuerpo o para un elemento principal, debes añadir esta regla a tu CSS.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family : inherit;
+  font-size : 100%;
+} </code></pre>
+
+<h3 id="Elementos_de_formulario_y_tamaño_de_la_caja">Elementos de formulario y tamaño de la caja</h3>
+
+<p>Los elementos de formulario utilizan reglas diferentes en los diversos navegadores para el dimensionado de las cajas de los diferentes controles de formulario. Ya cubrimos la propiedad <code>box-sizing</code> en <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">el artículo sobre el modelo de cajas</a>. Puedes usar este conocimiento cuando diseñes formularios que garanticen una experiencia homogénea en cuanto a los anchos y las alturas de los elementos de formulario.</p>
+
+<p>Por coherencia, es una buena idea establecer los márgenes y el área de relleno en <code>0</code> para todos los elementos, y luego establecerlos de nuevo al diseñar cada uno de los controles de formulario.</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}</code></pre>
+
+<h3 id="Otros_ajustes_útiles">Otros ajustes útiles</h3>
+
+<p>Además de las reglas ya mencionadas, también debes configurar <code>overflow: auto</code> en <code>&lt;textarea&gt;</code> para que Internet Explorer no muestre una barra de desplazamiento cuando no hay necesidad:</p>
+
+<pre class="brush: css">textarea {
+  overflow: auto;
+}</pre>
+
+<h3 id="Ponerlo_todo_junto_en_un_«Reinicio»">Ponerlo todo junto en un «Reinicio»</h3>
+
+<p>Como último paso podemos resumir las diversas propiedades expuestas en el «reinicio de formulario» siguiente para proporcionar una base coherente sobre la que trabajar. Esto incluye todos los elementos mencionados en las tres últimas secciones:</p>
+
+<pre class="brush: css"><code>button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  box-sizing: border-box;
+  padding: 0; margin: 0;
+}
+
+textarea {
+  overflow: auto;
+} </code></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Muchos desarrolladores utilizan las hojas de estilo de normalización para crear un conjunto de estilos de línea base para usar en todos los proyectos. Por lo general, estas hojas hacen cosas similares a las que acabamos de describir y garantizan que cualquier cosa que pueda ser diferente en distintos navegadores tenga establecido un valor por defecto coherente antes de que tú hagas tu propio trabajo con el CSS. Aunque ya no son tan importantes como lo eran antes, porque los navegadores suelen ser más homogéneos que en el pasado. Sin embargo, si deseas ver un ejemplo, consulta <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, que es una hoja de estilo muy popular que muchos proyectos utilizan como base.</p>
+</div>
+
+<p>Para obtener más información sobre los formularios de estilo, echa un vistazo a los dos artículos en la sección HTML de estas guías.</p>
+
+<ul>
+ <li><a href="/es/docs/Learn/HTML/Forms/Styling_HTML_forms">Diseño de formularios web</a></li>
+ <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Aspectos avanzados de aplicación de estilo a formularios</a></li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>En este artículo hemos destacado algunas de las diferencias que se presentan cuando trabajas con imágenes o media, y otros elementos inusuales, en CSS. En el artículo siguiente veremos algunos consejos que te resultarán útiles cuando tengas que diseñar tablas HTML.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de cajas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/index.html b/files/es/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..ce15097a6c
--- /dev/null
+++ b/files/es/learn/css/building_blocks/index.html
@@ -0,0 +1,94 @@
+---
+title: Bloques de construcción CSS
+slug: Learn/CSS/Building_blocks
+tags:
+  - Aprender
+  - CSS
+  - Principiante
+  - bloques de construcción
+translation_of: Learn/CSS/Building_blocks
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Este módulo retoma donde <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a> finalizó — ahora que estás familiarizado con el lenguaje y su sintaxis, y que tienes algo de experiencia en su uso, es hora de bucear un poco más profundo. Este módulo se centra en el estilo en cascada de css y en el concepto de herencia, también veremos todos los tipos de selectores, unidades, tamaños, estilos de fondo, bordes, debugging y mucho más.</p>
+
+<p class="summary">El objetivo aqui es proveerte de herramientas para que puedas escribir código CSS competentemente y ayudarte a entender lo escencial de la teoría antes de centrarnos en disciplinas más específicas como <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> y <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
+
+<h2 id="Prerrequisitos">Prerrequisitos</h2>
+
+<p>Antes de comenzar este módulo deberías poseer:</p>
+
+<ol>
+ <li>Un entendimiento básico de la utilización de una computadora y de la<br>
+  navegación web a nivel de usuario.</li>
+ <li>Un entorno básico constituido en base a lo dispuesto en la guía <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, tanto como conocimiento acerca de la creación y la administración de archivos, como es detallado en <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
+ <li>Una familiaridad básica con html, como es establecido en el módulo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introdución a HTML</a>.</li>
+ <li>Un entendimiento elemental de CSS, como es discutido en el módulo <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.</li>
+</ol>
+
+<div class="note">
+<p><strong>Nota</strong>: Si estás trabajando en una computadora, tablet, u otro dispositivo en el que no eres capaz de crear tus propios archivos puedes intentar la mayor parte de los ejemplos en código en un programa para trabajar código en linea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a>.</p>
+</div>
+
+<h2 id="Guías">Guías</h2>
+
+<p>En este módulo encontrarás artículos que cubren los fundamentos más esenciales del lenguaje CSS. A lo largo del módulo encontrarás múltiples ejercicios que te permitirán poner a prueba tu entendimiento.</p>
+
+<dl>
+ <dt><a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a></dt>
+ <dd>El objetivo de ésta lección es desarrollar tu entendimiento sobre algunos de los conceptos fundamentales de CSS - cascada, especificidad y herencia - los cuales controlan como CSS es aplicado a HTML y como sus conflitos son resueltos.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a></dt>
+ <dd>Hay una gran variedad de selectores disponibles en CSS, permitiendo una fina precision para seleccionar elementos de estilo. En este artículo y sub-artículos, repasaremos los diferentes tipos en detalle y veremos como funcionan. Los sub-artículos son los que siguinetes :
+ <ul>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, clase e ID</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de Atributos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-clases y pseudo-elementos</a></li>
+  <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadores</a></li>
+ </ul>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></dt>
+ <dd>Todo en CSS tiene una caja a su alrededor, y comprender estas cajas es clave para poder crear diseños con CSS, o para alinear elementos con otros elementos. En esta lección, analizaremos adecuadamente el modelo CSS Box, para que pueda pasar a tareas de diseño más complejas con una comprensión de cómo funciona y la terminología que se relaciona con él.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></dt>
+ <dd>En esta lección, veremos algunas de las cosas creativas que puede hacer con fondos y bordes CSS. Al agregar degradados, imágenes de fondo y esquinas redondeadas, los fondos y los bordes son la respuesta a muchas preguntas de estilo en CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Manejo de diferentes direcciones de texto</a></dt>
+ <dd>En los últimos años, CSS ha evolucionado para admitir mejor la diferente direccionalidad del contenido, incluyendo Right-to-left (Derecha a Izquierda) pero también de Top-to-bottom (Arriba a abajo ,como el japonés); estas diferentes direccionalidades se llaman <strong>modos de escritura</strong>. A medida que avance en su estudio y comience a trabajar con el diseño, comprenderá los modos de escritura será muy útil para usted, por lo tanto, los presentaremos en este artículo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Contenido desbordante</a></dt>
+ <dd>En esta lección veremos otro concepto importante en CSS: desbordamiento. El Overflow (o desbordamiento) es lo que sucede cuando hay demasiado contenido para contenerlo cómodamente dentro de una caja. En esta guía aprenderá qué es y cómo administrarlo.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Valores y unidades de CSS</a></dt>
+ <dd>
+ <p>Cada propiedad utilizada en CSS tiene un valor o conjunto de valores permitidos para esa propiedad. En esta lección veremos algunos de los valores y unidades más comunes en uso.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elementos en CSS</a></dt>
+ <dd>En las diversas lecciones hasta ahora, ha encontrado varias formas de dimensionar elementos en una página web utilizando CSS. Es importante comprender cuán grandes serán las diferentes características en su diseño, y en esta lección resumiremos las diversas formas en que los elementos obtienen un tamaño a través de CSS y definiremos algunos términos sobre el tamaño que lo ayudarán en el futuro.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, medios y elementos de forma</a></dt>
+ <dd>
+ <p>En esta lección veremos cómo se tratan ciertos elementos especiales en CSS. Las imágenes, otros medios y elementos de formulario se comportan de manera un poco diferente en términos de su capacidad para diseñarlos con CSS que los cuadros normales. Comprender qué es y qué no es posible puede ahorrar un poco de frustración, y esta lección resaltará algunas de las cosas principales que necesita saber.</p>
+ </dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Dando estilo a una tabla</a></dt>
+ <dd>Diseñar una tabla HTML no es el trabajo más glamoroso del mundo, pero a veces todos tenemos que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML se vean bien, con algunas técnicas específicas de diseño de tablas resaltadas.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depuración de CSS</a></dt>
+ <dd>A veces, al escribir CSS, encontrará un problema en el que su CSS no parece estar haciendo lo que espera. Este artículo le dará orientación sobre cómo solucionar un problema de CSS y le mostrará cómo las DevTools incluidas en todos los navegadores modernos pueden ayudarlo a descubrir qué está sucediendo.</dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizando tu CSS</a></dt>
+ <dd>A medida que comience a trabajar en hojas de estilo más grandes y grandes proyectos, descubrirá que mantener un gran archivo CSS puede ser un desafío. En este artículo, analizaremos brevemente algunas de las mejores prácticas para escribir su CSS para que sea fácil de mantener, y algunas de las soluciones que encontrará en uso para ayudar a mejorar la capacidad de mantenimiento.</dd>
+</dl>
+
+<h2 id="Evaluaciones">Evaluaciones</h2>
+
+<p>¿Quieres probar tus habilidades de CSS? Las siguientes evaluaciones pondrán a prueba su comprensión del CSS cubierto en las guías anteriores.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Comprensión de CSS básica</a></dt>
+ <dd>Esta evaluación evalúa su comprensión de la sintaxis básica, selectores, especificidad, modelo de caja y más.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Crear papel con membrete elegante</a></dt>
+ <dd>Si desea causar la impresión correcta, escribir una carta en papel con membrete puede ser un buen comienzo. En esta evaluación, lo retaremos a crear una plantilla en línea para lograr ese aspecto.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">Una caja de aspecto genial</a></dt>
+ <dd>Aquí aprenderás a usar el estilo de fondo y borde para crear un cuadro llamativo.</dd>
+</dl>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Efectos de estilo avanzados</a></dt>
+ <dd>Este artículo actúa como una caja de trucos, brindando una introducción a algunas características de estilo avanzadas e interesantes como sombras de caja, modos de fusión y filtros.</dd>
+</dl>
diff --git a/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html
new file mode 100644
index 0000000000..fa21de66e5
--- /dev/null
+++ b/files/es/learn/css/building_blocks/manejando_diferentes_direcciones_de_texto/index.html
@@ -0,0 +1,165 @@
+---
+title: Manejando diferentes direcciones de texto
+slug: Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto
+tags:
+  - Aprendizaje
+  - CSS
+  - Diseño en bloque
+  - Diseño lineal
+  - Modos de escritura
+  - Principiante
+  - Propiedades lógicas
+translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Muchas de las propiedades y valores que hemos encontrado hasta ahora en nuestro aprendizaje de CSS han estado ligadas a las dimensiones físicas de nuestra pantalla. Creamos bordes arriba, a la derecha, abajo y a la izquierda de una caja, por ejemplo. Estas dimensiones físicas se ajustan adecuadamente al contenido que se visualiza de forma horizontal, y por defecto, la web tiende a apoyar lenguajes de izquierda a derecha, como el castellano o el francés, mejor que aquellos que se escriben de derecha a izquierda, como el árabe.</p>
+
+<p>Sin embargo, en los últimos años, CSS ha evolucionado para soportar de mejor forma contenidos en diferente direccionalidad, incluyendo contenido de derecha a izquierda, pero también de arriba-abajo, como el japonés - Estas direccionalidades se llaman <strong>modos de escritura</strong>.<strong> </strong>En la medida que progresa tu estudio y comiences a trabajar con diseños, comprender los modos de escritura será de mucha utilidad para ti, por ello los explicaremos a continuación.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Literatura computacional básica, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software básico instalado</a>, conocimiento básico de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">manejo de archivos</a>, HTML básico (<a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>), y una idea de cómo funciona CSS (<a href="/es/docs/Learn/CSS/First_steps">Primeros pasos en CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Entender la importancia de los modos de escritura en el CSS moderno.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_son_los_modos_de_escritura">¿Qué son los modos de escritura?</h2>
+
+<p>Un modo de escritura en CSS se refiere a si el texto está escrito horizontal o verticalmente. La propiedad {{cssxref("writing-mode")}} permite cambiar de un modo a otro. No necesitas estar trabajando en un lenguaje que use un modo de escritura vertical para querer hacer esto - Podrías cambiar el modo de escritura de partes de tu diseño por razones creativas.</p>
+
+<p>En el ejemplo siguiente existe un encabezado desplegado usando <code>writing-mode: vertical-rl</code>. El texto ahora aparece vertical. El texto vertical es común en diseño gráfico, y puede ser una forma de agregar un aspecto más interesante a tu diseño web.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+
+<p>Los tres valores posibles para la propiedad <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> son:</p>
+
+<ul>
+ <li><code>horizontal-tb</code>: Dirección de flujo de bloque de arriba abajo. Las frases aparecen horizontales.</li>
+ <li><code>vertical-rl</code>: Dirección de flujo de bloque de derecha a izquierda. Las frases aparecen verticales.</li>
+ <li><code>vertical-lr</code>: Dirección de flujo de bloque de izquierda a derecha. Las frases aparecen verticales.</li>
+</ul>
+
+<p>Así, la propiedad <code>writing-mode</code> está configurando en realidad la direccion en que los elementos de nivel bloque son desplegados en la página - ya sea de arriba abajo, derecha a izquierda, o de izquierda a derecha. Luego señala la dirección del flujo de texto en las frases.</p>
+
+<h2 id="Modos_de_escritura_y_diseño_en_bloque_y_lineal.">Modos de escritura y diseño en bloque y lineal.</h2>
+
+<p>Ya hemos visto el diseño en bloque y lineal, y el hecho de que algunas cosas se muestran como elementos de bloque y otras como elementos lineales. Ésto se encuentra ligado al modo de escritura del documento, y no de la pantalla física. Los bloques sólo se presentan desde la parte superior a la inferior de la página si estas usando un modo de escritura que presente el texto horizontalmente, como el español.</p>
+
+<p>Con el siguiente ejemplo quedará más claro. Si tienes dos cajas que contengan un <code>heading</code> y un <code>paragraph</code>. La primera usa <code>writing-mode: horizontal-tb</code>, un modo de escritura horizontal y desde la parte superior de la página a la base. La segunda usa <code>writing-mode: vertical-rl</code>; este es un modo de escritura vertical y de derecha a izquierda.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+
+<p>Cuando cambiamos el modo de escritura, estamos cambiando que dirección es en bloque y cuál es lineal. En un modo de escritura <code>horizontal-tb</code> El la direccion del bloque va de arriba abajo; en un modo de escritura <code>vertical-rl</code> el bloque corre de derecha a izquierda horizontalmente. De esta forma la <strong>dimensión del bloque</strong> es siempre la direccion en la que se muestran los bloques en el modo de escritura en uso. La <strong>dimensión lineal</strong>, es siempre la dirección en que fluye una frase.</p>
+
+<p>Este dibujo muestra las dos dimensiones en un modo de escritura horizontal.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+
+<p>Este dibujo muestra las dos dimensiones en un modo de escritura vertical.</p>
+
+<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+
+<p>Una vez que empieces a observar el diseño CSS, y en particular los nuevos métodos de diseño, esta idea de bloque y lineal cobra mayor importancia. Será revisado más adelante.</p>
+
+<h3 id="Dirección">Dirección</h3>
+
+<p>Además del modo de escritura también tenemos la dirección del texto. Como se mencionó antes, algunos idiomas como el Árabe se escriben horizontalmente, de derecha a izquierda. Esto no es algo que usarías en un sentido creativo. Si tu simplemente quieres alinear algún elemento a la derecha, existen otras formas de hacerlo. Sin embargo es importante entender esto como parte de la naturaleza del CSS. La web no es solo para lenguajes que son escritos de izquierda a derecha!</p>
+
+<p>Debido al hecho de que el modo de escritura y la dirección del texto pueden cambiar, los nuevos métodos de diseño CSS no toman como referencia la izquierda y derecha, ni la parte superior e inferior. En su lugar, hablarán de inicio y fin junto con esta idea de en línea y bloque. No te preocupes mucho por eso en este momento, pero ten en cuenta estas ideas a medida que empiezas a mirar el diseño de una página web; va a ser de gran ayuda en tu entendimiento de CSS.</p>
+
+<h2 id="Valores_y_propiedades_lógicas">Valores y propiedades lógicas</h2>
+
+<p>La razón de hablar acerca de modos de escritura y dirección en este punto en tu aprendizaje, es por el hecho de que ya vimos muchas de estas propiedades que están atadas a las dimensiones físicas de la pantalla, y tienen más sentido cuando está en un modo de escritura horizontal.</p>
+
+<p>Vamos a echarle un vistzo a nuestras dos cajas de nuevo, una con el modo escritura <code>horizontal-tb</code> y otro con <code>vertical-rl</code>. Le hemos dado a estas dos cajas un {{cssxref("width")}}. Puedes ver que cuando la caja está en el modo de escritura vertical, aún tiene una anchura, y esto está causando que el texto se desborde.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+
+<p>Lo que nosotros realmente queremos en este escenario, es esencialmente intercambiar altura y anchura junto con el modo de escritura. Cuando estamos en el modo de escritura vertical, queremos que la caja se expanda en la dimensión del bloque así como lo hace en el modo horizontal.</p>
+
+<p>Para hacerlo más fácil, CSS ha desarrollado recientemente un conjunto de propiedades asignadas. Estas esencialmente reemplazan las propiedades físicas como <code>width </code>and <code>height</code>, con versiones <strong>lógicas</strong> o <strong>relativas al flujo</strong>.</p>
+
+<p>La propiedad asignada a <code>width</code> cuando está en el modo de escritura horizontal se llama {{cssxref("inline-size")}}, se refiere al tamaño en la dimensión inline. La propiedad para <code>height </code>se llama {{cssxref("block-size")}} y es el tamaño en la dimensión de bloque. Puedes ver como funciona en el ejemplo de abajo, donde reemplazamos <code>width</code> con <code>inline-size</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+
+<h3 id="Propiedades_lógicas_margin_border_y_padding">Propiedades lógicas <code>margin</code>, <code>border</code> y <code>padding</code></h3>
+
+<p>En las últimas dos lecciones aprendimos acerca del modelo de cajas con CSS, y los bordes CSS. En las propiedades margin, border y padding vas a encontrar varias instancias de propiedades físicas, por ejemplo {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, y {{cssxref("border-bottom")}}. Del mismo modo que tenemos asignaciones para ancho y alto, hay asignaciones para estas propiedades.</p>
+
+<p>La propiedad <code>margin-top</code> está asignada a {{cssxref("margin-block-start")}}, esto siempre se va a referir al margen al inicio de la dimensión del bloque. </p>
+
+<p>La propiedad {{cssxref("padding-left")}} se asigna a {{cssxref("padding-inline-start")}}, el padding que se aplica al inicio de la dirección inline. Aquí será donde las oraciones comienzan en ese modo de escritura. La propiedad {{cssxref("border-bottom")}} se asigna a {{cssxref("border-block-end")}}, que es el borde del final de la dimensión del bloque.</p>
+
+<p>Puedes ver una comparación entre las propiedades físicas y lógicas a continuación.</p>
+
+
+
+<p><strong>Si cambias el modo de escritura de las cajas asignando a la propiedad <code>writing-mode</code> en <code>.box</code> a <code>vertical-rl</code>, vas a ver como las propiedades físicas se quedan ligadas a sus direcciones físicas, mientras que las propiedades lógicas cambian con el modo de escritura.</strong></p>
+
+<p><strong>También puedes ver que el </strong><strong>{{htmlelement("h2")}} tiene  un <code>border-bottom</code> negro. ¿Puedes averiguar como hacer que el borde inferior siempre esté debajo del texto en ambos modos de escritura?</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+
+<p>Existe un gran número de propiedades cuando consideras cada uno de los bordes que puedes hacer a mano, y puedes ver todas las propiedades asignadas en la página de MDN para <a href="https://wiki.developer.mozilla.org/es/docs/Web/CSS/CSS_Logical_Properties">propiedades Lógicas y Valores</a></p>
+
+<h3 id="Valores_lógicos">Valores lógicos</h3>
+
+<p>Hasta ahora hemos examinado los nombres de las propiedades lógicas. Existen también algunas propiedades que toman valores físicos de <code>top</code>, <code>right</code>, <code>bottom</code>, y <code>left</code>. Estos valores también tienen asignaciones a valores lógicos: <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, y <code>inline-start</code>.</p>
+
+<p>Por ejemplo, puedes hacer que una imagen flote a la izquierda para hacer que el texto se ajuste alrededor de la imagen. Puedes reemplazar <code>left</code> con <code>inline-start</code> como se muestra en el ejemplo a continuación.</p>
+
+<p><strong>Cambia el modo de escritura en este ejemplo a <code>vertical-rl</code> para ver que sucede con la imagen. Cambia <code>inline-start</code> por <code>inline-end</code> para cambiar el modo en que flota.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+
+<p>Aquí también estamos usando valores lógicos de el margen para asegurar que el margen está en el sitio correcto sin importar que modo de escritura es.</p>
+
+<div class="blockIndicator note">
+<p>Actualmente, solo Firefox soporta valores relativos de flujo para <code>float</code>. Si estás usando <strong>Google Chrome </strong>o <strong>Microsoft Edge</strong>, deberías ver que la imagen no flota.</p>
+</div>
+
+<h3 id="¿Debería_usar_propiedades_físicas_o_lógicas">¿Debería usar propiedades físicas o lógicas?</h3>
+
+<p>Las propiedades lógicas y los valores son más recientes que su equivalente físico, y por lo tanto se han implementado recientemente en los navegadores. Puedes revisar cualquier página de propiedades en MDN para ver hasta donde llega el soporte del navegador. Si no estás usando multiples modos de escritura, entonces, por ahora, deberías preferir usar las versiones físicas. Sin embargo, en última instancia, esperamos que la gente va a pasar a las versiones lógicas para la mayoría de las cosas, ya que tienen mucho sentido una vez que comienzas a tratar también con métodos de diseño como Flexbox y Grid.</p>
+
+<h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2>
+
+<p>Tenemos mucho terreno cubierto en este artículo, pero puedes recordad la información más importante? Puedes encontrar algunas pruebas adicionales para verificar que has retenido esta información antes de seguir adelante: <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks">Prueba tus habilidades: modos de escritura.</a></p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Los conceptos explicados en esta lección son cada vez más importantes en CSS. Un entendimiento pleno de las direcciones en bloque y en línea, y como el flujo de texto cambia con la variación de los modos de escritura, van a ser de gran ayuda en el futuro. Te ayudará a entender CSS incluso si nunca usas un modo de escritura diferente al horizontal.</p>
+
+<p>En el módulo siguiente, vamos a echar un buen vistazo al desbordamiento en CSS</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a></li>
+ <li><a href="/es/docs/Web/CSS/Selectores_CSS">Selectores CSS</a>
+  <ul>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID">Selectores de tipo, clase e ID</a></li>
+   <li><a href="/es/docs/Web/CSS/Selectores_atributo">Selectores de atributo</a></li>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos">Pseudoclases y pseudoelementos</a></li>
+   <li><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores">Combinadores</a></li>
+  </ul>
+ </li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">The box model</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Fondos_y_bordes">Backgrounds and borders</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Manejando_diferentes_direcciones_de_texto">Handling different text directions</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
+ <li><a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Values and units</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html
new file mode 100644
index 0000000000..54f416456d
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/combinadores/index.html
@@ -0,0 +1,111 @@
+---
+title: Combinadores
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Combinadores
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Los últimos selectores que veremos son los llamados selectores de combinación. Se llaman así porqué combinan otros selectores de manera que proporciona una relación útil entre ellos y la ubicación del contenido en el documento.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes selectores de combinación que se pueden utilizar en el CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Selector_de_descendientes">Selector de descendientes</h2>
+
+<p>Ya hemos visto los selectores de descendientes en artículos anteriores (selectores con espacios entre ellos):</p>
+
+<pre class="brush: css notranslate">body article p</pre>
+
+<p>Estos selectores seleccionan elementos que son descendientes de otros selectores. No es necesario que sean hijos directos.</p>
+
+<p>En el ejemplo siguiente seleccionamos solo el elemento <code>&lt;p&gt;</code> que hay dentro de un elemento con una clase <code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Selector_de_combinación_de_elementos_hijo">Selector de combinación de elementos hijo</h2>
+
+<p>El selector de combinación de elementos hijo es un símbolo de «mayor que» (<code>&gt;</code>), que selecciona solo cuando los selectores identifican elementos que son hijos directos. Los elementos descendientes que se encuentran más abajo en la jerarquía no se seleccionan. Por ejemplo, para seleccionar solo los elementos <code>&lt;p&gt;</code> que son hijos directos de elementos <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>En el ejemplo siguiente hay una lista ordenada anidada dentro de otra lista no ordenada. Utilizamos los selectores de elementos hijo para seleccionar solo los elementos <code>&lt;li&gt;</code> que son hijos directos de <code>&lt;ul&gt;</code> y les aplicamos un borde superior.</p>
+
+<p>Si eliminamos el símbolo <code>&gt;</code> que lo identifica como un selector de elementos hijo, lo convertimos en un selector de elementos descendientes y se aplicará el borde rojo a todos los elementos <code>&lt;li&gt;</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Hermanos_adyacentes">Hermanos adyacentes</h2>
+
+<p>El selector de elementos hermanos adyacentes (<code>+</code>) se utiliza para seleccionar un elemento que se encuentra justo al lado de otro elemento en el mismo nivel de la jerarquía. Por ejemplo, para seleccionar todos los elementos <code>&lt;img&gt;</code> que aparecen justo después de elementos <code>&lt;p&gt;</code>:</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>El caso de uso más común es modificar el párrafo que va justo después del título, como en el ejemplo siguiente. Vamos a buscar un párrafo que sea directamente adyacente a <code>&lt;h1&gt;</code> y le vamos a aplicar un estilo.</p>
+
+<p>Si insertas algún otro elemento, como <code>&lt;h2&gt;</code> entre las etiquetas <code>&lt;h1&gt;</code> y <code>&lt;p&gt;</code>, verás que el selector ya no selecciona el párrafo y no se muestra con los mismos colores de fondo y de primer plano que cuando es adyacente.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Hermanos_generales">Hermanos generales</h2>
+
+<p>Si deseas seleccionar los hermanos de un elemento, incluso si no son directamente adyacentes, puedes utilizar el combinador de hermanos general (<code>~</code>). Por ejemplo, para seleccionar todos los elementos <code>&lt;img&gt;</code> que aparecen <em>después</em> de los elementos <code>&lt;p&gt;</code>, hacemos esto:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>En el ejemplo siguiente seleccionamos todos los elementos <code>&lt;p&gt;</code> que vienen después de <code>&lt;h1&gt;</code>, y aunque en el documento también hay un <code>&lt;div&gt;</code>, se selecciona incluso la etiqueta <code>&lt;p&gt;</code> que viene después.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="El_uso_de_selectores_de_combinación">El uso de selectores de combinación</h2>
+
+<p>Puedes combinar cualquiera de los selectores de los artículos anteriores con selectores de combinación para seleccionar una parte del documento. Por ejemplo, podrías utilizar el código siguiente para seleccionar elementos de una lista con una clase «a» que son hijos directos de <code>&lt;ul&gt;</code>:</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Ten cuidado cuando creas largas listas de selectores que seleccionan partes del documento muy específicas. Te será difícil volver a utilizar las reglas CSS porque has definido un selector muy específico para la ubicación del elemento en el marcado.</p>
+
+<p>A menudo es mejor crear una clase sencilla y aplicarla al elemento en cuestión. Dicho esto, tu conocimiento de los selectores de combinación te será muy útil si necesitas modificar algo del documento y no puedes acceder al código HTML (tal vez porque se haya generado a partir de CMS).</p>
+
+<h2 id="Comprueba_tus_habilidades">Comprueba tus habilidades</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para verificar que retienes esa información en <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
+
+<h2 id="Continuamos">Continuamos</h2>
+
+<p>Esta es la última sección de nuestros artículos sobre selectores. A continuación vamos a pasar a otra parte importante del CSS: <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">el modelo de caja CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elementos de imagen, de media y de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Estilo de las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/index.html b/files/es/learn/css/building_blocks/selectores_css/index.html
new file mode 100644
index 0000000000..d0ea61da20
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/index.html
@@ -0,0 +1,223 @@
+---
+title: Selectores CSS
+slug: Learn/CSS/Building_blocks/Selectores_CSS
+translation_of: Learn/CSS/Building_blocks/Selectors
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p class="summary">En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Nociones básicas de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender con detalle cómo funcionan los selectores CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_un_selector">¿Qué es un selector?</h2>
+
+<p>En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan <em>sujeto del selector</em>.</p>
+
+<p><img alt="Fragmento de código con el elemento h1 resaltado." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
+
+<p>En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como <code>h1</code>, o seleccionando una clase, como <code>.special</code>.</p>
+
+<p>En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en <a href="https://www.w3.org/TR/selectors-3/">especificación de nivel 3 de selectores</a>, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.</p>
+
+<h2 id="Listas_de_selectores">Listas de selectores</h2>
+
+<p>Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una <em>lista de selectores</em> para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un <code>h1</code> y para una clase <code>.special</code>, los puedo escribir como dos reglas separadas.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+} </code></pre>
+
+<p>También los podrías combinar en una lista de selectores, separándolos con una coma.</p>
+
+<pre class="brush: css notranslate"><code>h1, .special {
+  color: blue;
+} </code></pre>
+
+<p>Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.</p>
+
+<pre class="brush: css notranslate"><code>h1,
+.special {
+  color: blue;
+} </code></pre>
+
+<p>En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+
+<p>Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.</p>
+
+<p>En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento <code>h1</code>.</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+} </code></pre>
+
+<p>Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a <code>h1</code> ni a la clase.</p>
+
+<pre class="brush: css notranslate"><code>h1, ..special {
+  color: blue;
+} </code></pre>
+
+<h2 id="Tipos_de_selectores">Tipos de selectores</h2>
+
+<p>Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.</p>
+
+<h3 id="Selectores_de_tipo_de_clase_y_de_ID">Selectores de tipo, de clase y de ID</h3>
+
+<p>Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <code>&lt;h1&gt;</code>.</p>
+
+<pre class="brush: css notranslate">h1 { }</pre>
+
+<p>También incluye selectores que delimitan una clase:</p>
+
+<pre class="brush: css notranslate">.box { }</pre>
+
+<p>o un ID:</p>
+
+<pre class="brush: css notranslate">#unique { }</pre>
+
+<h3 id="Selectores_de_atributo">Selectores de atributo</h3>
+
+<p>Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:</p>
+
+<pre class="brush: css notranslate">a[title] { }</pre>
+
+<p>O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:</p>
+
+<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
+
+<h3 id="Las_pseudoclases_y_los_pseudoelementos">Las pseudoclases y los pseudoelementos</h3>
+
+<p>Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase <code>:hover</code>, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.</p>
+
+<pre class="brush: css notranslate">a: hover {}</pre>
+
+<p>También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, <code>::first-line</code> siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<code>&lt;p&gt;</code>, en el ejemplo siguiente), y actúa como si un elemento <code>&lt;span&gt;</code> hubiera delimitado la primera línea, seleccionado y aplicado estilo.</p>
+
+<pre class="brush: css notranslate">p::first-line { }</pre>
+
+<h3 id="Combinadores">Combinadores</h3>
+
+<p>El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <code>&lt;article&gt;</code> utilizando el operador de combinación hijo (<code>&gt;</code>):</p>
+
+<pre class="brush: css notranslate">article &gt; p { }</pre>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID">Selectores de tipo, de clase y de ID</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="Tabla_de_referencia_de_selectores">Tabla de referencia de selectores</h2>
+
+<p>La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Tutorial de aprendizaje de CSS</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Type_selectors">Selector de tipo</a></td>
+   <td><code>h1 {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Tipos_de_selectores">Los tipos de selectores</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Universal_selectors">Selector universal</a></td>
+   <td><code>* {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#El_selector_universal">El selector universal</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Class_selectors">Selector de clase</a></td>
+   <td><code>.box {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_clase">Los selectores de clase</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/ID_selectors">Selector de ID</a></td>
+   <td><code>#unique { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_ID">Los selectores de ID</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_atributo">Selector de atributo</a></td>
+   <td><code>a[title] {  }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Los selectores de atributo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudoclase</a></td>
+   <td><code>p:first-child { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_una_pseudoclase">Las pseudoclases</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Pseudoelementos">Pseudoelemento</a></td>
+   <td><code>p::first-line { }</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_un_pseudoelemento">Los pseudoelementos</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Descendant_combinator">Operadores de combinación descendentes</a></td>
+   <td><code>article p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_descendientes">Operadores de combinación descendentes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Child_combinator">Operador de combinación de elementos hijo</a></td>
+   <td><code>article &gt; p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_combinaci%C3%B3n_de_elementos_hijo">Operadores de combinación de elementos hijo</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Operador de combinación de elementos hermanos adyacentes</a></td>
+   <td><code>h1 + p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_adyacentes">Hermanos adyacentes</a></td>
+  </tr>
+  <tr>
+   <td><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Operador de combinación general de elementos hermanos</a></td>
+   <td><code>h1 ~ p</code></td>
+   <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_generales">Hermanos generales</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html
new file mode 100644
index 0000000000..f48dfdcbd5
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/pseudo-clases_y_pseudo-elementos/index.html
@@ -0,0 +1,397 @@
+---
+title: Pseudoclases y pseudoelementos
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos
+translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<p>El conjunto de selectores que estudiaremos en este artículo se conocen como <strong>pseudoclases</strong> y <strong>pseudoelementos</strong>. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Obtener información sobre los selectores de pseudoclases y pseudoelementos.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_una_pseudoclase">¿Qué es una pseudoclase?</h2>
+
+<p>Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.</p>
+
+<p>Las pseudoclases son palabras clave que comienzan con dos puntos:</p>
+
+<pre class="notranslate">:<em>pseudo-class-name</em></pre>
+
+<h3 id="Ejemplos_simples_de_pseudoclases">Ejemplos simples de pseudoclases</h3>
+
+<p>Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+
+<p>Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que <em>siempre</em> seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+
+<p>Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
+ <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
+</ul>
+
+<div class="blockIndicator note">
+<p><strong>Nota:</strong> Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse <code>:first-child</code> y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <code>&lt;article&gt;</code>, no solo un párrafo primer hijo. <code>:first-child</code> equivale a <code>*:first-child</code>. Pero normalmente se quiere más control y hay que ser más específico.</p>
+</div>
+
+<h3 id="Pseudoclases_de_acción_de_usuario">Pseudoclases de acción de usuario</h3>
+
+<p>Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de <strong>acción de usuario</strong>, que también reciben el nombre de <strong>pseudoclases dinámicas</strong>, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:</p>
+
+<ul>
+ <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code>: solo interviene si el usuario pasa el cursor sobre un elemento, normalmente un enlace.</li>
+ <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>: solo interviene si el usuario selecciona el elemento con los controles del teclado.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+
+<h2 id="¿Qué_es_un_pseudoelemento">¿Qué es un pseudoelemento?</h2>
+
+<p>Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos <code>::</code>.</p>
+
+<pre class="notranslate"><em>::pseudo-element-name</em></pre>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.</p>
+</div>
+
+<p>Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <code>&lt;span&gt;</code> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.</p>
+
+<p>El pseudoelemento <code>::first-line</code> soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+
+<p>Actúa como si hubiera un elemento <code>&lt;span&gt;</code> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.</p>
+
+<p>Puedes observar que en ambos párrafos se selecciona la primera línea.</p>
+
+<h2 id="Combinar_pseudoclases_y_pseudoelementos">Combinar pseudoclases y pseudoelementos</h2>
+
+<p>Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores <code>:first-child</code> y <code>::first-line</code>. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <code>&lt;p&gt;</code> que esté dentro de un elemento <code>&lt;article&gt;</code>.</p>
+
+<pre class="brush: css notranslate"><code>article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}</code></pre>
+
+<h2 id="Generar_contenido_con_before_y_after">Generar contenido con ::before y ::after</h2>
+
+<p>Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de <code><a href="/en-US/docs/Web/CSS/content">content</a></code> para introducir contenido en el documento usando el CSS.</p>
+
+<p>Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento <code>::before</code> por <code>::after</code> y verás que el texto se inserta al final del elemento, en lugar de al principio.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
+
+<p>Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.</p>
+
+<p>Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
+
+<p>Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.</p>
+
+<p>En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento <code>::before</code>. Le hemos asociado <code>display: block</code> para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
+
+<p>El uso de los pseudoelementos <code>::before</code> y <code>::after</code>, junto con la propiedad <code>content</code> se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.</p>
+
+<h2 id="Sección_de_referencia">Sección de referencia</h2>
+
+<p>Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.</p>
+
+<h3 id="Las_pseudoclases">Las pseudoclases</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref(":active") }}</td>
+   <td>Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":any-link") }}</td>
+   <td>Selecciona los estados <code>:link</code> y <code>:visited</code> de un enlace.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":blank") }}</td>
+   <td>Selecciona un <a href="/es/docs/Web/HTML/Elemento/input">elemento <code>&lt;input&gt;</code></a> cuyo valor de entrada está vacío.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":checked") }}</td>
+   <td>Selecciona un botón de opción o casilla de verificación en el estado que determines.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":current") }}</td>
+   <td>Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":default") }}</td>
+   <td>Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":dir") }}</td>
+   <td>Selecciona un elemento según su direccionalidad (valor del atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> de HTML o propiedad <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> de CSS).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":disabled") }}</td>
+   <td>Selecciona elementos de la interfaz de usuario que están en estado inactivo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":empty") }}</td>
+   <td>Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":enabled") }}</td>
+   <td>Selecciona elementos de la interfaz de usuario que están en estado activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, selecciona la primera página.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-child") }}</td>
+   <td>Selecciona el primero entre elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":first-of-type") }}</td>
+   <td>Selecciona el primero entre un tipo determinado de elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus") }}</td>
+   <td>Selecciona el elemento que tiene el foco.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-visible")}}</td>
+   <td>Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":focus-within") }}</td>
+   <td>Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":future") }}</td>
+   <td>Selecciona los elementos que van después del elemento en curso.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":hover") }}</td>
+   <td>Selecciona un elemento cuando el usuario interactúa con él.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":indeterminate") }}</td>
+   <td>Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de <a href="/es/docs/Web/HTML/Elemento/input/checkbox">casillas de verificación</a>.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":in-range") }}</td>
+   <td>Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":invalid") }}</td>
+   <td>Selecciona un elemento, como por ejemplo un <code>&lt;input&gt;</code>, cuyo estado es no válido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":lang") }}</td>
+   <td>Selecciona un elemento según el idioma (valor del atributo <a href="/es/docs/Web/HTML/Atributos_Globales/lang">lang</a> de HTML).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-child") }}</td>
+   <td>Selecciona el último elemento de entre sus elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":last-of-type") }}</td>
+   <td>Selecciona el último de entre los elementos hermanos de un tipo determinado.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":left") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la izquierda.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":link")}}</td>
+   <td>Selecciona los enlaces no visitados.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":local-link")}}</td>
+   <td>Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":is", ":is()")}}</td>
+   <td>Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":not") }}</td>
+   <td>Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-child") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-of-type") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <code>&lt;p&gt;</code>). Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-child") }}</td>
+   <td>Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n<var> <em>+ 1 r</em>elacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</var></var></td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":nth-last-of-type") }}</td>
+   <td>Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <code>&lt;p&gt;</code>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-child") }}</td>
+   <td>Selecciona un elemento que no tiene elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":only-of-type") }}</td>
+   <td>Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":optional") }}</td>
+   <td>Selecciona los elementos de formulario que son innecesarios.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":out-of-range") }}</td>
+   <td>Selecciona un elemento cuyo valor está fuera de rango.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":past") }}</td>
+   <td>Selecciona los elementos que se encuentran antes del elemento activo.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":placeholder-shown") }}</td>
+   <td>Selecciona el elemento de entrada que muestra texto de marcador de posición.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":playing") }}</td>
+   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":paused") }}</td>
+   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-only") }}</td>
+   <td>Selecciona los elementos que el usuario no puede modificar.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":read-write") }}</td>
+   <td>Selecciona los elementos que el usuario puede modificar.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":required") }}</td>
+   <td>Selecciona los elementos de formulario que son necesarios.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":right") }}</td>
+   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la derecha.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":root") }}</td>
+   <td>Selecciona un elemento que es la raíz del documento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":scope") }}</td>
+   <td>Selecciona cualquier elemento de ámbito.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":valid") }}</td>
+   <td>Selecciona un elemento como <code>&lt;input&gt;</code>, en un estado válido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":target") }}</td>
+   <td>Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el <a href="https://en.wikipedia.org/wiki/Fragment_identifier">identificador de fragmento de la URL</a> activo).</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref(":visited") }}</td>
+   <td>Selecciona los enlaces visitados.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Pseudoelementos">Pseudoelementos</h3>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ Cssxref("::after") }}</td>
+   <td>Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::before") }}</td>
+   <td>Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-letter") }}</td>
+   <td>Selecciona la primera letra del elemento.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::first-line") }}</td>
+   <td>Selecciona la primera línea del elemento de contenido.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::grammar-error") }}</td>
+   <td>Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::selection") }}</td>
+   <td>Selecciona la parte del documento que ha sido seleccionada.</td>
+  </tr>
+  <tr>
+   <td>{{ Cssxref("::spelling-error") }}</td>
+   <td>Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Elementos de imagen, de media y de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html
new file mode 100644
index 0000000000..057c38c18d
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_atributos/index.html
@@ -0,0 +1,154 @@
+---
+title: Selectores de atributo
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos
+translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Como ya explicamos en los artículos de HTML, los elementos pueden tener atributos que proporcionan un nivel de detalle mayor sobre el elemento que delimitan. En el CSS puedes utilizar selectores de atributo para seleccionar elementos definidos con unos atributos determinados. En este artículo veremos cómo utilizar estos selectores tan útiles.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a identificar y utilizar selectores de atributo.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Selectores_de_presencia_y_valor">Selectores de presencia y valor</h2>
+
+<p>Estos selectores permiten seleccionar un elemento solo a partir de la presencia de un atributo (por ejemplo <code>href</code>) o a partir de varias coincidencias diferentes con respecto al valor del atributo.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>]</code></td>
+   <td><code>a[title]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em> (el valor que se indica entre corchetes).</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
+   <td><code>a[href="https://example.com"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente el mismo, <em>value</em> (la cadena de caracteres que se indica entre corchetes).</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
+   <td><code>p[class~="special"]</code></td>
+   <td>
+    <p>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor es exactamente <em>value</em>, o los elementos con un mismo atributo <em>attr</em> que contiene uno o más valores de los cuales, al menos uno, coincide con <em>value</em>.</p>
+
+    <p>Ten en cuenta que en una lista que incluya más de un valor, los distintos valores se separan con un espacio.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
+   <td><code>div[lang|="zh"]</code></td>
+   <td>Relaciona los elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor puede ser exactamente <em>value</em> o puede comenzar con <em>value</em> seguido inmediatamente por un guion.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>En el ejemplo siguiente puedes observar cómo se utilizan estos selectores.</p>
+
+<ul>
+ <li>Mediante el uso de <code>li[class]</code> podemos relacionar cualquier selector con un atributo de clase. Los relaciona todos menos el primer elemento de la lista.</li>
+ <li><code>li[class="a"]</code> relaciona un selector con una clase de <code>a</code>, pero no un selector con una clase de <code>a</code> con otra clase separada por un espacio como parte del valor. Selecciona el segundo elemento de la lista.</li>
+ <li><code>li[class~="a"]</code> coincidirá con una clase <code>a</code> pero también con un valor que contenga la clase de <code>a</code> como parte de una lista de elementos separados por un espacio. Selecciona el segundo y el tercer elemento de la lista.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
+
+<h2 id="Selectores_coincidentes_con_subcadenas">Selectores coincidentes con subcadenas</h2>
+
+<p>Estos selectores permiten un tipo más avanzado de relación entre las subcadenas de caracteres que constituyen el valor del atributo. Por ejemplo, si tienes las clases <code>box-warning</code> y <code>box-error</code> y quieres encontrar todos los elementos que empiezan con la cadena de caracteres “box-”, puedes seleccionarlas ambas con <code>[class^="box-"]</code>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Ejemplo</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
+   <td><code>li[class^="box-"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor empieza exactamente con la subcadena de caracteres <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
+   <td><code>li[class$="-box"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor termina exactamente con la subcadena de caracteres <em>value</em>.</td>
+  </tr>
+  <tr>
+   <td><code>[<em>attr</em>*=<em> </em>]</code></td>
+   <td><code>li[class*="box"]</code></td>
+   <td>Relaciona elementos con un mismo nombre de atributo, <em>attr</em>, cuyo valor incluye al menos una ocurrencia de la subcadena <em>value</em> en algún punto de la cadena.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>El ejemplo siguiente muestra cómo se usan estos selectores:</p>
+
+<ul>
+ <li><code>li[class^="a"]</code> relaciona cualquier valor de atributo que empieza con <code>a</code>; luego, relaciona los dos primeros elementos de la lista se verán iguales.</li>
+ <li><code>li[class$="a"]</code> relaciona cualquier valor de atributo que termina con <code>a</code>; luego, relaciona el primer y el tercer elemento de la lista.</li>
+ <li><code>li[class*="a"]</code> relaciona cualquier valor de atributo que contiene <code>a</code> en cualquier posición; luego, relaciona todos los elementos de la lista.</li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
+
+<h2 id="Mayúsculas_y_minúsculas">Mayúsculas y minúsculas</h2>
+
+<p>Si quieres relacionar los valores de atributo tanto si están escritos en mayúsculas como en minúsculas, puedes utilizar el valor <code>i</code> antes del paréntesis de cierre. Este indicador informa al navegador de que debe relacionar todos los caracteres ASCII independientemente de si las letras son mayúsculas o minúsculas. Sin este indicador, los valores se relacionarán según las directrices del lenguaje del documento con respecto a la distinción entre mayúsculas y minúsculas; en el caso del HTML, se distinguirá entre mayúsculas y minúsculas.</p>
+
+<p>En el ejemplo siguiente, el primer selector relaciona valores que empiezan con <code>a</code>; luego, solo coincide el primer elemento de la lista porque los otros dos comienzan con una A mayúscula. El segundo selector utiliza el indicador de no distinción entre mayúsculas y minúsculas, así que relaciona todos los elementos de la lista.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Recientemente se ha creado un valor <code>s</code>, que obliga a establecer la distinción de mayúsculas y minúsculas en contextos en que no se suele establecer esta distinción. Sin embargo, pocos navegadores lo utilizan y no resulta demasiado útil en un contexto HTML.</p>
+</div>
+
+<h2 id="Próximos_pasos">Próximos pasos</h2>
+
+<p>Ahora que hemos terminado con los selectores de atributo, puedes avanzar al artículo siguiente y leer acerca de los <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">selectores de pseudoclases y pseudoelementos</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html
new file mode 100644
index 0000000000..01b3963f8a
--- /dev/null
+++ b/files/es/learn/css/building_blocks/selectores_css/selectores_de_tipo_clase_e_id/index.html
@@ -0,0 +1,117 @@
+---
+title: 'Selectores de tipo, clase e ID'
+slug: Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID
+translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<p>En este artículo vamos a echar un vistazo a los selectores más simples de que dispones y que seguramente serán los que utilices con mayor frecuencia.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes selectores CSS que podemos utilizar para aplicar CSS a un documento.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Tipos_de_selectores">Tipos de selectores</h2>
+
+<p>Un <strong>selector de tipo</strong> también recibe el nombre de <em>selector de nombre de etiqueta</em> o <em>selector de elemento</em> porque selecciona un elemento/etiqueta HTML del documento. En el ejemplo siguiente hemos utilizado los selectores span, em y strong. Se aplica estilo a todas las instancias de los elementos <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> y <code>&lt;strong&gt;</code>.</p>
+
+<p><strong>Trata de añadir una regla CSS que seleccione el elemento <code>&lt;h1&gt;</code> y cambie su color para que se vea azul.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+
+<h2 id="El_selector_universal">El selector universal</h2>
+
+<p>El selector universal se indica con un asterisco (<code>*</code>) y selecciona todos los elementos del documento (o del elemento padre si está encadenado con otro elemento y un operador de combinación descendente, por ejemplo). En el ejemplo siguiente hemos utilizado el selector universal para eliminar los márgenes en todos los elementos. Esto significa que en lugar de la opción predeterminada de aplicación de estilos del navegador, que muestra los títulos de encabezado y los párrafos separados por un margen de respeto, todo se mostrará pegado y no resultará tan fácil distinguir los diversos párrafos.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+
+<p>Es posible observar este tipo de comportamiento en las «hojas de estilo de puesta a cero» (o «hojas de estilo <em>reset</em>»), que anulan el formato del navegador. Fueron muy populares en un momento dado; sin embargo, excluir todo el estilo significa que luego tienes que ponerlo todo de nuevo. Por este motivo tendemos a utilizar el selector universal con mucho cuidado, y para situaciones muy específicas como la que se describe a continuación.</p>
+
+<h3 id="Uso_del_selector_universal_para_facilitar_la_legibilidad_de_tus_selectores">Uso del selector universal para facilitar la legibilidad de tus selectores</h3>
+
+<p>Uno de los usos del selector universal es facilitar la legibilidad de los selectores y clarificar sus funciones. Por ejemplo, si quiero seleccionar el primer elemento hijo de cualquier elemento <code>&lt;article&gt;</code> y poner ese elemento, cualquiera que sea, en negrita, puedo utilizar el selector {{cssxref(":first-child")}}, que veremos con mayor detalle más adelante en el artículo de <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos">pseudoclases y pseudoelementos</a>, como selector descendente junto con el selector de elemento <code>&lt;article&gt;</code>: </p>
+
+<pre class="brush: css notranslate">article :first-child {
+
+}</pre>
+
+<p>Sin embargo, esto podría confundirse con <code>article:first-child</code>, que selecciona cualquier elemento <code>&lt;article&gt;</code> que sea el primer elemento hijo de otro elemento.</p>
+
+<p>Para evitar esta confusión podemos añadir al selector <code>:first-child</code> el selector universal. De este modo la función del selector resulta obvia: seleccionará <em>cualquier</em> elemento que entre en la jerarquía de primer hijo de un elemento <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article *:first-child {
+
+} </pre>
+
+<h2 id="Selectores_de_clase">Selectores de clase</h2>
+
+<p>El selector de clase comienza con un punto (<code>.</code>) y selecciona todo elemento del documento que esté afectado por esa clase. En el ejemplo siguiente hemos creado una clase llamada <code>.highlight</code> y la hemos aplicado en varios lugares del documento. Todos los elementos a los que se aplique esta clase se resaltarán en amarillo.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+
+<h3 id="Delimitación_de_clases_en_elementos_particulares">Delimitación de clases en elementos particulares</h3>
+
+<p>Puedes crear un selector que seleccionará los elementos concretos que estén afectados por esa clase. En el ejemplo siguiente vamos a introducir un resaltado en un elemento <code>&lt;span&gt;</code> con una clase <code>highlight</code> del de los títulos <code>&lt;h1&gt;</code> con clase <code>highlight</code>. Para ello hay que anexar esa clase al selector de tipo correspondiente al elemento que queremos delimitar, sin dejar entre ellos ningún espacio.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+
+<p>Este enfoque hace el elemento CSS menos reutilizable porque la clase solo se aplicará a ese elemento en particular y tendrás que agregar otro selector en caso que quieras que las normas también se apliquen a otros elementos.</p>
+
+<h3 id="Delimitar_un_elemento_afectado_por_más_de_una_clase">Delimitar un elemento afectado por más de una clase</h3>
+
+<p>Puedes aplicar más de una clase a un elemento y delimitarlos de forma individual o seleccionar el elemento cuando todas las clases están presentes en el selector. Puede ser útil cuando se trabaja con componentes que se pueden combinar de maneras diferentes en tu página web.</p>
+
+<p>En el ejemplo siguiente hay un elemento <code>&lt;div&gt;</code> que contiene una nota. El borde gris se aplica cuando la caja tiene una clase <code>notebox</code>. Si además tiene una clase <code>warning</code> o <code>danger</code>, la propiedad {{cssxref("border-color")}} cambia.</p>
+
+<p>Para decirle al navegador que solo queremos seleccionar el elemento si incluye todas estas clases, las encadenamos juntas sin ningún espacio entre ellas.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+
+<h2 id="Selectores_de_ID">Selectores de ID</h2>
+
+<p>Un selector de ID comienza con un carácter <code>#</code> en lugar de un punto, pero se utiliza básicamente de la misma manera que un selector de clase. Sin embargo, un ID se puede utilizar una sola vez en cada documento, y a cada elemento solo se le puede aplicar un único <code>id</code>. Puede seleccionar un elemento que tenga propiedad <code>id</code> y ese ID puede ir precedido de un selector de tipo que seleccionará el elemento solo si el elemento y el ID coinciden. En el ejemplo siguiente puedes ver todos estos usos:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Como aprendimos en el artículo sobre la especificidad, un ID tiene una especificidad muy alta y anula la mayoría de los otros selectores. Esto puede dificultar su uso. En la mayoría de los casos es preferible añadir una clase al elemento en lugar de utilizar un ID. Sin embargo, si el ID es la única manera de seleccionar el elemento (tal vez porque no tengas acceso al marcado y, por lo tanto, no lo puedes editar) no hay ningún problema en utilizarlo.</p>
+</div>
+
+<h2 id="En_el_próximo_artículo">En el próximo artículo</h2>
+
+<p>Seguiremos con la descripción de los selectores examinando los <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">selectores de atributo</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>
diff --git a/files/es/learn/css/building_blocks/styling_tables/index.html b/files/es/learn/css/building_blocks/styling_tables/index.html
new file mode 100644
index 0000000000..283df180e4
--- /dev/null
+++ b/files/es/learn/css/building_blocks/styling_tables/index.html
@@ -0,0 +1,282 @@
+---
+title: Estilizando tablas
+slug: Learn/CSS/Building_blocks/Styling_tables
+translation_of: Learn/CSS/Building_blocks/Styling_tables
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</div>
+
+<p class="summary">Aplicar estilos a una tabla HTML no es el trabajo más interesante del mundo, pero a veces hay que hacerlo. Este artículo proporciona una guía para hacer que las tablas HTML presenten un aspecto agradable, para ello usaremos algunas de las características específicas para tablas que hemos destacado en artículos anteriores.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y <a href="/es/docs/Learn/HTML/Tablas">tablas HTML</a>, y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>.)</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Aprender a aplicar estilo a tablas HTML de una forma efectiva.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Una_tabla_HTML_típica">Una tabla HTML típica</h2>
+
+<p>Comencemos por echar un vistazo a una tabla HTML típica. Bueno, decimos típica porque la mayoría de los ejemplos de tablas HTML son sobre zapatos, el tiempo o empleados; y hemos decidido hacer las cosas más interesantes creando una tabla sobre grupos de música punk famosos del Reino Unido. El código es el siguiente:</p>
+
+<pre class="brush: html notranslate">&lt;table summary="Los grupos de música punk más famosos del Reino Unido"&gt;
+  &lt;caption&gt;Un resumen de los grupos de música punk más famosos del Reino Unido&lt;/caption&gt;
+  &lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th scope="col"&gt;Grupo&lt;/th&gt;
+      &lt;th scope="col"&gt;Año de formación&lt;/th&gt;
+      &lt;th scope="col"&gt;Número de álbumes&lt;/th&gt;
+      &lt;th scope="col"&gt;Canción más conocida&lt;/th&gt;
+    &lt;/tr&gt;
+  &lt;/thead&gt;
+  &lt;tbody&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;9&lt;/td&gt;
+      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
+    &lt;/tr&gt;
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
+      &lt;td&gt;1976&lt;/td&gt;
+      &lt;td&gt;6&lt;/td&gt;
+      &lt;td&gt;London Calling&lt;/td&gt;
+    &lt;/tr&gt;
+
+      ... se han eliminado algunas filas por abreviar
+
+    &lt;tr&gt;
+      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
+      &lt;td&gt;1974&lt;/td&gt;
+      &lt;td&gt;17&lt;/td&gt;
+      &lt;td&gt;No More Heroes&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tbody&gt;
+  &lt;tfoot&gt;
+    &lt;tr&gt;
+      &lt;th scope="row" colspan="2"&gt;Número total de álbumes&lt;/th&gt;
+      &lt;td colspan="2"&gt;77&lt;/td&gt;
+    &lt;/tr&gt;
+  &lt;/tfoot&gt;
+&lt;/table&gt;</pre>
+
+<p>La tabla está bien creada, puede aplicársele estilo fácilmente y presenta características de accesibilidad gracias a propiedades como {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlattrxref("summary","table")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}}, etc. Por desgracia, no presenta un aspecto agradable cuando se muestra en pantalla (puedes ver el ejemplo en <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Tal y como está, es aburrida y difícil de leer. Necesitamos usar algo de CSS para arreglar esto.</p>
+
+<h2 id="Aprendizaje_activo_Aplicar_estilo_a_nuestra_tabla">Aprendizaje activo: Aplicar estilo a nuestra tabla</h2>
+
+<p>En esta sección de aprendizaje activo vamos a aplica estilo a nuestra tabla juntos.</p>
+
+<ol>
+ <li>Para comenzar, crea una copia local del <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html" title="código de ejemplo">código de ejemplo</a>, descarga las dos imágenes (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), y pon los tres archivos en alguna carpeta de tu ordenador.</li>
+ <li>Ahora crea un archivo nuevo llamado <code>style.css</code> y guárdalo con el resto de archivos, en la misma carpeta.</li>
+ <li>Enlaza el CSS al HTML copiando la línea siguiente en {{htmlelement("head")}}:
+  <pre class="brush: html notranslate">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
+ </li>
+</ol>
+
+<h3 id="Espaciado_y_distribución">Espaciado y distribución</h3>
+
+<p>Lo primero que hay que hacer es solucionar los aspectos de espaciado/distribución; ¡el estilo por defecto de la tabla es tan apretado! Para ello, añadimos el CSS siguiente al archivo <code>style.css</code>:</p>
+
+<pre class="brush: css notranslate">/* spacing */
+
+table {
+  table-layout: fixed;
+  width: 100%;
+  border-collapse: collapse;
+  border: 3px solid purple;
+}
+
+thead th:nth-child(1) {
+  width: 30%;
+}
+
+thead th:nth-child(2) {
+  width: 20%;
+}
+
+thead th:nth-child(3) {
+  width: 15%;
+}
+
+thead th:nth-child(4) {
+  width: 35%;
+}
+
+th, td {
+  padding: 20px;
+}</pre>
+
+<p>Las partes más importantes que destacamos son:</p>
+
+<ul>
+ <li>En general es una buena idea establecer un valor {{cssxref("table-layout")}} en <code>fixed</code> para la tabla porque le proporciona un comportamiento predeterminado predecible. Normalmente se tiende a dar un tamaño de columna según la cantidad de contenido que haya en estas, lo que suele producir resultados extraños. Con <code>table-layout: fixed</code>, puedes dar a las columnas un tamaño de acuerdo con el ancho de sus celdas de encabezado y a continuación gestionar los contenidos de la forma que te parezca más adecuada. Por esto hemos seleccionado los cuatro encabezados con el selector <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) (Seleccionar el descendiente enésimo que es un elemento {{htmlelement("th")}} en una secuencia dentro del elemento {{htmlelement("thead")}}) y, dados estos, asignar los porcentajes de anchura. Chris Coyier expone esta técnica con más detalle en <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
+  <br>
+  Hemos emparejado esto con un {{cssxref("width")}} del 100%, que significa que la tabla llenará cualquier contenedor en la que se ubique, y presentará unas buenas características adaptativas (aunque podría requerir algo más de trabajo para que se vea bien en pantallas de anchuras estrechas).</li>
+ <li>Un valor {{cssxref("border-collapse")}} de <code>collapse</code> es una buena práctica estándar para cualquier tarea de aplicación de estilo a tablas. Por defecto, cuando estableces los bordes de los elementos de la tabla, quedará un espacio entre ellos, como se muestra en la imagen siguiente. <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;"> Esto no presenta un aspecto agradable (aunque puede ser el aspecto que buscas, ¡quién sabe!). Si estableces <code>border-collapse: collapse;</code>, los bordes se reducen a uno, y así presenta un aspecto mucho más agradable: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li>
+ <li>Hemos puesto un borde ({{cssxref("border")}}) alrededor de la tabla, que es necesario, porque vamos a poner bordes en la cabecera de la tabla y después en el pie; queda raro e inconexo si no pones ningún borde a la tabla que la delimite del resto de los elementos del exterior y quedan huecos.</li>
+ <li>Hemos puesto área de relleno ({{cssxref("padding")}}) en los elementos {{htmlelement("th")}} y {{htmlelement("td")}}; esto da a los datos espacio para que respiren y mejora la legibilidad de la tabla.</li>
+</ul>
+
+<p>En este punto, nuestra tabla ya presenta un aspecto mucho más agradable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Un_poco_de_tipografía">Un poco de tipografía</h3>
+
+<p>Ahora arreglaremos un poco nuestro texto.</p>
+
+<p>En primer lugar, hemos ido a <a href="https://www.google.com/fonts">Google Fonts</a> y hemos encontrado un tipo de letra adecuado para una tabla sobre bandas punk. Puedes buscar uno diferente si lo deseas; solo tienes que reemplazar el elemento {{htmlelement ("link")}} que te hemos proporcionado y la declaración {{cssxref ("font-family")}} personalizada por las que te proporcione Google Fonts.</p>
+
+<p>Primero, añade el elemento {{htmlelement ("link")}} siguiente a tu encabezado HTML, justo encima del elemento <code>&lt;link&gt;</code>:</p>
+
+<pre class="brush: html notranslate">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+
+<p>Ahora añade el CSS siguiente a tu archivo <code>style.css</code>, debajo de la línea añadida anterior:</p>
+
+<pre class="brush: css notranslate">/* typography */
+
+html {
+  font-family: 'helvetica neue', helvetica, arial, sans-serif;
+}
+
+thead th, tfoot th {
+  font-family: 'Rock Salt', cursive;
+}
+
+th {
+  letter-spacing: 2px;
+}
+
+td {
+  letter-spacing: 1px;
+}
+
+tbody td {
+  text-align: center;
+}
+
+tfoot th {
+  text-align: right;
+}</pre>
+
+<p>En realidad aquí no hay nada que sea específico para las tablas. En general, modificamos el estilo de la letra para facilitar la lectura:</p>
+
+<ul>
+ <li>Hemos establecido una lista global de fuentes Sans Serif. Esto es puramente una elección de estilo. También hemos configurado nuestro tipo de letra personalizada en los encabezados que hay dentro de los elementos {{htmlelement ("thead")}} y {{htmlelement ("tfoot")}} para dotarlos de una encantadora sucia estética punk.</li>
+ <li>Hemos establecido algunos {{cssxref("letter-spacing")}} en los encabezados y las celdas, porque creemos que ayuda a la legibilidad. De nuevo es, sobre todo, una elección estilística.</li>
+ <li>Hemos establecido en el elemento {{htmlelement("tbody")}} el centrado del texto en las celdas de la tabla para que se queden alineadas con los encabezados. Por defecto, en {{cssxref("text-align")}} se asigna un valor <code>left</code> para las celdas, y un valor <code>center</code> para los encabezados, pero a menudo queda mejor disponer las alineaciones de texto establecidas de la misma manera en ambos. El peso predeterminado para la negrita en los tipos de letra de los encabezados basta para diferenciar su aspecto.</li>
+ <li>Hemos establecido el texto del encabezado alineado a la derecha en el elemento {{htmlelement ("tfoot")}} para que visualmente quede mejor asociado con sus datos.</li>
+</ul>
+
+<p>El resultado se ve un poco más limpio:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+
+<h3 id="Gráficos_y_colores">Gráficos y colores</h3>
+
+<p>Ahora, ¡a por los gráficos y los colores! Puesto que la tabla rezuma contenido y actitud punk, vamos a darle un brillante estilo imponente que le pegue. No te preocupes, no tienes que hacer tus tablas tan extremadas: puedes optar por algo más sutil y de buen gusto.</p>
+
+<p>Empieza añadiendo el CSS siguiente a tu archivo <code>style.css</code>, de nuevo al final:</p>
+
+<pre class="brush: css notranslate">thead, tfoot {
+  background: url(leopardskin.jpg);
+  color: white;
+  text-shadow: 1px 1px 1px black;
+}
+
+thead th, tfoot th, tfoot td {
+  background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
+  border: 3px solid purple;
+}
+</pre>
+
+<p>Una vez más, aquí no hay nada específico para las tablas, pero vale la pena señalar algunas cosas.</p>
+
+<p>Hemos añadido una imagen de fondo ({{cssxref("background-image")}}) a los elementos {{htmlelement("thead")}} y {{htmlelement("tfoot")}}, y hemos cambiado el ({{cssxref("color")}}) de todo el texto del encabezado y el pie de página por el blanco (y le hemos dado una sombra, {{cssxref("text-shadow")}}) para que sea legible. Siempre debes asegurarte de que tu texto contraste bien con el fondo, para que sea legible.</p>
+
+<p>También hemos añadido un degradado lineal a los elementos {{htmlelement("th")}} y {{htmlelement("td")}} del encabezado y el pie de página para obtener un poco de textura, y también hemos dado a esos elementos un borde púrpura brillante. Es útil tener múltiples elementos anidados disponibles para que puedas superponer estilos. Sí, podríamos haber colocado tanto la imagen de fondo como el gradiente lineal en los elementos {{htmlelement ("thead")}} y {{htmlelement ("tfoot")}} utilizando múltiples imágenes de fondo, pero decidimos hacerlo por separado por los navegadores más antiguos que no admiten múltiples imágenes de fondo o gradientes lineales.</p>
+
+<h4 id="Rayas_de_cebra">Rayas de cebra</h4>
+
+<p>Queremos dedicar una sección independiente a mostrarte cómo implementar <strong>rayas de cebra</strong>, alternando filas de color que facilitan el análisis y la legibilidad de las diversas filas de datos de la tabla. Añade el CSS siguiente al final de tu archivo <code>style.css</code>:</p>
+
+<pre class="brush: css notranslate">tbody tr:nth-child(odd) {
+  background-color: #ff33cc;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #e495e4;
+}
+
+tbody tr {
+  background-image: url(noise.png);
+}
+
+table {
+  background-color: #ff33cc;
+}</pre>
+
+<ul>
+ <li>Ya has visto el selector {{cssxref(":nth-child")}}, que se usa para seleccionar elementos hijo específicos. También se le puede dar una fórmula como parámetro, de modo que seleccione una secuencia de elementos. La fórmula <code>2n-1</code> seleccionaría todos los elementos hijo impares (1, 3, 5, etc.), y la fórmula <code>2n</code>, todos los elementos hijo pares (2, 4, 6, etc.) Nosotros hemos utilizado las palabras clave <code>odd</code> y <code>even</code> en nuestro código, que hacen exactamente lo mismo que las fórmulas mencionadas. En este caso, damos a las filas pares y a las impares (espeluznantes) colores diferentes.</li>
+ <li>También hemos añadido un mosaico de fondo repetitivo a todas las filas del cuerpo de la tabla, que es solo un poco de ruido (un <code>.png</code> semitransparente con un poco de distorsión visual) para proporcionar algo de textura.</li>
+ <li>Por último, le hemos dado a toda la tabla un color de fondo sólido para que los navegadores que no admiten el selector <code>:nth-child</code> todavía dispongan de un fondo para las filas del cuerpo de la tabla.</li>
+</ul>
+
+<p>Esta explosión de colores da como resultado el aspecto siguiente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p>
+
+<p>Esto puede quedar un poco exagerado y no ser de tu agrado, pero el punto que tratamos de explicar es que las tablas no tienen por qué ser aburridas ni académicas.</p>
+
+<h3 id="Aplicar_estilo_al_título">Aplicar estilo al título</h3>
+
+<p>Hay una última cosa que hacer con nuestra tabla: aplicar estilo al título. Para ello, añade al final de tu archivo <code>style.css</code> lo siguiente:</p>
+
+<pre class="brush: css notranslate">caption {
+  font-family: 'Rock Salt', cursive;
+  padding: 20px;
+  font-style: italic;
+  caption-side: bottom;
+  color: #666;
+  text-align: right;
+  letter-spacing: 1px;
+}</pre>
+
+<p>Aquí no hay nada notable, excepto la propiedad {{cssxref ("caption-side")}}, a la que se le ha dado un valor <code>bottom</code>. Esto coloca el título en la parte inferior de la tabla, lo que junto con el resto de declaraciones nos proporciona este aspecto final (puedes verlo vivo en <a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p>
+
+<h2 id="Aprendizaje_activo_Aplica_estilo_a_tu_tabla">Aprendizaje activo: Aplica estilo a tu tabla</h2>
+
+<p>En este punto, nos gustaría que tomes nuestro ejemplo de tabla HTML (¡o que uses uno propio!) y que le apliques estilo para obtener algo considerablemente mejor diseñado y menos llamativo que nuestra tabla.</p>
+
+<h2 id="Consejos_rápidos_para_el_diseño_de_tablas">Consejos rápidos para el diseño de tablas</h2>
+
+<p>Antes de seguir adelante, creemos que tendríamos que proporcionar una lista rápida de los puntos más útiles que acabamos de ilustrar:</p>
+
+<ul>
+ <li>Haz el marcado de la tabla lo más simple posible y mantén las cosas flexibles. Por ejemplo, con el uso de porcentajes, para que el diseño sea más adaptativo.</li>
+ <li>Usa {{cssxref("table-layout")}}<code>: fixed</code> para crear un diseño de tabla más predecible que te permita establecer con facilidad los anchos de columna configurando {{cssxref("width")}} en sus encabezados ({{htmlelement("th")}}).</li>
+ <li>Usa {{cssxref ("border-collapse")}}<code>: collapse</code> para que los bordes de los elementos de la tabla colapsen entre sí y proporcionen una apariencia más ordenada y más fácil de controlar.</li>
+ <li>Usa {{htmlelement ("thead")}}, {{htmlelement ("tbody")}} y {{htmlelement ("tfoot")}} para dividir la tabla en fragmentos lógicos y proporcionar lugares adicionales para aplicarle CSS, para superponer estilos entre sí con más facilidad, si es necesario.</li>
+ <li>Usa rayas de cebra en filas alternativas para facilitar la legibilidad.</li>
+ <li>Usa {{cssxref ("text-align")}} para alinear el texto en tus elementos {{htmlelement ("th")}} y {{htmlelement ("td")}}, para ordenar los elementos y facilitar su legibilidad.</li>
+</ul>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Después de aplicar estilo a las tablas, necesitamos algo más en que ocupar nuestro tiempo. El artículo siguiente expone la depuración de documentos CSS, es decir, cómo resolver problemas como diseños de página que no presentan el aspecto que deberían, o propiedades que no se aplican cuando crees que deberían aplicarse. Esto incluye información sobre el uso de las herramientas DevTools del navegador para hallar soluciones a tus problemas.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes")}}</p>
diff --git a/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html
new file mode 100644
index 0000000000..4470746bc8
--- /dev/null
+++ b/files/es/learn/css/building_blocks/valores_y_unidades_css/index.html
@@ -0,0 +1,392 @@
+---
+title: Valores y unidades CSS
+slug: Learn/CSS/Building_blocks/Valores_y_unidades_CSS
+translation_of: Learn/CSS/Building_blocks/Values_and_units
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Todas las propiedades que se utilizan en CSS tienen un valor o un conjunto de valores que esa propiedad admite, y echar un vistazo a cualquier página de propiedades en MDN te ayudará a comprender qué valores admite una propiedad en particular. En este artículo veremos algunos de los valores y unidades más comunes en uso.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Prerrequisitos:</th>
+   <td>Conocimientos básicos de informática, tener el <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico</a> instalado, conocimientos básicos de <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
+  </tr>
+  <tr>
+   <th scope="row">Objetivo:</th>
+   <td>Conocer los diferentes tipos de valores y unidades que admiten las propiedades CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="¿Qué_es_un_valor_CSS">¿Qué es un valor CSS?</h2>
+
+<p>En las especificaciones CSS y en las páginas de propiedades de este proyecto MDN, podrás detectar los valores porque estarán escritos entre corchetes angulares, como <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> o <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>. Cuando veas que el valor <code>&lt;color&gt;</code> es válido para una propiedad en particular, significa que para esa propiedad puedes usar como valor cualquier color válido de entre los que se enumeran en la página de referencia de la propiedad <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: También verás valores CSS denominados <em>tipos de datos</em>. Los términos son básicamente intercambiables: cuando veas algo en CSS denominado ‘tipo de datos’, en realidad es solo una forma elegante de decir ‘valor’.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Sí, hay una tendencia de denotar los valores CSS entre corchetes angulares, para diferenciarlos de las propiedades CSS (por ejemplo, la propiedad {{cssxref ("color")}} con respecto al tipo de dato <a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a>). Aunque podría generarte confusión entre los tipos de datos CSS y los elementos HTML, porque ambos usan corchetes angulares, es poco probable porque se usan en contextos muy diferentes.</p>
+</div>
+
+<p>En el ejemplo siguiente hemos establecido el color de nuestro encabezado con una palabra clave y el fondo con la función <code>rgb()</code>:</p>
+
+<pre class="brush: css notranslate"><code>h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} </code>
+</pre>
+
+<p>Un valor en CSS es una forma de definir una colección de subvalores admitidos. Esto significa que si ves <code>&lt;color&gt;</code> como válido, no necesitas preguntarte cuáles de los diferentes tipos de valor de color puedes usar: palabras clave, valores hexadecimales, funciones <code>rgb()</code>, etc. Puedes usar <em>cualquier</em> valor <code>&lt;color&gt;</code> disponible siempre que tu navegador lo admita. La página de MDN te dará información sobre lo que admite cada navegador para cada valor. Por ejemplo, puedes ver que en la sección de compatibilidad de navegadores de la página para <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> se enumeran diferentes tipos de valores de color y los navegadores que los admiten.</p>
+
+<p>Echemos un vistazo a algunos de los tipos de valores y unidades con los que puedes encontrar con frecuencia, con ejemplos para que puedas probar diferentes valores posibles.</p>
+
+<h2 id="Números_longitudes_y_porcentajes">Números, longitudes y porcentajes</h2>
+
+<p>Al utilizar CSS te puedes encontrar con varios tipos de datos numéricos. Todos los siguientes están clasificados como tipos de datos numéricos:</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Tipo de datos</th>
+   <th scope="col">Descripción</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code><a href="/es/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
+   <td>Un <code>&lt;integer&gt;</code> es un número entero, como <code>1024</code> o <code>-55</code>.</td>
+  </tr>
+  <tr>
+   <td><code><a href="/es/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
+   <td>Un <code>&lt;number&gt;</code> representa un número decimal; puede tener o no un punto de separación decimal con un componente fraccionario, por ejemplo: <code>0,255</code>, <code>128</code> o <code>-1,2</code>.</td>
+  </tr>
+  <tr>
+   <td><code>&lt;dimension&gt;</code></td>
+   <td>Una <code>&lt;dimension&gt;</code> es un <code>&lt;number&gt;</code> con una unidad asociada, por ejemplo: <code>45deg</code> (grados), <code>5s</code> (segundos) o <code>10px</code> (píxeles). <code>&lt;dimension&gt;</code> es una categoría general que incluye los tipos <code><a href="/es/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/es/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/es/docs/Web/CSS/time">&lt;time&gt;</a></code> y <code><a href="/es/docs/Web/CSS/resolución">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td>
+  </tr>
+  <tr>
+   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
+   <td>Un <code>&lt;percentage&gt;</code> representa una fracción de algún otro valor, por ejemplo, <code>50%</code>. Los valores de porcentaje siempre son relativos a otra cantidad, por ejemplo, la longitud de un elemento es relativa a la longitud de su elemento padre.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Longitudes">Longitudes</h3>
+
+<p>El tipo numérico con el que te vas a encontrar con mayor frecuencia es <code>&lt;length&gt;</code>, por ejemplo, <code>10px</code> (píxeles) o <code>30em</code>. En CSS se utilizan dos longitudes diferentes: relativa y absoluta. Es importante conocer la diferencia para entender qué dimensiones van a tener las cosas.</p>
+
+<h4 id="Unidades_de_longitud_absoluta">Unidades de longitud absoluta</h4>
+
+<p>Todas las unidades siguientes son unidades de longitud <strong>absoluta</strong>: no son relativas a nada más y en general se considera que siempre tienen el mismo tamaño.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unidad</th>
+   <th scope="col">Nombre</th>
+   <th scope="col">Equivale a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>cm</code></td>
+   <td>Centímetros</td>
+   <td>1cm = 96px/2,54</td>
+  </tr>
+  <tr>
+   <td><code>mm</code></td>
+   <td>Milímetros</td>
+   <td>1mm = 1/10 de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>Q</code></td>
+   <td>Cuartos de milímetros</td>
+   <td>1Q = 1/40 de 1cm</td>
+  </tr>
+  <tr>
+   <td><code>in</code></td>
+   <td>Pulgadas</td>
+   <td>1in = 2,54cm = 96px</td>
+  </tr>
+  <tr>
+   <td><code>pc</code></td>
+   <td>Picas</td>
+   <td>1pc = 1/16 de 1in</td>
+  </tr>
+  <tr>
+   <td><code>pt</code></td>
+   <td>Puntos</td>
+   <td>1pt = 1/72 de 1in</td>
+  </tr>
+  <tr>
+   <td><code>px</code></td>
+   <td>Píxeles</td>
+   <td>1px = 1/96 de 1in</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>La mayoría de estos valores son más útiles cuando se usan en una salida en formato impreso que en la salida de pantalla. Por ejemplo, normalmente no usamos <code>cm</code> (centímetros) en pantalla. El único valor que usarás de forma frecuente es <code>px</code> (píxeles).</p>
+
+<h4 id="Unidades_de_longitud_relativa">Unidades de longitud relativa</h4>
+
+<p>Las unidades de longitud relativa son relativas a algo más, por ejemplo, al tamaño de letra del elemento principal o al tamaño de la ventana gráfica. La ventaja de usar unidades relativas es que con una planificación cuidadosa puedes lograr que el tamaño del texto u otros elementos escalen en relación con todo lo demás en la página. En la tabla siguiente se enumeran algunas de las unidades más útiles para el desarrollo web.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Unidad</th>
+   <th scope="col">Relativa a</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>em</code></td>
+   <td>Tamaño de letra del elemento padre, en el caso de propiedades tipográficas como {{cssxref("font-size")}}, y tamaño de la fuente del propio elemento en el caso de otras propiedades, como {{cssxref("width")}}.</td>
+  </tr>
+  <tr>
+   <td><code>ex</code></td>
+   <td>Altura x de la fuente del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>ch</code></td>
+   <td>La medida de avance (ancho) del glifo "0" de la letra del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>rem</code></td>
+   <td>Tamaño de la letra del elemento raíz.</td>
+  </tr>
+  <tr>
+   <td><code>lh</code></td>
+   <td>Altura de la línea del elemento.</td>
+  </tr>
+  <tr>
+   <td><code>vw</code></td>
+   <td>1% del ancho de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vh</code></td>
+   <td>1% de la altura de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vmin</code></td>
+   <td>1% de la dimensión más pequeña de la ventana gráfica.</td>
+  </tr>
+  <tr>
+   <td><code>vmax</code></td>
+   <td>1% de la dimensión más grande de la ventana gráfica.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h4 id="Un_ejemplo_de_análisis">Un ejemplo de análisis</h4>
+
+<p>En el ejemplo siguiente puedes ver cómo se comportan algunas unidades de longitud relativa y absoluta. La primera caja tiene un ancho ({{cssxref ("width")}}) establecido en píxeles. Como unidad absoluta, este ancho será siempre el mismo aunque lo demás cambie.</p>
+
+<p>La segunda caja tiene un ancho establecido en unidades <code>vw</code> (ancho de ventana). Este valor es relativo al ancho de la ventana gráfica, por lo que 10vw es el 10 por ciento del ancho de la ventana gráfica. Si cambiases el ancho de la ventana de tu navegador, el tamaño de la caja cambiaría. Sin embargo, esto no te va a funcionar porque este ejemplo se ha incrustado en la página usando <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>. Para verlo en acción debes <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">probar el ejemplo después de abrirlo en una pestaña independiente de tu navegador</a>.</p>
+
+<p>La tercera caja utiliza unidades <code>em</code>. Son unidades relativas al tamaño de la letra. Hemos establecido un tamaño de fuente de <code>1em</code> en el contenido {{htmlelement ("div")}}, que tiene una clase <code>.wrapper</code>. Si cambias este valor a <code>1.5em</code>, verás que el tamaño de letra de todos los elementos aumenta, pero solo se amplía el ancho en el último elemento, porque el ancho es relativo a ese tamaño de letra.</p>
+
+<p>Después de seguir las instrucciones anteriores, juega un poco más con los valores para ver qué obtienes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+
+<h4 id="ems_y_rems">ems y rems</h4>
+
+<p><code>em</code> y <code>rem</code> son las dos longitudes relativas que es probable que encuentres con mayor frecuencia al cambiar el tamaño de cualquier cosa, de cajas a texto. Vale la pena entender cómo funcionan y las diferencias entre ellos, especialmente cuando comienzas a abordar temas más complejos como <a href="/es/docs/Learn/CSS/Styling_text">aplicar estilos a texto</a> o <a href="/es/docs/Learn/CSS/CSS_layout">compaginar con CSS</a>. El ejemplo siguiente te proporciona una muestra.</p>
+
+<p>El HTML es un conjunto de listas anidadas: hay tres listas en total y ambos ejemplos tienen el mismo HTML. La única diferencia es que el primero tiene una clase <em>ems</em> y el segundo una clase <em>rems</em>.</p>
+
+<p>Para empezar, configuramos un tamaño de letra de 16px en el elemento <code>&lt;html&gt;</code>.</p>
+
+<p><strong>En definitiva, la unidad <em>em</em> significa «el tamaño de letra de mi elemento padre»</strong>. Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>ems</code> toman el tamaño con respecto a su elemento padre. Por lo tanto, en cada nivel de anidamiento sucesivo, el tamaño de letra aumenta progresivamente, porque en cada uno el tamaño de letra está establecido en <code>1.3em</code> (1,3 veces el tamaño de letra de su elemento padre).</p>
+
+<p><strong>En definitiva, la unidad <em>rem</em> significa «el tamaño de letra del elemento raíz»</strong>. (‘rem’ viene de «root em»). Los elementos {{htmlelement ("li")}} dentro de un elemento {{htmlelement ("ul")}} con una clase de <code>rems</code> toman su tamaño del elemento raíz (<code>&lt;html&gt;</code>). Esto significa que el tamaño de letra no aumenta en cada nivel sucesivo de anidamiento.</p>
+
+<p>Sin embargo, si cambias el atributo <code>font-size</code> de <code>&lt;html&gt;</code> en el CSS, verás que todo lo demás cambia en relación con él, tanto la letra cuyo tamaño está especificado en unidades <code>rem</code> como la que lo está en unidades <code>em</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+
+<h3 id="Porcentajes">Porcentajes</h3>
+
+<p>En muchos casos, un porcentaje es tratado de la misma manera que una longitud. Lo que sucede con los porcentajes es que siempre se establecen en relación con otro valor. Por ejemplo, si estableces el atributo <code>font-size</code> de un elemento como un porcentaje, será un porcentaje del <code>font-size</code> del elemento padre. Si usas un porcentaje para un valor <code>width</code>, será un porcentaje del atributo <code>width</code> del elemento padre.</p>
+
+<p>En el ejemplo siguiente, las dos cajas con el tamaño especificado en unidades de porcentaje y las dos cajas con el tamaño especificado en unidades de píxel tienen los mismos nombres de clase. En ambos conjuntos de cajas, los anchos de las cajas son de 200 píxeles y de 40%, respectivamente.</p>
+
+<p>La diferencia es que el segundo conjunto de dos cajas está dentro de un contenedor que tiene 400 píxeles de ancho. La segunda caja de 200 px de ancho tiene el mismo ancho que la primera, pero la segunda caja de 40% ahora es el 40% de 400 px, ¡mucho más estrecha que la primera!</p>
+
+<p><strong>Cambia el ancho del contenedor o el valor de porcentaje para ver cómo funciona.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+
+<p>El ejemplo siguiente tiene tamaños de letra establecidos en porcentajes. Cada elemento <code>&lt;li&gt;</code> tiene un atributo <code>font-size</code> del 80%, por lo tanto, los elementos de la lista anidada se vuelven progresivamente más pequeños a medida que heredan su tamaño del elemento padre.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+
+<p>Observa que aunque muchos valores admiten unidades de longitud o porcentaje, algunos solo admiten unidades de longitud. Puedes ver qué valores admite cada propiedad en las páginas de referencia correspondientes del proyecto MDN. Si el valor admitido incluye <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <code>&lt;length&gt;</code>, no es posible utilizar un porcentaje.</p>
+
+<h3 id="Números">Números</h3>
+
+<p>Algunos valores aceptan números sin ninguna unidad asociada. Un ejemplo de una propiedad que acepta un número sin unidades es la propiedad <code>opacity</code>, que controla la opacidad de un elemento (cuán transparente es). Esta propiedad admite un número entre <code>0</code> (totalmente transparente) y <code>1</code> (totalmente opaco).</p>
+
+<p><strong>En el ejemplo siguiente, asigna al valor de <code>opacity</code> diversos valores decimales entre <code>0</code> y <code>1</code> para ver cómo la caja y su contenido cambian su opacidad.</strong></p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Cuando en CSS utilizas un número como valor, no debe estar entre comillas.</p>
+</div>
+
+<h2 id="Color">Color</h2>
+
+<p>En CSS hay muchas formas de especificar el color, algunas de las cuales se implementaron más recientemente que otras. En todas partes en CSS se pueden usar los mismos valores de color, tanto para especificar el color del texto como el color de fondo, o de cualquier otra cosa.</p>
+
+<p>El sistema de colores estándar disponible en los ordenadores modernos es de 24 bits, lo que permite visualizar aproximadamente 16,7 millones de colores distintos a partir de una combinación de diferentes canales de rojo, verde y azul con 256 valores diferentes por canal (256 x 256 x 256 = 16.777.216). Echemos un vistazo a algunas de las formas en que podemos especificar colores en CSS.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En este artículo vamos a ver los métodos comunes para especificar colores que admiten los navegadores; hay otros métodos no tan comunes que no admiten todos los navegadores.</p>
+</div>
+
+<h3 id="Palabras_clave_para_los_colores">Palabras clave para los colores</h3>
+
+<p>Muy a menudo, en los ejemplos de este artículo o en cualquier otra página de MDN, verás que se utilizan las palabras clave para los colores, ya que son una forma simple y comprensible de especificar colores. Hay una multitud de estas palabras clave, ¡algunas de las cuales tienen nombres de lo más curiosos! Puedes ver una lista completa en la página para el valor <code><a href="/es/docs/Web/CSS/color_value">&lt;color&gt;</a></code>.</p>
+
+<p><strong>Juega con diferentes valores de color en los ejemplos en vivo que encontrarás a continuación, para adquirir una idea más clara de cómo funcionan.</strong></p>
+
+<h3 id="Los_valores_hexadecimales_RGB">Los valores hexadecimales RGB</h3>
+
+<p>El siguiente tipo de valores de color que es probable que encuentres son los códigos hexadecimales. Cada valor hexadecimal consiste en un símbolo de hashtag/almohadilla (#) seguido de seis cifras hexadecimales, cada una de las cuales puede tomar uno de los 16 valores entre el 0 y la f (que representa el 15), por ejemplo: <code>0123456789abcdef</code>. Cada par de cifras representa uno de los canales (rojo, verde y azul) y nos permite especificar cualesquiera de los 256 valores disponibles para cada uno (16 x 16 = 256).</p>
+
+<p>Estos valores son un poco más complejos y menos fáciles de entender, pero son mucho más versátiles que las palabras clave: puedes usar valores hexadecimales para representar cualquier color que desees usar en tu combinación de colores.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+
+<p><strong>Una vez más, cambia los valores para ver cómo varían los colores.</strong></p>
+
+<h3 id="Valores_RGB_y_RGBA">Valores RGB y RGBA</h3>
+
+<p>El tercer esquema del que hablaremos aquí es RGB. Un valor RGB es una función <code>rgb()</code> que recibe tres parámetros que representan los valores de los canales rojo, verde y azul del color, de modo muy similar a los valores hexadecimales. La diferencia con RGB es que cada canal está representado no por dos dígitos hexadecimales, sino por un número decimal entre el 0 y el 255, lo que de algún modo resulta algo más fácil de entender.</p>
+
+<p>Vamos a reescribir nuestro último ejemplo para utilizar colores RGB:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+
+<p>También puedes usar colores RGBA: estos funcionan exactamente de la misma manera que los colores RGB, por lo que puedes usar cualquier valor RGB; sin embargo, hay un cuarto valor que representa el canal alfa del color, que controla la opacidad. Si estableces este valor en <code>0</code>, el color será completamente transparente, mientras que en <code>1</code> será completamente opaco. Los valores intermedios le confieren diferentes niveles de transparencia.</p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: Establecer un canal alfa en un color representa una diferencia clave para usar la propiedad {{cssxref ("opacity")}} que vimos anteriormente. Cuando usas la opacidad, el elemento y todo lo que contiene es opaco, mientras que cuando usas colores RGBA, solo son opacos los que especificas.</p>
+</div>
+
+<p>En el ejemplo siguiente hemos añadido una imagen de fondo al bloque que contiene nuestras cajas de color. También hemos configurado las cajas para que tengan diferentes valores de opacidad: observa que el fondo se muestra más cuanto menor es el valor del canal alfa.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+
+<p><strong>En este ejemplo, cambia los valores del canal alfa y observa cómo afecta a la salida de color. </strong></p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: En algún momento, los navegadores modernos se actualizaron para que <code>rgba()</code> y <code>rgb()</code>, y <code>hsl()</code> y <code>hsla()</code> (ver más abajo) se convirtieran en alias puros el uno del otro y comenzaran a comportarse exactamente igual. Así, por ejemplo, tanto <code>rgba()</code> como <code>rgb()</code> admiten colores con y sin valores de canal alfa. Cambia el <code>rgba()</code> del ejemplo anterior por <code>rgb()</code> y observa si los colores aún funcionan. El estilo que uses depende de ti, pero separar las definiciones de los colores transparentes y las de los no transparentes con el uso de funciones diferentes mejora la ejecución de los navegadores y puede actuar como un indicador visual de dónde se definen colores transparentes en tu código.</p>
+</div>
+
+<h3 id="Los_valores_HSL_y_HSLA">Los valores HSL y HSLA</h3>
+
+<p>Un poco menos compatible que RGB es el modelo de color HSL (no compatible con las antiguas versiones de Internet Explorer), que se implementó después de mucha insistencia por parte de los diseñadores. En lugar de los valores rojo, verde y azul, la función <code>hsl()</code> admite valores de matiz, saturación y luminosidad, que se utilizan para distinguir entre los 16,7 millones de colores, pero de una manera diferente:</p>
+
+<ul>
+ <li><strong>Matiz</strong>: El tono base del color. Toma un valor entre 0 y 360, que representa un ángulo en torno a una rueda de colores.</li>
+ <li><strong>Saturación</strong>: ¿Qué nivel de saturación presenta el color? Esta propiedad toma un valor entre 0 y 100%, en que 0 no es un color (aparece como un tono de gris) y 100% es el nivel de saturación total del color.</li>
+ <li><strong>Luminosidad</strong>: ¿Qué claridad o brillo presenta el color? Este atributo toma un valor entre 0 y 100%, en que 0 es no claro (aparece completamente negro) y 100% es completamente claro (aparece completamente blanco).</li>
+</ul>
+
+<p>Podemos adaptar el ejemplo con colores RGB para usar colores HSL, así:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+
+<p>Al igual que RGB tiene un equivalente RGBA, HSL tiene un equivalente HSLA, que le proporciona la misma capacidad para especificar el canal alfa. Demostramos esto a continuación cambiando nuestro ejemplo RGBA para usar colores HSLA.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+
+<p>Puedes usar cualquiera de estos valores de color en tus proyectos. Es probable que para la mayoría de los proyectos te decidas por una paleta de colores y luego uses esos colores (y tu método elegido para especificar el color) en todo el proyecto. También puedes mezclar y combinar diversos modelos de color, sin embargo, por coherencia, en general es mejor si todo el proyecto usa el mismo.</p>
+
+<h2 id="Imágenes">Imágenes</h2>
+
+<p>El tipo de datos <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> se usa cuando una imagen es un valor válido. Puede ser un archivo de imagen real al que apunta una función <code>url()</code>, o un degradado.</p>
+
+<p>En el ejemplo siguiente mostramos una imagen y un gradiente en uso como un valor para la propiedad CSS <code>background-image</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+
+<div class="blockIndicator note">
+<p><strong>Nota</strong>: hay otros valores posibles para <code>&lt;image&gt;</code>, pero son más nuevos y aún hay pocos navegadores que los admiten. Consulta la página de MDN para el tipo de dato <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> si deseas saber más sobre ellos.</p>
+</div>
+
+<h2 id="Posición">Posición</h2>
+
+<p>El tipo de dato <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> representa un conjunto de coordenadas 2D que se utiliza para colocar un elemento, por ejemplo una imagen de fondo (con el atributo <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). Puede tomar palabras clave como <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> y <code>center</code> para alinear los elementos con los límites específicos de una caja de dos dimensiones, y también longitudes, que representan desplazamientos desde los bordes superior e izquierdo de la caja.</p>
+
+<p>Un valor de posición típico consta de dos valores: el primero establece la posición horizontal, y el segundo la vertical. Si solo especificas valores para un eje, el otro usará <code>center</code> por defecto.</p>
+
+<p>En el ejemplo siguiente hemos colocado una imagen de fondo a 40px de la parte superior, y a la derecha del contenedor con una palabra clave.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+
+<p><strong>Juega un poco con estos valores y observa cómo cambia la posición de la imagen.</strong></p>
+
+<h2 id="Cadenas_e_identificadores">Cadenas e identificadores</h2>
+
+<p>En los ejemplos anteriores hemos visto casos en que se usan palabras clave como valores (por ejemplo, palabras clave para <code>&lt;color&gt;</code>, como <code>red</code>, <code>black</code>, <code>rebeccapurple</code> y <code>goldenrod</code>). Estas palabras clave normalmente se describen como <em>identificadores</em>, un valor especial que el CSS entiende. Como tales, no se escriben entre comillas (es decir, no se tratan como cadenas).</p>
+
+<p>Hay casos en el CSS en que debes usar cadenas, por ejemplo, <a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#Generar_contenido_con_before_y_after">al especificar el contenido que generas</a>. En este caso, el valor se escribe entre comillas para mostrar que se trata de una cadena de caracteres. En el ejemplo siguiente hemos usado palabras clave para el color, sin entrecomillar, y también una cadena caracteres, de contenido generado, entrecomillada.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+
+<h2 id="Funciones">Funciones</h2>
+
+<p>El último tipo de valor que vamos a analizar es el grupo de valores conocidos como funciones. En programación, una función es un bloque de código reutilizable que es posible ejecutar varias veces para completar una tarea repetitiva con el mínimo esfuerzo tanto por parte del desarrollador como del ordenador. Las funciones suelen asociarse a lenguajes como JavaScript, Python o C++, pero también hay funciones en CSS, como valores de código propietario. Ya hemos visto funciones en acción en la sección sobre los colores: <code>rgb()</code>, <code>hsl()</code>, etc. El valor que se utiliza para devolver una imagen de un archivo, en este caso <code>url()</code>, también es una función.</p>
+
+<p>Un valor que se comporta más como algo que puedes encontrar en un lenguaje de programación tradicional es la función <code>calc()</code>. Esta función te proporciona la capacidad de hacer cálculos simples en tu CSS. Es particularmente útil si deseas calcular valores que no puedes definir al escribir el CSS para tu proyecto y necesitas que el navegador lo haga durante la ejecución.</p>
+
+<p>Por ejemplo, a continuación usamos <code>calc()</code> para hacer que la caja tenga <code>20% + 100px</code> de ancho. El 20% se calcula a partir del ancho del contenedor principal <code>.wrapper</code> y, por lo tanto, cambiará si ese ancho cambia. No podemos hacer este cálculo de antemano porque no sabemos cuál será el 20% del elemento padre, por lo que usamos <code>calc()</code> para decirle al navegador que lo haga por nosotros.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+
+<h2 id="Pon_a_prueba_tus_conocimientos">Pon a prueba tus conocimientos</h2>
+
+<p>Hemos cubierto mucho terreno en este artículo. ¿Recuerdas la información más importante? Encontrarás más pruebas para comprobar que retienes esa información antes de seguir en <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_tasks">Test your skills: Values and units</a>.</p>
+
+<h2 id="Resumen">Resumen</h2>
+
+<p>Esta ha sido una revisión rápida de los tipos de valores y unidades más comunes que te puedes encontrar. Puedes echar un vistazo a todos los diferentes tipos en la página de referencia de <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">valores y unidades CSS</a>; encontrarás muchos de estos mientras trabajas en estos artículos.</p>
+
+<p>Lo que debes recordar es que cada propiedad tiene una lista definida de valores admisibles, y cada valor incluye una definición que explica cuáles son sus subvalores. A continuación puedes buscar los detalles aquí, en MDN.</p>
+
+<p>Por ejemplo, comprender que <code><a href="/es/docs/Web/CSS/image">&lt;image&gt;</a></code> también te permite crear un degradado de color es útil, ¡pero quizás no sea un conocimiento obvio!</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+
+<h2 id="En_este_módulo">En este módulo</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascada y herencia</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Selectores de combinación</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li>
+</ol>