diff options
Diffstat (limited to 'files/es/learn/css')
40 files changed, 10473 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><ul></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><li></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><a></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><a></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>></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 > a[href*="en-US"] > .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><h2></code> y cerrar con un <code></h3></code>, el navegador descubre lo que ibas a hacer y el HTML del DOM cerrará ese <code><h2></code> de apertura correctamente con un <code></h2></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><body></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><body></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><em></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><em></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><img></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><div></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><div></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><div></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><iframe></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><h1></code>) y todos los elementos <code><p></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><a></code>, que se utiliza para los enlaces, y los elementos <code><span></code>, <code><em></code> y <code><strong></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><span></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><span></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><ul></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><html></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><span></code>.</p> + +<p>En el ejemplo siguiente hay un elemento <code><span></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><span></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><a></code> es un elemento en línea como <code><span></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><a></code> porque queremos poder cambiar su color de fondo (<code>background-color</code>) cuando se pasa el ratón por encima de <code><a></code>. El área de relleno parece superponerse al borde del elemento <code><ul></code>. Esto se debe a que <code><a></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"><color></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"><color></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"><gradient></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"><video></a></code> o <code><a href="/es/docs/Web/HTML/Elemento/iframe"><iframe></a></code>.</p> + +<p><strong>Añade <code>max-width: 100%</code> al elemento <code><img></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><div></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"><input></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"><textarea></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"><fieldset></a></code> y <code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></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><input type="text"></code>, algunos tipos específicos como <code><input type="email"></code> y el elemento <code><textarea></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><textarea></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><p></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>></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><p></code> que son hijos directos de elementos <code><article></code>:</p> + +<pre class="brush: css notranslate">article > 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><li></code> que son hijos directos de <code><ul></code> y les aplicamos un borde superior.</p> + +<p>Si eliminamos el símbolo <code>></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><li></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><img></code> que aparecen justo después de elementos <code><p></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><h1></code> y le vamos a aplicar un estilo.</p> + +<p>Si insertas algún otro elemento, como <code><h2></code> entre las etiquetas <code><h1></code> y <code><p></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><img></code> que aparecen <em>después</em> de los elementos <code><p></code>, hacemos esto:</p> + +<pre class="brush: css notranslate">p ~ img</pre> + +<p>En el ejemplo siguiente seleccionamos todos los elementos <code><p></code> que vienen después de <code><h1></code>, y aunque en el documento también hay un <code><div></code>, se selecciona incluso la etiqueta <code><p></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><ul></code>:</p> + +<pre class="brush: css notranslate">ul > 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><h1></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><p></code>, en el ejemplo siguiente), y actúa como si un elemento <code><span></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><article></code> utilizando el operador de combinación hijo (<code>></code>):</p> + +<pre class="brush: css notranslate">article > 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 > 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><article></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><span></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><span></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><p></code> que esté dentro de un elemento <code><article></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><input></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><input></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><p></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><p></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><input></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><span></code>, <code><em></code> y <code><strong></code>.</p> + +<p><strong>Trata de añadir una regla CSS que seleccione el elemento <code><h1></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><article></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><article></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><article></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><article></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><span></code> con una clase <code>highlight</code> del de los títulos <code><h1></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><div></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"><table summary="Los grupos de música punk más famosos del Reino Unido"> + <caption>Un resumen de los grupos de música punk más famosos del Reino Unido</caption> + <thead> + <tr> + <th scope="col">Grupo</th> + <th scope="col">Año de formación</th> + <th scope="col">Número de álbumes</th> + <th scope="col">Canción más conocida</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... se han eliminado algunas filas por abreviar + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Número total de álbumes</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></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"><link href="style.css" rel="stylesheet" type="text/css"></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><link></code>:</p> + +<pre class="brush: html notranslate"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></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"><color></a></code> o <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. Cuando veas que el valor <code><color></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"><color></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"><color></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><color></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><color></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"><color></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"><integer></a></code></td> + <td>Un <code><integer></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"><number></a></code></td> + <td>Un <code><number></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><dimension></code></td> + <td>Una <code><dimension></code> es un <code><number></code> con una unidad asociada, por ejemplo: <code>45deg</code> (grados), <code>5s</code> (segundos) o <code>10px</code> (píxeles). <code><dimension></code> es una categoría general que incluye los tipos <code><a href="/es/docs/Web/CSS/length"><length></a></code>, <code><a href="/es/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/es/docs/Web/CSS/time"><time></a></code> y <code><a href="/es/docs/Web/CSS/resolución"><resolution></a></code><a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>Un <code><percentage></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><length></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"><iframe></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><html></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><html></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><html></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><li></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"><length-percentage></a></code>, puedes usar una unidad de longitud o un porcentaje. Si el valor admitido solo incluye <code><length></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"><color></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"><image></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><image></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"><image></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"><position></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><color></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"><image></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> diff --git a/files/es/learn/css/css_layout/diseño_receptivo/index.html b/files/es/learn/css/css_layout/diseño_receptivo/index.html new file mode 100644 index 0000000000..4ddb7a94db --- /dev/null +++ b/files/es/learn/css/css_layout/diseño_receptivo/index.html @@ -0,0 +1,324 @@ +--- +title: Diseño receptivo +slug: Learn/CSS/CSS_layout/Diseño_receptivo +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>En los primeros días del diseño web, las páginas se diseñaban para llenar un tamaño de pantalla en particular. Si el usuario tenía una pantalla más grande o más pequeña que la del diseñador, los resultados esperados iban desde barras de desplazamiento no deseadas hasta longitudes de línea excesivamente largas y un mal uso del espacio. A medida que estuvieron disponibles tamaños de pantalla más diversos, apareció el concepto de <em>diseño web responsivo </em> (RWD, <em>responsive web design</em>), un conjunto de prácticas que permite a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma en que diseñamos para una web multidispositivo, y en este artículo te ayudaremos a comprender las principales técnicas que necesitas saber para dominarlo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (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 en CSS</a> y <a href="/es/docs/Learn/CSS/Building_blocks">Los elementos básicos del CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Comprender los conceptos fundamentales y la historia del diseño responsivo.</td> + </tr> + </tbody> +</table> + +<h2 id="Diseños_de_sitios_web_históricos">Diseños de sitios web históricos</h2> + +<p>En un momento de la historia, solo tenías dos opciones al diseñar un sitio web:</p> + +<ul> + <li>Podías crear un sitio <em>líquido</em>, que se expandiría para llenar toda la ventana del navegador</li> + <li>o un sitio de <em>ancho fijo</em>, que sería un tamaño fijo en píxeles.</li> +</ul> + +<p>Estos dos enfoques tendían a dar como resultado un sitio web que se veía mejor ¡en la pantalla de la persona que diseñaba el sitio! El sitio líquido dio como resultado un diseño encogido en las pantallas que eran más pequeñas (como se ve a continuación) o longitudes de línea interminables en las pantallas que eran más grandes.</p> + +<figure><img alt="Un diseño de página con dos columnas encogidas en una ventana gráfica del tamaño de un teléfono móvil." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa este <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">código fuente</a> de un diseño líquido sencillo. Amplía o reduce la ventana del navegador y observa cómo cambia su aspecto en diferentes tamaños.</p> +</div> + +<p>El sitio de ancho fijo se arriesgaba a una barra de desplazamiento horizontal en pantallas que eran más pequeñas que el ancho del sitio (como se ve a continuación), y a un gran espacio en blanco en los bordes del diseño en las pantallas que eran más grandes.</p> + +<figure><img alt="Un diseño con una barra de desplazamiento horizontal en una ventana de teléfono móvil." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa este <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">ejemplo</a> y su <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">código fuente</a> de un diseño sencillo con un ancho fijo. Nuevamente, cambia el tamaño de la ventana del navegador y observa el resultado.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Las capturas de pantalla anteriores se han tomado usando el <a href="/es/docs/Tools/Responsive_Design_View">modo de diseño responsivo</a> de las herramientas DevTools de Firefox.</p> +</div> + +<p>A medida que la web móvil comenzó a hacerse realidad con los primeros teléfonos con funciones, las empresas que deseaban adoptar los dispositivos móviles solían crear una versión especial de su sitio web para dispositivo móvil, con una URL diferente (a menudo algo así como <em>m.example.com</em> o <em>example.mobi</em>). Esto significaba que había que desarrollar y actualizar dos versiones independientes del sitio web.</p> + +<p>Además, estos sitios web para dispositivos móviles a menudo ofrecían una experiencia muy reducida. A medida que los dispositivos móviles se volvían más potentes y capaces de mostrar sitios web completos, esto resultaba frustrante para los usuarios de dispositivos móviles, que se veían atrapados en la versión móvil del sitio web y no podían acceder a la información que sabían que había en la versión de escritorio, que incluía todas las funciones del sitio web.</p> + +<h2 id="Diseño_flexible_antes_del_diseño_responsivo">Diseño flexible antes del diseño responsivo</h2> + +<p>Se desarrollaron varios enfoques para tratar de resolver los inconvenientes de los métodos líquidos o de ancho fijo para crear sitios web. En 2004, Cameron Adams escribió una publicación titulada <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, que describe un método para crear un diseño que podría adaptarse a diferentes resoluciones de pantalla. Este enfoque requería JavaScript para detectar la resolución de la pantalla y cargar el CSS correcto.</p> + +<p>Zoe Mickley Gillenwater fue determinante en <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">su trabajo</a> de descripción y formalización de los diversos modos en que se podían crear sitios web flexibles para intentar encontrar una situación intermedia entre llenar toda la pantalla o tener un tamaño completamente fijo.</p> + +<h2 id="Diseño_responsivo">Diseño responsivo</h2> + +<p>El término <em>diseño responsivo</em> fue acuñado por <a href="https://alistapart.com/article/responsive-web-design/">Ethan Marcotte en 2010</a>, y describía el uso combinado de tres técnicas.</p> + +<ol> + <li>La primera era la idea de las redes fluidas, algo que ya exploraba Gillenwater, y que puede leerse en el artículo de Marcotte, <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (publicado en 2009 en <em>A list apart</em>).</li> + <li>La segunda técnica era la idea de las <a href="http://unstoppablerobotninja.com/entry/fluid-images">imágenes fluidas</a>. Usando una técnica muy simple de establecer la propiedad de <code>max-width</code> al <code>100%</code>, las imágenes se reducían si su columna de contención se volvía más estrecha que el tamaño intrínseco de la imagen, pero nunca se expandía. Esto permite reducir una imagen para que se ajuste a una columna de tamaño flexible, en lugar de que desborde, pero no se expande ni se pixela si la columna se ensancha más que la imagen.</li> + <li>El tercer componente clave era la <a href="/es/docs/Web/CSS/Media_Queries">consulta a los media</a>. Las consultas a los media habilitan el tipo de cambio de diseño que Cameron Adams había explorado previamente usando JavaScript, pero usando solo CSS. En lugar de tener un único diseño para todos los tamaños de pantalla, el diseño podría cambiarse. Las barras laterales pueden reposicionarse en una pantalla más pequeña, o puede mostrarse una navegación alternativa.</li> +</ol> + +<p>Es importante comprender que <strong>el diseño web responsivo no es una tecnología independiente</strong>: es un término utilizado para describir un enfoque para el diseño web, o un conjunto de buenas prácticas utilizado para crear un diseño que puede <em>responder</em> según el dispositivo que se utiliza para ver un contenido. En la exploración original de Marcotte, esto significaba cuadrículas flexibles (mediante elementos flotantes) y consultas de media; sin embargo, en los casi 10 años desde que se escribió ese artículo, trabajar de manera responsiva se ha convertido en la norma. Los métodos de diseño CSS modernos son inherentemente responsivos, y la plataforma web dispone de herramientas integradas nuevas que facilitan el diseño de sitios web responsivos.</p> + +<p>El resto de este artículo te indicará las diversas características de la plataforma web que puedas querer utilizar para crear un sitio responsivo.</p> + +<h2 id="La_consulta_a_los_media">La consulta a los media</h2> + +<p>El diseño responsivo solo pudo surgir gracias a la consulta a los media. La especificación de nivel 3 de consulta a los media se convirtió en una candidata a Recomendación en 2009, lo que significa que se consideró lista para su implementación en los navegadores. Las consultas a los media nos permiten ejecutar una serie de pruebas (por ejemplo, si la pantalla del usuario es mayor que un ancho o una resolución determinados) y aplicar CSS selectivamente para diseñar la página de manera que resulte adecuada a las necesidades del usuario.</p> + +<p>Por ejemplo, la consulta a los media siguiente explora si la página web que se muestra lo hace como un medio de pantalla (por lo tanto, no es un documento impreso) y si la ventana tiene al menos 800 píxeles de ancho. El CSS para el selector <code>.container</code> solo se aplicará si ambas condiciones son ciertas.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>Puedes añadir múltiples consultas a los media dentro de una hoja de estilo, y ajustar todo tu diseño o solo partes de él para que se adapte mejor a los diferentes tamaños de pantalla. Los puntos en los que se introduce una consulta a los media y se cambia el diseño se conocen como <em>puntos de interrupción</em>.</p> + +<p>Un enfoque común cuando se usan las consultas a los media es crear un diseño sencillo de una sola columna para dispositivos de pantalla estrecha (por ejemplo, teléfonos móviles), luego implementar un diseño en columnas para pantallas más grandes cuando se sabe que hay suficiente ancho de pantalla para manejarlo. Esto se describe a menudo como diseño <strong>primero móvil</strong>.</p> + +<p>Obtén más información sobre las <a href="/es/docs/Web/CSS/Media_Queries">consultas a los media</a> en la documentación de MDN.</p> + +<h2 id="Cuadrículas_flexibles">Cuadrículas flexibles</h2> + +<p>Los sitios responsivos no solo cambian su diseño entre puntos de interrupción, sino que se construyen sobre cuadrículas flexibles. Una cuadrícula flexible significa que no tienes que centrarte en todos los tamaños de dispositivo posibles y construir para ellos un diseño en píxeles perfecto. Ese enfoque sería imposible dada la gran cantidad de dispositivos de tamaños diferentes que hay, y el hecho de que, al menos en la versión de escritorio, las personas no siempre tienen la ventana de su navegador maximizada.</p> + +<p>Al usar una cuadrícula flexible, solo necesitas añadir un punto de interrupción y cambiar el diseño en el punto en que el contenido comienza a verse mal. Por ejemplo, si las longitudes de las líneas se vuelven interminablemente largas a medida que el tamaño de la pantalla aumenta, o una caja se encoje hasta un ancho de dos palabras en cada línea a medida que el tamaño de la pantalla se reduce.</p> + +<p>En los primeros días del diseño responsivo, nuestra única opción para el diseño de páginas web era usar <a href="/es/docs/Learn/CSS/CSS_layout/Floats">elementos flotantes</a>. Los diseños de pantalla con elementos flotantes flexibles se lograban dando a cada elemento un ancho porcentual asegurándose de que para toda la página no alcanzara más del 100%. En su trabajo original sobre cuadrículas fluidas, Marcotte detalló una fórmula para tomar un diseño de página web diseñado usando píxeles y convertirlo en porcentajes.</p> + +<pre><code>target / context = result </code> +</pre> + +<p>Por ejemplo, si el tamaño de nuestra columna de destino es de 60 píxeles y el contexto (o contenedor) en el que se encuentra es de 960 píxeles, dividimos 60 por 960 para obtener un valor que podemos usar en nuestro CSS, después de mover el separador de cifras decimales dos posiciones a la derecha.</p> + +<pre class="brush: css"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>Este enfoque se encuentra hoy en muchos lugares de la web, y aquí está documentado en la sección de compaginación de nuestro artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de compaginación heredados</a>. Es probable que encuentres sitios web que utilizan este enfoque en su trabajo, por lo que vale la pena entenderlo, aunque no vas a construir un sitio web moderno utilizando una cuadrícula flexible basada en elementos flotantes.</p> + +<p>El ejemplo siguiente muestra un diseño responsivo sencillo que utiliza consultas a los medios y una cuadrícula flexible. En pantallas estrechas, el diseño de página muestra las cajas en columna una encima de la otra:</p> + +<figure><img alt="Una vista de un dispositivo móvil con un diseño de página con cajas en columna vertical una encima de la otra." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>En pantallas más anchas se pasa a dos columnas:</p> + +<figure><img alt="Una vista de un dispositivo de escritorio con un diseño a dos columnas." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puedes encontrar el <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">ejemplo en vivo</a> y el <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">código fuente</a> de este ejemplo en GitHub.</p> +</div> + +<h2 id="Tecnologías_modernas_de_diseño_de_páginas_web">Tecnologías modernas de diseño de páginas web</h2> + +<p>Los métodos modernos de diseño de páginas web, como el <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">diseño en columnas</a>, <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Grid</a> son responsivos por defecto. Todos estos métodos asumen que tratas de crear una cuadrícula flexible y te proporcionan los modos más fáciles de hacerlo.</p> + +<h3 id="Multicol">Multicol</h3> + +<p>El más antiguo de estos métodos de diseño de páginas web es multicol. Cuando especificas un atributo <code>column-count</code>, esto indica en cuántas columnas deseas dividir tu contenido. El navegador entonces calcula el tamaño de estas columnas, que cambiará de acuerdo con el tamaño de la pantalla.</p> + +<pre class="brush: css"><code>.container { + column-count: 3; +} </code> +</pre> + +<p>Si en lugar de ello estableces el atributo <code>column-width</code>, especificas un ancho <em>mínimo</em>. El navegador crea tantas columnas de ese ancho como quepan cómodamente en el contenedor, y reparte el espacio entre todas las columnas. Por lo tanto, el número de columnas cambia según la cantidad de espacio que hay.</p> + +<pre class="brush: css"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="Flexbox">Flexbox</h3> + +<p>En el método Flexbox, los elementos flexibles se encogen y distribuyen el espacio entre los elementos según el espacio que hay en su contenedor, según su comportamiento inicial. Al cambiar los valores de <code>flex-grow</code> y <code>flex-shrink</code>, puedes indicar cómo deseas que se comporten los elementos cuando a su alrededor hay más o menos espacio.</p> + +<p>En el ejemplo siguiente, los elementos flexibles ocupan cada uno la misma cantidad de espacio en el contenedor flexible, al utilizar la abreviatura <code>flex: 1</code> como se describe en el artículo <a href="/es/docs/Learn/CSS/CSS_layout/Grids#Cuadr%C3%ADculas_flexibles_con_la_unidad_fr">Flexbox: Dimensionamiento flexible de los elementos flex</a>.</p> + +<pre class="brush: css"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Como ejemplo, hemos reconstruido el anterior diseño de página responsivo sencillo, esta vez usando Flexbox. Puedes ver que ya no necesitamos usar valores de porcentaje extraños para calcular el tamaño de las columnas: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">código fuente</a>.</p> +</div> + +<h3 id="Cuadrículas_CSS">Cuadrículas CSS</h3> + +<p>En el diseño de cuadrículas con CSS, la unidad <code>fr</code> permite la distribución del espacio disponible en las trazas de la cuadrícula. El ejemplo siguiente crea un contenedor de cuadrícula con tres trazas dimensionadas a <code>1fr</code>. Esto crea tres columnas, cada una de las cuales ocupa una parte del espacio que hay disponible en el contenedor. Puedes obtener más información sobre este enfoque para crear una cuadrícula en el módulo Aprender a diseñar cuadrículas en <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Cuadrículas flexibles con la unidad fr</a>.</p> + +<pre class="brush: css"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: La versión del diseño de página en cuadrícula es aún más simple, ya que podemos definir las columnas en .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">código fuente</a>.</p> +</div> + +<h2 id="Imágenes_responsivas">Imágenes responsivas</h2> + +<p>El enfoque más simple para las imágenes responsivas es el que se describe en los primeros artículos de Marcotte sobre diseño responsivo. Básicamente, tomar una imagen que tenga el tamaño más grande que puedas necesitar, y reducirla. Este continúa siendo un enfoque utilizado hoy en día, y en la mayoría de las hojas de estilo encontrarás en alguna parte el CSS siguiente:</p> + +<pre class="brush: css"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>Hay inconvenientes obvios en este enfoque. La imagen puede mostrarse mucho más pequeña que su tamaño intrínseco, lo que representa una pérdida de ancho de banda: un usuario de dispositivo móvil puede descargar una imagen que sea varias veces el tamaño de lo que ve en realidad en la ventana del navegador. Además, es posible que no desees la misma relación de aspecto de la imagen en dispositivos móviles y en ordenadores de escritorio. Por ejemplo, podría ser bueno tener una imagen cuadrada para dispositivos móviles, pero mostrar la misma escena que una imagen horizontal en el escritorio. O bien es posible que, reconociendo el tamaño más pequeño de una imagen en dispositivos móviles, desees mostrar una imagen diferente, que se entienda mejor en un tamaño de pantalla pequeño. Estas cosas no se pueden lograr simplemente reduciendo una imagen.</p> + +<p>Las imágenes responsivas, que utilizan el elemento {{htmlelement ("picture")}} y los atributos {{htmlelement ("img")}} <code>srcset</code> y <code>sizes</code> resuelven ambos problemas. Puedes proporcionar varios tamaños junto con «sugerencias» (metadatos que describen el tamaño de pantalla y la resolución para que la imagen sea la más adecuada), y el navegador elije la imagen que resulta más adecuada para cada dispositivo, y se asegura de que el usuario descarga un tamaño de imagen apropiado para el dispositivo que utiliza.</p> + +<p>También puedes usar imágenes <em>de director artístico</em>, que proporcionan un recorte o una imagen completamente diferente para diferentes tamaños de pantalla.</p> + +<p>Puedes encontrar una <a href="/es/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">guía detallada de imágenes responsivas en el artículo sobre Aprender HTML</a> en MDN.</p> + +<h2 id="Tipografía_responsiva">Tipografía responsiva</h2> + +<p>Un elemento de diseño responsivo que todavía no hemos tratado en trabajos anteriores es la idea de la tipografía responsiva. Este concepto describe esencialmente el hecho de cambiar el tamaño de letra según el espacio de pantalla que reflejan las consultas a media.</p> + +<p>En este ejemplo, queremos establecer que nuestro encabezado de nivel 1 sea <code>4rem</code>, lo que significa que será cuatro veces nuestro tamaño de letra base. ¡Es un título muy grande! Solo queremos este título de encabezado gigante en los tamaños de pantalla más grandes, por lo tanto, primero creamos un título de encabezado más pequeño y luego usamos las consultas a los media para sobrescribirlo con el tamaño más grande si sabemos que el usuario tiene un tamaño de pantalla de al menos <code>1200px</code>.</p> + +<pre class="brush: css"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>Hemos editado nuestro ejemplo anterior de cuadrícula responsiva para incluir también el tipo de respuesta utilizando el método descrito. Puedes ver cómo el título de encabezado cambia de tamaño cuando el diseño para a la versión de dos columnas.</p> + +<p>En la versión para dispositivo móvil, el encabezado es más pequeño:</p> + +<figure><img alt="Un diseño de elementos apilados en columna con un tamaño de título de encabezado pequeño." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<p>Sin embargo, en las versiones de escritorio vemos un tamaño de título de encabezado más grande:</p> + +<figure><img alt="Un diseño en dos columnas con un título grande." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Observa este ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">código fuente</a>.</p> +</div> + +<p>Como muestra este enfoque sobre la tipografía, no es necesario restringir las consultas a medios a cambiar solo el diseño de página. Se pueden usar para ajustar cualquier elemento y hacerlo más útil o atractivo según los diversos tamaños de pantalla.</p> + +<h3 id="El_uso_de_unidades_de_ventana_gráfica_para_tipografía_responsiva">El uso de unidades de ventana gráfica para tipografía responsiva</h3> + +<p>Un enfoque interesante es utilizar las unidades de ventana gráfica <code>vw</code> para habilitar la tipografía responsiva. <code>1vw</code> es igual al uno por ciento del ancho de la ventana gráfica, lo que significa que si configuras el tamaño del tipo de letra con <code>vw</code>, siempre estará en relación con el tamaño de la ventana gráfica.</p> + +<pre class="brush: css">h1 { + font-size: 6vw; +}</pre> + +<p>El problema de hacer esto es que el usuario pierde la posibilidad de ampliar cualquier conjunto de texto configurado en unidades <code>vw</code>, porque ese texto siempre está en relación con el tamaño de la ventana gráfica. <strong>Por lo tanto, nunca hay que establecer texto utilizando solo unidades de ventana</strong>.</p> + +<p>Hay una solución, que implica el uso de la función <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. Si añades la unidad <code>vw</code> a un valor establecido con un tamaño fijo, como <code>em</code> o <code>rem</code>, el texto continúa siendo ampliable. Esencialmente, la unidad <code>vw</code> se añade sobre ese valor ampliado:</p> + +<pre class="brush: css">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>Esto significa que necesitamos especificar el tamaño de letra para el título de encabezado una sola vez, en lugar de configurarlo para dispositivos móviles y redefinirlo en las consultas a medios. Luego, el tipo de letra aumenta gradualmente a medida que aumenta el tamaño de la ventana gráfica.</p> + +<div class="blockIndicator note"> +<p>Observa un ejemplo en: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">ejemplo</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">código fuente</a>.</p> +</div> + +<h2 id="La_metaetiqueta_viewport">La metaetiqueta viewport</h2> + +<p>Si observas el tipo de letra de una página HTML responsiva, en general vas a encontrar la siguiente etiqueta {{htmlelement ("meta")}} en la cabecera del documento.</p> + +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>Esta metaetiqueta informa a los navegadores de los dispositivos móviles que deben establecer el ancho de la ventana gráfica al ancho del dispositivo y escalar el documento al 100% de ese tamaño, de modo que el documento se mostrará al tamaño optimizado para esos dispositivos móviles.</p> + +<p>¿Por qué esto es necesario? Porque los navegadores de los dispositivos móviles tienden a mentir sobre el ancho de su ventana gráfica.</p> + +<p>Esta metaetiqueta existe porque cuando se lanzó el iPhone original y la gente comenzó a ver sitios web en una pequeña pantalla de teléfono móvil, la mayoría de los sitios web no estaban optimizados para dispositivos móviles. Por lo tanto, el navegador móvil establecía el ancho de la ventana gráfica en 960 píxeles, representaba la página con ese ancho y mostraba el resultado como una versión reducida del diseño del escritorio. Otros navegadores de dispositivos móviles (por ejemplo, en Google Android) hicieron lo mismo. Los usuarios podían acercarse y desplazarse por el sitio web para ver las partes que les interesaban, pero se veía mal. Todavía verás esto hoy en día si tienes la desgracia de encontrarte con un sitio web que no tiene un diseño de página responsivo.</p> + +<p>El problema es que tu diseño responsivo con puntos de interrupción y consultas a media no va a funcionar según lo previsto en los navegadores de dispositivos móviles, si tienes un diseño de pantalla estrecho que se inicia con un ancho de ventana de 480px o menos, pero la ventana gráfica está configurada en 960px. E cambio, al configurar <code>width=device-width</code> anulas el ancho predeterminado <code>width=960px</code> de Apple con el ancho real del dispositivo, y tus consultas a media funcionarán según lo previsto.</p> + +<p><strong>Por lo tanto, <em>siempre</em> debes incluir la línea de HTML anterior en la cabecera de tus documentos.</strong></p> + +<p>Con la metaetiqueta <code>viewport</code> puedes usar otras configuraciones, aunque, en general vas a querer usar la línea anterior.</p> + +<ul> + <li><code>initial-scale</code>: Establece el zoom inicial de la página, que establecemos en 1.</li> + <li><code>height</code>: Establece una altura específica para la ventana gráfica.</li> + <li><code>minimum-scale</code>: Establece el nivel mínimo de zoom.</li> + <li><code>maximum-scale</code>: Establece el nivel máximo de zoom.</li> + <li><code>user-scalable</code>: Impide el zoom si se establece en <code>no</code>.</li> +</ul> + +<p>Deberías evitar el uso de <code>minimum-scale</code> y <code>maximum-scale</code>, y en particular establecer <code>user-scalable</code> en <code>no</code>. Hay que permitir a los usuarios hacer zoom tanto o tan poco como lo necesiten; evitarlo provoca problemas de accesibilidad.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Hay una @regla CSS establecida para reemplazar la metaetiqueta <code>viewport</code>: <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a>. Sin embargo, tiene poca compatibilidad con los navegadores. Se implementó en Internet Explorer y Edge, pero una vez que se lance el navegador Edge basado en Chromium, dejará de formar parte del navegador Edge.</p> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>El diseño responsivo se refiere a un diseño página de un sitio web o una aplicación que responde al entorno en el que se visualiza. Abarca una serie de características y técnicas de CSS y HTML, y ahora es esencialmente el modo como construimos los sitios web de forma predeterminada. Piensa en los sitios web que visitas con tu dispositivo móvil; probablemente sea inusual encontrar un sitio web que tenga la versión de escritorio reducida o en que necesites desplazarse hacia los lados para encontrar las cosas. Esto se debe a que la web se ha movido a este enfoque de diseño responsivo.</p> + +<p>Además, lograr diseños responsivos se ha vuelto mucho más fácil con la ayuda de los métodos de diseño que has aprendido en estos artículos. Si eres nuevo en el desarrollo web, hoy tienes muchas más herramientas a tu disposición que en los primeros días del diseño de página responsivo. Por lo tanto, vale la pena verificar la antigüedad de los materiales que consultas. Si bien los artículos históricos continúan siendo útiles, el uso moderno de CSS y HTML facilita mucho la creación de diseños elegantes y útiles, sin importar con qué dispositivo el visitante visita el sitio.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Elementos flotantes</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño responsivo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad de navegadores antiguos</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li> +</ul> diff --git a/files/es/learn/css/css_layout/flexbox/index.html b/files/es/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..5d2b8cdf36 --- /dev/null +++ b/files/es/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,337 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> es un método de diseño de página unidimensional para compaginar elementos en filas o columnas. Los elementos de contenido se ensanchan para rellenar el espacio adicional y se encogen para caber en espacios más pequeños. En este artículo expondremos todas sus características básicas.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Los conceptos básicos de HTML (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">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a usar el sistema de compaginación con elementos flexbox para crear compaginaciones web.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Por_qué_flexbox">¿Por qué flexbox?</h2> + +<p>Durante mucho tiempo, las únicas herramientas fiables con compatibilidad cruzada entre navegadores disponibles para crear diseños CSS fueron cosas como la <a href="/es/docs/Learn/CSS/CSS_layout/Floats">flotación</a> y el <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>. Están bien y funcionan, pero de alguna manera también limitan bastante y frustran.</p> + +<p>Con tales herramientas resulta difícil, si no imposible, lograr obtener en cualquier forma conveniente y flexible un diseño de página sencillo con unos requisitos como los siguientes:</p> + +<ul> + <li>Centrar verticalmente un bloque de contenido dentro de su elemento padre.</li> + <li>Hacer que todos los elementos secundarios de un contenedor ocupen una cantidad igual del ancho/alto disponible, independientemente del ancho/alto que haya disponible.</li> + <li>Hacer que todas las columnas en una compaginación en columnas múltiples adopten la misma altura incluso si contienen cantidades diferentes de contenido.</li> +</ul> + +<p>Como verás en las secciones siguientes, los elementos flexbox facilitan mucho algunas tareas de compaginación. ¡Vamos a profundizar en ello!</p> + +<h2 id="Presentación_de_un_ejemplo_sencillo">Presentación de un ejemplo sencillo</h2> + +<p>En este artículo, te guiaremos por una serie de ejercicios para ayudarte a comprender cómo funcionan los elementos flexbox. Para comenzar, debes hacer una copia local del primer archivo de inicio <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> de nuestro repositorio de GitHub. Cárgalo en un navegador moderno (como Firefox o Chrome) y echa un vistazo al código en tu editor de código. Puedes <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">verlo en vivo aquí</a>.</p> + +<p>Verás que hay un elemento {{htmlelement ("header")}} con un encabezado de nivel superior en él, y un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. Los usaremos para crear una compaginación bastante habitual de tres columnas.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Especificar_qué_elementos_colocar_como_cajas_flexibles">Especificar qué elementos colocar como cajas flexibles</h2> + +<p>Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de {{cssxref ("display")}} en el elemento padre de los elementos que deseas editar. En este caso, queremos compaginar los elementos {{htmlelement ("article")}}, por lo que lo establecemos en {{htmlelement ("section")}} (que se convierte en un contenedor flexible):</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Esto hace que el elemento <code><section></code> se convierta en <strong>contenedor flex</strong>, y sus hijos en <strong>elementos flexibles</strong>. El resultado de esto debería ser algo así:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>Así, esta declaración única nos da todo lo que necesitamos. Increíble, ¿verdad? Tenemos nuestra compaginación en columnas múltiples con columnas de igual tamaño, y todas las columnas tienen la misma altura. Esto se debe a que los valores por defecto que se han asignado a los elementos flexibles (los elementos secundarios del contenedor flexible) están pensados para resolver problemas comunes como este. Veremos más sobre el tema más adelante.</p> + +<p>Para que quede claro, reiteremos lo que está sucediendo aquí. El elemento al que le hemos dado un valor de {{cssxref("display")}} de <code>flex</code> actúa como un elemento a nivel de bloque en términos de cómo interactúa con el resto de la página, pero sus elementos secundarios se presentan como elementos flexibles. La siguiente sección explicará con más detalle qué significa esto. Ten en cuenta también que puede usar un valor de <code>display</code> de <code>inline-flex</code> si desea diseñar los elementos secundarios de un elemento como elementos flexibles, pero hacer que ese elemento se comporte como un elemento en línea.</p> + +<p> + </p><h2 id="El_modelo_flexible">El modelo flexible</h2> + + +<p>Cuando los elementos se presentan como cajas flexibles, se distribuyen con respecto a dos ejes:</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>El <strong>eje principal</strong> (<strong>main axis</strong>) es el eje que corre en la dirección en que se colocan los elementos flexibles (por ejemplo, según se disponen las filas en una página o hacia abajo según se disponen las columnas en una página). El inicio y el final de este eje se denominan <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>final principal</strong> (<strong>main end</strong>).</li> + <li>El <strong>eje transversal</strong> (<strong>cross axis</strong>) es el eje que corre perpendicular a la dirección en la que se colocan los elementos flexibles. El inicio y el final de este eje se denominan <strong>inicio transversal</strong> (<strong>cross start</strong>) y <strong>extremo cruzado</strong> (<strong>cross end</strong>).</li> + <li>El elemento padre que tiene establecido <code>display: flex</code> (el elemento {{htmlelement ("section")}} en nuestro ejemplo) se llama <strong>contenedor flexible</strong>.</li> + <li>Los elementos que se presentan como cajas flexibles dentro del contenedor flexible se denominan <strong>elementos flexibles</strong> (son los elementos {{htmlelement ("article")}} de nuestro ejemplo).</li> +</ul> + +<p>Ten presente esta terminología al avanzar por las secciones posteriores. Si en algún momento te confundes con el uso de estos conceptos, siempre puedes volver atrás a consultarlos.</p> + +<h2 id="¿Columnas_o_filas">¿Columnas o filas?</h2> + +<p>Los elementos flexbox proporcionan una propiedad llamada {{cssxref ("flex-direction")}} que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox); por defecto, está establecido en el valor <code>row</code>, por lo que se presenta en una fila en la dirección en que se escribe el idioma predeterminado de tu navegador (de izquierda a derecha, en el caso de un navegador en español).</p> + +<p>Añade la declaración siguiente a tu regla {{htmlelement ("section")}}:</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>Observa que esto vuelve a colocar los elementos en una disposición en columna, al igual que antes de añadir cualquier CSS. Antes de continuar, elimina esta declaración de tu ejemplo.</p> + +<div class="note"> +<p><strong>Nota</strong>: También puedes compaginar elementos flexibles en una dirección inversa utilizando los valores <code>row-reverse</code> y <code>column-reverse</code>. ¡Experimenta también con estos valores!</p> +</div> + +<h2 id="Delimitar">Delimitar</h2> + +<p>Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que los hijos de un elemento flexbox eventualmente desbordan el contenedor y rompen el diseño. Echa un vistazo a nuestro ejemplo <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> e intenta <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">verlo en vivo</a> (toma una copia local de este archivo si deseas seguir este ejemplo):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Aquí vemos que los elementos hijo se salen de su contenedor. Una forma de solucionar esto es añadir la declaración siguiente a tu regla {{htmlelement ("section")}}:</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>Añade también la declaración siguiente a tu regla {{htmlelement ("article")}}:</p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>Pruébalo; observa que al haberlo incluido el aspecto de la compaginación resulta mucho más agradable:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"> Ahora hay varias filas y en cada fila caben tantos elementos hijo de un elemento flexbox como sean necesarios, y cualquier desbordamiento hace saltar el elemento hacia la línea siguiente. La declaración <code>flex: 200px</code> que hemos establecido en los artículos significa que cada uno tendrá al menos 200 px de ancho; discutiremos esta propiedad con más detalle más adelante. Observa también que los últimos elementos hijo de la última fila se agrandan hasta rellenar toda la fila.</p> + +<p>Pero aquí podemos hacer mucho más. En primer lugar, cambia el valor de tu propiedad {{cssxref ("flex-direction")}} a <code>row-reverse</code>; ahora verás que todavía tienes tu compaginación en diversas filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye al revés.</p> + +<h2 id="Propiedades_abreviadas_de_flex-flow">Propiedades abreviadas de flex-flow</h2> + +<p>En este punto vale la pena señalar que hay una propiedad abreviada para {{cssxref ("flex-direction")}} y {{cssxref ("flex-wrap")}}: {{cssxref ("flex-flow")}}. Así, por ejemplo, puedes reemplazar:</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>con</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Dimensionamiento_flexible_de_elementos_flexibles">Dimensionamiento flexible de elementos flexibles</h2> + +<p>Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicia tu copia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> o toma una copia de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> como nuevo punto de partida (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">consúltalo en vivo</a>).</p> + +<p>Primero, añade la regla siguiente al final de tu CSS:</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>Este es un valor de proporción sin unidades que especifica la cantidad de espacio disponible sobre el eje principal que ocupa cada elemento flexible. En este caso, damos a cada elemento {{htmlelement ("article")}} un valor de 1, lo que significa que todos ocuparán una cantidad igual del espacio libre restante después de que se hayan establecido elementos como el área de relleno y el margen. Es una proporción, lo que significa que dar a cada elemento flexible un valor de 400000 tendría exactamente el mismo efecto.</p> + +<p>Ahora añade la regla siguiente debajo de la anterior:</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>Al actualizar verás que el tercer {{htmlelement ("article")}} ocupa ahora el doble del ancho disponible que los otros dos; ahora hay cuatro unidades de proporción disponibles en total. Los primeros dos elementos flexibles tienen una cada uno, por lo que ocupan 1/4 del espacio disponible cada uno. El tercero tiene dos unidades, por lo que ocupa 2/4 del espacio disponible (o 1/2).</p> + +<p>También puedes especificar un valor de tamaño mínimo dentro del valor flexible. Actualiza las reglas para tu artículo de la manera siguiente:</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>Esto establece básicamente que «a cada elemento flexible se le da primero 200px del espacio disponible. Después de eso, el resto del espacio disponible se reparte de acuerdo con las unidades de proporción». Actualiza y observa de qué modo se reparte ahora el espacio.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>El valor real del elemento flexbox se puede ver en su flexibilidad/adaptabilidad: si cambias el tamaño de la ventana del navegador o añades otro elemento {{htmlelement ("article")}}, el diseño continúa funcionando bien.</p> + +<h2 id="flex_forma_completa_y_abreviada">flex: forma completa y abreviada</h2> + +<p>{{cssxref ("flex")}} es una propiedad abreviada que puede especificar hasta tres valores diferentes:</p> + +<ul> + <li>El valor de proporción sin unidades que ya hemos comentado. Se puede especificar individualmente usando la propiedad {{cssxref ("flex-grow")}}.</li> + <li>Un segundo valor de proporción sin unidades, {{cssxref ("flex-shrink")}}, que entra en juego cuando los elementos flexibles desbordan el contenedor. Especifica cuánto de la cantidad desbordada se quita al tamaño de cada elemento flexible para evitar que el contenedor se desborde. Esta es una característica bastante avanzada de flexbox, y no la vamos a exponer en detalle en este artículo.</li> + <li>El valor de tamaño mínimo que ya hemos visto. Se puede especificar individualmente usando el valor {{cssxref ("flex-basis")}}.</li> +</ul> + +<p>Recomendamos no usar las propiedades flex sin abreviar a menos que realmente tengas que hacerlo (por ejemplo, para anular algo establecido previamente). Comportan mucho código añadido y suelen aportar confusión.</p> + +<h2 id="Alineación_horizontal_y_vertical">Alineación horizontal y vertical</h2> + +<p>También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal. Exploremos este aspecto a partir de un ejemplo nuevo: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">consúltalo en vivo</a>), que vamos a convertir en una barra de herramientas/botones ordenada y flexible. En este momento puedes ver una barra de menú horizontal, con algunos botones pegados en línea a la esquina superior izquierda.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>Primero, toma una copia local de este ejemplo.</p> + +<p>Ahora, añade a la parte inferior del CSS del ejemplo lo siguiente:</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Actualiza la página y observa que los botones ahora están convenientemente centrados, horizontal y verticalmente. Lo hemos hecho a partir de dos propiedades nuevas.</p> + +<p>{{cssxref ("align-items")}} controla dónde se ubican los elementos flexibles en el eje transversal.</p> + +<ul> + <li>Por defecto, el valor es <code>stretch</code>, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto.</li> + <li>El valor <code>center</code> que utilizamos en nuestro código anterior mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal. Es por eso que los botones de nuestro ejemplo ahora están centrados verticalmente.</li> + <li>También puedes tener valores como <code>flex-start</code> y <code>flex-end</code>, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente. Consulta {{cssxref ("align-items")}} para conocer todos los detalles al respecto.</li> +</ul> + +<p>Puedes anular el comportamiento {{cssxref ("align-items")}} para elementos flexibles individuales aplicándoles la propiedad {{cssxref ("align-self")}}. Por ejemplo, añade a tu CSS lo siguiente:</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p>Observa qué efecto tiene esto y retíralo de nuevo al terminar.</p> + +<p>{{cssxref ("justify-content")}} controla dónde se ubican los elementos flexibles sobre el eje principal.</p> + +<ul> + <li>El valor por defecto es <code>flex-start</code>, que asienta todos los elementos al comienzo del eje principal.</li> + <li>Puedes usar <code>flex-end</code> para que se asienten al final.</li> + <li><code>center</code> también es un valor de <code>justify-content</code> (para alinear contenido), que asienta los elementos flexibles sobre el centro del eje principal.</li> + <li>El valor <code>space-around</code> que hemos usado antes es útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo.</li> + <li>Hay otro valor, <code>space-between</code>, que es muy similar a <code>space-around</code>, pero no deja espacio en los extremos.</li> +</ul> + +<p>Te animamos a jugar con estos valores para ver cómo funcionan antes de continuar.</p> + +<h2 id="Ordenar_los_elementos_flexibles">Ordenar los elementos flexibles</h2> + +<p>Los elementos flexbox también tienen una función para cambiar el orden de disposición de los elementos flexibles, sin que ello afecte a su orden en el código fuente. Esto es algo que resulta imposible de hacer con los métodos de compaginación tradicionales.</p> + +<p>El código para esto es simple: añade el siguiente CSS al código de ejemplo de la barra de controles:</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>Actualiza, y observa que el botón «Smile» se ha movido al final del eje principal. Observemos cómo funciona esto con un poco más de detalle:</p> + +<ul> + <li>Por defecto, todos los elementos flexibles tienen un valor {{cssxref ("order")}} de 0.</li> + <li>Los elementos flexibles que tengan establecidos los valores de orden más altos aparecerán más tarde en el orden de visualización que los elementos que tengan valores de orden más bajos.</li> + <li>Los artículos flexibles con el mismo valor de orden aparecerán en su orden de origen. Luego, si hay cuatro elementos cuyos valores de orden se han establecido en 2, 1, 1 y 0, respectivamente, su orden de visualización será 4°, 2°, 3° y, por último, 1°.</li> + <li>El tercer elemento aparece después del segundo porque tiene el mismo valor de orden y está después de él en el orden del código de origen.</li> +</ul> + +<p>Puedes establecer valores de orden negativos para que los elementos aparezcan antes que los elementos establecidos con el valor 0. Por ejemplo, puedes hacer que el botón «Blush» aparezca al comienzo del eje principal utilizando la regla siguiente:</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Cajas_flexibles_anidadas">Cajas flexibles anidadas</h2> + +<p>Los elementos flexbox permiten crear algunos diseños de página bastante complejos. Es perfectamente aceptable configurar un elemento flexible para que también sea un contenedor flexible, de modo que los elementos secundarios también se dispongan como cajas flexibles. Echa un vistazo a complex-flexbox.html (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">consúltalo en vivo</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>El HTML para ello es bastante simple. Hay un elemento {{htmlelement ("section")}} que contiene tres elementos {{htmlelement ("article")}}. El tercer elemento {{htmlelement ("article")}} contiene tres elementos {{htmlelement ("div")}}:</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>Veamos el código que hemos usado para esta compaginación.</p> + +<p>En primer lugar, configuramos los elementos secundarios de {{htmlelement ("section")}} para que se presenten como cajas flexibles.</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>A continuación, establecemos algunos valores flexibles en los elementos {{htmlelement ("article")}}. Presta una atención especial a la segunda regla: configuramos el tercer elemento {{htmlelement ("article")}} para que sus hijos también se presenten como elementos flexibles, pero esta vez los disponemos en una columna.</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>A continuación, seleccionamos el primer elemento {{htmlelement ("div")}}. Primero usamos <code>flex:1 100px;</code> para darle una altura mínima efectiva de 100 px, luego configuramos sus elementos secundarios (los elementos {{htmlelement ("button")}}) para que también se presenten como elementos flexibles. Aquí los colocamos en una fila que los delimita y los alineamos en el centro del espacio disponible, como hicimos en el ejemplo del botón individual que vimos antes.</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Por último, establecemos un tamaño para el botón, pero lo más interesante es que le damos un valor flexible de 1 auto. Esto tiene un efecto muy interesante, que puedes observar si cambias el tamaño del ancho de la ventana de tu navegador. Los botones ocuparán tanto espacio como puedan y se asentarán tantos en la misma línea como quepan, pero cuando ya no quepan con comodidad en la misma línea, saltarán de línea y crearán líneas nuevas.</p> + +<pre class="brush: css notranslate">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>La compatibilidad de los elementos flexbox está garantizada para la mayoría de los navegadores nuevos: Firefox, Chrome, Opera, Microsoft Edge e Internet Explorer 11, las versiones más recientes de Android/iOS, etc. Sin embargo, todavía hay navegadores antiguos en uso que no admiten las propiedades flexbox (o lo hacen, pero admiten una versión muy antigua y desactualizada).</p> + +<p>Esto no importa demasiado mientras estás aprendiendo y experimentando; pero cuando consideras usar propiedades flexbox en un sitio web real, debes hacer pruebas y asegurarte de que tu experiencia de usuario sea lo suficientemente aceptable en tantos navegadores como sea posible.</p> + +<p>Las propiedades flexbox son un poco más complicadas que otras características de CSS. Por ejemplo, si un navegador no soporta sombras en CSS, es probable que el sitio todavía sea utilizable. Sin embargo, si no es compatible con las funciones flexbox, probablemente el diseño completo se romperá, y el sitio web se inutilizará.</p> + +<p>Expusimos estrategias para superar problemas de compatibilidad entre navegadores en nuestro módulo <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">Pruebas de compatibilidad del navegador</a>.</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 comprobar si retienes esta información antes de seguir en <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">Test your skills: Flexbox</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Con esto concluye nuestro recorrido por los conceptos básicos de las propiedades flexbox. Esperamos que te hayas divertido y que juegues con ello mientras avanzas en tu aprendizaje. A continuación, veremos otro aspecto importante de los diseños CSS: las rejillas CSS.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotadores</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en varias columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li> +</ul> +</div> diff --git a/files/es/learn/css/css_layout/floats/index.html b/files/es/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..47ae275f2e --- /dev/null +++ b/files/es/learn/css/css_layout/floats/index.html @@ -0,0 +1,505 @@ +--- +title: Floats +slug: Learn/CSS/CSS_layout/Floats +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p>Originalmente pensada para flotar imágenes dentro de bloques de texto, la propiedad {{cssxref("float")}} se convirtió en una de las herramientas más usadas para crear diseños multicolumna en las páginas web. Con la llegada de Flexbox y Grid ha vuelto ahora a su propósito original, como se explica en este artículo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisitos previos:</th> + <td>HTML básico (ver <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), y una idea de Cómo funciona CSS (ver <a href="/es/docs/Learn/CSS/First_steps">Introducción a CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a crear elementos flotantes en páginas web, y a usar la propiedad <em>clear</em> y otros métodos para limpiar los elementos flotantes.</td> + </tr> + </tbody> +</table> + +<h2 id="La_historia_de_los_elementos_flotantes">La historia de los elementos flotantes</h2> + +<p>La propiedad {{cssxref("float")}} fue introducida para permitir a los desarrolladores implementar diseños sencillos que incluyeran una imagen flotando dentro de una columna de texto, con el texto envolviendo la parte izquierda o derecha de la imagen. El tipo de cosa que encuentras habitualmente en el diseño de un periódico.</p> + +<p>Pero los desarrolladores web pronto se dieron cuenta de que podían flotar cualquier cosa, no solo imágenes, por lo que su uso se extendió, por ejemplo creando efectos de diseño divertidos como estas <a href="https://css-tricks.com/snippets/css/drop-caps/">letras capitulares</a>.</p> + +<p>Los elementos flotantes han sido usados comúnmente para crear diseños web completos con múltiples columnas situadas unas al lado de las otras (el comportamiento por defecto sería que las columnas se situaran unas debajo de las otras, en el mismo orden en el que aparecen en el código fuente). Ahora hay disponibles técnicas más modernas y mejores, que exploraremos más adelante en este módulo, por lo que el uso de {{cssxref("float")}} de este modo debería contemplarse como una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnica anticuada</a>.</p> + +<p>En este artículo nos centraremos en el uso apropiado de la propiedad {{cssxref("float")}}.</p> + +<h2 id="Un_ejemplo_de_float_simple">Un ejemplo de float simple</h2> + +<p>Exploremos cómo usar los <em>float</em>. Empezaremos con un ejemplo realmente simple que incluye un bloque de texto flotando alrededor de un elemento. Puedes acompañarnos creando un fichero <code>index.html</code> en tu ordenador, rellenándolo con <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, e insertando el código siguiente en los lugares adecuados. Al final de la sección podrás ver un ejemplo en vivo de cómo debería ser el código final.</p> + +<p>Primero, empecemos con algo de HTML simple — añade lo siguiente al cuerpo de tu HTML, eliminando cualquier otra cosa que hubiera antes:</p> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> + +<div class="box">Caja flotante</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> + +<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>Ahora aplica el siguiente CSS a tu HTML (usando un elemento {{htmlelement("style")}} o un {{htmlelement("link")}} para separar el fichero <code>.css</code> — tú eliges):</p> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>Si guardas y recargas la página, verás algo parecido a lo que esperarías: la caja se encuentra por encima del texto, en un flujo normal. Para flotar el texto alrededor, añade las propiedades {{cssxref("float")}} y {{cssxref("margin-right")}} a la regla <code>.box</code>:</p> + +<pre class="brush: css notranslate">.box { + float: left; + margin-right: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>Ahora, si guardas y recargas, podrás ver algo parecido a lo siguiente:</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Float_Example_1">Float Example 1</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> + +<div class="box">Caja flotante</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin-right: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p> + +<p>Analicemos ahora cómo funciona el <em>float</em> — el elemento con el <em>float</em> aplicado (el elemento {{htmlelement("div")}} en este caso) es sacado del flujo normal del documento y está pegado al lado izquierdo de su elemento contenedor padre ({{htmlelement("body")}}, en este caso). Cualquier contenido que esté por debajo del elemento flotado en el flujo normal, ahora lo envolverá, rellenando el espacio a la derecha hasta la parte superior del elemento flotante. Allí se detendrá.</p> + +<p>Flotar el contenido a la derecha tiene exactamente el mismo efecto, pero a la inversa — el elemento flotado se pegará a la derecha, y el contenido lo envolverá por la izquierda. Prueba cambiando el valor de la propiedad <em>float</em> a <code>right</code> y reemplaza {{cssxref("margin-right")}} con {{cssxref("margin-left")}} en el último conjunto de reglas para ver el resultado.</p> + +<p>Si bien podemos agregar un margen al flotante para alejar el texto, no podemos agregar un margen al texto para alejarlo del flotante. Esto se debe a que un elemento flotante se saca del flujo normal y las cajas de los siguientes elementos siguen detrás del flotador. Puedes comprobarlo haciendo algunos cambios en tu ejemplo.</p> + +<p>Añade una clase <code>special</code> al primer párrafo de texto, el que sucede inmediatamente a la caja flotante, y luego añade en tu CSS las siguientes reglas. Esto le dará al párrafo siguiente un color de fondo.</p> + +<pre class="brush: css notranslate">.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> + +<p>Para que el efecto sea más fácil de ver, cambia el <code>margin-right</code> de tu elemento flotante a <code>margin</code>, para obtener espacio alrededor del elemento flotante. Verás que el fondo del párrafo pasa justo por debajo de la caja flotante, como en el ejemplo inferior.</p> + +<div id="Float_2"> +<div class="hidden"> +<h6 id="Float_Example_2">Float Example 2</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> + +<div class="box">Caja flotante</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p> + +<p>Los cuadros de línea de nuestro siguiente elemento se han acortado para que el texto discurra alrededor del flotador, pero debido a que el flotador se eliminó del flujo normal, el cuadro alrededor del párrafo aún permanece en ancho completo.</p> + +<h2 id="Limpiando_floats">Limpiando floats</h2> + +<p>Hemos visto que el flotador se elimina del flujo normal y que otros elementos se mostrarán a su lado, por lo tanto, si queremos evitar que un elemento siguiente se mueva hacia arriba, debemos limpiar el <em>float</em>. Esto se logra con la propiedad {{cssxref ("clear")}}.</p> + +<p>En el HTML del ejemplo anterior, añade una clase <code>cleared</code> al segundo párrafo debajo del elemento flotante. Luego añade lo siguiente a tu CSS:</p> + +<pre class="brush: css notranslate">.cleared { + clear: left; +} +</pre> + +<div id="Float_3"> +<div class="hidden"> +<h6 id="Float_Example_3">Float Example 3</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> + +<div class="box">Caja flotante</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p> + +<p>Deberías ver que el siguiente párrafo limpia el elemento flotante y ya no aparece junto a él. La propiedad <code>clear</code> acepta los siguientes valores:</p> + +<ul> + <li><code>left</code>: limpia los elementos flotados a la izquierda.</li> + <li><code>right</code>: limpia los elementos flotados a la derecha.</li> + <li><code>both</code>: limpia cualquier elemento flotado, a la izquierda o a la derecha.</li> +</ul> + +<h2 id="Limpiar_las_cajas_envueltas_alrededor_de_un_float">Limpiar las cajas envueltas alrededor de un float</h2> + +<p>Ahora ya sabes cómo limpiar un elemento que sigue a un elemento flotante, pero observa lo que sucede si tienes un flotante alto y un párrafo corto, con una caja envolviendo a ambos elementos. Modifica tu documento para que el primer párrafo y el cuadro flotante estén envueltos por un {{htmlelement("div")}} con una clase <code>wrapper</code>.</p> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box">Caja flotante</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +</pre> + +<p>En tu CSS, añade la siguiente regla para la clase <code>.wrapper</code> y después recarga la página:</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +}</pre> + +<p>Además, elimina la clase <code>.cleared</code> anterior:</p> + +<pre class="comment-text notranslate" id="ct-0">.cleared { + clear: left; +}</pre> + +<p>Verás que, como en el ejemplo en el que hemos puesto un color de fondo al párrafo, el color de fondo pasa por detrás del elemento flotante.</p> + +<div id="Float_4"> +<div class="hidden"> +<h6 id="Float_Example_4">Float Example 4</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> +<div class="wrapper"> + <div class="box">Caja flotante</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p> + +<p>Una vez más, esto se debe a que el flotador se ha sacado del flujo normal. Limpiar el siguiente elemento no ayuda con este problema de limpieza de caja, donde queremos que la parte inferior de la caja envuelva el elemento flotante y envuelva el contenido incluso si el contenido es más corto. Hay tres formas posibles de lidiar con esto, dos que funcionan en todos los navegadores, pero tienen algo de truco, y una tercera, nueva forma de lidiar con esta situación correctamente.</p> + +<h3 id="El_hack_clearfix">El hack clearfix</h3> + +<p>La forma en que esta situación se ha tratado tradicionalmente es utilizando algo conocido como "truco clearfix". Esto implica insertar algún contenido generado después del cuadro que contiene el contenido flotante y envolvente, y configurarlo para limpiar ambos.</p> + +<p>Añade el siguiente CSS al ejemplo:</p> + +<pre class="brush: css notranslate">.wrapper::after { + content: ""; + clear: both; + display: block; +}</pre> + +<p>Ahora recarga la página y la caja debería limpiarse. Esto es básicamente lo missmo que si hubieras añadido un elemento HTML como un <code><div></code> debajo de los elementos y le hubieras añadido la propiedad <code>clear: both</code>.</p> + +<div id="Float_5"> +<div class="hidden"> +<h6 id="Float_Example_5">Float Example 5</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> +<div class="wrapper"> + <div class="box">Caja flotante</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.wrapper::after { + content: ""; + clear: both; + display: block; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p> + +<h3 id="Usando_overflow">Usando overflow</h3> + +<p>Un método alternativo es establecer la propiedad {{cssxref("overflow")}} del elemento envolvente con un valor distinto de <code>visible</code>.</p> + +<p>Elimina el CSS clearfix que añadiste en la anterior sección y, en su lugar, añade <code>overflow: auto</code> a las reglas de la caja envolvente. De nuevo, la caja debería limpiarse.</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +}</pre> + +<div id="Float_6"> +<div class="hidden"> +<h6 id="Float_Example_6">Float Example 6</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> +<div class="wrapper"> + <div class="box">Caja flotante</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p> + +<p>Este ejemplo funciona creando lo que se conoce como un <em><strong>block formatting context</strong></em> (BFC) o contexto de formato de bloque. Es como un pequeño diseño dentro de nuestra página dentro del cual todo está contenido, por lo tanto, nuestro elemento flotante está contenido dentro del BFC y el fondo se encuentra detrás de ambos elementos. Esto generalmente funcionará, sin embargo, en ciertos casos, es posible que encuentre barras de desplazamiento no deseadas o sombras recortadas debido a las consecuencias no deseadas del uso del desbordamiento..</p> + +<h3 id="display_flow-root">display: flow-root</h3> + +<p>La manera moderna de resolver este problema es usar el valor <code>flow-root</code> de la propiedad <code>display</code>. Esto existe solo para crear un BFC sin usar hacks; no habrá consecuencias no deseadas cuando lo use. Elimina <code>overflow: auto</code> de la regla <code>.wrapper</code> y añade <code>display: flow-root</code>. Asumiendo que tu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sea compatible</a>, la caja se limpiará.</p> + +<pre class="brush: css notranslate">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +}</pre> + +<div id="Float_7"> +<div class="hidden"> +<h6 id="Float_Example_7">Float Example 7</h6> + +<pre class="brush: html notranslate"><h1>Ejemplo simple de caja flotante</h1> +<div class="wrapper"> + <div class="box">Caja flotante</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahora ya sabes todo lo que tienes que saber sobre los flotadores en el desarrollo web moderno. Consulta el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño anticuados</a> para obtener información de cómo se solían usar, lo que puede serte útil si tienes que trabajar en proyectos antiguos.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li> +</ul> diff --git a/files/es/learn/css/css_layout/flujo_normal/index.html b/files/es/learn/css/css_layout/flujo_normal/index.html new file mode 100644 index 0000000000..ffc873938f --- /dev/null +++ b/files/es/learn/css/css_layout/flujo_normal/index.html @@ -0,0 +1,95 @@ +--- +title: Flujo normal +slug: Learn/CSS/CSS_layout/Flujo_normal +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">Este artículo explica el flujo normal, o la forma en que se presentan los elementos de la página web si no cambias su compaginación.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (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">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Conocer cómo los navegadores presentan de forma predeterminada las páginas web antes de comenzar a hacer cambios.</td> + </tr> + </tbody> +</table> + +<p>Como se detalla en el último artículo de introducción al diseño, los elementos en una página web se distribuyen según el flujo normal si no se aplica ningún CSS que cambie la forma en la que se comportan. Y, como comenzamos a descubrir, puedes cambiar el comportamiento de los elementos, ya sea ajustando su posición en este flujo normal o eliminándolos de este por completo. Comenzar con un documento coherente y bien estructurado que sea legible en el flujo normal es la mejor manera de comenzar cualquier página web. Asegura que tu contenido sea legible, incluso si el usuario usa un navegador muy limitado o un dispositivo como un lector de pantalla que lee el contenido de la página. Además, como el flujo normal está diseñado para que un documento sea legible, al comenzar de esta manera, trabajas en el documento en lugar de luchar contra él a medida que haces cambios en su diseño.</p> + +<p>Antes de profundizar en los diferentes métodos de diseño, vale la pena revisar algunas de las cosas que ya debes haber estudiado en artículos anteriores con respecto al flujo normal de los documentos.</p> + +<h2 id="¿Cómo_se_presentan_por_defecto_los_elementos">¿Cómo se presentan por defecto los elementos?</h2> + +<p>En primer lugar, se toma de las cajas de cada uno de los elementos el contenido, luego se añade cualquier área de relleno, borde y margen alrededor de ellas; es el modelo de cajas que hemos visto antes.</p> + +<p>De manera predeterminada, el contenido de un <a href="/es/docs/Web/HTML/Block-level_elements">elemento de nivel de bloque</a> es el 100% del ancho de su elemento padre y su altura viene determinada por su contenido. Los <a href="/es/docs/Web/HTML/Elementos_en_línea">elementos en línea</a> tienen su altura y anchura determinados por su contenido. No puedes establecer el ancho o la altura de los elementos en línea, simplemente se ubican dentro del contenido de los elementos de nivel de bloque. Si deseas controlar el tamaño de un elemento en línea de esta manera, debes configurarlo para que se comporte como un elemento de nivel de bloque con <code>display: block;</code> (o incluso, <code>display: inline-block;</code>, que combina características de ambos).</p> + +<p>Esto explica los elementos individuales, pero ¿qué hay del modo como los elementos interactúan entre sí? El flujo de diseño normal (mencionado en el artículo de introducción al diseño) es el sistema mediante el cual los elementos se colocan en la ventana gráfica del navegador. De manera predeterminada, los elementos de nivel de bloque se presentan en la <em>dirección del flujo del bloque</em>, en función del <a href="/es/docs/Web/CSS/writing-mode">modo de escritura</a> de los padres (<em>initial</em>: horizontal-tb): cada uno aparecerá en una línea nueva debajo de la última, y estarán separados por cualquier margen que se establezca en ellos. Por lo tanto, en inglés, o en cualquier otro modo de escritura horizontal y de arriba a abajo, los elementos de nivel de bloque se disponen verticalmente.</p> + +<p>Los elementos en línea se comportan de manera diferente: no aparecen en líneas nuevas; en su lugar, se asientan en la misma línea entre sí y con cualquier contenido de texto adyacente (o envuelto), siempre que tengan espacio dentro del ancho del elemento de nivel de bloque primario. Si no hay espacio, el texto o los elementos que desborden bajarán a la línea siguiente.</p> + +<p>Si dos elementos adyacentes tienen algún margen configurado y los dos márgenes se tocan, se mantiene el mayor de los dos y el menor desaparece; esto se llama colapso del margen, y ya lo hemos visto antes.</p> + +<p>Echemos un vistazo a un ejemplo sencillo que explica todo esto:</p> + +<div id="Normal_Flow"> +<pre class="brush: html"><h1>Flujo de los documentos básicos</h1> + +<p>Soy un elemento básico de nivel de bloque. Mis elementos de nivel de bloque adyacentes se encuentran en líneas nuevas debajo de mí.</p> + +<p>Cubrimos por defecto el 100% del ancho de nuestro elemento principal, y somos tan altos como nuestro contenido secundario. Nuestro ancho y alto total es nuestro contenido + área de relleno + ancho/alto del borde.</p> + +<p>Estamos separados por nuestros márgenes. Debido al colapso del margen, estamos separados por el ancho de uno de nuestros márgenes, no por ambos.</p> + +<p>Los elementos en línea <span>como este</span> y <span>este otro</span> se ubican en la misma y la de los nodos de texto adyacentes, mientras hay espacio en la misma línea. Si un elemento en línea desborda, <span>sigue por la línea siguiente, si es posible (como la que contiene este texto)</span>, o simplemente pasa a una línea nueva, como hace esta imagen: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahora que comprendes el flujo normal y cómo el navegador presenta las cosas por defecto, continúa para comprender cómo cambiar esta pantalla predeterminada para crear el diseño que necesitas.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">El flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a media</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredada</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con los navegadores antiguos</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de de elementos básicos de compaginación </a></li> +</ul> diff --git a/files/es/learn/css/css_layout/grids/index.html b/files/es/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..d2632cba2b --- /dev/null +++ b/files/es/learn/css/css_layout/grids/index.html @@ -0,0 +1,696 @@ +--- +title: Cuadrículas +slug: Learn/CSS/CSS_layout/Grids +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">La compaginación en cuadrícula con CSS es un método de diseño de páginas web en dos dimensiones. Te permite distribuir el contenido en filas y columnas, y tiene muchas características que facilitan la creación de diseños complejos. Este artículo te proporciona todo lo que necesitas saber para comenzar con el diseño de páginas web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (véase <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción al HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender los conceptos fundamentales que hay detrás de los métodos de compaginación en cuadrícula y de cómo implementar una compaginación en cuadrícula con CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_es_la_compaginación_en_cuadrícula">¿Qué es la compaginación en cuadrícula?</h2> + +<p>Una cuadrícula es un conjunto de líneas horizontales y verticales que crean un patrón sobre el que podemos alinear nuestros elementos de diseño. Las cuadrículas nos ayudan a crear diseños de página en que los elementos no saltan ni cambian de ancho cuando nos movemos de una página a otra, y así proporcionan a nuestras páginas web un aspecto más coherente.</p> + +<p>Una cuadrícula en general tiene <strong>columnas</strong>, <strong>filas</strong> y luego espacios entre cada fila y cada columna, conocidos comúnmente como <strong>canales</strong>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<h2 id="Crear_tu_cuadrícula_con_CSS">Crear tu cuadrícula con CSS</h2> + +<p>Una vez que has decidido qué tipo de cuadrícula necesita tu diseño de página, puedes usar la compaginación en cuadrícula con CSS para crear esa cuadrícula y posicionar elementos en ella. Primero veremos las características básicas de la compaginación en cuadrícula y luego exploraremos cómo crear un método de compaginación de cuadrícula sencilla para tu proyecto.</p> + +<h3 id="Definir_una_cuadrícula">Definir una cuadrícula</h3> + +<p>Como punto de partida, descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">archivo de punto de partida</a> y ábrelo en tu editor de texto y tu navegador (también puedes <a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">verlo en vivo aquí</a>). Hay un ejemplo con un contenedor que tiene algunos elementos hijo. Por defecto, estos se muestran en flujo normal, por lo que las cajas se muestran una debajo de la otra. Vamos a trabajar con este archivo durante la primera parte de este artículo, y vamos a hacer cambios en él para ver cómo se comporta la cuadrícula.</p> + +<p>Para definir una cuadrícula utilizamos el valor <code>grid</code> de la propiedad {{cssxref ("display")}}. Al igual que con el método Flexbox, esto activa la compaginación de cuadrícula y todos los elementos que son hijos directos del contenedor se convierten en elementos de cuadrícula. Añade esto al CSS en tu archivo:</p> + +<pre class="brush: css">.container { + display: grid; +}</pre> + +<p>A diferencia del método Flexbox, los elementos no se ven diferentes inmediatamente. La declaración <code>display: grid</code> te proporciona una cuadrícula de una sola columna, por lo que tus elementos continúan mostrándose uno debajo del otro, como lo hacen en el flujo normal.</p> + +<p>Para ver algo que se parezca más a una cuadrícula, necesitamos añadir columnas a la cuadrícula. Vamos a añadir tres columnas de 200 píxeles. Puedes usar cualquier unidad de longitud o porcentajes para crear estas trazas de columna.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>Añade la segunda declaración a tu regla CSS, luego vuelve a cargar la página y observa que los elementos se reubican uno en cada celda de la cuadrícula que has creado.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Ejemplo_sencillo_de_cuadrícula">Ejemplo sencillo de cuadrícula</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +}</pre> + +<pre class="brush: html"><div class="container"> + <div>Uno</div> + <div>Dos</div> + <div>Tres</div> + <div>Cuatro</div> + <div>Cinco</div> + <div>Seis</div> + <div>Siete</div> +</div> </pre> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '100%', 400) }}</p> + +<h3 id="Cuadrículas_flexibles_con_la_unidad_fr">Cuadrículas flexibles con la unidad fr</h3> + +<p>Además de crear cuadrículas con longitudes y porcentajes, podemos usar la unidad <code>fr</code> para dimensionar de manera flexible las filas y columnas de la cuadrícula. Esta unidad representa una fracción del espacio disponible en el contenedor de la cuadrícula.</p> + +<p>Cambia tu lista de trazas en la definición siguiente para crear tres trazas <code>1fr</code>.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>Ahora deberías observar que tus trazas son flexibles. La unidad <code>fr</code> distribuye el espacio por proporciones, de modo que puedes dar valores positivos diferentes a sus trazas, por ejemplo, si cambias la definición de la manera siguiente:</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>Ahora la primera traza tiene <code>2fr</code> del espacio disponible, y las otras dos trazas tienen <code>1fr</code>, lo que da una primera traza más grande. Puedes mezclar unidades <code>fr</code> y trazas de longitud fija; en tal caso, el espacio que se necesita para las trazas fijas se descuenta del espacio en que se distribuyen las otras trazas.</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Ejemplo_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo de cuadrícula sencilla con unidades fr</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +}</pre> + +<pre class="brush: html"><div class="container"> + <div>Uno</div> + <div>Dos</div> + <div>Tres</div> + <div>Cuatro</div> + <div>Cinco</div> + <div>Seis</div> + <div>Siete</div> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: La unidad <code>fr</code> distribuye el espacio <em>disponible</em>, no <em>todo</em> el espacio. Por lo tanto, si una de tus trazas tiene algo grande dentro, habrá menos espacio libre para compartir.</p> +</div> + +<h3 id="Los_espacios_entre_trazas">Los espacios entre trazas</h3> + +<p>Para crear espacios entre trazas, utilizamos las propiedades {{cssxref ("grid-column-gap")}} para los espacios entre columnas, {{cssxref ("grid-row-gap")}} para los espacios entre filas, y {{ cssxref ("grid-gap")}} para configurar ambos a la vez.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +}</pre> + +<p>Estos espacios pueden expresarse en cualquier unidad de longitud o en porcentaje, pero no en unidades <code>fr</code>.</p> + +<div id="Grid_3"> +<div class="hidden"> +<h6 id="Ejemplo_2_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 2 de cuadrícula sencilla con unidades fr</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +}</pre> + +<pre class="brush: html"><div class="container"> + <div>Uno</div> + <div>Dos</div> + <div>Tres</div> + <div>Cuatro</div> + <div>Cinco</div> + <div>Seis</div> + <div>Siete</div> +</div> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_3', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Las propiedades <code>*gap</code> solían tener el prefijo <code>grid-</code>, pero esto se ha cambiado en la especificación, porque la intención es hacerlas compatibles con diversos métodos de diseño. Por el momento, Edge y Firefox admiten las versiones sin prefijo, y las versiones con prefijo se mantienen como un alias, por lo que será seguro usarlas durante algún tiempo. Para quedarte en lo seguro, y que tu código sea más a prueba de balas, puedes duplicar y añadir ambas propiedades.</p> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="Repetir_listas_de_trazas">Repetir listas de trazas</h3> + +<p>Puedes repetir todas tus trazas, o una sección de tu lista de trazas, con la notación de repetición. Cambia tu lista de trazas por lo siguiente:</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>Ahora vas a tener 3 trazas de <code>1fr</code>, igual que antes. El primer valor que pasas a la función de repetición son las veces que deseas que la lista se repita, mientras que el segundo valor es una lista de trazas, que puede constar de una o más trazas.</p> + +<h3 id="La_cuadrícula_implícita_y_explícita">La cuadrícula implícita y explícita</h3> + +<p>Hasta ahora solo hemos especificado trazas de columna y, sin embargo, también creamos filas para contener nuestro contenido. Este es un ejemplo de una cuadrícula explícita con respecto a una implícita. La cuadrícula explícita es la que creas usando <code>grid-template-columns</code> o <code>grid-template-rows</code>. La cuadrícula implícita se crea cuando el contenido se posiciona fuera de esa cuadrícula, como en nuestras filas. Las cuadrículas explícitas e implícitas son análogas a los ejes principales y transversales del método Flexbox.</p> + +<p>Por defecto, las trazas que se crean en la cuadrícula implícita tienen un tamaño <code>auto</code>, lo que en general significa que son lo bastante grandes para ajustarse a su contenido. Si deseas asignar un tamaño a las trajas de las cuadrícula implícitas, puedes usar las propiedades {{cssxref ("grid-auto-rows")}} y {{cssxref ("grid-auto-columns")}}. Si añades <code>grid-auto-rows</code> con un valor de <code>100px</code> a tu CSS, observa que esas filas que has creado ahora tienen 100 píxeles de alto.</p> + +<div id="Grid_4"> +<div class="hidden"> +<h6 id="Ejemplo_3_de_cuadrícula_sencilla_con_unidades_fr">Ejemplo 3 de cuadrícula sencilla con unidades fr</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +}</pre> + +<pre class="brush: html"><div class="container"> + <div>Uno</div> + <div>Dos</div> + <div>Tres</div> + <div>Cuatro</div> + <div>Cinco</div> + <div>Seis</div> + <div>Siete</div> +</div></pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_4', '100%', 400) }}</p> + +<h3 id="La_función_minmax">La función minmax()</h3> + +<p>Nuestras trazas de 100 píxeles de altura no serán muy útiles si en esas trazas añadimos contenido cuya altura sea mayor que 100 píxeles, porque ello causaría un desbordamiento. Puede ser mejor tener trazas cuya altura sea de <em>al menos</em> 100 píxeles y que puedan expandirse si en ellas entra más contenido. Un hecho en realidad básico sobre la web es que nunca sabes qué altura va a tener algo; contenido adicional o tamaños de letra más grandes pueden causar problemas con los diseños que pretendes ser perfectos con todas las dimensiones en píxeles.</p> + +<p>La función <code>minmax</code> permite establecer unos tamaños mínimo y máximo para una traza, por ejemplo, <code>minmax(100px, auto)</code>. El tamaño mínimo es de 100 píxeles, pero el máximo es <code>auto</code>, que se expande para adaptarse al contenido. Prueba a cambiar <code>grid-auto-rows</code> para usar un valor minmax:</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>Observa que si añades contenido la traza se expande para permitir que se ajuste. Ten en cuenta que la expansión se produce en la dirección de la fila.</p> + +<h3 id="Tantas_columnas_como_quepan">Tantas columnas como quepan</h3> + +<p>Podemos combinar algunas de las cosas que hemos aprendido sobre las listas de trazas, la notación de repetición y la función <code>minmax()</code> para crear un patrón útil. A veces es útil poder pedirle a la cuadrícula que cree tantas columnas como quepan en el contenedor. Para hacer esto establecemos el valor <code>grid-template-columns</code> con la notación <code>repeat()</code>, pero en lugar de pasar un número, pasa la palabra clave <code>auto-fill</code>. Para el segundo parámetro de la función usamos <code>minmax()</code>, con un valor mínimo igual al tamaño mínimo de la traza que nos gustaría tener, y un valor máximo de <code>1fr</code>.</p> + +<p>Prueba esto en tu archivo ahora, con el CSS siguiente:</p> + +<div id="Grid_5"> +<div class="hidden"> +<h6 id="Tantas_columnas_como_quepan_2">Tantas columnas como quepan</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +}</pre> + +<pre class="brush: html"><div class="container"> + <div>Uno</div> + <div>Dos</div> + <div>Tres</div> + <div>Cuatro</div> + <div>Cinco</div> + <div>Seis</div> + <div>Siete</div> +</div></pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_5', '100%', 400) }}</p> + +<p>Esto funciona porque la cuadrícula crea tantas columnas de 200 píxeles como caben en el contenedor, luego comparte el espacio restante entre todas las columnas: el máximo es 1fr, que como sabemos, distribuye el espacio de manera uniforme entre las trazas.</p> + +<h2 id="Posicionamiento_sobre_las_líneas_de_base">Posicionamiento sobre las líneas de base</h2> + +<p>Ahora pasamos de crear una cuadrícula a colocar cosas en la cuadrícula. Nuestra cuadrícula siempre tiene líneas; estas líneas comienzan en 1 y se relacionan con el modo de escritura del documento. Por lo tanto, en español, la línea de columna 1 es la de la izquierda de la cuadrícula y la línea de fila 1 es la de la parte superior. En una columna arábiga, la línea 1 estaría en el lado derecho, ya que el árabe se escribe de derecha a izquierda.</p> + +<p>Podemos posicionar los elementos de acuerdo con estas líneas si especificamos las líneas de inicio y final. Hacemos esto con las propiedades siguientes:</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>Todas estas propiedades pueden tener un número de línea como valor. También puedes usar las propiedades abreviadas:</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>Estas te permiten especificar a la vez las líneas de inicio y final, separadas por un carácter de barra diagonal: <code>/</code>.</p> + +<p>Descarga este <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">archivo de punto de partida</a> o <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">míralo en vivo aquí</a>. Ya hay una cuadrícula definida y un elemento sencillo esbozado. Puedes observar que el posicionamiento automático coloca un elemento en cada celda de la cuadrícula que hemos creado.</p> + +<p>Nosotros vamos a utilizar en lugar de ello las líneas de cuadrícula para posicionar sobre la cuadrícula todos los elementos de nuestro sitio web. Añade al final de tu código CSS las reglas siguientes:</p> + +<pre class="brush: css">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div id="Grid_6"> +<div class="hidden"> +<h6 id="Posicionamiento_sobre_las_líneas_de_base_2">Posicionamiento sobre las líneas de base</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +}</pre> + +<pre class="brush: html"><div class="container"> + <header>Este es mi blog</header> + <article> + <h1>Mi artículo</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Otras cosas</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contáctame: me@mysite.com</footer> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_6', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: también puedes usar el valor <code>-1</code> para señalar la columna del final o la fila del final, y contar hacia atrás desde el final con valores negativos. Sin embargo, esto solo funciona con la cuadrícula explícita. El valor <code>-1</code> no señala la línea del final de la cuadrícula implícita.</p> +</div> + +<h2 id="Posicionamiento_con_grid-template-areas">Posicionamiento con grid-template-areas</h2> + +<p>Una forma alternativa de posicionar elementos en tu cuadrícula es usar la propiedad {{cssxref ("grid-template-areas")}} y asignar un nombre a los diversos elementos de tu diseño.</p> + +<p>Elimina el posicionamiento sobre las líneas de base del último ejemplo (o vuelve a descargar el archivo para tener un punto de partida nuevo) y añade el código CSS siguiente.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>Vuelve a cargar la página y observa que tus elementos se han colocado como antes ¡sin necesidad de usar números de línea!</p> + +<div id="Grid_7"> +<div class="hidden"> +<h6 id="Posicionamiento_sobre_las_líneas_de_base_3">Posicionamiento sobre las líneas de base 3</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<pre class="brush: html"><div class="container"> + <header>Este es mi blog</header> + <article> + <h1>Mi artículo</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> <h2>Otras cosas</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contáctame: me@mysite.com</footer> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_7', '100%', 400) }}</p> + +<p>Las reglas para <code>grid-template-areas</code> son las siguientes:</p> + +<ul> + <li>Hay que tener todas las celdas de la cuadrícula llenas.</li> + <li>Para abarcar el ancho de dos celdas, repite el nombre.</li> + <li>Para dejar una celda vacía, utiliza un punto: <code>.</code>.</li> + <li>Las áreas han de ser rectangulares; por ejemplo, no puedes haber un área en forma de L.</li> + <li>Las áreas no pueden repetirse en lugares diferentes.</li> +</ul> + +<p>Puedes jugar con nuestro diseño, por ejemplo, cambiar el pie de página para que esté solo debajo del contenido, y la barra lateral para abarcar todo. Esta manera de describir un diseño de página es muy adecuada porque resulta obvio a partir del CSS qué sucede exactamente.</p> + +<h2 id="Una_cuadrícula_CSS_formato_de_cuadrícula">Una cuadrícula CSS, formato de cuadrícula</h2> + +<p>Los «formatos» de cuadrícula tienden a basarse en cuadrículas de 12 o 16 columnas, y con las cuadrículas CSS no necesitas ninguna herramienta de terceros para proporcionarte dicho formato, porque ya está en la especificación.</p> + +<p>Descárgate el <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">archivo de punto de partida</a>. Contiene un contenedor con una cuadrícula de 12 columnas definida y el mismo código de marcado que usamos en los dos ejemplos anteriores. Ahora podemos usar el posicionamiento sobre las líneas de base para colocar nuestro contenido en la cuadrícula de 12 columnas.</p> + +<pre class="brush: css">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div id="Grid_8"> +<div class="hidden"> +<h6 id="Un_método_de_compaginación_en_cuadrícula_con_CSS">Un método de compaginación en cuadrícula con CSS</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +}</pre> + +<pre class="brush: html"><div class="container"> + <header>Este es mi blog</header> + <article> + <h1>Mi artículo</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> <h2>Otras cosas</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contáctame: me@mysite.com</footer> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('Grid_8', '100%', 400) }}</p> + +<p>Si usas el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">inspector de cuadrícula de Firefox</a> para ver una superposición de las líneas de cuadrícula sobre tu diseño, puedes observar cómo funciona nuestra cuadrícula de 12 columnas.</p> + +<p><img alt="Una superposición de la cuadrícula de 12 columnas de nuestro diseño de página." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p> + +<h2 id="¡Pon_a_prueba_tus_conocimientos!">¡Pon a prueba tus conocimientos!</h2> + +<p>Has llegado al final de este artículo, pero ¿recuerdas la información más importante? Encontrarás test de prueba que te permitirán verificar que has asimilado esta información antes de continuar en: <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">Pon a prueba tus conocimientos: Cuadrículas</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>En esta descripción general, hemos recorrido las características principales del diseño páginas web con cuadrícula CSS. Deberías poder comenzar a usarlo en tus diseños. Para profundizar en la especificación, lee nuestras guías para el diseño de página con cuadrícula, que puedes encontrar a continuación.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout#Guides">Guías de cuadrícula CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de cuadrícula CSS: Examinar diseños de cuadrícula</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a media</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con navegadores antiguos</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li> +</ul> diff --git a/files/es/learn/css/css_layout/index.html b/files/es/learn/css/css_layout/index.html new file mode 100644 index 0000000000..afa1b0f9a0 --- /dev/null +++ b/files/es/learn/css/css_layout/index.html @@ -0,0 +1,87 @@ +--- +title: Diseño CSS +slug: Learn/CSS/CSS_layout +tags: + - Aprender + - CSS + - Floating + - Grids + - Guía + - Landing + - Layout + - Module + - Multiple column + - Positioning + - Principiante + - TopicStub + - flexbox + - float +translation_of: Learn/CSS/CSS_layout +--- +<div>{{draft}}</div> + +<div>{{LearnSidebar}}</div> + +<p class="summary">Llegados a este punto, hemos examinado los fundamentos básicos de CSS: cómo dar estilo al texto y cómo manipular las cajas que incluyen tu contenido. Llegó el momento de explorar cómo colocar tus cajas en el lugar que elijas con respecto a la ventana principal y el resto de cajas. Hemos cubierto ya los prerrequisitos necesarios, así que vamos a sumergirnos en la maquetación CSS, fijándonos en diferentes configuraciones de visualización, métodos de maquetación tradicionales que implican <em>floats </em>y posicionamiento, así como a nuevas herramientas de maquetación en voga, como <em>flexbox</em>.</p> + +<h2 id="Prerrequisitos">Prerrequisitos</h2> + +<p>Antes de comenzar este módulo, ya deberías:</p> + +<ol> + <li>Estar familiarizado con HTML, como se expone en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</li> + <li>Sentirte cómodo con los fundamentos de CSS, que se discuten en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> + <li>Entender como diseñar cajas <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Si estás trabajando en un dispositivo donde no tengas la posibilidad de crear tus propios archivos, puedes probar la mayoría de los ejemplos de código en un programa online como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<p>Estos artículos te proporcionarán instrucciones sobre las herramientas y técnicas básicas de maquetación disponibles en CSS.</p> + +<dl> + <dt><a href="/es/docs/Learn/CSS/CSS_layout/Introduction">Introducción a la maquetación CSS</a></dt> + <dd>En este artículo repasaremos algunas de las características de la maquetación con CSS que ya hemos tratado en módulos previos, como los diferentes valores de {{cssxref("display")}} ; e introduciremos algunos de los conceptos que estudiaremos a lo largo del módulo.</dd> + <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Flujo_normal">Normal flow</a></dt> + <dd>Los elementos en las páginas web se presentan de acuerdo con el <em>flujo normal, </em>hasta que hacemos algo que cambie eso. Este artículo explica las bases del flujo normal para aprender como cambiarlo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> es una muy reciente tecnología que, soportada ya por numerosos navegadores, está lista para su uso generalizado. Flexbox proporciona las herramientas necesarias para crear rápidamente maquetaciones flexibles y complejas, así como otras funcionalidades que tradicionalmente eran de difícil implementación con CSS. Este artículo explica su funcionamiento básico.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> + <dd>Los sistemas de cuadrícula son otra funcionalidad muy utilizada para la maquetación CSS, que tiende a ser implementada mediante <em>floats</em> u otras funciones de maquetación. Visualizas tu maquetación como un número fijo de columnas donde vas incluyendo tu contenido. En este artículo exploraremos la idea básica detrás de un sistema de cuadrícula, y terminaremos experimentando con CSS Grid, una incipiente nueva característica que permite diseñar una cuadricula Web con gran facilidad</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> + <dd>Inicialmente utilizado para imágenes flotantes dentro de bloques de texto, la propiedad {{cssxref("float")}} se ha convertido en una de las herramientas más utilizadas para crear maquetaciones de varias columnas en páginas web. Con la venida de Flexbox y Grid se ha regresado a su propósito original, como lo explica este artículo.</dd> + <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></dt> + <dd>El posicionamiento te permite sacar elementos del flujo normal de maquetación del documento para hacer que se comporten de manera diferente, p.ej: colocando unos encima de otros, o fijándolos a un lugar de la ventana principal. Este artículo explica los diferentes valores para {{cssxref("position")}} y cómo utilizarlos.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Ejemplos prácticos de posicionamiento</a></dt> + <dd>Una vez cubiertas las nociones básicas de posicionamiento en el artículo anterior, vamos ahora a construir un par de ejemplos reales, para explicar las cosas que puedes hacer con el posicionamiento.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño Multi-columna</a></dt> + <dd>El diseño multi-columna te proporciona un método de maquetación de contenido en columnas, como lo podrías ver en un periódico. Este artículo explica como usar esta característica.</dd> + <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Diseño_receptivo">Responsive design</a></dt> + <dd>A medida que han aparecido diversos tamaños de pantalla en dispositivos habilitados para la web, apareció un conjunto de practicas que permiten a las páginas web alterar su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc.Este se conoce como Responsive design (RWD) y es una idea que cambió la forma en que diseñamos páginas web multi-dispositivos, y en este artículo te ayudaremos a entender las principales técnicas que necesitas saber para dominarlo.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía de consulta de medios para principiantes</a></dt> + <dd><strong>CSS Media Query </strong>te proporciona una forma de aplicar CSS solo cuando el entorno del navegador y el dispositivo coincide con las reglas que especificaste, por ejemplo "la ventana principal es más ancha de 480 pixels". Las consultas de medios son una parte clave del responsive web design, ya que te permiten crear diferentes diseños dependiendo del tamaño de la ventana principal, así como también puede ser usado para detectar otras cosas acerca del entorno en donde tu página web se está ejecutando, por ejemplo si el usuario está usando una pantalla táctil en lugar de un ratón. En esta guía, aprenderás primero acerca de la sintaxis usada en las consultas de medios, y luego pasar a usarlos en un ejemplo donde se muestra cómo un diseño simple puede hacerse responsive.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de diseño heredados</a></dt> + <dd>Los sistemas Grid son una característica muy común usada en el diseño CSS, y antes del diseño Grid CSS, tendían a ser implementados usando floats u otras características de diseño. Imagina tu diseño como un conjunto de números de columnas (p.ej. 4, 5 o 12), y luego acomoda tus columnas de contenido dentro de esas columnas imaginarias. En este artículo vamos a explorar cómo funcionan estos métodos para que entiendas como eran usados si trabajas en un proyecto más antiguo. </dd> + <dt><a href="https://wiki.developer.mozilla.org/es/docs/Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos">Soporte a navegadores antiguos</a></dt> + <dd>En este modulo recomendamos usar Flexbox y Grid como principal método de diseño. Siempre habrán personas que visiten tu página web desde navegadores antiguos, o navegadores que no soportan los métodos que usaste. Este siempre ha sido el caso en la web: a medida que se desarrollan nuevas características, los distintos navegadores priorizan diferentes cosas. Este artículo explica como usar técnicas modernas para la web sin dejar por fuera a los usuarios de tecnologías antiguas. </dd> +</dl> + +<h2 id="Ejercicios">Ejercicios</h2> + +<p>Los siguientes ejercicios comprobarán tu habilidad para maquetar páginas web con CSS.</p> + +<dl> + <dt>Creando una maquetación de varias columnas flexibles</dt> + <dd>Este ejercicio comprobará tu habilidad par crear una maquetación multi-columna, con alguna que otra característica interesante.</dd> + <dt>Creando un <em>widget</em> fijo de control</dt> + <dd>Este ejercicio pone a prueba tu entendimiento sobre el posicionamiento, proponiéndote crear un <em>widget</em> de control con posición fija, que permitirá al usuario acceder a los controles de una aplicación Web, independientemente de dónde se hubiera desplazado en la página.</dd> +</dl> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout">https://developer.mozilla.org/en-US/Learn/CSS/Basics/Layout</a></li> +</ul> diff --git a/files/es/learn/css/css_layout/introducción/index.html b/files/es/learn/css/css_layout/introducción/index.html new file mode 100644 index 0000000000..2f409d97c3 --- /dev/null +++ b/files/es/learn/css/css_layout/introducción/index.html @@ -0,0 +1,701 @@ +--- +title: Introducción al diseño en CSS +slug: Learn/CSS/CSS_layout/Introducción +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Este artículo resumirá algunas de las características de diseño de páginas web con CSS que ya hemos mencionado en módulos anteriores, como los diferentes valores de {{cssxref ("display")}}, e introducirá algunos de los conceptos que vamos a tratar en este módulo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (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">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Proporcionar una visión general de las técnicas de diseño de páginas web con CSS. Cada técnica se puede aprender con mayor detalle en tutoriales posteriores.</td> + </tr> + </tbody> +</table> + +<p>Las técnicas de diseño de páginas web con CSS nos permiten controlar dónde se ubican los elementos que están contenidos en una página web en relación con su posición predeterminada en el flujo de diseño normal, así como el resto de elementos a su alrededor, su contenedor principal o la vista/ventana principal. Las técnicas de diseño de páginas web que trataremos con más detalle en este módulo son:</p> + +<ul> + <li>Flujo normal</li> + <li>La propiedad {{cssxref ("display")}}</li> + <li>Flexbox</li> + <li>Grid</li> + <li>Floats</li> + <li>Posicionamiento</li> + <li>Diseño de tablas</li> + <li>Diseño a varias columnas</li> +</ul> + +<p>Cada técnica tiene sus usos, ventajas y desventajas, y ninguna técnica está diseñada para usarse de forma aislada. Si entiendes para qué se ha diseñado cada método, te será fácil comprender cuál es la mejor herramienta de diseño para cada tarea.</p> + +<h2 id="Flujo_normal">Flujo normal</h2> + +<p>El flujo normal es el modo como el navegador presenta las páginas HTML de forma predeterminada cuando no haces nada para controlar el diseño de página. Echemos un vistazo rápido a un ejemplo HTML:</p> + +<pre class="brush: html notranslate"><p>Amo a mi gato.</p> + +<ul> + <li>Comprar comida para gatos</li> + <li>Ejercicio</li> + <li>Anímate amigo</li> +</ul> + +<p>¡Fin!</p></pre> + +<p>Por defecto, el navegador mostrará este código de la manera siguiente:</p> + +<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p> + +<p>Observa aquí cómo se muestra el HTML en el orden exacto en que aparece en el código fuente, con los elementos uno debajo del otro: el primer párrafo, seguido de la lista desordenada, y a continuación el segundo párrafo.</p> + +<p>Los elementos que aparecen uno debajo del otro se describen como <em>elementos de bloque</em>, en contraposición con los <em>elementos de línea</em>, que aparecen uno al lado del otro, como las palabras de un párrafo.</p> + +<div class="note"> +<p><strong>Nota</strong>: La dirección en la que se presentan los contenidos de un elemento de bloque se describe como dirección de los bloques. La dirección de los bloques va de arriba a abajo en un idioma como el español, cuyo modo de escritura es horizontal. Sería horizontal en cualquier idioma con un modo de escritura vertical, como el japonés. Correspondientemente, la dirección de línea es la dirección en la que los contenidos de línea (por ejemplo, una frase) se disponen.</p> +</div> + +<p>Cuando usas CSS para crear un diseño de página web, alejas los elementos del flujo normal, pero para muchos de los elementos de tu página, el flujo normal proporciona exactamente el diseño que necesitas. Por esta razón resulta tan importante comenzar con un documento HTML bien estructurado, porque te permite trabajar ya con la forma en que las cosas se presentan por defecto, en lugar de tener que luchar contra ello.</p> + +<p>Los métodos que permiten cambiar la disposición de los elementos en CSS son los siguientes:</p> + +<ul> + <li><strong>La propiedad {{cssxref ("display")}}</strong>: los valores estándar como <code>block</code>, <code>inline</code> o <code>inline-block</code> pueden cambiar el comportamiento de los elementos en el flujo normal (consulta <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">Tipos de cajas en CSS</a> para obtener más información). Luego hay métodos de diseño completos que se activan con un valor <code>display</code>, por ejemplo <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> y <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li> + <li><strong>Floats</strong>: la aplicación de un valor {{cssxref ("float")}} como <code>left</code> puede hacer que los elementos de nivel de bloque rodeen el elemento por uno de sus lados, como la forma en que las imágenes a veces tienen texto flotando a su alrededor en los diseños de algunas revistas.</li> + <li><strong>La propiedad {{cssxref ("position")}}</strong>: permite controlar con precisión la ubicación de las cajas dentro de otras cajas. El posicionamiento estático es el valor predeterminado en el flujo normal, pero puede hacer que los elementos se distribuyan de manera diferente si se utilizan otros valores, por ejemplo, pueden estar siempre fijados a la parte superior izquierda de la ventana del navegador.</li> + <li><strong>Diseño de tablas</strong>: se pueden usar las características que sirven para diseñar las partes de una tabla HTML en elementos que no son de tabla con <code>display: table</code> y las propiedades asociadas.</li> + <li><strong>Diseño en varias columnas</strong>: las propiedades de <a href="/es/docs/Web/CSS/Columnas_CSS">diseño en varias columnas</a> permiten distribuir el contenido de un bloque en columnas, como en el caso de un periódico.</li> +</ul> + +<h2 id="La_propiedad_display">La propiedad display</h2> + +<p>Los métodos principales para lograr el diseño de páginas web con CSS son todos los valores de la propiedad <code>display</code>. Esta propiedad permite cambiar la forma predeterminada en que algo se muestra. Todo en flujo normal tiene un valor de <code>display</code>, utilizado como la forma como se comportan por defecto los elementos en los que están configurados. Por ejemplo, el hecho de que los párrafos en español se muestran uno debajo del otro se debe a que presentan la configuración <code>display: block</code>. Si creas un enlace alrededor de un texto dentro de un párrafo, ese enlace permanece en línea con el resto del texto y no se divide al pasar a una línea nueva. Esto se debe a que el elemento {{htmlelement ("a")}} es por defecto <code>display: inline</code>.</p> + +<p>Puedes cambiar este comportamiento predeterminado de visualización (<code>display</code>). Por ejemplo, el elemento {{htmlelement ("li")}} es <code>display: block</code> de forma predeterminada, lo que significa que los elementos de la lista se muestran uno debajo del otro en nuestro documento en español. Si cambiamos el valor de visualización a <code>inline</code>, ahora se muestran uno al lado del otro, como lo harían las palabras de una frase. El hecho de que puedas cambiar el valor de <code>display</code> de cualquier elemento significa que puedes elegir elementos HTML por su significado semántico, sin preocuparte por cómo se verán. La forma en que se ven es algo que puedes cambiar.</p> + +<p>Además de poder cambiar la presentación predeterminada de un elemento <code>block</code> a un elemento <code>inline</code> y viceversa, hay algunos métodos de diseño de página más poderosos que se inician como un valor de <code>display</code>. Sin embargo, cuando los uses, en general vas a necesitar propiedades adicionales. Los dos valores más importantes para nuestros propósitos cuando hablamos del diseño de páginas web son <code>display: flex</code> y <code>display: grid</code>.</p> + +<h2 id="Flexbox">Flexbox</h2> + +<p>Flexbox es el nombre corto del <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout">módulo de diseño de cajas flexibles</a>, pensado para facilitarnos la distribución de las cosas en una dimensión, ya sea como una fila o como una columna. Para usar el método Flexbox, aplica <code>display: flex</code> al elemento padre de los elementos que deseas distribuir; todos sus elementos hijo directos se convierten en elementos flexibles. Vamos a verlo en un ejemplo sencillo.</p> + +<p>El marcado HTML siguiente nos proporciona un elemento contenedor con una clase <code>wrapper</code> dentro del cual hay tres elementos {{htmlelement ("div")}}. Por defecto, estos elementos se mostrarían como elementos de bloque, uno debajo del otro, en nuestro documento en español.</p> + +<p>Sin embargo, si añadimos <code>display: flex</code> al elemento padre, los tres elementos se organizan en columnas. Esto se debe a que se convierten en <em>elementos flexibles</em> y se ven afectados por algunos valores iniciales que el método Flexbox establece en el contenedor flexible. Se muestran en una fila porque el valor inicial de {{cssxref ("flex-direction")}} establecido en su elemento padre es <code>row</code>. Todos parecen expandirse hasta la altura del elemento de más altura, porque el valor inicial de la propiedad {{cssxref ("align-items")}} establecida en su elemento primario es <code>stretch</code>. Esto significa que los artículos se expanden hasta la altura del contenedor flexible, que en este caso está definida por el artículo de mayor altura. Todos los artículos se alinean al comienzo del contenedor y dejan el espacio que sobra al final de la fila.</p> + +<div id="Flex_1"> +<div class="hidden"> +<h6 id="Ejemplo_Flexbox_1">Ejemplo Flexbox 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Dos</div> + <div class="box3">Tres</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p> + +<p>Además de las propiedades anteriores, que pueden aplicarse a contenedores flexibles, también hay propiedades que pueden aplicarse a los elementos flexibles. Estas propiedades, entre otras cosas, pueden cambiar el comportamiento de estos elementos flexibles y permitirles expandirse y contraerse para adaptarse al espacio disponible.</p> + +<p>Como un ejemplo sencillo de esto podemos añadir la propiedad {{cssxref ("flex")}} a todos nuestros elementos secundarios, con un valor de <code>1</code>. Esto hará que todos los elementos crezcan y llenen el contenedor, en lugar de dejar espacio al final. Si hay más espacio, los artículos se ensancharán; si hay menos espacio, se volverán más estrechos. Además, si añades al código otro elemento, todos los elementos se volverán más pequeños para dejarle espacio; ajustarán el tamaño para ocupar la misma cantidad de espacio, cualquiera que sea.</p> + +<div id="Flex_2"> +<div class="hidden"> +<h6 id="Ejemplo_Flexbox_2">Ejemplo Flexbox 2</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + }</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Dos</div> + <div class="box3">Tres</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Esta ha sido una breve introducción de lo que permite el método Flexbox. Para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p> +</div> + +<h2 id="Diseño_de_cuadrícula">Diseño de cuadrícula</h2> + +<p>Mientras que el método Flexbox está pensado para distribuir elementos unidimensionalmente, el diseño de cuadrícula está diseñado para distribuir elementos en dos dimensiones: alinear elementos en filas y columnas.</p> + +<p>Una vez más, puedes activar el diseño de páginas web en cuadrícula con un valor de visualización específico: <code>display: grid</code>. El ejemplo siguiente utiliza un marcado similar al del ejemplo del método Flexbox, con un contenedor y algunos elementos secundarios. Además de usar <code>display: grid</code>, también definimos algunos tramos de filas y columnas en el elemento padre con las propiedades {{cssxref("grid-template-rows")}} y {{cssxref("grid-template-columns")}}. Hemos definido tres columnas, cada una de <code>1fr</code>, y dos filas de <code>100px</code>. No necesitamos poner ninguna regla sobre los elementos secundarios porque se colocan automáticamente en las celdas que nuestra cuadrícula ha creado.</p> + +<div id="Grid_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_cuadrícula_1">Ejemplo de cuadrícula 1</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + }</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Dos</div> + <div class="box3">Tres</div> + <div class="box4">Cuatro</div> + <div class="box5">Cinco</div> + <div class="box6">Seis</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p> + +<p>Cuando ya tienes una cuadrícula, se puede colocar tus elementos en ella explícitamente en lugar de confiar en el comportamiento de colocación automática que hemos visto arriba. En el segundo ejemplo, hemos definido la misma cuadrícula, pero esta vez con tres elementos secundarios. Hemos establecido la línea de inicio y final de cada elemento con las propiedades {{cssxref ("grid-column")}} y {{cssxref ("grid-row")}}. Esto hace que los elementos abarquen varios tramos.</p> + +<div id="Grid_2"> +<div class="hidden"> +<h6 id="Ejemplo_de_cuadrícula_2">Ejemplo de cuadrícula 2</h6> + +<pre class="brush: css notranslate">* {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + }</pre> +</div> + +<pre class="brush: css notranslate">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html notranslate"><div class="wrapper"> + <div class="box1">Uno</div> + <div class="box2">Dos</div> + <div class="box3">Tres</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Estos dos ejemplos son solo una pequeña parte del poder del diseño de cuadrículas; para obtener más información, consulta nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Grids">Diseñar cuadrículas</a>.</p> +</div> + +<p>El resto de esta guía expone otros métodos de diseño de páginas web que son menos importantes para las estructuras principales de diseño de tu página web, pero que pueden serte de ayuda para tareas específicas. Si entiendes la naturaleza de cada una de las tareas de diseño de una página web, vas a descubrir enseguida que a menudo vas a ser capaz de discernir qué tipo de diseño se adapta mejor a cada componente de tu diseño particular.</p> + +<h2 id="Floats">Floats</h2> + +<p>El método de flotación de un elemento cambia el comportamiento de ese elemento y de los elementos de nivel de bloque que lo siguen en el flujo normal. El elemento es desplazado hacia la izquierda o hacia la derecha y es eliminado del flujo normal, y el contenido circundante flota alrededor de este elemento.</p> + +<p>La propiedad {{cssxref ("float")}} tiene cuatro valores posibles:</p> + +<ul> + <li><code>left</code>: establece la flotación a la izquierda del elemento.</li> + <li><code>right</code>: establece la flotación a la derecha del elemento.</li> + <li><code>none</code>: especifica que no hay flotación en absoluto. Este es el valor predeterminado.</li> + <li><code>inherit</code>: especifica que el valor de la propiedad <code>float</code> debe heredarse del elemento padre.</li> +</ul> + +<p>En el ejemplo siguiente, establecemos una flotación a la izquierda para un elemento <code><div></code> y le damos un {{cssxref ("margin")}} a la derecha para mantener el texto alejado del elemento. Esto nos da el efecto del texto envuelto alrededor de ese cuadro, y es la mayor parte de lo que necesitas saber sobre la flotación, tal como se utiliza en el diseño web moderno.</p> + +<div id="Float_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_flotación">Ejemplo de flotación</h6> + +<pre class="brush: css notranslate">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html notranslate"><h1>Ejemplo sencillo de flotación</h1> + +<div class="box">Float</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css notranslate"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: El método de flotación se explica al completo en nuestro artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Floats">las propiedades float y clear</a>. El método de flotación es el que se usaba para crear diseños de columnas antes de la aparición de técnicas como los métodos Flexbox y diseño en rejillas. En la red aún puedes toparte con estos métodos. Vamos a exponer todo esto en el artículo sobre <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">métodos de diseño heredados</a>.</p> +</div> + +<h2 id="Técnicas_de_posicionamiento">Técnicas de posicionamiento</h2> + +<p>El posicionamiento permite mover un elemento desde donde se colocaría cuando está en flujo normal a otra ubicación. El posicionamiento no es un método para crear diseños de página principal, se trata más bien de administrar y ajustar la posición de elementos específicos en la página.</p> + +<p>Sin embargo, hay técnicas útiles para ciertos patrones de diseños de páginas web que se basan en la propiedad {{cssxref ("position")}}. Comprender el posicionamiento también ayuda a comprender el flujo normal y qué implica sacar un elemento del flujo normal.</p> + +<p>Hay cinco tipos de posicionamiento que debes conocer:</p> + +<ul> + <li>El <strong>posicionamiento estático</strong> es el valor por defecto que tiene establecido cada elemento, esto significa sencillamente «coloca el elemento en su posición normal en el flujo de diseño del documento, nada especial que ver aquí».</li> + <li>El <strong>posicionamiento relativo</strong> permite modificar la posición de un elemento en la página y moverlo con respecto a su posición en el flujo normal, lo que incluye superposiciones con otros elementos de la página.</li> + <li>El <strong>posicionamiento absoluto</strong> mueve un elemento completamente fuera del flujo de diseño normal de la página, como si estuviera asentado en una capa separada propia. A partir de aquí, puedes fijarlo en una posición relativa a los bordes del elemento <code><html></code> de la página (o su elemento padre más próximo). Esto es útil para crear efectos complejos de diseño de página, como cuadros con pestañas en que diferentes paneles de contenido se ubican uno encima del otro y se muestran y ocultan según se desee, o paneles de información que por defecto se asientan fuera de la pantalla, pero puedes hacer que se deslicen hacia la pantalla usando un control de tipo botón.</li> + <li>El <strong>posicionamiento fijo</strong> es muy similar al posicionamiento absoluto, excepto que corrige un elemento relativo a la ventana gráfica del navegador, no otro elemento. Esto es útil para crear efectos, como un menú de navegación persistente que siempre permanece en el mismo lugar en la pantalla al contrario que el contenido, que se desplaza.</li> + <li>El <strong>posicionamiento <em>sticky</em> (pegajoso)</strong> es un método de posicionamiento más reciente que hace que un elemento actúe como <code>position: static</code> hasta que alcanza un desplazamiento definido con respecto a la ventana gráfica, en cuyo punto actúa como un elemento con la propiedad <code>position: fixed</code>.</li> +</ul> + +<h3 id="Ejemplo_sencillo_de_posicionamiento">Ejemplo sencillo de posicionamiento</h3> + +<p>Para familiarizarte con estas técnicas de diseño de página, te mostraremos un par de ejemplos rápidos. Todos nuestros ejemplos contarán con el mismo HTML, que es el siguiente:</p> + +<pre class="brush: html notranslate"><h1>Posicionamiento</h1> + +<p>Soy un elemento básico de nivel de bloque.</p> +<p class="positioned">Soy un elemento básico de nivel de bloque.</p> +<p>Soy un elemento básico de nivel de bloque.</p></pre> + +<p>Aplicaremos a este HTML un estilo predeterminado definido por el CSS siguiente:</p> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>La salida que se obtiene es la siguiente:</p> + +<p>{{ EmbedLiveSample('Simple_positioning_example', '100%', 300) }}</p> + +<h3 id="El_posicionamiento_relativo">El posicionamiento relativo</h3> + +<p>El posicionamiento relativo permite compensar un elemento desde la posición por defecto que tendría en flujo normal. Esto significa que podrías hacer una tarea como mover un icono un poco hacia abajo para que se alinee con una etiqueta de texto. Para ello, podríamos añadir la regla de posicionamiento relativo siguiente:</p> + +<pre class="brush: css notranslate">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí asignamos el valor <code>relative</code> a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio: esto no hace nada por sí solo, así que también añadimos las propiedades {{cssxref ("top")}} y {{cssxref ( "left")}}, que sirven para mover el elemento afectado hacia abajo y a la derecha. Esto puede parecer lo contrario de lo que esperabas, pero debes pensar en ello como un elemento al que se empuja por sus lados superior e izquierdo, lo que resulta en un movimiento a la derecha y abajo.</p> + +<p>Añadir este código dará el resultado siguiente:</p> + +<div id="Relative_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_posicionamiento_relativo">Ejemplo de posicionamiento relativo</h6> + +<pre class="brush: html notranslate"><h1>El posicionamiento relativo</h1> + +<p>Soy un elemento básico de nivel de bloque.</p> +<p class="positioned">Este es mi elemento con posicionamiento relativo. </p> +<p>Soy un elemento básico de nivel de bloque.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p> + +<h3 id="El_posicionamiento_absoluto">El posicionamiento absoluto</h3> + +<p>El posicionamiento absoluto se utiliza para eliminar por completo un elemento del flujo normal y colocarlo mediante desplazamientos desde los bordes de un bloque contenedor.</p> + +<p>Volviendo a nuestro ejemplo original no posicionado, podríamos añadir la regla CSS siguiente para implementar el posicionamiento absoluto:</p> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>Aquí le damos a la propiedad {{cssxref ("position")}} de nuestro párrafo del medio un valor de <code>absolute</code>, y le asignamos las mismas propiedades {{cssxref ("top")}} y {{cssxref ("left")}}. Sin embargo, ahora añadir este código da el resultado siguiente:</p> + +<div id="Absolute_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_posicionamiento_absoluto">Ejemplo de posicionamiento absoluto</h6> + +<pre class="brush: html notranslate"><h1>Posicionamiento absoluto</h1> + +<p>Soy un elemento básico de nivel de bloque.</p> +<p class="positioned">Este es mi elemento con posicionamiento absoluto. </p> +<p>Soy un elemento básico de nivel de bloque.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p> + +<p>¡Este resultado es muy diferente! El elemento posicionado ahora se ha separado por completo del resto del diseño de la página y se superpone encima de este. Los otros dos párrafos ahora se asientan juntos, como si su hermano con posicionamiento absoluto no existiera. Las propiedades {{cssxref ("top")}} y {{cssxref ("left")}} tienen un efecto diferente en elementos con posicionamiento absoluto que en elementos con posicionamiento relativo. En este caso, los desplazamientos se han calculado desde la parte superior e izquierda de la página. Es posible cambiar el elemento padre para que se convierta en este tipo de contenedor, y lo veremos en el artículo sobre <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">posicionamiento</a>.</p> + +<h3 id="Posicionamiento_fijo">Posicionamiento fijo</h3> + +<p>El posicionamiento fijo elimina nuestro elemento del flujo de documentos de la misma manera que el posicionamiento absoluto. Sin embargo, en lugar de contar los desplazamientos en relación con el contenedor, se cuentan con respecto a la ventana gráfica. Como el elemento permanece fijo en relación con la ventana gráfica, podemos crear efectos como un menú que permanece fijo mientras la página se desplaza por debajo de él.</p> + +<p>En este ejemplo nuestro HTML tiene tres párrafos de texto para poder tener una página que se desplace, y un cuadro al que asignamos la propiedad <code>position: fixed</code>.</p> + +<pre class="brush: html notranslate"><h1>Posicionamiento fijo</h1> + +<div class="positioned">Fijo</div> + +<p>Párrafo 1.</p> +<p>Párrafo 2.</p> +<p>Párrafo 3.</p> +</pre> + +<div id="Fixed_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_posicionamiento_fijo">Ejemplo de posicionamiento fijo</h6> + +<pre class="brush: html notranslate"><h1>Posicionamiento fijo</h1> + +<div class="positioned">Fijo</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p></pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p> + +<h3 id="Posicionamiento_pegajoso">Posicionamiento pegajoso</h3> + +<p>El posicionamiento pegajoso es el último método de posicionamiento que tenemos a nuestra disposición. Mezcla el posicionamiento estático predeterminado con el posicionamiento fijo. Cuando un elemento tiene la propiedad <code>position: sticky</code>, se desplaza en flujo normal hasta que se alcanzan los desplazamientos con respecto a la ventana gráfica que hemos definido. En ese punto se queda «atascado» como si tuviera configurado un valor <code>position: fixed</code>.</p> + +<div id="Sticky_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_posicionamiento_pegajoso">Ejemplo de posicionamiento pegajoso</h6> + +<pre class="brush: html notranslate"><h1>Posicionamiento pegajoso</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">Pegajoso</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css notranslate">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css notranslate">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: para obtener más información sobre el posicionamiento, consulta nuestro artículo <a href="/es/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a>.</p> +</div> + +<h2 id="Diseño_de_tablas">Diseño de tablas</h2> + +<p>Las tablas HTML sirven para mostrar datos tabulados, pero hace muchos años, antes incluso de que el CSS básico fuera compatible de forma fiable en todos los navegadores, los desarrolladores web también usaban tablas para hacer el diseño completo de una página web, colocando en las diversas filas y columnas de una tabla los títulos de encabezado de la página, los pies de página, las diferentes columnas, etc. Esto funcionó en ese momento, pero presenta muchos problemas: los diseños de tabla no son flexibles, requieren mucho código de marcado, son difíciles de depurar y no son semánticamente correctos (por ejemplo, los usuarios de lectores de pantalla tienen problemas para navegar por estos diseños de página web con tablas).</p> + +<p>El aspecto que presenta una tabla en una página web cuando usas el código de marcado de una tabla se debe a un conjunto de propiedades CSS que definen el diseño de la tabla. Estas propiedades se pueden usar para diseñar elementos que no son tablas, un uso que a veces se describe como «usar tablas CSS».</p> + +<p>El ejemplo siguiente muestra uno de esos usos; el uso de tablas CSS para el diseño debe considerarse en este punto un método heredado, para aquellas situaciones en las que tienes navegadores muy antiguos que no son compatibles con los métodos Flexbox o Grid.</p> + +<p>Veamos un ejemplo. Primero, un código de marcado sencillo que crea un formulario HTML. Cada elemento de entrada tiene una etiqueta, y también hemos incluido un título dentro de un párrafo. Cada par etiqueta/entrada está delimitado por un elemento {{htmlelement ("div")}}, con fines de compaginación.</p> + +<pre class="brush: html notranslate"><form> + <p>En primer lugar, díganos su nombre y edad.</p> + <div> + <label for="fname">Nombre:</label> + <input type="text" id="fname"> + </div> + <div> + <label for="lname">Apellidos:</label> + <input type="text" id="lname"> + </div> + <div> + <label for="age">Edad:</label> + <input type="text" id="age"> + </div> +</form></pre> + +<p>Ahora, el CSS para nuestro ejemplo. La mayor parte del CSS es bastante común, excepto por los usos de la propiedad {{cssxref ("display")}}. A los elementos {{htmlelement ("form")}}, {{htmlelement ("div")}}, {{htmlelement ("label")}} y {{htmlelement ("input")}} se les dice que se muestren como una tabla, filas de tabla y celdas de tabla, respectivamente; actuarán básicamente como marcas de tabla HTML, y lograrán por defecto la alineación perfecta de las etiquetas y las entradas. Todo lo que hay que hacer es añadir un poco de tamaños, márgenes, etc., para que todo se vea un poco mejor, ¡y listo!</p> + +<p>Observa que se la ha proporcionado al párrafo de encabezado <code>display: table-caption;,</code> lo que hace que actúe como una celda de encabezado ({{htmlelement ("caption")}}) de la tabla; y con <code>caption-side: bottom;</code> se le dice a la celda de encabezado que se asiente en la parte inferior de la tabla con fines de aplicación de estilo, aunque en el código fuente el marcado está antes que los elementos <code><input></code>. Esto permite un poco de flexibilidad.</p> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>Esto nos da el resultado siguiente:</p> + +<p>{{ EmbedLiveSample('Table_layout', '100%', '170') }}</p> + +<p>También puedes ver este ejemplo en vivo en <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (ver el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">código fuente</a>).</p> + +<h2 id="Diseño_en_columnas">Diseño en columnas</h2> + +<p>El módulo de diseño en columnas nos proporciona un modo de distribuir el contenido en columnas, de forma similar al modo como el texto fluye en un periódico. Aunque en un contexto web leer en columnas de arriba a abajo no resulta tan útil porque podría obligar a los usuarios a tener que hacer desplazamientos de arriba a abajo, la técnica de organizar el contenido en columnas también puede tener su utilidad.</p> + +<p>Para convertir un bloque en un contenedor, utilizamos la propiedad {{cssxref ("column-count")}}, que le dice al navegador cuántas columnas nos gustaría tener, o {{cssxref ("column-width")}}, que le dice al navegador que llene el contenedor con tantas columnas de al menos ese ancho.</p> + +<p>En el ejemplo siguiente comenzamos con un bloque de HTML dentro de un elemento <code><div></code> que contiene una clase <code>container</code>.</p> + +<pre class="brush: html notranslate"><div class="container"> + <H1>Diseño en columnas</ h1> + + <p>Párrafo 1.</p> + <p>Párrafo 2.</p> + +</div> +</pre> + +<p>Utilizamos un <code>column-width</code> de 200 píxeles en ese contenedor, que crea en el navegador tantas columnas de 200 píxeles como quepan en el contenedor y luego comparte el espacio restante entre las columnas creadas.</p> + +<div id="Multicol_1"> +<div class="hidden"> +<h6 id="Ejemplo_de_diseño_en_columnas">Ejemplo de diseño en columnas</h6> + +<pre class="brush: html notranslate"><div class="container"> + <h1> Diseño en columnas </h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div></pre> + +<pre class="brush: css notranslate">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css notranslate"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Este artículo ha proporcionado un breve resumen de todas las tecnologías de diseño que debes conocer. ¡Sigue leyendo para obtener más información sobre cada tecnología individual!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad en navegadores antiguos </a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li> +</ul> diff --git a/files/es/learn/css/css_layout/positioning/index.html b/files/es/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..3deb33b91f --- /dev/null +++ b/files/es/learn/css/css_layout/positioning/index.html @@ -0,0 +1,469 @@ +--- +title: Positioning +slug: Learn/CSS/CSS_layout/Positioning +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">El posicionamiento permite sacar elementos del flujo normal del diseño del documento, y hacer que se comporten de manera distinta, por ejemplo sentarse encima de otro o permanecer en el mismo lugar dentro de la ventana navegador. Este artículo explica los diferentes valores {{cssxref("position")}}, y como usarlos.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisitos:</th> + <td>HTML básico (Aprende <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML"> Introducción a HTML</a>), y una idea de cómo trabaja CSS (Aprende <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Objetivos:</th> + <td>Entender como trabajar con posicionamiento CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Flujo_del_Documento">Flujo del Documento</h2> + +<p>El posicionamiento es un tema bastante complejo, así que antes de profundizar en el código volvamos a examinar y ampliar un poco la teoría del diseño para darnos una idea de cómo funciona esto.</p> + +<p>First of all, individual element boxes are laid out by taking the elements' content, then adding any padding, border and margin around them — it's that <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">box model</a> thing again, which we looked at earlier. By default, a block level element's content is 100% of the width of its parent element, and as tall as its content. Inline elements are all tall as their content, and as wide as their content. You can't set width or height on inline elements — they just sit inside the content of block level elements. If you want to control the size of an inline element in this manner, you need to set it to behave like a block level element with <code>display: block;</code>.</p> + +<p>That explains individual elements, but what about how elements interact with one another? The <strong>normal layout flow</strong> (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block level elements are laid out vertically in the viewport — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them.</p> + +<p>Inline elements behave differently — they don't appear on new lines; instead, they sit on the same line as one another and any adjacent (or wrapped) text content, as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing text or elements will move down to a new line.</p> + +<p>If two adjacent elements both have margin set on them and the two margins touch, the larger of the two remains, and the smaller one disappears — this is called <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>, and we have met this before too.</p> + +<p>Let's look at a simple example that explains all this:</p> + +<pre class="brush: html"><h1>Basic document flow</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p>By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +}</pre> + +<p>{{ EmbedLiveSample('Document_flow', '100%', 500) }}</p> + +<p>We will be revisiting this example a number of times as we go through this article, as we show the effects of the different positioning options available to us.</p> + +<p>We'd like you to follow along with the exercises on your local computer, if possible — grab a copy of <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> from our Github repo (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">source code here</a>) and use that as a starting point.</p> + +<h2 id="Introducing_positioning">Introducing positioning</h2> + +<p>The whole idea of positioning is to allow us to override the basic document flow behaviour described above, to produce interesting effects. What if you want to slightly alter the position of some boxes inside a layout from their default layout flow position, to give a slightly quirky, distressed feel? Positioning is your tool. Or if you want to create a UI element that floats over the top of other parts of the page, and/or always sits in the same place inside the browser window no matter how much the page is scrolled? Positioning makes such layout work possible.</p> + +<p>There are a number of different types of positioning that you can put into effect on HTML elements. To make a specific type of positioning active on an element, we use the {{cssxref("position")}} property.</p> + +<h3 id="Static_positioning">Static positioning</h3> + +<p>Static positioning is the default that every element gets — it just means "put the element into its normal position in the document layout flow — nothing special to see here."</p> + +<p>To demonstrate this, and get your example set up for future sections, first add a <code>class</code> of <code>positioned</code> to the second {{htmlelement("p")}} in the HTML:</p> + +<pre class="brush: html"><p class="positioned"> ... </p></pre> + +<p>Now add the following rule to the bottom of your CSS:</p> + +<pre class="brush: css">.positioned { + position: static; + background: yellow; +}</pre> + +<p>If you now save and refresh, you'll see no difference at all, except for the updated background color of the 2nd paragraph. This is fine — as we said before, static positioning is the default behaviour!</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">see source code</a>).</p> +</div> + +<h3 id="Relative_positioning">Relative positioning</h3> + +<p>Relative positioning is the first position type we'll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page. Go ahead and update the position declaration in your code:</p> + +<pre class="brush: css">position: relative;</pre> + +<p>If you save and refresh at this stage, you won't see a change in the result at all — so how do you modify the element's position? You need to use the {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} properties, which we'll explain in the next section.</p> + +<h3 id="Introducing_top_bottom_left_and_right">Introducing top, bottom, left, and right</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} are used alongside {{cssxref("position")}} to specify exactly where to move the positioned element to. To try this out, add the following declarations to the <code>.positioned</code> rule in your CSS:</p> + +<pre>top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>Note</strong>: The values of these properties can take any <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">units</a> you'd logically expect — pixels, mm, rems, %, etc.</p> +</div> + +<p>If you now save and refresh, you'll get a result something like this:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Relative positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_top_bottom_left_and_right', '100%', 500) }}</p> + +<p>Cool, huh? Ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? Illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the side of the positioned box, moving it in the opposite direction. So for example, if you specify <code>top: 30px;</code>, a force pushes the top of the box, causing it to move downwards by 30px.</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">see source code</a>).</p> +</div> + +<h3 id="Absolute_positioning">Absolute positioning</h3> + +<p>Absolute positioning brings very different results. Let's try changing the position declaration in your code as follows:</p> + +<pre>position: absolute;</pre> + +<p>If you now save and refresh, you should see something like so:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Absolute positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Absolute_positioning', '100%', 420) }}</p> + +<p>First of all, note that the gap where the positioned element should be in the document flow is no longer there — the first and third elements have closed together like it no longer exists! Well, in a way, this is true. An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else. This is very useful — it means that we can create isolated UI features that don't interfere with the position of other elements on the page — for example popup information boxes and control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.</p> + +<p>Second, notice that the position of the element has changed — this is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Instead of specifying the direction the element should move in, they specify the distance the element should be from each containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element", and 30px from the left.</p> + +<div class="note"> +<p><strong>Note</strong>: You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting <code>top: 0; bottom: 0; left: 0; right: 0;</code> and <code>margin: 0;</code> on your positioned elements and see what happens! Put it back again afterwards...</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: Yes, margins still affect positioned elements. Margin collapsing doesn't, however.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">see source code</a>).</p> +</div> + +<h3 id="Positioning_contexts">Positioning contexts</h3> + +<p>Which element is the "containing element" of an absolutely positioned element? By default, it is the {{htmlelement("html")}} element — the positioned element is nested inside the {{htmlelement("body")}} in the HTML source, but in the final layout, it is 30px away from the top and left of the edge of the page, which is the {{htmlelement("html")}} element. This is more accurately called the element's <strong>positioning context</strong>.</p> + +<p>We can change the <strong>positioning context</strong> — which element the absolutely positioned element is positioned relative to. This is done by setting positioning on one of the element's other ancestors — one of the elements it is nested inside (you can't position it relative to an element it is not nested inside). To demonstrate this, add the following declaration to your body rule:</p> + +<pre>position: relative;</pre> + +<p>This should give the following result:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Positioning context</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Positioning_contexts', '100%', 420) }}</p> + +<p>The positioned element now sits relative to the {{htmlelement("body")}} element.</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">see source code</a>).</p> +</div> + +<h3 id="Introducing_z-index">Introducing z-index</h3> + +<p>All this absolute positioning is good fun, but there is another thing we haven't considered yet — when elements start to overlap, what determines which elements appear on top of which other elements? In the example we've seen so far, we only have one positioned element in the positioning context, and it appears on the top, since positioned elements win over non-positioned elements. What about when we have more than one?</p> + +<p>Try adding the following to your CSS, to make the first paragraph absolutely positioned too:</p> + +<pre>p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>At this point you'll see the first paragraph colored green, moved out of the document flow, and positioned a bit above from where it originally was. It is also stacked below the original <code>.positioned</code> paragraph, where the two overlap. This is because the <code>.positioned</code> paragraph is the second paragraph in the source order, and positioned elements later in the source order win over positioned elements earlier in the source order.</p> + +<p>Can you change the stacking order? Yes, you can, by using the {{cssxref("z-index")}} property. "z-index" is a reference to the z-axis. You may recall from previous points in the source where we discussed web pages using horizontal (x-axis) and vertical (y-axis) coordinates to work out positioning for things like background images and drop shadow offsets. (0,0) is at the top left of the page (or element), and the x- and y-axes run across to the right and down the page (for left to right languages, anyway.)</p> + +<p>Web pages also have a z-axis — an imaginary line that runs from the surface of your screen, towards your face (or whatever else you like to have in front of the screen). {{cssxref("z-index")}} values affect where positioned elements sit on that axis — positive values move them higher up the stack, and negative values move them lower down the stack. By default, positioned elements all have a <code>z-index</code> of auto, which is effectively 0.</p> + +<p>To change the stacking order, try adding the following declaration to your <code>p:nth-of-type(1)</code> rule:</p> + +<pre>z-index: 1;</pre> + +<p>You should now see the finished example:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>z-index</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('Introducing_z-index', '100%', 400) }}</p> + +<p>Note that <code>z-index</code> only accepts unitless index values; you can't specify that you want one element to be 23 pixels up the Z-axis — it doesn't work like that. Higher values will go above lower values, and it is up to you what values you use. Using 2 and 3 would give the same effect as 300 and 40000.</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">see source code</a>).</p> +</div> + +<h3 id="Fixed_positioning">Fixed positioning</h3> + +<p>There is one more type of positioning to cover — fixed. This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the {{htmlelement("html")}} element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.</p> + +<p>Let's put together a simple example to show what we mean. First of all, delete the existing <code>p:nth-of-type(1)</code> and <code>.positioned</code> rules from your CSS.</p> + +<p>Now, update the <code>body</code> rule to remove the <code>position: relative;</code> declaration and add a fixed height, like so:</p> + +<pre>body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>Now we're going to give the {{htmlelement("h1")}} element <code>position: fixed;</code>, and get it to sit at the top center of the viewport. Add the following rule to your CSS:</p> + +<pre>h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p>The <code>top: 0;</code> is required to make it stick to the top of the screen; we then give the heading the same width as the content column and use the faithful old <code>margin: 0 auto;</code> trick to center it. We then give it a white background and some padding, so the content won't be visible underneath it.</p> + +<p>If you save and refresh now, you'll see a fun little effect whereby the heading stays fixed, and the content appears to scroll up and disappear underneath it. But we could improve this more — at the moment some of the content starts off underneath the heading. This is because the positioned heading no longer appears in the document flow, so the rest of the content moves up to the top. We need to move it all down a bit; we can do this by setting some top margin on the first paragraph. Add this now:</p> + +<pre>p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>You should now see the finished example:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Fixed positioning</h1> + +<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p> + +<p class="positioned">I'm not positioned any more...</p> + +<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p> + +<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p> </p> +</div> + +<p>{{ EmbedLiveSample('Fixed_positioning', '100%', 400) }}</p> + +<div class="note"> +<p><strong>Note</strong>: You can see the example at this point live at <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">see source code</a>).</p> +</div> + +<h3 id="Experimental_position_sticky">Experimental: position sticky</h3> + +<p>There is a new positioning value available called <code>position: sticky</code>, support for which is not very widespread yet. This is basically a hybrid between relative and fixed position, which allows a positioned element to act like it is relatively positioned until it is scrolled to a certain threshold point (e.g. 10px from the top of the viewport), after which it becomes fixed. See our <a href="/en-US/docs/Web/CSS/position#Sticky_positioning">position: sticky reference entry</a> for more details and an example.</p> + +<h2 id="Summary">Summary</h2> + +<p>I'm sure you had fun playing with basic positioning — it is one of the essential tools behind creating complex CSS layouts and UI features. With that in mind, in the next article we'll have even more fun with positioning — there we'll go a step further and start to build up some real world useful things with it.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li> +</ul> + +<p> </p> diff --git a/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html new file mode 100644 index 0000000000..18065a1da5 --- /dev/null +++ b/files/es/learn/css/css_layout/soporte_a_navegadores_antiguos/index.html @@ -0,0 +1,237 @@ +--- +title: Soporte a navegadores antiguos +slug: Learn/CSS/CSS_layout/Soporte_a_navegadores_antiguos +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">En este módulo recomendamos utilizar Flexbox y Grid como las herramientas principales para tus diseños. Sin embargo, habrá visitantes a tu sitio web que usen navegadores antiguos o navegadores que no admiten los métodos que has utilizado. Este siempre será el caso en la red: a medida que se desarrollan funciones nuevas, los diferentes navegadores priorizan cosas diferentes. Este artículo explica cómo usar técnicas web modernas sin perjudicar a los usuarios con tecnologías más antiguas.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conceptos básicos de HTML (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">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Comprender cómo proporcionar compatibilidad para tus diseños en navegadores antiguos que podrían no admitir las funciones que deseas utilizar.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Cuál_es_la_vista_del_navegador_para_tu_sitio">¿Cuál es la vista del navegador para tu sitio?</h2> + +<p>Cada sitio web es diferente en términos de público objetivo. Antes de decidir el enfoque a seguir, averigua la cantidad de visitantes que visitan tu sitio que utilizan navegadores antiguos. Esto es sencillo si se trata de un sitio web que simplemente modificas o reemplazas, porque probablemente haya análisis disponibles que te indiquen la tecnología que la gente utiliza. Si el sitio no tiene funciones de análisis o se trata de un sitio nuevo, hay sitios como <a href="http://gs.statcounter.com/">Statcounter</a> que pueden proporcionar estadísticas filtradas por ubicación.</p> + +<p>También debes considerar el tipo de dispositivos y la forma en que las personas usan tu sitio; por ejemplo, puedes esperar un número de dispositivos móviles superior al promedio. La accesibilidad y las personas que utilizan tecnología de asistencia siempre deben tenerse en cuenta, pero para algunos sitios pueden ser aspectos aún más críticos. Según experiencia propia, los desarrolladores a menudo se preocupan demasiado por la experiencia de usuario de un 1% de usuarios que usan una versión antigua de Internet Explorer, y no consideran en absoluto el número mucho mayor de usuarios que tiene necesidades de accesibilidad especiales.</p> + +<h2 id="¿Qué_compatibilidad_presentan_las_funciones_que_vas_a_usar">¿Qué compatibilidad presentan las funciones que vas a usar?</h2> + +<p>Una vez conozcas qué tipo de navegadores utiliza la gente que accede a tu sitio, puedes evaluar cualquier tecnología que desees utilizar según su compatibilidad y con qué facilidad es posible proporcionar una alternativa a los visitantes que no disponen de esa tecnología. Tratamos de facilitarte esta experiencia proporcionando información de compatibilidad de los navegadores en cada una de las páginas que detallan una propiedad CSS. Por ejemplo, echa un vistazo a la página de {{cssxref ("grid-template-columns")}}. En la parte inferior de esta página hay una tabla que enumera los navegadores principales, junto con la versión en la que comenzaron a admitir esta propiedad.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>Otra forma popular de averiguar la compatibilidad de una característica es el sitio web <a href="https://caniuse.com/">Can I Use</a>. Este sitio enumera la mayoría de las características de la Plataforma Web con información sobre el estado de compatibilidad de tu navegador. Puedes ver las estadísticas de uso por ubicación, cosa que resulta útil si trabajas en un sitio cuyos usuarios son de un territorio particular. Incluso puedes vincular tu cuenta de Google Analytics para obtener un análisis basado en tus datos de usuario.</p> + +<p>Conocer las tecnologías de tus usuarios y las compatibilidades de las funciones que tal vez quieras usar te proporcionan una buena base para tomar todas tus decisiones y saber cuál es la mejor manera de dar compatibilidad a todos tus usuarios.</p> + +<h2 id="Compatibilidad_no_significa_«verse_igual»">Compatibilidad no significa «verse igual»</h2> + +<p>Es posible que un sitio web no tenga el mismo aspecto en todos los navegadores, porque algunos de tus usuarios lo verán en un teléfono y otros en el ordenador. Del mismo modo, algunos de tus usuarios tendrán una versión antigua del navegador y otros el navegador más reciente. Es posible que algunos de tus usuarios estén escuchando el contenido leído por un lector de pantalla, o hayan ampliado la página para poderla leer. Dar compatibilidad a todos significa servir una versión de tus contenidos diseñada estratégicamente para que se vea genial con los navegadores modernos, pero aún sea utilizable en un nivel básico para los usuarios con navegadores más antiguos.</p> + +<p>Un nivel básico de compatibilidad proviene de estructurar bien tus contenidos para que el flujo normal de tu página tenga sentido. Un usuario con un teléfono con funciones muy limitadas puede que no obtenga buena parte de tu CSS, pero el contenido fluirá de una manera que la lectura resulte fácil. Por lo tanto, un documento HTML bien estructurado siempre debe ser tu punto de partida. <em>¿Tu contenido tiene sentido si eliminas tu hoja de estilo?</em></p> + +<p>Una opción es dejar esta vista simple del sitio como alternativa para las personas que utilizan navegadores muy antiguos o limitados. Si la cantidad de personas que visitan el sitio con estos navegadores es pequeña, quizá no tenga sentido comercial dedicar tiempo a tratar de proporcionarles una experiencia similar a la de las personas que utilizan navegadores modernos. Sería mejor dedicar el tiempo a cosas que proporcionen accesibilidad al sitio, y servir así a muchos más usuarios. Hay un punto medio entre una página HTML simple y todos esos recursos, y CSS realmente ha logrado que proporcionar estas soluciones alternativas resulte bastante sencillo.</p> + +<h2 id="Crear_soluciones_alternativas_en_CSS">Crear soluciones alternativas en CSS</h2> + +<p>Las especificaciones CSS contienen información que explica qué hace el navegador cuando se aplican dos métodos de diseño al mismo elemento. Esto significa que hay una definición de lo que sucede si un elemento flotante, por ejemplo, también es un elemento Grid que usa diseño de cuadrícula CSS. Combina esta información con el conocimiento de que los navegadores ignoran el CSS que no entienden, y tienes una manera de crear diseños simples utilizando las <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">técnicas heredadas</a> que ya hemos expuesto, que luego se sobrescriben con tu diseño de cuadrícula en los navegadores modernos que lo entienden.</p> + +<p>En el ejemplo siguiente hemos especificado tres elementos de flotación <code><div></code> para que se muestren en una fila. Cualquier navegador que no sea compatible con el método de compaginación <a href="/es/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> verá la hilera de cajas como un diseño con el método de flotación. Un elemento de flotación que se convierte en un elemento de cuadrícula pierde el comportamiento de flotación, lo que significa que al convertir el contenedor en un contenedor de cuadrícula, los elementos de flotación se convierten en elementos de cuadrícula. Si el navegador admite el diseño de cuadrícula, muestra la vista de cuadrícula; si no, ignora las propiedades relacionadas con el diseño de cuadrícula y utiliza el diseño de flotación.</p> + +<div id="Example1"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Artículo uno</div> + <div class="item">Artículo dos</div> + <div class="item">Artículo tres</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: La propiedad {{cssxref ("clear")}} tampoco tiene efecto una vez que el elemento al que se le aplica se convierte en un elemento de cuadrícula, por lo que podrías tener una compaginación con un pie <code>clear</code>, que luego pase a ser un elemento de compaginación en cuadrícula.</p> +</div> + +<h3 id="Métodos_de_soluciones_alternativas">Métodos de soluciones alternativas</h3> + +<p>Numerosos métodos de compaginación se pueden usar de manera similar a este ejemplo con comportamiento de flotación. Puedes elegir el que tenga más sentido para el patrón de compaginación que necesitas crear.</p> + +<dl> + <dt><strong><code>float</code></strong> y <strong><code>clear</code></strong></dt> + <dd>Como se muestra arriba, las propiedades <em>float</em> o <em>clear</em> dejan de afectar a la compaginación si los elementos afectados por estas propiedades pasan a ser de tipo flexible o de cuadrícula.</dd> + <dt>display: inline-block;</dt> + <dd>Este método se puede utilizar para crear compaginaciones en columnas; si un elemento tiene establecido un comportamiento <code>display: inline-block</code> pero se convierte a elemento con compaginación de tipo flexible o de cuadrícula, el comportamiento <code>inline-block</code> se ignora.</dd> + <dt>display: table;</dt> + <dd>El método de creación de tablas CSS que se describe en la <a href="/es/docs/Learn/CSS/CSS_layout/Introducción">introducción</a> de estos artículos puede utilizarse como opción alternativa. Los elementos que tienen diseños de tabla CSS pierden este comportamiento si se convierten en elementos con comportamiento flexible o de cuadrícula. Es importante destacar que no se crearán las cajas sin nombre que fueron creadas para arreglar la estructura de tabla.</dd> + <dt>Compaginación en columnas</dt> + <dd>Para ciertos tipos de compaginación puedes usar <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">multi-col</a> como opción alternativa; si tu contenedor tiene alguna propiedad <code>column-*</code> definida y se convierte en un contenedor con comportamiento de cuadrícula, se anula el comportamiento en columnas.</dd> + <dt>Flexbox como opción alternativa a la cuadrícula</dt> + <dd><a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> tiene una compatibilidad mayor con los navegadores que Grid porque es compatible con Internet Explorer 10 y 11, aunque te recomendamos que consultes la información que encontrarás más adelante en este artículo sobre la compatibilidad bastante irregular y confusa de Flexbox en navegadores más antiguos. Si conviertes un contenedor flexible en un contenedor de cuadrícula, se ignorará cualquier propiedad <code>flex</code> aplicada a los elementos secundarios.</dd> +</dl> + +<p>Observa que si usas el CSS de esta manera puedes proporcionar una experiencia de usuario decente para ajustar muchas compaginaciones en navegadores antiguos. Añadimos una compaginación más simple basada en técnicas antiguas y con buena compatibilidad, y luego usamos el CSS más nuevo para crear la compaginación que va a ver más del 90% de tu público. Sin embargo, hay casos en los que el código alternativo va a tener que incluir algo que también van a interpretar los navegadores nuevos. Un buen ejemplo de esto es si queremos añadir anchos en porcentaje a nuestros elementos de flotación para que el aspecto de las columnas reproduzca mejor la visualización en cuadrícula, expandiendo para llenar el contenedor.</p> + +<p>En la compaginación de flotación, el porcentaje se calcula con respecto al contenedor: 33,333% es un tercio del ancho del contenedor. Sin embargo, en el método Grid ese 33,333% se calcula con respecto al área de la cuadrícula en la que el elemento está ubicado, por lo que en realidad se convierte en un tercio del tamaño que queremos una vez que se introduce la compaginación en cuadrícula.</p> + +<div id="Example2"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Artículo uno</div> + <div class="item">Artículo dos</div> + <div class="item">Artículo tres</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example2', '100%', '200') }}</p> +</div> + +<p>Para tratar este problema, necesitamos tener un modo de detectar si Grid es compatible y, por lo tanto, si anulará el ancho. El CSS tiene una solución.</p> + +<h2 id="Consultar_las_propiedades">Consultar las propiedades</h2> + +<p>Consultar las propiedades te permite comprobar si un navegador admite alguna característica CSS en particular. Esto significa que puedes escribir algunos CSS para navegadores que no admitan una propiedad determinada y luego verificar si el navegador es compatible, y añadir tu elegante diseño de ser así.</p> + +<p>Si añadimos al ejemplo anterior una consulta de las propiedades, podemos usarla para volver a establecer a <code>auto</code> los anchos de nuestros elementos, si sabemos que hay compatibilidad para la compaginación en cuadrícula.</p> + +<div id="Example3"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">Elemento uno</div> + <div class="item">Elemento dos</div> + <div class="item">Elemento tres</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('Example3', '100%', '200') }}</p> +</div> + +<p>La compatibilidad para la consulta de propiedades es muy buena en todos los navegadores modernos, pero debes tener en cuenta que son los navegadores que no admiten CSS Grid los que tampoco admiten la consulta de propiedades. Esto significa que para esos navegadores funcionará un enfoque como el que acabamos de detallar. Lo que hacemos es escribir primero nuestro CSS anterior sin hacer ninguna consulta de propiedades. Los navegadores que no admiten Grid y que no admiten la consulta de propiedades utilizan esa información de diseño que pueden entender e ignoran por completo todo lo demás. Los navegadores que admiten la consulta de propiedades también admiten CSS Grid y, por lo tanto, ejecutan el código de cuadrícula y el código de la consulta de propiedades.</p> + +<p>La especificación para la consulta de propiedades también incluye la posibilidad de probar si un navegador no admite una propiedad; esto solo es útil si el navegador admite consultas de propiedades. En el futuro bastará con el enfoque de verificar la falta de compatibilidad, porque los navegadores que no tienen compatibilidad para la consulta de propiedades desaparecen. Por ahora, sin embargo, utiliza el enfoque de usar el CSS anterior y luego sobrescribirlo para obtener la mejor compatibilidad.</p> + +<h2 id="Versiones_anteriores_de_Flexbox">Versiones anteriores de Flexbox</h2> + +<p>En versiones anteriores de navegadores, puedes encontrar versiones anteriores de la especificación Flexbox. En el momento de escribir esto se trata principalmente de un problema con Internet Explorer 10, que usa el prefijo <code>-ms-</code> para Flexbox. Esto también significa que algunos artículos y tutoriales están obsoletos; <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">esta guía útil</a> te ayuda a verificarlo y también puede ayudarte si necesitas compatibilidad Flexbox en navegadores muy antiguos.</p> + +<h2 id="La_versión_prefijada_de_Grid_de_Internet_Explorer_10_y_11">La versión prefijada de Grid de Internet Explorer 10 y 11</h2> + +<p>La especificación CSS Grid se prototipó inicialmente en Internet Explorer 10; esto significa que si bien IE10 e IE11 no tienen compatibilidad de cuadrícula <em>moderna</em>, sí tienen una versión de compaginación en cuadrícula, que es muy útil, aunque diferente de la especificación moderna que documentamos en este sitio. Las implementaciones de IE10 y 11 tienen el prefijo <code>-ms-</code>, lo que significa que puedes usarlo para estos navegadores y los navegadores que no sean de Microsoft lo ignorarán. Sin embargo, Edge todavía comprende la sintaxis anterior, así que ten cuidado de que todo se sobrescriba de forma segura en tu cuadrícula de CSS moderna.</p> + +<p>La guía de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Mejora progresiva en la compaginación en cuadrícula</a> puede ayudarte a comprender la versión de la cuadrícula de Internet Explorer, y hemos incluido algunos enlaces útiles adicionales al final de este artículo. Sin embargo, a menos que tengas una gran cantidad de visitantes con versiones anteriores de Internet Explorer, puede que te resulte mejor centrarte en crear una reserva que funcione para todos los navegadores no compatibles.</p> + +<h2 id="Pruebas_con_navegadores_antiguos">Pruebas con navegadores antiguos</h2> + +<p>Dado que la mayoría de los navegadores ya son compatibles con Flexbox y Grid, puede resultar en efecto difícil hacer pruebas con navegadores más antiguos. Una forma es utilizar una herramienta de prueba en línea como Sauce Labs, como se detalla en el módulo de <a href="/es/docs/Learn/Herramientas_y_pruebas/Cross_browser_testing">comprobación de compatibilidad entre navegadores</a>.</p> + +<p>También puedes descargar e instalar máquinas virtuales y ejecutar versiones anteriores de navegadores en un entorno de tu propio ordenador. Tener acceso a versiones anteriores de Internet Explorer es particularmente útil, y para ese propósito, Microsoft ha puesto a disposición de los usuarios una <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">variedad de máquinas virtuales de descarga gratuita</a>. Están disponibles para los sistemas operativos Mac, Windows y Linux, por lo que resultan una manera excelente de hacer pruebas con los navegadores Windows antiguos y modernos, incluso si no utilizas una computadora con sistema Windows.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahora tienes el conocimiento para usar con confianza técnicas como Grid y Flexbox, crear soluciones alternativas para navegadores más antiguos y utilizar cualquier técnica nueva que pueda surgir en el futuro.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Uso de consultas de propiedades en CSS</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">Compaginación en cuadrícula CSS y mejora progresiva</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">Uso de CSS Grid: Compatibilidad con navegadores sin comportamiento de cuadrícula</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">Un tutorial que usa las versiones IE10 y 11 de Grid</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">¿Debo tratar de usar la implementación IE10 de Grid Layout?</a></li> + <li><a href="https://24ways.org/2017/cascading-web-design/">Diseño web en cascada con consulta de propiedades</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">Uso de las consultas de propiedades (vídeo)</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introducción al diseño CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Flujo normal</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Cuadrícula</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Flotación</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Posicionamiento</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Diseño en columnas</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Diseño adaptativo</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Guía para principiantes sobre consultas a medios</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Métodos de compaginación heredados</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Compatibilidad con navegadores antiguos</a></li> + <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Evaluación del conjunto de elementos básicos de compaginación</a></li> +</ul> diff --git a/files/es/learn/css/first_steps/comenzando_css/index.html b/files/es/learn/css/first_steps/comenzando_css/index.html new file mode 100644 index 0000000000..1da9edb582 --- /dev/null +++ b/files/es/learn/css/first_steps/comenzando_css/index.html @@ -0,0 +1,264 @@ +--- +title: Empezar con CSS +slug: Learn/CSS/First_steps/Comenzando_CSS +tags: + - Aprender + - CSS + - Clases + - Ejemplo + - Elementos + - Estado + - Principiante + - Selectores + - Sintaxis +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">En este artículo aplicaremos CSS a un documento HTML sencillo para aprender algunos elementos prácticos sobre este lenguaje.</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">trabajo con archivos</a> y conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Comprender los conceptos básicos para vincular un documento CSS a un archivo HTML y dar a un texto un formato sencillo con CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Empezamos_con_algo_de_HTML">Empezamos con algo de HTML</h2> + +<p>Nuestro punto de partida es un documento HTML. Puedes copiar el código de abajo si quieres trabajar en tu ordenador. Guarda el siguiente código como <code>index.html</code> en una carpeta de tu equipo.</p> + +<pre class="brush: html notranslate"><!doctype html> +<html lang="es"> +<head> + <meta charset="utf-8"> + <title>Empezamos con el CSS</title> +</head> + +<body> + + <h1>Soy un título de nivel uno</h1> + + <p>Este es un párrafo de texto. En el texto hay un <span>elemento span</span> +y también un <a href="http://example.com">enlace</a>.</p> + + <p>Este es el segundo párrafo. Contiene un elemento <em>destacado</em>.</p> + + <ul> + <li>Punto uno</li> + <li>Punto dos</li> + <li>Punto <em>tres</em></li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si lees esto en un dispositivo o un entorno donde no puedes crear archivos fácilmente, no te preocupes. A continuación hay editores de código en vivo que van a permitirte escribir ejemplos de código en esta misma página.</p> +</div> + +<h2 id="Agregar_CSS_a_un_documento">Agregar CSS a un documento</h2> + +<p>Lo primero que se debe hacer es decirle al documento HTML que hay algunas reglas CSS que queremos que use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora, veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del documento.</p> + +<p>Crea un archivo en la misma carpeta que tu documento HTML y guárdalo como <code>styles.css</code>. La extensión <code>.css</code> muestra que es un archivo CSS.</p> + +<p>Para vincular <code>styles.css</code> a <code>index.html</code>, añade la siguiente línea en algún lugar dentro del {{htmlelement ("head")}} del documento HTML:</p> + +<pre class="brush: html notranslate"><link rel="stylesheet" href="styles.css"></pre> + +<p>Este elemento {{htmlelement ("link")}} le dice al navegador que hay una hoja de estilo con el atributo <code>rel</code> y la ubicación de esa hoja de estilo como el valor del atributo <code>href</code>. Puedes probar si el CSS funciona añadiendo una regla a <code>styles.css</code>. Usando el editor de código, añade lo siguiente al archivo CSS:</p> + +<pre class="brush: css notranslate">h1 { + color: red; +}</pre> + +<p>Guarda los archivos HTML y CSS antes de volver a cargar la página en un navegador web. Ahora el título de nivel uno de la parte superior del documento debería ser rojo. Si esto sucede, ¡felicidades!: has aplicado correctamente un poco de CSS a un documento HTML. Si no lo hace, verifica que hayas escrito todo correctamente.</p> + +<p>Puedes continuar trabajando en <code>styles.css</code> localmente o usar nuestro editor interactivo para continuar con este tutorial. El editor interactivo actúa como si el CSS del primer panel estuviera vinculado al documento HTML, tal como lo hemos hecho con el documento anterior.</p> + +<h2 id="Dar_formato_a_elementos_HTML">Dar formato a elementos HTML</h2> + +<p>Al poner nuestro título de encabezado en rojo, ya hemos demostrado que podemos elegir un elemento HTML y darle formato. Hacemos esto con un <em>selector de elementos</em>: un selector que coincide directamente con el nombre de un elemento HTML. Para determinar todos los párrafos del documento, se usa el selector <code>p</code>. Para hacer que todos los párrafos se vean verdes se usa:</p> + +<pre class="brush: css notranslate">p { + color: green; +}</pre> + +<p>Puedes determinar múltiples selectores a la vez, separándolos con una coma. Si queremos que todos los párrafos y todos los elementos de la lista sean verdes, el código se verá así:</p> + +<pre class="brush: css notranslate">p, li { + color: green; +}</pre> + +<p>Pruébalo en el editor interactivo que encontrarás a continuación (edita los cuadros de código) o en tu documento CSS.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="Cambiar_el_comportamiento_predeterminado_de_los_elementos">Cambiar el comportamiento predeterminado de los elementos</h2> + +<p>Cuando miramos un documento HTML bien marcado, incluso con algo tan simple como nuestro ejemplo, podemos ver que el navegador facilita la legibilidad de este documento HTML al añadir un estilo predeterminado. Los títulos se muestran grandes y en negrita, y la lista tiene viñetas. Esto sucede porque los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, los cuales se aplican a todas las páginas por defecto. Sin ellos, todo el texto se uniría en un grupo y tendríamos que darle formato desde cero. Todos los navegadores modernos muestran el contenido HTML por defecto de la misma manera.</p> + +<p>Sin embargo, a menudo querrás algo diferente a la elección que ha hecho el navegador. Esto se puede solucionar con el simple hecho de escoger el elemento HTML que deseas cambiar y utilizar una regla CSS para cambiar su apariencia. Un buen ejemplo es <code><ul></code>, que muestra una lista desordenada. Tiene viñetas y, si decidimos que no las queremos, podemos eliminarlas de este modo:</p> + +<pre class="brush: css notranslate">li { + list-style-type: none; +}</pre> + +<p>Ahora, intenta añadir esto a tu CSS.</p> + +<p>Es muy conveniente consultar en MDN la propiedad <code>list-style-type</code> para ver qué valores admite. Echa un vistazo a la página de <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> y encontrarás un ejemplo interactivo en la parte superior para probar diferentes valores (todos los permitidos se detallan más abajo en esa misma página).</p> + +<p>Al mirar esa página, descubrirás que, además de eliminar las viñetas de la lista, también puedes cambiarlas. Intenta cambiarlas por unas cuadradas utilizando el valor <code>square</code>.</p> + +<h2 id="Añadir_una_clase">Añadir una clase</h2> + +<p>Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo tengan el mismo aspecto en el documento. La mayoría de las veces no es el caso, por lo que deberás encontrar una manera de seleccionar un subconjunto de los elementos sin que cambien los demás. La forma más común de hacer esto es añadir una clase al elemento HTML y determinarla.</p> + +<p>En tu documento HTML, añade al segundo elemento de la lista un <a href="/es/docs/Web/HTML/Atributos_Globales/class">atributo de clase</a>. Debería verse así:</p> + +<pre class="brush: html notranslate"><ul> + <li>Punto uno</li> + <li <strong>class = "special"</strong>>Punto dos</li> + <li>Punto <em>tres</em></li> +</ul></pre> + +<p>En tu CSS, puedes seleccionar una clase <code>special</code> creando un selector que comience con un carácter de punto final. Añade lo siguiente a tu archivo CSS:</p> + +<pre class="brush: css notranslate">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Guarda y actualiza para ver cuál es el resultado.</p> + +<p>Puedes aplicar la clase <code>special</code> a cualquier elemento de la página que desees que tenga el mismo aspecto que este elemento de lista. Por ejemplo, es posible que desees que el <code><span></code> del párrafo también sea naranja y en negrita. Intenta añadirle una <code>class</code> <code>special</code>, luego vuelve a cargar la página y observa qué sucede.</p> + +<p>A veces verás reglas con un selector que enumera el selector de elementos HTML junto con la clase:</p> + +<pre class="brush: css notranslate">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Esta sintaxis significa «determina cualquier elemento <code>li</code> que tenga una clase special». Si hicieras esto, ya no podrías aplicar la clase a un elemento <code><span></code> u otro elemento simplemente añadiéndole la clase; tendrías que añadir ese elemento a la lista de selectores:</p> + +<pre class="brush: css notranslate">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>Como puedes imaginar, algunas clases pueden aplicarse a muchos elementos y no queremos tener que seguir editando el CSS cada vez que algo nuevo necesita adoptar ese estilo. Por lo tanto, a veces es mejor eludir el elemento y simplemente referirse a la clase, a menos que sepas que vas a querer crear algunas reglas especiales para un solo elemento y tal vez quieras asegurarte de que no se apliquen a otros elementos.</p> + +<h2 id="Dar_formato_según_la_ubicación_en_un_documento">Dar formato según la ubicación en un documento</h2> + +<p>Hay momentos en los que querrás que algo se vea diferente en función de dónde esté en el documento. Hay múltiples selectores que pueden hacerlo, pero por ahora veremos solo un par. En nuestro documento hay dos elementos <code><em></code>: uno dentro de un párrafo y el otro dentro de un elemento de la lista. Para seleccionar solo un <code><em></code> que esté anidado dentro de un elemento <code><li></code>, podemos usar un selector llamado <strong>combinador descendente</strong>, que simplemente toma la forma de un espacio entre otros dos selectores.</p> + +<p>Añade la siguiente regla a la hoja de estilo.</p> + +<pre class="brush: css notranslate">li em { + color: rebeccapurple; +}</pre> + +<p>Este selector separará cualquier elemento <code><em></code> que esté dentro de (un descendiente de) <code><li></code>. Entonces, en tu documento de ejemplo, deberías encontrar que el <code><em></code> del tercer elemento de la lista es morado, pero el que hay en el párrafo no ha cambiado.</p> + +<p>Otra cosa que puedes probar es dar formato un párrafo que venga directamente a continuación de un título que esté en el mismo nivel de jerarquía en el HTML. Para hacerlo, coloca un <code>+</code> (un <strong>combinador hermano adyacente</strong>) entre los selectores.</p> + +<p>Intenta añadir también esta regla a la hoja de estilo:</p> + +<pre class="brush: css notranslate">h1 + p { + font-size: 200%; +}</pre> + +<p>El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un <code>span</code> dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el <code><span></code> en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Como puedes ver, el CSS nos ofrece varias formas de seleccionar elementos, y hasta ahora solo hemos arañado la superficie. Examinaremos todos estos selectores y muchos más en los artículos correspondientes a <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">Selectores</a> que encontrarás más adelante.</p> +</div> + +<h2 id="Dar_formato_según_el_estado">Dar formato según el estado</h2> + +<p>El último tipo de estilo que veremos en este tutorial es la capacidad de dar formato a los elementos en función de su estado. Un ejemplo sencillo es el estilo de los enlaces. Cuando damos formato a un enlace, necesitamos seleccionar el elemento <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (anclaje). Tiene diferentes estados dependiendo de si se ha visitado o no, se pasa por encima, o se presiona con el teclado o se hace clic (se activa). Puedes usar CSS para dar formato a estos diferentes estados. El CSS que encontrarás a continuación presenta en color rosa los enlaces que no se han visitado y en verde los que sí.</p> + +<pre class="brush: css notranslate">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>Puedes cambiar la apariencia del enlace, por ejemplo, eliminando el subrayado, lo que se logra mediante la siguiente regla:</p> + +<pre class="brush: css notranslate">a:hover { + text-decoration: none; +}</pre> + +<p>En el ejemplo que encontrarás a continuación, puedes jugar con diferentes valores para los distintos estados de un enlace. Hemos añadido las reglas anteriores y ahora nos damos cuenta de que el color rosa es demasiado claro y difícil de leer, ¿por qué no cambiarlo a otro que se vea mejor? ¿Puedes poner los enlaces en negrita?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>Hemos eliminado el subrayado del enlace cuando el ratón se pasa por encima, y se puede eliminar de todos los estados de un enlace. Sin embargo, vale la pena recordar que en una página web real deberás asegurarte de que los visitantes sepan reconocer que se trata de un enlace. Que aparezca subrayado puede ser una pista importante para que las personas se den cuenta de que pueden hacer clic en una palabra dentro del párrafo, ya que es a lo que están acostumbrados. Al igual que con todo en CSS, existe la posibilidad de que tus cambios resten accesibilidad al documento. Intentaremos resaltar estas posibles dificultades en los lugares apropiados.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: a menudo verás que se menciona la <a href="/es/docs/Learn/Accessibility">accesibilidad</a> en estas lecciones y en MDN. Cuando hablamos de accesibilidad nos referimos al requisito de que nuestras páginas web sean comprensibles y usables para todas las personas.</p> + +<p>Puede que tu visitante acceda a la página desde un ordenador con ratón o trackpad, o un teléfono inteligente con pantalla táctil. O puede que use un lector de pantalla que lea el contenido del documento, así como puede que necesite un tamaño de texto más grande o navegar por la página usando solo el teclado.</p> + +<p>Un documento HTML simple es, generalmente, accesible para todos. Es importante que el documento no pierda accesibilidad a medida que vayas aplicándole estilo.</p> +</div> + +<h2 id="Combinaciones_de_selectores_y_combinadores">Combinaciones de selectores y combinadores</h2> + +<p>Vale la pena señalar que puedes hacer múltiples combinaciones de selectores y combinadores. Por ejemplo:</p> + +<pre class="brush: css notranslate">/* selecciona cualquier elemento <span> que se encuentre dentro de un <p>, que esté dentro de un <artículo> */ +artículo p span { ... } + +/* selecciona cualquier <p> que se encuentre directamente después de <ul>, que va directamente después de <h1> */ +h1 + ul + p { ... }</pre> + +<p>También puedes combinar varios tipos juntos. Intenta añadir lo siguiente al código:</p> + +<pre class="brush: css notranslate">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>Dará formato a cualquier elemento con la clase <code>special</code>, dentro de un elemento <code><p></code> que venga justo después de <code><h1></code>, el cual se encuentra dentro de <code><body></code>. ¡Uf!</p> + +<p>En el HTML original que proporcionamos, el único elemento al que esto aplica estilo es <code><span class="special"></code>.</p> + +<p>No te preocupes si ahora mismo te parece complicado: irás acostumbrarte a medida que escribas más CSS.</p> + +<h2 id="Para_terminar">Para terminar</h2> + +<p>En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.</p> + +<p>En el próximo artículo, veremos cómo se estructura el CSS.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li> +</ol> diff --git a/files/es/learn/css/first_steps/como_funciona_css/index.html b/files/es/learn/css/first_steps/como_funciona_css/index.html new file mode 100644 index 0000000000..920212e080 --- /dev/null +++ b/files/es/learn/css/first_steps/como_funciona_css/index.html @@ -0,0 +1,156 @@ +--- +title: Cómo funciona CSS +slug: Learn/CSS/First_steps/Como_funciona_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">Hemos aprendido los conceptos básicos de CSS, para qué sirve y cómo escribir hojas de estilo simples. En esta lección vamos a echar un vistazo a cómo un navegador crea una página web a partir de CSS y HTML.</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 cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a> y conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Entender los conceptos básicos de cómo el navegador analiza el CSS y el HTML y lo que sucede cuando encuentra un CSS que no entiende.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Cómo_funciona_realmente_el_CSS">¿Cómo funciona realmente el CSS?</h2> + +<p>Cuando un navegador muestra un documento, ha de combinar el contenido con la información de estilo del documento. Procesa el documento en una serie de etapas, que enumeraremos a continuación. Ten en cuenta que este es un modelo muy simplificado de lo que sucede cuando un navegador carga una página web y que cada navegador gestiona el proceso de manera diferente. Pero esto es más o menos lo que sucede.</p> + +<ol> + <li>El navegador carga el HTML (por ejemplo, lo recibe de la red).</li> + <li>Convierte el {{Glossary("HTML")}} en un {{Glossary("DOM")}} (<em>Modelo de objetos del documento</em>). El DOM representa el documento en la memoria del ordenador. Lo explicaremos más detalladamente en la sección siguiente.</li> + <li>Entonces, el navegador va a buscar la mayor parte de los recursos vinculados al documento HTML, como las imágenes y los videos incrustados... ¡y también el CSS vinculado! JavaScript aparece un poco más adelante en el proceso, pero no vamos a hablar de ello aún para evitar complicar las cosas.</li> + <li>El navegador analiza el CSS y ordena en diferentes «cubos» las diferentes reglas según el tipo de selector. Por ejemplo, elemento, clase, ID, y así sucesivamente. Para cada tipo de selector que encuentres, calcula qué reglas deben aplicarse y a qué nodos en el DOM se les aplica el estilo según corresponda (este paso intermedio se llama árbol de renderización).</li> + <li>El árbol de renderización presenta la estructura en que los nodos deben aparecer después de aplicarle las reglas.</li> + <li>En la pantalla se muestra el aspecto visual de la página (esta etapa se llama pintura).</li> +</ol> + +<p>El siguiente diagrama ofrece una visión sencilla de este proceso.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="Acerca_del_DOM">Acerca del DOM</h2> + +<p>Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo o bloque en el lenguaje de marcado se convierte en un {{Glossary("Node/DOM","nodo DOM")}} con estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son padres de nodos secundarios, y estos nodos hijos tienen hermanos.</p> + +<p>Comprender el DOM te ayuda a diseñar, depurar y mantener tu CSS porque en el DOM es donde tu CSS se encuentra con el contenido del documento. Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.</p> + +<h2 id="Una_representación_real_de_un_DOM">Una representación real de un DOM</h2> + +<p>En lugar de una explicación larga y aburrida, veamos un ejemplo para entender cómo un código HTML se convierte en DOM.</p> + +<p>Tomemos el siguiente código HTML:</p> + +<pre class="brush: html notranslate"><p> + Usaremos: + <span>Hojas</span> + <span>de estilo</span> + <span>en cascada</span> +</p> +</pre> + +<p>En el DOM, el nodo que se corresponde con nuestro elemento <code><p></code> es un padre. Sus hijos son un nodo de texto y los tres nodos correspondientes a nuestros elementos <code><span></code>. Los nodos <code>SPAN</code> son también los <span style="background-color: #f5f6f5;">padres</span>, y los nodos de texto sus hijos:</p> + +<pre class="notranslate">P +├─ "Usaremos:" +├─ SPAN +| └─ "Hojas" +├─ SPAN +| └─ "de estilo" +└─ SPAN + └─ "en cascada" +</pre> + +<p>Así es como un navegador interpreta el código HTML anterior, interpreta el árbol DOM y luego lo muestra en el navegador, así:</p> + +<p>{{EmbedLiveSample('Una_representación_real_de_un_DOM', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css notranslate">p {margin:0;}</pre> +</div> + +<h2 id="La_aplicación_de_CSS_al_DOM">La aplicación de CSS al DOM</h2> + +<p>Pongamos que hemos añadido un poco de CSS a nuestro documento, para darle estilo. Una vez más, el HTML es el siguiente:</p> + +<pre class="brush: html notranslate"><p> + Usaremos: + <span>Hojas</span> + <span>de estilo</span> + <span>en cascada</span> +</p></pre> + +<p>Supongamos que le aplicamos el CSS siguiente:</p> + +<pre class="brush: css notranslate">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>El navegador analizará el código HTML y creará un DOM a partir de este. A continuación, analizará el CSS. Dado que la única regla disponible en el CSS tiene un selector <code>span</code>, el navegador ¡ordenará el CSS muy rápidamente! Aplicará la regla a cada uno de los tres <code><span></code>, que mostrarán en pantalla la representación visual final.</p> + +<p>La salida actualizada es la siguiente:</p> + +<p>{{EmbedLiveSample ( 'La_aplicación_de_CSS_al_DOM', '100%', 55)}}</p> + +<p>En nuestro artículo <a href="/es/docs/Learn/CSS/Building_blocks/Depurar_el_CSS">Depurar el CSS</a> que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS. También aprenderemos más sobre cómo el navegador interpreta el CSS.</p> + +<h2 id="¿Qué_ocurre_si_un_navegador_encuentra_CSS_que_no_entiende">¿Qué ocurre si un navegador encuentra CSS que no entiende?</h2> + +<p>En una <a href="/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS#Soporte_del_navegador">lección anterior</a> mencionamos que no todos los navegadores implementan las novedades de CSS en el mismo momento. Además, no todo el mundo utiliza la última versión de un navegador. Dado que el CSS está en desarrollo constante y, por lo tanto, por delante de lo que los navegadores pueden reconocer, puede que te preguntes qué sucede si un navegador encuentra un selector o una declaración CSS que no reconoce.</p> + +<p>La respuesta es que no hace nada y simplemente pasa a la siguiente parte del CSS.</p> + +<p>Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.</p> + +<p>Del mismo modo, si un navegador encuentra un selector que no entiende, lo ignorará y pasará al siguiente.</p> + +<p>En el siguiente ejemplo hemos utilizado la ortografía británica para la propiedad color, que invalida la propiedad porque no la reconoce. Así que el párrafo no se muestra en azul. Sin embargo, se han aplicado todos los demás estilos del CSS; solo se ha ignorado la línea que no es válida.</p> + +<div id="Skipping_example"> +<pre class="brush: html notranslate"><p>Quiero este texto en grande, en negrita y en color azul.</p></pre> + +<pre class="brush: css notranslate">p { + font-weight: bold; + colour: blue; /* Ortografía incorrecta de la propiedad color */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>Este comportamiento es muy útil. Significa que puedes utilizar el CSS nuevo como una mejora, a sabiendas de que no se producirá ningún error si no se entiende: o bien el navegador entiende la característica nueva o no lo hace. Combinado con el funcionamiento del modo en cascada con el hecho de que los navegadores utilizarán la última CSS que encuentren en la hoja de estilo, cuando haya dos reglas con el mismo nivel de especificidad, también puedes ofrecer alternativas para los navegadores que no admiten el CSS nuevo.</p> + +<p>Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores. Por ejemplo, algunos navegadores antiguos no entienden <code>calc()</code> como valor. Podríamos dar un valor de sustitución para el ancho de una caja en píxeles, y a continuación dar un ancho con un valor <code>calc()</code> de <code>100% - 50px</code>. Los navegadores antiguos usarán la versión en píxeles y harán caso omiso de la indicación <code>calc()</code>, porque no la entienden. Los navegadores nuevos interpretarán la línea del ancho en píxeles, pero la anularán al llegar a la línea de <code>calc()</code> porque aparece después en la cascada.</p> + +<pre class="brush: css notranslate">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>En lecciones posteriores veremos muchas más formas de cómo admitir navegadores diferentes.</p> + +<h2 id="Y_finalmente">Y finalmente</h2> + +<p>Casi has terminado este módulo; solo nos queda una cosa más por hacer. En el próximo artículo, <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">pondrás en práctica tu conocimiento nuevo</a> para cambiar el estilo de un ejemplo y probarte con un poco de CSS en el proceso.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es CSS?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li> +</ol> diff --git a/files/es/learn/css/first_steps/como_se_estructura_css/index.html b/files/es/learn/css/first_steps/como_se_estructura_css/index.html new file mode 100644 index 0000000000..a3e9bb94b8 --- /dev/null +++ b/files/es/learn/css/first_steps/como_se_estructura_css/index.html @@ -0,0 +1,512 @@ +--- +title: Cómo se estructura el CSS +slug: Learn/CSS/First_steps/Como_se_estructura_CSS +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Ahora que ya sabes qué es el CSS y conoces sus conceptos básicos, es hora de profundizar un poco más en la estructura del lenguaje en sí. Ya hemos visto muchos de los conceptos que aparecen en este artículo; puedes volver para recapitular si más adelante encuentras conceptos confusos.</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">trabajo con archivos</a>, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y una idea de <a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">cómo funciona el CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender en detalle las estructuras de sintaxis fundamentales de CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Aplicar_CSS_al_HTML">Aplicar CSS al HTML</h2> + +<p>Lo primero que veremos son los tres métodos para aplicar CSS a un documento.</p> + +<h3 id="Hoja_de_estilo_externa">Hoja de estilo externa</h3> + +<p>En <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>, vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.</p> + +<p>Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión <code>.css</code> y que lo vinculas desde un elemento <code><link></code> de HTML:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mi experimento CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>¡Hola, mundo!</h1> + <p>Este es mi primer ejemplo de CSS</p> + </body> +</html></pre> + +<p>El archivo CSS podría parecerse a esto:</p> + +<pre class="brush: css notranslate">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>El atributo <code>href</code> del elemento {{htmlelement("link")}} tiene que hacer referencia a un archivo de tu sistema de archivos.</p> + +<p>En el ejemplo anterior, el archivo CSS está en la misma carpeta que el documento HTML, pero puedes colocarlo en otro lugar y especificar la ruta adecuada. Por ejemplo:</p> + +<pre class="brush: html notranslate"><!-- Dentro de un subdirectorio llamado styles dentro del directorio de trabajo --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- Dentro de un subdirectorio llamado general, que está en un subdirectorio llamado styles, dentro del directorio de trabajo --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- Sube un nivel de directorio, y luego dentro de un subdirectorio llamado styles --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="Hoja_de_estilo_interna">Hoja de estilo interna</h3> + +<p>Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS dentro de un elemento {{htmlelement("style")}} contenido dentro del elemento {{htmlelement("head")}} del HTML.</p> + +<p>En este caso, el HTML se vería así:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mi experimento CSS</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>¡Hola, mundo!</h1> + <p>Este es mi primer ejemplo de CSS</p> + </body> +</html></pre> + +<p>Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de administración de contenido donde no sea posible modificar los archivos CSS directamente), pero no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambios.</p> + +<h3 id="Estilos_en_línea">Estilos en línea</h3> + +<p>Los estilos en línea son declaraciones CSS que afectan a un solo elemento, contenido dentro de un atributo de <code>style</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mi experimento CSS</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">¡Hola mundo!</h1> + <p style="color:red;">Este es mi primer ejemplo de CSS</p> + </body> +</html></pre> + +<p><strong>¡No hagas esto a menos que realmente tengas que hacerlo!</strong> Es realmente malo a la hora de realizar el mantenimiento (puede que tengas que actualizar la misma información varias veces en un mismo documento), y además mezcla tu información CSS para la presentación con tu información HTML para la estructura, lo que dificulta la lectura y la comprensión del código. Mantener los diferentes tipos de código separados facilita trabajar con ellos.</p> + +<p>Hay ciertos lugares donde los estilos en línea son más comunes, o incluso aconsejables. Es posible que tengas que recurrir a ellos si realmente tu entorno de trabajo es restrictivo (tal vez el CMS solo te permita editar el cuerpo del HTML). También verás que se usan mucho en el correo electrónico en formato HTML para lograr la máxima compatibilidad con el mayor número de clientes.</p> + +<h2 id="Juguemos_con_el_CSS_de_este_artículo">Juguemos con el CSS de este artículo</h2> + +<p>En este artículo hay mucho CSS con el que jugar. Para hacerlo, recomendamos crear un nuevo directorio/carpeta en el ordenador, dentro de la cual deberás crear una copia de los siguientes dos archivos:</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Mis experimentos CSS</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>Crea tu HTML de prueba aquí</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css notranslate">/* Crea tu CSS de prueba aquí */ + +p { + color: red; +}</pre> + +<p>Entonces, cuando te encuentres con un CSS con el que desees experimentar, reemplaza el contenido <code><body></code> del HTML con algo de HTML sin estilos y añade CSS a tu archivo de CSS para darle estilo.</p> + +<p>Si no estás en un sistema donde puedas crear archivos fácilmente, puedes utilizar el editor interactivo que encontrarás a continuación para experimentar.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> + +<p>¡Sigue leyendo y disfruta!</p> + +<h2 id="Selectores">Selectores</h2> + +<p>No se puede hablar de CSS sin mencionar los selectores, de los cuales ya hemos descubierto varios tipos diferentes en la lección <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con el CSS</a>. Un selector es, como determinamos, un elemento de nuestro documento HTML para aplicarle estilo. Si los estilos no se aplican correctamente, es probable que el selector no coincida con lo que crees que debería coincidir.</p> + +<p>Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de selectores válidos o listas de selectores.</p> + +<pre class="brush: css notranslate">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p><strong>Prueba a crear algunas reglas CSS que usen los selectores anteriores y algo de HTML sin estilos. Si no conoces alguna de las sintaxis anteriores, ¡prueba a buscarla en MDN!</strong></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Aprenderás mucho más sobre los selectores en nuestros tutoriales sobre <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">selectores CSS</a> de la próxima lección.</p> +</div> + +<h3 id="Especificidad">Especificidad</h3> + +<p>A menudo habrá situaciones en las que dos selectores podrían determinar un mismo elemento HTML. Considera la siguiente hoja de estilo, en que definimos una regla con un selector <code>p</code> que establecerá los párrafos en color azul, y también una clase que establecerá los elementos seleccionados en color rojo.</p> + +<pre class="brush: css notranslate">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Digamos que en nuestro documento HTML hay un párrafo con una clase <code>special</code>. Ambas reglas podrían aplicarse. ¿Cuál ganará? ¿De qué color crees que será nuestro párrafo?</p> + +<pre class="brush: html notranslate"><p class="special">¿De qué color soy?</p></pre> + +<p>El lenguaje CSS tiene reglas para controlar cuál ganará en caso de colisión; reciben el nombre de <strong>cascada</strong> y <strong>especificidad</strong>. En el siguiente bloque de códigos hemos definido dos reglas para el selector <code>p</code>, pero el párrafo termina siendo de color azul. Esto se debe a que la declaración que lo establece en azul aparece más abajo en la hoja de estilo, y los estilos posteriores anulan a los anteriores. Así funciona la regla de la cascada.</p> + +<pre class="brush: css notranslate">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>Sin embargo, en el caso de nuestro primer bloque, que contiene un selector de clase y otro de elementos, la clase ganará. Esto hará que el párrafo sea rojo, incluso aunque aparezca antes en la hoja de estilo. Una clase se describe de forma más específica o con más especificidad que el selector de elementos, razón por la que gana.</p> + +<p><strong>Prueba el ejemplo anterior: añade el HTML a tu experimento, luego pon las dos reglas <code>p { ... }</code> a tu hoja de estilo. A continuación, cambia el primer selector <code>p</code> por <code>.special</code> para ver cómo cambia el estilo.</strong></p> + +<p>Las reglas de especificidad y de cascada pueden parecer un poco complicadas al principio. Son más fáciles de entender a medida que se van adquiriendo conocimientos de CSS. En nuestro artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Cascada_y_herencia">Cascada y herencia</a>, que abordaremos en la próxima lección, se explicará en detalle, incluyendo cómo calcular la especificidad. Por ahora, solo has de saber que existe y que a veces el CSS no se aplica como esperas porque algo más en la hoja de estilo tiene una mayor especificidad. El hecho de identificar que más de una regla podría aplicarse a un elemento es el primer paso para solucionar estos problemas.</p> + +<h2 id="Propiedades_y_valores">Propiedades y valores</h2> + +<p>En su nivel más básico, el CSS consta de dos componentes básicos:</p> + +<ul> + <li><strong>Propiedades</strong>: Identificadores legibles por los humanos que indican qué características de estilo (por ejemplo, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) deseas cambiar.</li> + <li><strong>Valores</strong>: A cada propiedad especificada se le asigna un valor que indica cómo quieres que cambien esas características de estilo (por ejemplo, lo que quieres que cambie de la fuente, el ancho o el color de fondo).</li> +</ul> + +<p>La siguiente imagen resalta una sola propiedad y valor. El nombre de la propiedad es <code>color</code> y el valor <code>blue</code>.</p> + +<p><img alt="Una declaración resaltada en el CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Una propiedad emparejada con un valor se denomina <em>declaración CSS</em>. Las declaraciones CSS se colocan dentro de los <em>bloques de declaración CSS</em>. La siguiente imagen muestra nuestro CSS con el bloque de declaración resaltado.</p> + +<p><img alt="Un bloque de declaración resaltado" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Finalmente, los bloques de declaración CSS se combinan con <em>selectores</em> para producir <em>conjuntos de reglas CSS</em> (o <em>reglas CSS</em>). Nuestra imagen contiene dos reglas, una para el selector <code>h1</code> y otra para el selector <code>p</code>. La regla para <code>h1</code> está resaltada.</p> + +<p><img alt="La regla para h1 resaltada" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>Establecer las propiedades de CSS según valores específicos es la función principal del lenguaje CSS. El motor CSS calcula qué declaraciones se aplican a cada elemento de una página para darle la compaginación y los estilos adecuados.</p> + +<div class="blockIndicator warning"> +<p><strong>Importante:</strong> Las propiedades y valores de CSS son sensibles a mayúsculas y minúsculas. La propiedad y el valor de cada par están separados por dos puntos (<code>:</code>).</p> +</div> + +<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se puedan aplicar a diferentes elementos HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>Importante</strong>: Si una propiedad es desconocida o si un valor no es válido para una propiedad determinada, la declaración se considera <em>inválida</em> y el motor CSS del navegador la ignora por completo.</p> +</div> + +<div class="warning"> +<p><strong>Importante</strong>: En CSS (y otros estándares web) se ha acordado establecer como estándar la ortografía en inglés de los EE. UU. para solucionar las incertidumbres idiomáticas. Por ejemplo, <em>siempre</em> hay que escribir <code>color</code>. Si se escribe <code>colour</code>, no funcionará.</p> +</div> + +<h3 id="Las_funciones">Las funciones</h3> + +<p>Si bien la mayoría de valores son palabras clave relativamente simples o valores numéricos, es posible que algunos valores tomen la forma de una función. Un ejemplo sería la función <code>calc()</code>. Esta función te permite hacer operaciones matemáticas sencillas desde tu CSS, por ejemplo:</p> + +<div id="calc_example"> +<pre class="brush: html notranslate"><div class="external"> <div class="box">La caja interior es del 90% - 30px.</div></div></pre> + +<pre class="brush: css notranslate">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>Esto se traduce así:</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>Una función consta del nombre de la función y, a continuación, unos paréntesis entre los que se colocan los valores permitidos para esa función. En el caso del ejemplo <code>calc()</code> anterior, pedimos que el ancho de esta caja sea del 90% del ancho del bloque que la contiene, menos 30 píxeles. Esto no es algo que podamos calcular con anticipación y simplemente introducir el valor en el CSS, ya que no sabemos cuál será el 90%. Como con todos los valores, la página correspondiente del proyecto MDN tendrá ejemplos de uso para que puedas ver cómo funciona.</p> + +<p>Otro ejemplo serían los diversos valores para {{cssxref ("transform")}}, como <code>rotate()</code>.</p> + +<div id="transform_example"> +<pre class="brush: html notranslate"><div class="box"></div></pre> + +<pre class="brush: css notranslate">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>El resultado del código anterior se ve así:</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>Prueba a buscar diferentes valores de las siguientes propiedades y escribe reglas CSS que se apliquen a diferentes elementos HTML: </strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref ("background-image")}}, en particular a valores de gradiente</strong></li> + <li><strong>{{cssxref("color")}}, en particular a valores rgb/rgba/hsl/hsla</strong></li> +</ul> + +<h2 id="rules">@rules</h2> + +<p>Las <code><a href="/es/docs/Web/CSS/At-rule">@rules</a></code> (leído "at-rules" en inglés) dan al CSS algunas instrucciones sobre cómo comportarse. Algunas <code>@rules</code> son simples, con el nombre de la regla y un valor. Por ejemplo, para importar una hoja de estilo adicional a tu hoja de estilo CSS principal, puedes usar <code>@import</code>:</p> + +<pre class="brush: css notranslate">@import 'styles2.css';</pre> + +<p>Una de las <code>@rules</code> más comunes con las que te encontrarás es <code>@media</code>, que permite usar <a href="/es/docs/Web/CSS/Media_Queries">consultas a medios</a> para aplicar CSS solo cuando se dan ciertas condiciones (por ejemplo, cuando la resolución de la pantalla supera un valor determinado o la anchura supera un valor concreto).</p> + +<p>En el CSS que se muestra a continuación, tenemos una hoja de estilo que le da al elemento <code><body></code> un color de fondo rosado. Sin embargo, luego usamos <code>@media</code> para crear una sección de nuestra hoja de estilo que solo se aplicará en los navegadores con una ventana gráfica de más de 30em de ancho. Si el navegador es más ancho que 30em, el color de fondo será azul.</p> + +<pre class="brush: css notranslate">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>Encontrarás otras <code>@rules</code> a lo largo de estas lecciones.</p> + +<p><strong>Prueba a añadir una consulta a medios en tu CSS que cambie los estilos según el ancho de la ventana gráfica. Cambia el ancho de la ventana de tu navegador para ver el resultado.</strong></p> + +<h2 id="Abreviaturas">Abreviaturas</h2> + +<p>Algunas propiedades como {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} y {{ cssxref("margin")}} se llaman <strong>propiedades abreviadas</strong>. Esto se debe a que permiten establecer varios valores de propiedad en una sola línea, lo que ahorra tiempo y ordena el código.</p> + +<p>Por ejemplo, esta línea:</p> + +<pre class="brush: css notranslate">/* En propiedades abreviadas con 4 valores, como margin y padding (relleno), los valores se aplican + según el orden: arriba, derecha, abajo e izquierda (en sentido horario desde la parte superior). También hay otros + tipos de abreviaturas, como las propiedades abreviadas con 2 valores que establecen el relleno/margen, + arriba/abajo, y luego izquierda/derecha */ +padding: 10px 15px 15px 5px;</pre> + +<p>Hace lo mismo que todas estas juntas:</p> + +<pre class="brush: css notranslate">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>Mientras que esta línea:</p> + +<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>Hace lo mismo que todas estas juntas:</p> + +<pre class="brush: css notranslate">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-scroll: fixed;</pre> + +<p>Ahora mismo no pretendemos enseñarlos exhaustivamente: encontrarás muchos ejemplos más adelante en el curso. Te aconsejamos que busques los nombres de las propiedades abreviadas en nuestra <a href="/es/docs/Web/CSS/Referencia_CSS">referencia CSS</a> para obtener más información.</p> + +<p><strong>Prueba a añadir las declaraciones anteriores a tu CSS para ver cómo afecta al estilo de tu HTML. Experimenta con diferentes valores.</strong></p> + +<div class="blockIndicator warning"> +<p><strong>Advertencia</strong>: Si bien las propiedades abreviadas a menudo permiten ahorrarte valores, luego restablecerán a sus valores iniciales cualquier valor que no incluyas. Esto asegura que se use un conjunto de valores razonable. Sin embargo, puede resultar confuso si esperas que la propiedad abreviada solo cambie los valores que has introducido.</p> +</div> + +<h2 id="Comentarios">Comentarios</h2> + +<p>Al igual que con el HTML, te recomendamos que hagas comentarios en tu CSS para que te ayuden a comprender cómo funciona su código cuando vuelvas a utilizarlo al cabo de varios meses, así como para ayudar a otros que vayan a trabajar con él a entenderlo.</p> + +<p>Los comentarios en el CSS comienzan con <code>/*</code> y terminan con <code>*/</code>. En el bloque de código que encontrarás a continuación, hemos usado comentarios para marcar el inicio de las diferentes secciones de código. Esto es útil para ayudarnos a movernos por la base de código a medida que aumenta: puedes buscar los comentarios en tu editor de código.</p> + +<pre class="brush: css notranslate">/* con elementos básicos de aplicación de estilo */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvética, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* Prestemos especial atención al tamaño de fuente global. En una pantalla o una ventana grande, + aumentamos el tamaño de la fuente para conseguir una mejor legibilidad */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* Familiarización con algunos elementos anidados específicos en el DOM */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>Los comentarios también son útiles para <em>comentar</em> temporalmente ciertas partes del código con fines de prueba, por ejemplo, si tratas de encontrar qué parte de tu código causa un error. En el siguiente ejemplo, hemos comentado las reglas para el selector <code>.special</code>.</p> + +<pre class="brush: css notranslate">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>Añade algunos comentarios al CSS para acostumbrarte a usarlos.</strong></p> + +<h2 id="Espacio_en_blanco">Espacio en blanco</h2> + +<p>Por espacio en blanco nos referimos los espacios en sí, tabuladores y retornos de carro o intros. De la misma manera que el HTML, el navegador ignora el espacio en blanco dentro del CSS. El valor del espacio en blanco es que puede mejorar la legibilidad.</p> + +<p>En el siguiente ejemplo, cada declaración (y el principio/fin de regla) está en una línea propia; esta es posiblemente una buena forma de escribir el CSS, ya que facilita el mantenimiento y la comprensión:</p> + +<pre class="brush: css notranslate">body { + font: 1em/150% Helvética, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +} +</pre> + +<p id="Very_compact">Podrías escribir exactamente el mismo CSS eliminando la mayoría de los espacios en blanco; este bloque de código es funcionalmente idéntico al primer ejemplo, pero seguro que estarás de acuerdo en que resulta algo más difícil de leer:</p> + +<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>La manera que elijas para disponer el código suele ser una preferencia personal, aunque cuando comiences a trabajar en equipo es posible que encuentres que el equipo ya tiene su propia guía de estilo que especifica una convención acordada a seguir.</p> + +<div class="blockIndicator warning"> +<p><strong>Importante:</strong> Aunque los valores de las declaraciones CSS se separan por espacios, <strong>los nombres de propiedad nunca tienen espacios</strong>.</p> +</div> + +<p>Por ejemplo, las siguientes declaraciones de CSS son válidas:</p> + +<pre class="brush: css notranslate">margin: 0 auto; +padding-left: 10px;</pre> + +<p>Pero las siguientes no lo son:</p> + +<pre class="brush: css notranslate">margin: 0auto; +padding- left: 10px;</pre> + +<p>¿Ves los errores de espaciado? <code>0auto</code> no se reconoce como un valor válido para la propiedad de <code>margin</code> (<code>0</code> y <code>auto</code> son dos valores separados) y el navegador no reconoce <code>padding-</code> como una propiedad válida. El valor correcto de propiedad (<code>padding-left</code>) se ha separado por un espacio perdido.</p> + +<p>Debes asegurarte siempre de separar los valores distintos entre sí por al menos un espacio, pero mantén los nombres de las propiedades y los valores de las propiedades juntos.</p> + +<p><strong>Prueba a jugar con los espacios en blanco de tu CSS y observa qué es lo que se rompe y lo que no.</strong></p> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Resulta útil entender un poco cómo el navegador toma tu HTML y tu CSS y los convierte en una página web, razón por la cual en el próximo artículo (<a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona el CSS</a>) veremos ese proceso.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_este_modulo">En este modulo</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Empezar con el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li> +</ol> diff --git a/files/es/learn/css/first_steps/index.html b/files/es/learn/css/first_steps/index.html new file mode 100644 index 0000000000..0213277d94 --- /dev/null +++ b/files/es/learn/css/first_steps/index.html @@ -0,0 +1,52 @@ +--- +title: Primeros pasos en CSS +slug: Learn/CSS/First_steps +tags: + - Aprender + - CSS + - Principiante + - modulo + - primeros pasos +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets - en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.</p> + +<h2 id="Prerrequisitos">Prerrequisitos</h2> + +<p>Antes de comenzar este módulo, deberías:</p> + +<ol> + <li>Estar familiarizado y tener conocimiento básico sobre el uso de computadores e internet básico (p.ej. navegando, consumiendo contenido en Internet.)</li> + <li>Un entorno básico de trabajo configurado, como se detalla en la sección de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, y saber como crear y administrar archivos, o lo puedes ver en el módulo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejando los archivos</a>.</li> + <li>Conocimiento básico de HTML, como se muestra en <a href="https://developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Si estás trabajando en un computador/tabla/otro dispositivo en el cual no puedes crear o almacenar tus propios archivos, podrías probar (la mayoría) de los ejemplos de código en un editor de código en línea como <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<p>Este módulo contiene los siguientes artículos, que te guiarán a través de toda la teoría básica de CSS, y te proveerá oportunidades para comprobar algunas de tus habilidades.</p> + +<dl> + <dt><a href="/es/docs/Learn/CSS/First_steps/Qu%C3%A9_es_CSS">¿Qué es CSS?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo? Este artículo explica que es CSS, con ejemplos simples de sintaxis, y cubre algunos temas clave sobre este lenguaje.</dd> + <dt><a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezar con CSS</a></dt> + <dd>En este artículo se tomarná un documento HTML simple y se le aplicará CSS, aprendiendo algunas cosas prácticas mientras lo haces.</dd> + <dt><a href="/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS">Como se estructura CSS</a></dt> + <dd>Ahora que sabes que es CSS y de su uso básico, es momento de sumergirnos un poco más dentro de la estructura del propio lenguaje. Ya hemos conocido muchos de los conceptos discutidos aquí; puedes volver a este resumen en el futuro si necesitas reforzar conocimientos o si tienes dudas sobre algun concepto.</dd> + <dt><a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Como trabaja CSS</a></dt> + <dd>Hemos aprendido lo básico de CSS, para que es y como escribir una hoja de estilo sencilla. En esta lección echaremos un vistazo a como los navegadores web reciben CSS y HTML y los convierten en una página web.</dd> + <dt><a href="/es/docs/Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento">Usando tu nuevo conocimiento</a></dt> + <dd>Con las cosas que has aprendido en las últimas lecciones encontrarás que usando CSS puedes editar el formato de documentos de texto simple, para agregarles tu propio estilo. Este artículo te da la oportunidad de hacerlo.</dd> +</dl> + +<h2 id="Ver_también">Ver también</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Conocimiento práctico intermedio Web 1: Introducción a CSS (en Inglés)</a> </dt> + <dd>Un excelente curso de Mozilla foundation que explora y prueba muchas de las habilidades de las que se habla en el módulo de <em>Introducción al CSS</em>. Aprende acerca de como agregar estilo a los elementos HTML en una página web, selectores CSS, atributos, y valores.</dd> +</dl> diff --git a/files/es/learn/css/first_steps/qué_es_css/index.html b/files/es/learn/css/first_steps/qué_es_css/index.html new file mode 100644 index 0000000000..eb4f8e8a8a --- /dev/null +++ b/files/es/learn/css/first_steps/qué_es_css/index.html @@ -0,0 +1,127 @@ +--- +title: ¿Qué es el CSS? +slug: Learn/CSS/First_steps/Qué_es_CSS +tags: + - Beginner + - CSS + - Introduction to CSS + - Learn + - Modules + - Specifications + - Syntax +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary">Las hojas de estilo en cascada (<strong>{{Glossary("CSS")}}</strong>, cascading style sheets) permiten crear páginas web atractivas. Pero ¿cómo funcionan realmente? En este artículo explicaremos qué es el CSS con un ejemplo de sintaxis sencillo y describiremos algunos términos clave sobre este lenguaje.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">tener instalado el software básico</a>, conocimientos básicos de cómo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a> y nociones de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender qué es CSS.</td> + </tr> + </tbody> +</table> + +<p>En el módulo <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>, exponemos qué es el HTML y cómo se usa para definir documentos destinados a leerse en un navegador web. Los títulos se verán más grandes que el texto y los párrafos empezarán en una línea nueva y habrá un espacio entre ellos. Los enlaces aparecerán en un color diferente y subrayados para distinguirlos del resto del texto. Vienen predeterminados por el navegador y, en la práctica, son estilos muy básicos que el navegador aplica al HTML para asegurarse, básicamente, de que sean legibles incluso si el autor de la página no especifica un estilo explícito.</p> + +<p><img alt="Los estilos predeterminados utilizados por el navegador" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así. Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el navegador, que presentará para las etiquetas de marcado el diseño que cada uno desee.</p> + +<h2 id="¿Para_qué_sirve_el_CSS">¿Para qué sirve el CSS?</h2> + +<p>Como hemos mencionado, el CSS es un lenguaje informático que especifica cómo se presentan los documentos a los usuarios: cómo se diseñan, compaginan, etc.</p> + +<p>Un <strong>documento</strong> suele ser un archivo de texto estructurado con un lenguaje de marcado: {{Glossary("HTML")}} es el más común, pero también existen otros como {{Glossary("SVG")}} o {{Glossary("XML")}}.</p> + +<p><strong>Presentar</strong> un documento a un usuario significa convertirlo en un formulario que el público pueda utilizar. Los {{Glossary("Navegador", "navegadores")}}, como por ejemplo {{Glossary("Mozilla Firefox", "Firefox")}}, {{Glossary("Google Chrome", "Chrome")}} o {{Glossary("Microsoft Edge", "Edge")}}, están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Un navegador también recibe el nombre de {{Glossary("Agente de usuario", "agente de usuario")}}, que consiste en un programa informático que representa a una persona dentro del sistema. Los navegadores son el modelo principal de agente de usuario en el que pensamos cuando hablamos de CSS, pero no son el único. Hay otros documentos de usuario disponibles, como los que convierten documentos HTML y CSS en PDF para imprimir.</p> +</div> + +<p>El CSS se puede usar para estilos de texto muy básicos como, por ejemplo, cambiar el <a href="/es/docs/Web/CSS/color_value">color</a> y el <a href="/en-US/docs/Web/CSS/font-size">tamaño</a> de los encabezados y los enlaces. Se puede utilizar para crear un diseño, como podría ser <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">convertir una columna de texto en una composición</a> con un área de contenido principal y una barra lateral para información relacionada. Incluso se puede usar para crear efectos de <a href="/es/docs/Web/CSS/CSS_Animations">animación</a>. Echa un vistazo a los enlaces de este párrafo para ver ejemplos específicos.</p> + +<h2 id="Sintaxis_del_CSS">Sintaxis del CSS</h2> + +<p>El CSS es un lenguaje basado en reglas: cada usuario define las reglas que especifican los grupos de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado principal de mi página se muestre en letras grandes de color rojo».</p> + +<p>El código siguiente muestra una regla CSS muy simple que proporcionaría el estilo descrito en el párrafo anterior:</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>La regla se abre con un {{Glossary("CSS Selector", "selector")}}. Este <em>selecciona</em> el elemento HTML que vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno ({{htmlelement ("h1")}}).</p> + +<p>Luego tenemos un conjunto de llaves <code>{ }</code>. Entre estas habrá una o más <strong>declaraciones</strong>, que tomarán la forma de pares de <strong>propiedad</strong> y <strong>valor</strong>. Cada par especifica cada una de las propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.</p> + +<p>Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las {{Glossary("property/CSS", "propiedades")}} CSS admiten diferentes valores, dependiendo de qué propiedad se esté especificando. En el ejemplo anterior, tenemos la propiedad <code>color</code>, que puede tomar varios <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Color">valores de color</a>. También tenemos la propiedad de <code>font-size</code>, que puede tomar varias <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#N%C3%BAmeros_longitudes_y_porcentajes">unidades de tamaño</a> como valor.</p> + +<p>Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras otra.</p> + +<pre class="brush: css notranslate">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN proporcionan una forma rápida de buscar propiedades y sus valores en caso de olvidarlos o desear saber qué más se puede usar como valor.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Puedes encontrar enlaces a todas las páginas de las propiedades CSS (junto con otras características CSS) enumeradas en la <a href="/es/docs/Web/CSS/Referencia_CSS">referencia CSS</a> del proyecto MDN. Alternativamente, deberías acostumbrarte a buscar «mdn <em>css-feature-name</em>» en tu motor de búsqueda favorito siempre que necesites obtener más información sobre una función CSS. Por ejemplo, intenta buscar «mdn color» y «mdn font-size».</p> +</div> + +<h2 id="Módulos_CSS">Módulos CSS</h2> + +<p>Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se divide en <em>módulos</em>. Verás referencias a estos módulos a medida que explores en MDN y observarás que muchas de las páginas de documentación están organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un vistazo a la referencia MDN del módulo <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Fondos y bordes</a> para averiguar cuál es su propósito, qué otras propiedades y características diferentes contiene. También encontrarás enlaces a la <em>especificación CSS</em> que define la tecnología (ver más abajo).</p> + +<p>En esta fase, no debes preocuparte demasiado sobre cómo se estructura el CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo, sabes que es probable que cierta propiedad se encuentre entre otras similares y, por lo tanto, en la misma especificación. </p> + +<p>Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes pensar que tiene lógica que las propiedades <code><a href="/es/docs/Web/CSS/background-color">background-color</a></code> y <code><a href="/es/docs/Web/CSS/border-color">border-color</a></code> se definan en este módulo. Y llevas toda la razón.</p> + +<h3 id="Especificaciones_CSS">Especificaciones CSS</h3> + +<p>Todas las tecnologías de estándares web (HTML, CSS, JavaScript, etc.) se definen en extensos documentos denominados especificaciones, publicados por organizaciones de estándares (como {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} o {{glossary("Khronos")}}) que definen con precisión cómo se supone que deben comportarse esas tecnologías.</p> + +<p>El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Este grupo está compuesto por representantes de proveedores de navegadores y otras compañías interesadas en CSS. También hay otras personas, conocidas como <em>expertos invitados</em>, que actúan como voces independientes y no están vinculados a ninguna organización.</p> + +<p>El CSS Working Group desarrolla o especifica características nuevas del CSS. Algunas veces lo hacen porque un navegador en particular está interesado en alguna capacidad, otras porque los diseñadores y desarrolladores web piden una característica, y otras porque el grupo ha identificado un requisito. El CSS está en desarrollo constante y todos los días presenta nuevas características disponibles. Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en ese momento, aún debería poder utilizarse hoy en día!</p> + +<p>Como recién llegado al CSS, es probable que encuentres las especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen para implementar soporte de sus características en los agentes de usuario en que trabajan, no para que lo lean los desarrolladores web para comprender el CSS. Muchos desarrolladores experimentados preferirán consultar la documentación disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen y comprender la relación que hay entre el CSS que estás utilizando, el soporte del navegador (ver más abajo) y las especificaciones.</p> + +<h2 id="Soporte_del_navegador">Soporte del navegador</h2> + +<p>Una vez se ha especificado el CSS, solo es útil en el desarrollo de páginas web si uno o más navegadores lo han implementado. Esto significa que el código se ha escrito para convertir las instrucciones que se especifican en nuestro archivo CSS en algo que se pueda mostrar en pantalla. Veremos este proceso más en profundidad en el artículo <a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona el CSS</a>. Es inusual que todos los navegadores puedan implementar una misma característica al mismo tiempo, por lo que suele haber una brecha en la que se pueden usar algunas partes del CSS en algunos navegadores pero no en otros. Por este motivo, es útil poder verificar el estado de implementación. En cada una de las páginas de propiedades que hay en la MDN se puede ver el estado de la propiedad de interés, por lo que se puede saber si será posible utilizarla en un sitio web.</p> + +<p>Lo que sigue es el gráfico de datos de compatibilidad para la propiedad CSS <code><a href="/es/docs/Web/CSS/font-family">font-family</a></code>.</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="¿Qué_viene_ahora">¿Qué viene ahora?</h2> + +<p>Ahora que comprendes mínimamente qué es el CSS, pasemos a <a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Comenzar con CSS</a>, donde puedes empezar a escribir algo de CSS tú mismo.</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">¿Qué es el CSS?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Comenzar con CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Cómo se estructura el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Cómo funciona el CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Pon en práctica tus conocimientos nuevos</a></li> +</ol> diff --git a/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html new file mode 100644 index 0000000000..bff4f103bf --- /dev/null +++ b/files/es/learn/css/first_steps/usa_tu_nuevo_conocimiento/index.html @@ -0,0 +1,100 @@ +--- +title: Usa tu nuevo conocimiento +slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento +tags: + - Aprendizaje + - CSS + - Principiante +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">Con las cosas que has aprendido en las últimas lecciones, puedes darle formato a documentos de texto simple utilizando CSS para agregar tu propio estilo a ellos. Esta evaluación te da una posibilidad de hacer eso.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Antes de intentar esta evaluación, deberías haber trabajado a través del módulo de CSS básico, y también comprender HTML básico (estudia la <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Utilizar algún CSS y probar conocimiento recién adquirido.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_partida">Punto de partida</h2> + +<p>Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <code><head></code> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p> +</div> + +<h2 id="Trabajando_con_CSS">Trabajando con CSS</h2> + +<p>Los siguientes ejemplos muestran una biografía, que ha sido estilizada usando CSS. Las propiedades CSS que se han utilizado son las siguientes - cada una enlaza a su página de propiedades en MDN, que te entregará más ejemplos de su uso:</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>Se ha usado una mezcla de selectores, elementos de estilo como <code><h1></code> y <code><h2></code>, y también una clase para el título del trabajo.</p> + +<p>Usa CSS para cambiar el aspecto de esta biografía, cambiando los valores de las propiedades iniciales.</p> + +<ol> + <li>Coloca en rosado el nivel <code><h1></code>, usando el color CSS <code>hotpink</code>.</li> + <li>Da al encabezado un {{cssxref("border-bottom")}} de 10px con puntos (<code>dotted</code>), que use el color CSS <code>purple</code>.</li> + <li>Coloca en cursiva el <code><h2></code>.</li> + <li>Al <code>ul</code> utilizado para los detalles de contacto un {{cssxref("background-color")}} <code>#eeeeee</code>, y un {{cssxref("border")}} de <code>5px solid purple</code>. Usa algo de {{cssxref("padding")}} para empujar el texto lejos del borde.</li> + <li>Cambia los enlaces a verde cuando pase el cursor sobre ellos.</li> +</ol> + +<p>Deberías conseguir algo parecido a esta página:</p> + +<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> + +<p>Posteriormente intenta buscar algunas propiedades no mencionadas en esta página en la <a href="/en-US/docs/Web/CSS/Reference">referencia de CSS de MDN</a> y ¡arriésgate!.</p> + +<p>Recuerda que no existen respuestas equivocadas acá - En esta etapa en tu aprendizaje puedes tener un poco de diversión.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2> + +<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p> + +<ol> + <li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>.</li> + <li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir: + <ul> + <li>Un título descriptivo como "Requiero evaluacion para Primeros pasos en CSS".</li> + <li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li> + <li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li> + <li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li> + </ul> + </li> +</ol> + +<h2 id="¿Qué_sigue">¿Qué sigue?</h2> + +<p>Felicitaciones por completar este primer modulo!. Deberías tener un buen entendimiento general de CSS, y ser capaz de comprender bastante de los que está sucediendo en una hoja de estilo. En el módulo siguiente, <a href="/en-US/docs/Learn/CSS/Building_blocks">bloques de construccion CSS</a>, revisaremos en profundidad algunas áreas clave.</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ol> + <li><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS">¿Qué es CSS?</a></li> + <li><a href="/es/docs/Learn/CSS/First_steps/Comenzando_CSS">Empezando con CSS</a></li> + <li><a href="/es/docs/Learn/CSS/First_steps/Como_se_estructura_CSS">Cómo se estructura el CSS</a></li> + <li><a href="/es/docs/Learn/CSS/First_steps/Como_funciona_CSS">Cómo funciona CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Usa tu nuevo conocimiento</a></li> +</ol> diff --git a/files/es/learn/css/index.html b/files/es/learn/css/index.html new file mode 100644 index 0000000000..ce384edeb2 --- /dev/null +++ b/files/es/learn/css/index.html @@ -0,0 +1,63 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - CSS + - Codificación + - Depuración + - Necesidades + - Principiante + - Tema + - concreción + - longitud +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Las Hojas de estilo en cascada (del ingles <em>Cascading Stylesheets</em> {{glossary("CSS")}}) es la siguiente tecnología que aprenderemos después de {{glossary("HTML")}}. Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos.</p> + +<h2 id="Itinerario_de_aprendizaje">Itinerario de aprendizaje</h2> + +<p>Antes de empezar con CSS deberemos conocer los fundamentos de HTML. Podemos trabajar este contenido en <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">introducción a HTML</a> para posteriormente aprender:</p> + +<ul> + <li>CSS, comenzando por el módulo de Introducción a CSS</li> + <li><a href="/es/docs/Learn/HTML#Módulos">Módulos HTML</a> más avanzados</li> + <li><a href="/es/docs/Learn/JavaScript">JavaScript</a>, y cómo usarlo para añadir funcionalidad dinamica a las pagina web</li> +</ul> + +<p>Se recomienda aprender HTML y CSS al mismo tiempo, trabajando de forma conjunta ambas disciplinas. CSS aporta un valor añadido a HTML y no podrás aprender CSS sin controlar HTML.</p> + +<p>Antes de comenzar con este tema, deberemos tener conocimientos básicos sobre el uso de ordenadores y sobre el uso pasivo de la Web (navegar y consumir contenido). Es recomendable tener configurado un entorno de desarrollo como el detallado en <a href="/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">Instalación de software básico</a>, y saber crear y gestionar archivos como se detalla en <a href="/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">Manejando archivos</a> — ambos forman parte del módulo <a href="/es/docs/Learn/Getting_started_with_the_web">Primeros pasos en la Web</a> para principiantes.</p> + +<p>Se recomienda trabajar el módulo <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web">Primeros pasos en la Web</a> antes de entrar a este tema, aunque no es completamente necesario; gran parte de lo tratado en el artículo de CSS básico también se trata en el módulo de introducción a CSS, aunque con mucho más detalle.</p> + +<h2 id="Módulos">Módulos</h2> + +<p>Este tema contiene los siguientes módulos en el orden recomendado de aprendizaje. Recomendamos comenzar por el primero.</p> + +<dl> + <dt><a href="/es/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a></dt> + <dd>Este módulo explica los conceptos básicos sobre el funcionamiento de CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, organización en cascada y herencia, conceptos de encajonado básicos y depuración de CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Estilo del texto</a></dt> + <dd>Aquí veremos cómo aplicar estilos al texto, tipos de letra, negrita, cursiva, espaciado, interlineado y sombreado, entre otras funciones relativas al texto. Terminaremos el módulo aplicando tipos a nuestra página, configurando listas y enlaces.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Estilos por cajas</a></dt> + <dd>A continuación veremos la aplicación de estilos por cajas, fundamental en el diseño de páginas web. En este módulo analizaremos el modelo de cajas para después aprender a controlar el diseño de las cajas ajustando rellenos, marcos y márgenes, personalizando colores de fondo, imágenes y otras características, además de divertidas funcionalidades como el sombreado y los filtros sobre las cajas.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Diseño CSS</a></dt> + <dd>Llegados a este punto ya conocemos lo básico de CSS, como darle estilo al texto, y cómo dar estilo y manipular el contenido de las cajas. Es momento de ver cómo ubicar las cajas correctamente con respecto a la ventana de visualización y a otra. Hemos cubierto los requisitos necesarios para poder meternos de lleno en el diseño CSS, ver diferentes ajustes de visualización, metodos tradicionales de diseño con pivotes y posicionamiento, y nuevas herramientas de diseño como flexbox.</dd> + <dt>Diseño Adaptable (RBD Responsive Web Design)</dt> + <dd>Con la gran variedad de dispositivos capaces de navegar por la Web actualmente, el <a href="https://developer.mozilla.org/en-US/Apps/Progressive/Responsive">diseño web adaptable </a>(RWD) es una habilidad imprescindible para el diseño web. En este módulo veremos principios básicos y herramientas de RWD, como aplicar diferentes CSS a un documento dependiendo de las características del dispositivo como el ancho de la pantalla, la orientación y la resolución; veremos las tecnologías disponibles para mostrar videos e imágenes dependiendo de estas características.</dd> +</dl> + +<h2 id="Resolución_de_problemas_con_CSS">Resolución de problemas con CSS</h2> + +<p><a href="https://developer.mozilla.org/es/docs/Learn/CSS/S%C3%A1bercomo">Uso de CSS para resolver problemas comunes</a> proporciona vínculos a secciones que explican cómo usar CSS para resolver problemas comunes cuando se está creando una página web.</p> + +<div class="section"> +<h2 id="Ver_También">Ver También</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS en MDN</a></dt> + <dd>Principal entrada para la documentación de CSS en MDN, donde encontrarás documentación detallada de todas las funcionalidades del lenguaje CSS. ¿Quieres saber todos los valores posibles de una propiedad? Este es tu sitio.</dd> +</dl> +</div> diff --git a/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..b53db2df02 --- /dev/null +++ b/files/es/learn/css/introduction_to_css/fundamental_css_comprehension/index.html @@ -0,0 +1,117 @@ +--- +title: Comprensión de los fundamentos de CSS +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - CSS + - Estilo + - Evaluación + - Modelo de Caja + - Principiante + - Selectores + - Sintaxis + - comentários + - reglas +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +<div class="boxed translate-rendered"> +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">Has avanzado mucho en este módulo, debes sentirte orgulloso de haber llegado hasta el final. El último paso antes de terminar es intentar el examen del módulo — que incluye completar varios ejercicios para crear el último diseño — una tarjeta de presentación/de jugador/perfil de redes sociales.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Antes de intentar esta evaluación, debería haber revisado todos los artículos en este módulo.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Probar la comprensión de los fundamentos de la teoría, sintaxis y mecánica de CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Punto_de_Partida">Punto de Partida</h2> + +<p>Para comenzar esta evaluación, debes:</p> + +<ul> + <li>Ve y coge el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">archivo HTML del ejercicio</a>, y el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">archivo de imagen asociada</a>, y guárdalos en un nuevo directorio en tu ordenador local. Si quieres usar tu propio archivo de imagen y rellenar tu propio nombre, eres bienvenido - sólo asegúrate de que la imagen es cuadrada.</li> + <li>Coge el <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">archivo de texto de los recursos CSS</a> — este contiene un conjunto de selectores y conjuntos de reglas en estado puro que necesitarás estudiar y combinar para responder a parte de esta evaluación.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Alternativamente, se puede utilizar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para hacer la evaluación. Puede pegar el HTML y completar el CSS en uno de estos editores en línea, y usar <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">esta URL</a> para apuntar el elemento <code><img></code> al archivo de imagen. Si el editor en línea que estás usando no tiene un panel CSS separado, no dudes en ponerlo en un elemento <code><style></code> en el encabezado del documento.</p> +</div> + +<h2 id="Resumen_del_Proyecto">Resumen del Proyecto</h2> + +<p>Se le ha proporcionado un poco de HTML puro y una imagen, y necesitas escribir el CSS necesario para darle estilo a una pequeña tarjeta de presentación en línea, que tal vez pueda servir como una tarjeta de jugador o de perfil en redes sociales. Las siguientes secciones describen lo que debes hacer.</p> + +<p>Configuración básica:</p> + +<ul> + <li>En primer lugar, crea un nuevo archivo en el mismo directorio que tus archivos HTML y de imagen. Llámalo algo realmente imaginativo como <code>style.css</code>.</li> + <li>Vincula tu CSS a tu archivo HTML mediante un elemento <code><link></code>.</li> + <li>Las dos primeras reglas en el archivo de recursos CSS son tuyas, ¡GRATIS! Después de que hayas terminado de regocijarte de tu buena fortuna, cópialas y pégalas en la parte superior de tu nuevo archivo CSS. Úsalas como prueba para asegurarte de que tu CSS se aplica correctamente a tu HTML.</li> + <li> + <p>Sobre las dos reglas, agregue un comentario CSS con algún texto dentro para indicar que se trata de un conjunto de estilos generales para toda la página. "Estilos generales de la página" sería suficiente. También agrega tres comentarios más en la parte inferior del archivo CSS para indicar estilos específicos para la configuración del contenedor de la tarjeta, estilos específicos para el header y footer (encabezado y pie de página), y estilos específicos para el contenido principal de la tarjeta de presentación. De ahora en adelante, los estilos subsiguientes añadidos a la hoja de estilo deben organizarse en el lugar apropiado.</p> + </li> +</ul> + +<p>Encargandonos de los selectores y conjuntos de reglas proporcionados:</p> + +<ul> + <li>A continuación, nos gustaría que examinaras los cuatro selectores y calcularas la especificidad de cada uno. Escríbelas en algún lugar donde las puedas encontrar más tarde, como en un comentario en la parte superior de tu CSS.</li> + <li>Ahora es el momento de poner el selector correcto en el conjunto de reglas correcto! Tienes cuatro pares de selectores y reglas que coinciden en tus recursos de CSS. Hazlo ahora y agrégalos a tu archivo CSS. Necesitaras: + <ul> + <li>Asignar al contenedor principal de tarjetas un ancho/alto fijo (width/height), color de fondo sólido (background-color), borde (border) y radio de borde (border-radius), entre otras cosas.</li> + <li>Asigna al header un degradado (linear-gradient) de fondo que va de más oscuro a más claro, además de esquinas redondeadas que encajan con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.</li> + <li>Asigna al pie de página un degradado (linear-gradient) de fondo que vaya de más claro a más oscuro, además de esquinas redondeadas que encajen con las esquinas redondeadas establecidas en el contenedor principal de tarjetas.</li> + <li>Asigna a la imagen un float a la derecha para que se pegue al lado derecho del contenido principal de la tarjeta de presentación, y dale una altura máxima (max-height) del 100% (un truco inteligente que asegura que crecerá/encogerá para que se mantenga a la misma altura que el contenedor principal, sin importar a que altura se trasforme).</li> + </ul> + </li> + <li>¡Cuidado! Hay dos errores en los conjuntos de reglas proporcionados. Utilizando cualquier técnica que conozcas, localízalas y arréglalas antes de seguir adelante.</li> +</ul> + +<p>Nuevos conjuntos de reglas que necesitas escribir:</p> + +<ul> + <li>Escribe un conjunto de reglas que apunte tanto al header de la tarjeta como al footer de la misma, dándoles una altura total de 50px, (que incluye una altura de contenido de 30px y un padding de 10px en todos los lados). Pero expresalo en <code>em</code>s.</li> + <li>El margen por defecto aplicado a los elementos <code><h2></code> y <code><p></code> por el navegador interferirá con nuestro diseño, así que escribe una regla que apunte a todos estos elementos y establezca su margen en 0.</li> + <li>Para evitar que la imagen se derrame del contenido principal de la tarjeta de presentación (el elemento <code><article></code>), necesitamos darle una altura específica. Ajustar la altura del <code><article></code> a 120px, expresada en <code>em</code>s. También asigna un background-color negro semitransparente, resultando en un tono ligeramente más oscuro que deja que el color rojo del fondo brille un poco también.</li> + <li>Escribe un conjunto de reglas que le asigne al <code><h2></code> un font-size efectivo de 20px (pero expresado en <code>em</code>s) y una line-height (altura de línea) apropiada para colocarlo en el centro de la caja de contenido del header. Recuerde que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.</li> + <li>Escribe un conjunto de reglas que le asigne al <code><p></code> dentro del footer un font-size efectivo de 15px (pero expresado en <code>em</code>s) y una line-height apropiada para colocarlo en el centro de la caja de contenido del footer. Recuerda que la altura de la caja de contenido debe ser de 30px - esto te proporciona todos los números que necesitas para calcular la line-height.</li> + <li>Como último toque, asigna al párrafo dentro del <code><article></code> un padding apropiado para que su borde izquierdo se alinee con el <code><h2></code> y el párrafo del footer, y ajuste su color para que sea bastante claro y sea fácil de leer.</li> +</ul> + +<p>Otras cosas en las que pensar:</p> + +<ul> + <li>Obtendrás puntos adicionales si escribes tu CSS para una legibilidad máxima, con una declaración separada en cada línea..</li> + <li>Deberás incluir <code>.card</code> al principio de la cadena de selección en todas tus reglas, para que estas reglas no interfieran con el estilo de cualquier otro elemento si la tarjeta de presentación se pusiera en una página con un montón de otro contenido.</li> +</ul> + +<h2 id="Consejos_y_Sugerencias">Consejos y Sugerencias</h2> + +<ul> + <li>No necesitas editar el HTML de ninguna manera, excepto para aplicar el CSS a tu HTML.</li> + <li>Cuando intentes calcular el valor <code>em</code> que necesita para representar una cierta longitud de píxel, piensa en el tamaño de fuente base que tiene el elemento raíz (<code><html></code>) , y por el que necesita multiplicarse para obtener el valor deseado. Eso te dará tu valor, al menos en un caso sencillo como este.</li> +</ul> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>La siguiente captura de pantalla muestra un ejemplo de cómo debe ser el diseño terminado:</p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<p> </p> + +<h2 id="Evaluación">Evaluación</h2> + +<p>Si estás siguiendo esta evaluación como parte de un curso organizado, deberías ser capaz de entregar tu trabajo a tu profesor/mentor para que lo califique. Si eres autodidacta, entonces puedes obtener la guía de puntuación fácilmente preguntando en el hilo del <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Discurso del Área de Aprendizaje</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Haz el ejercicio primero - ¡No hay nada que ganar haciendo trampa!</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> +</div> diff --git a/files/es/learn/css/styling_text/fuentes_web/index.html b/files/es/learn/css/styling_text/fuentes_web/index.html new file mode 100644 index 0000000000..7bfa162217 --- /dev/null +++ b/files/es/learn/css/styling_text/fuentes_web/index.html @@ -0,0 +1,197 @@ +--- +title: Fuentes web +slug: Learn/CSS/Styling_text/Fuentes_web +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En el primer artículo del módulo, exploramos las características básicas del CSS disponibles para aplicar estilos a tipos de letra y al texto. En este artículo vamos a ir más lejos: exploraremos en detalle las tipografías web, que permiten que te descargues tipos de letra personalizados junto con tu página web para lograr un estilo de texto más variado y personalizado.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>) y de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">texto CSS y los fundamentos de la fuente</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a aplicar tipos de letra a una página web, ya sea desde un servicio de terceros o desde tu código.</td> + </tr> + </tbody> +</table> + +<h2 id="Resumen_de_las_familias_de_tipos_de_letra">Resumen de las familias de tipos de letra</h2> + +<p>Como observamos en el artículo <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Texto y tipos de letra</a>, puedes controlar los tipos de letra que aplicas a tu HTML con la propiedad {{cssxref ("font-family")}}. Este atributo toma uno o más nombres de familia de tipos de letra y el navegador recorre esta lista hasta que encuentra un tipo de letra disponible en el sistema en el que se ejecuta:</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>Este sistema funciona bien, pero las opciones de tipo de letra tradicionales de los desarrolladores web eran limitadas. Solo hay un puñado de tipos de letra que puedes garantizar que están disponibles en todos los sistemas comunes: las llamadas <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals#Familia_de_tipos_de_letras">fuentes seguras para la web</a>. Puedes usar la lista de tipos de letra para especificar cuáles prefieres, seguido de alternativas seguras para la web y del tipo de letra predeterminado del sistema. El problema es que esto añade trabajo extra en términos de pruebas para asegurarte de que tus diseños se ven bien con cada tipo de letra, etc.</p> + +<h2 id="Tipografías_web">Tipografías web</h2> + +<p>Hay una alternativa, sin embargo, que funciona muy bien hasta con versiones posteriores a la versión 6 de Internet Explorer. Las tipografías web son una función del CSS que te permite especificar los archivos de tipo de letra que se van a descargar junto con tu sitio web a medida que el usuario acceda a ellos, lo que significa que cualquier navegador que admita tipografías web puede disponer de los tipos de letra que especificas. ¡Increíble! Observa a continuación la sintaxis que se necesita.</p> + +<p>En primer lugar, tienes un bloque {{cssxref ("@font-face")}} al comienzo del CSS, que especifica los archivos de los tipos de letra que quieres que se descarguen:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.woff"); +}</pre> + +<p>A continuación, puedes usar el nombre de la familia de tipos de letra especificado en <code>@font-face</code> para aplicar tu tipo de letra personalizado a cualquier elemento que desees:</p> + +<pre class="brush: css notranslate">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>La sintaxis es un poco más compleja; más adelante la veremos más detalladamente.</p> + +<p>Hay dos cosas importantes a tener en cuenta acerca de las tipografías web:</p> + +<ol> + <li>Los navegadores admiten diferentes formatos de tipos de letra, por lo que necesitarás más de un formato de tipos de letra para conseguir una compatibilidad decente entre navegadores. Por ejemplo, la mayoría de los navegadores modernos admiten WOFF/WOFF2 (Web Open Font Format, versiones 1 y 2), el formato más eficiente disponible. Pero las versiones antiguas de Internet Explorer solo admiten tipos de letra con formato EOT (Embedded Open Type) y es posible que debas incluir una versión SVG del tipo de letra para soportar versiones antiguas de navegadores iPhone y Android. A continuación te mostraremos cómo generar el código necesario.</li> + <li>Generalmente las fuentes no son de uso gratuito. Debes pagar por ellas y/o respetar otras condiciones de licencia, como acreditar al creador del tipo de letra en el código (o en tu sitio web). Los tipos de letra no deben robarse, ni debes utilizarlos sin otorgar a su creador el crédito apropiado.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: ¡Los tipos de letra seguros para web como tecnología han sido compatibles con Internet Explorer desde su versión 4!</p> +</div> + +<h2 id="Aprendizaje_activo_Un_ejemplo_de_tipo_de_letra_seguro_para_web">Aprendizaje activo: Un ejemplo de tipo de letra seguro para web</h2> + +<p>Con esto en mente, vamos a construir un ejemplo básico de uso de un tipo de letra seguro para web a partir de los principios básicos. Es difícil hacer un ejemplo de demostración de este aspecto con un ejemplo en vivo incrustado, por lo tanto, nos gustaría que siguieses los pasos que se detallan en las secciones siguientes para que te hagas una idea de cómo funciona el proceso.</p> + +<p>Como punto de partida hay que utilizar los archivos <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> a los que añadir tu código (véase el <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ejemplo en vivo</a>). Haz una copia de estos archivos en un directorio nuevo de tu equipo. En el archivo <code>web-font-start.css</code>, encontrarás un poco de CSS para trabajar con el aspecto y los tipos de letra básicos del ejemplo.</p> + +<h3 id="Encontrar_tipos_de_letra">Encontrar tipos de letra</h3> + +<p>Para este ejemplo, utilizaremos dos tipografías web: una para los títulos de encabezado y otra para el texto base. Para empezar, hay que encontrar los archivos que contienen el tipo de letra. Los tipos de letra se crean en estudios de diseño y se guardan en diversos formatos de archivo. En general, hay tres tipos de sitios donde puedes obtener fuentes:</p> + +<ul> + <li>Un distribuidor gratuito de tipos de letra: Es un sitio web que pone a disposición tipos de letra para descargar de forma gratuita (aunque puede haber algunas condiciones de licencia, como la acreditación del creador del tipo de letra). Algunos ejemplos de sitios web donde puedes encontrar tipos de letra gratis son <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> y <a href="https://everythingfonts.com/">Everything Fonts</a>.</li> + <li>Un distribuidor de fuentes de pago: En este sitio web puedes encontrar tipos de letra a cambio de un precio, dos ejemplos son <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. También puedes comprar tipos de letra directamente de estudios de diseño, por ejemplo, <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, o <a href="http://www.exljbris.com/">Exljbris</a>.</li> + <li>Un servicio de tipos de letra en línea: Es un sitio que guarda y te sirve los tipos de letra, lo que te facilita todo el proceso. Consulta la sección {{anch ("Los servicios de tipos de letra en línea")}} para obtener más información.</li> +</ul> + +<p>Vamos a ver algunos tipos de letra. Ve a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> y elige dos tipos de letra: uno que te resulte agradable e interesante para los títulos (quizá una buena tipografía de tipo Display o Slab Serif), y otro un poco menos llamativo y más legible para los párrafos. Cuando encuentres los tipos de letra, pulsa el botón de descarga y guarda el archivo en el mismo directorio que los archivos HTML y CSS que guardaste anteriormente. No importa si son TTF (True Type Fonts) u OTF (Open Type Fonts).</p> + +<p>En cada caso, descomprime el paquete de tipos de letra (las tipografías web generalmente se distribuyen en archivos ZIP que contienen los archivos con el tipo de letra y la información de la licencia). En el paquete puede haber más de un archivo con tipos de letra: algunos tipos de letra se distribuyen por familias, con diferentes variantes disponibles, por ejemplo: <em>thin</em>, <em>medium</em>, <em>bold</em>, <em>italic</em>, <em>thin italic</em>, etc. Para este ejemplo, solo queremos que te quedes con un solo archivo de fuente para cada opción.</p> + +<div class="note"> +<p><strong>Nota</strong>: En la sección «Encontrar tipos de letra» en la columna de la derecha, puedes hacer clic en las diferentes etiquetas y clasificaciones para filtrar las opciones.</p> +</div> + +<h3 id="Generar_el_código">Generar el código</h3> + +<p>Ahora deberás generar el código que necesitas (y aplicar el estilo al tipo de letra). Para cada tipo de letra, sigue estos pasos:</p> + +<ol> + <li>Asegúrate de cumplir con todos los requisitos de la licencia, sobre todo si vas a usarlo en un proyecto comercial y/o en una web.</li> + <li>Ve a <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator </a>de Fontsquirrel.</li> + <li>Sube tus dos archivos de tipo de letra con el botón <em>Cargar Fuentes</em>.</li> + <li>Marca la casilla de verificación con el texto «Sí, las fuentes que elijo pueden utilizarse legalmente para una página web».</li> + <li>Haz clic en <em>Descarga tu paquete</em>.</li> +</ol> + +<p>Una vez que el generador haya finalizado el procesamiento, deberías obtener un archivo ZIP para descargar; guárdalo en el mismo directorio que tus archivos HTML y CSS.</p> + +<h3 id="El_código_de_tu_ejemplo_de_demostración">El código de tu ejemplo de demostración</h3> + +<p>En este punto, descomprime el paquete con los tipos de letra web que acabas de generar. En el directorio descomprimido verás tres elementos útiles:</p> + +<ul> + <li>Las distintas versiones de cada tipo de letra, por ejemplo: <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>, etc.; los tipos de letra exactos proporcionados se actualizarán con el tiempo a medida que cambien los requisitos técnicos del navegador. Como se ya hemos dicho, se necesita más de un tipo de letra para garantizar la compatibilidad entre navegadores: esta es la forma en que Fontsquirrel se asegura de que tengas todo lo que necesitas.</li> + <li>Un archivo HTML con un ejemplo de demostración para cada tipo de letra: cárgalos en tu navegador para ver cómo se ve la fuente en diferentes contextos de uso.</li> + <li>Un archivo <code>stylesheet.css</code>, que contiene el código @font-face que necesitas.</li> +</ul> + +<p>Para implementar estos tipos de letra en tu ejemplo de demostración, sigue estos pasos:</p> + +<ol> + <li>Cambia el nombre del directorio descomprimido a algo fácil y simple, como <code>fonts</code>.</li> + <li>Abre el archivo <code>stylesheet.css</code> y copia los dos bloques <code>@font-face</code> incluidos en tu archivo <code>web-font-start.css</code>. Debes ponerlos en la parte superior, antes de cualquier elemento CSS, ya que los tipos de letra deben importarse antes que los puedas utilizar en tu sitio web.</li> + <li>Cada una de las funciones <code>url()</code> apunta a un archivo de tipo de letra que tenemos que importar a nuestro CSS. Necesitamos asegurarnos de que las rutas a los archivos son correctas, así que añade <code>fonts/</code> al inicio de cada ruta (ajusta la ruta como sea necesario).</li> + <li>Ahora puedes usar estos tipos de letra en tu lista de tipos de letra, al igual que cualquier tipo de letra seguro o predeterminado del sistema. Por ejemplo: + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>Con tu ejemplo de demostración, deberías obtener una página con unos agradables tipos de letra. Debido a que los tipos de letra se crean en diferentes tamaños, es posible que tengas que ajustar el tamaño, el espaciado, etc., para conseguir una apariencia más ordenada.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si tienes problemas para lograr que esto funcione, no dudes en comparar tu versión con nuestros archivos terminados, consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">ejecuta el ejemplo terminado en vivo</a>).</p> +</div> + +<h2 id="Los_servicios_de_tipos_de_letra_en_línea">Los servicios de tipos de letra en línea</h2> + +<p>Los servicios de tipos de letra en línea en general guardan tipos de letra y los proporcionan a los usuarios, por lo que no tienes que preocuparte por escribir el código <code>@font-face</code>, solo necesitas insertar una o dos sencillas líneas de código en tu sitio web para que todo funcione. Los ejemplos incluyen <a href="https://fonts.adobe.com/">Adobe Fonts</a> y <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La mayoría de estos servicios se basan en suscripciones de pago, con la excepción notable de <a href="https://www.google.com/fonts">Google Fonts</a>, un servicio gratuito y muy útil, sobre todo para trabajos de prueba rápida y escritura de ejemplos de demostración.</p> + +<p>La mayoría de estos servicios son fáciles de usar, por lo que no vamos a exponerlos en gran detalle. Vamos a echar un vistazo rápido a las fuentes de Google, para que te hagas una idea. De nuevo, usa copias de <code>web-font-start.html</code> y <code>web-font-start.css</code> como punto de partida.</p> + +<ol> + <li>Ve a <a href="https://www.google.com/fonts">Google Fonts</a>.</li> + <li>Usa los filtros del lado izquierdo para indicar los tipos de letra que deseas escoger y elige un par de tipos de letra que te gusten.</li> + <li>Para seleccionar una familia de tipos de letra, pulsa el botón ⊕ que encontrarás al lado.</li> + <li>Cuando hayas elegido las familias de tipos de letra, pulsa la barra <em>[número] familias seleccionadas</em> que encontrarás en la parte inferior de la página.</li> + <li>En la pantalla resultante, primero debes copiar la línea de código HTML que se muestra y pegarla en el encabezado de tu archivo HTML. Ponlo encima del elemento {{HTMLElement("link")}}, de modo que el tipo de letra se importe correctamente antes de intentar utilizarlo en tu CSS.</li> + <li>Luego, debes copiar las declaraciones CSS enumeradas en tu CSS según corresponda para aplicar los tipos de letra personalizados a tu HTML.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Puedes encontrar una versión completa en <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> y <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si necesitas comparar tu trabajo con el nuestro (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consúltalo en vivo</a>).</p> +</div> + +<h2 id="font-face_con_más_detalle">@font-face con más detalle</h2> + +<p>Vamos a explorar que la sintaxis correspondiente a <code>@font-face</code> que te ha generado Fontsquirrel. Uno de los bloques se verá así:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p>Esto se conoce como «sintaxis @font-face a prueba de balas» desde una publicación de Paul Irish, en los tiempos en que <code><code>@font-face</code></code> empezaba a popularizarse (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Vamos a ver qué hace:</p> + +<ul> + <li><code><code><code>font-family</code></code></code>: Esta línea especifica el nombre con el que vas a referirte a la fuente. Puedes poner el que quieras, siempre y cuando lo uses de manera coherente a lo largo de tu CSS.</li> + <li><code><code><code>src</code></code></code>: Estas líneas especifican las rutas de acceso a los archivos de tipos de letra para que puedas importarlos a tu CSS (la parte <code><code><code>URL</code></code></code>) y el formato de cada archivo de tipo de letra (la parte <code><code><code>format</code></code></code>). La última parte en cada caso es opcional, pero es útil declararla porque permite que los navegadores encuentren más rápido un tipo de letra que puedan usar. Se pueden enumerar varias declaraciones, separadas por comas: el navegador buscará por ellas y usará la primera que encuentre. Por lo tanto, es mejor poner formatos nuevos y mejores, como WOFF2 y formatos más antiguos, no tan buenos, como TTF. La única excepción son las fuentes EOT: se colocan primero para corregir un par de errores en versiones anteriores de Internet Explorer, por lo que intentará usar lo primero que encuentre, incluso si realmente no puede usar la fuente.</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Estas líneas especifican qué grueso tiene el tipo de letra y si se muestra en cursiva o no. Si vas a importar diversos grosores del mismo tipo de letra, puedes especificar cuál es su grueso/estilo y luego usar valores de {{cssxref("font-weight")}} / {{cssxref("font-style")}} diferentes para elegir entre ellos, en lugar de tener que llamar a todos los diferentes miembros de la familia de tipos de letra con nombres distintos. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@tip-face tip: define font-weight and font-stile to keep your CSS simple</a> de Roger Johansson muestra qué hacer con más detalle.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: También puedes especificar los valores particulares {{cssxref ("font-variant")}} y {{cssxref ("font-stretch")}} para tus tipos de letra seguros para web. En los navegadores más nuevos también puedes especificar un valor {{cssxref ("unicode-range")}}, que es un rango de caracteres específicos que debes usar aparte del tipo de letra seguro para web en los navegadores que incluyan esta opción. Solo se descargaran los caracteres especificados y te ahorrarás descargas innecesarias. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> de Drew McLellan proporciona algunas ideas útiles sobre cómo hacer uso de todo esto.</p> +</div> + +<h2 id="Tipos_de_letra_variables">Tipos de letra variables</h2> + +<p>Los navegadores disponen hoy de una tecnología de tipos de letra reciente llamada tipos de letra variables: se trata de tipos de letra que permiten incorporar muchas variaciones diferentes de un tipo de letra en un solo archivo, en lugar de tener un archivo separado para cada ancho, grosor o estilo. Es demasiado avanzado para nuestro curso para principiantes, pero si te apetece avanzar y echarles un vistazo, lee nuestra <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">guía de tipos de letra variables</a>.</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Ahora que has leído nuestros artículos sobre nociones de aplicación de estilo al texto, es hora de evaluar cuánto has retenido del módulo a partir de la creación de una composición tipográfica de una página de inicio de una escuela comunitaria.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Texto fundamental y estilo de fuente</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Dar estilo a las listas</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Dar estilo a los enlaces</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Las fuentes web</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li> +</ul> diff --git a/files/es/learn/css/styling_text/fundamentals/index.html b/files/es/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..a1fa747e27 --- /dev/null +++ b/files/es/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,732 @@ +--- +title: Fundamentos de texto y fuentes tipográficas +slug: Learn/CSS/Styling_text/Fundamentals +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. </span> Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conceptos básicos de HTML (estudio de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conceptos básicos de CSS (estudio de <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.</td> + </tr> + </tbody> +</table> + +<h2 id="¿Qué_implica_aplicar_estilo_a_texto_en_CSS">¿Qué implica aplicar estilo a texto en CSS?</h2> + +<p>Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de caja</a> antes de continuar.</p> +</div> + +<p>Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:</p> + +<ul> + <li><strong>Estilos del tipo de letra</strong>: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).</li> + <li><strong>Estilos de disposición del texto</strong>: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como <a href="/es/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera letra del texto de un elemento), <a href="/es/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línea del texto de un elemento), o <a href="/es/docs/Web/CSS/::selection">::selection</a> (selecciona el texto que está resaltado por el cursor).</p> +</div> + +<h2 id="Tipos_de_letra">Tipos de letra</h2> + +<p>Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:</p> + +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p>Puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">ejemplo completo en Github</a> (consulta también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el código fuente</a>.)</p> + +<h3 id="Color">Color</h3> + +<p>La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).</p> + +<p>La propiedad <code>color</code> puede admitir cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color CSS</a>, por ejemplo:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="Familia_de_tipos_de_letras">Familia de tipos de letras</h3> + +<p>Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.</p> + +<h4 id="Tipos_de_letra_seguros_para_la_web">Tipos de letra seguros para la web</h4> + +<p>Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados <em>tipos de letra seguros para la web</em>, o <em><strong>web safe fonts</strong></em>.</p> + +<p>La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).</p> + +<p>La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa <em><a href="https://es.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the web</a></em> de Microsoft, de finales de la década de 1990 y principios de la del 2000):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nombre</th> + <th scope="col" style="white-space: nowrap;">Tipo de letra genérico</th> + <th scope="col">Observaciones</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>A menudo se considera una buena práctica añadir también <em>Helvética</em> como opción preferida a <em>Arial</em> porque, aunque tienen casi el mismo aspecto y <em>Arial</em> está más ampliamente disponible, se considera que <em>Helvética</em> tiene una forma más agradable.</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Courier New</em> llamado <em>Courier</em>. Se considera una buena práctica usar ambos, con <em>Courier New</em> como la opción preferida.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Times New Roman</em> llamado <em>Times</em>. Se considera una buena práctica usar ambos, con <em>Times New Roman</em> como la opción preferida.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Entre otros recursos, el sitio <a href="http://www.cssfontstack.com/">cssfontstack.com</a> mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: <strong>web fonts</strong>. Esto es un poco más complejo, y lo vamos a exponer más adelante en un <a href="/es/docs/Learn/CSS/Styling_text/Fuentes_web">artículo independiente</a> del módulo.</p> +</div> + +<h4 id="Fuentes_predeterminadas">Fuentes predeterminadas</h4> + +<p>CSS define cinco nombres genéricos para los tipos de letra <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> y <code>fantasy</code>. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el <em>peor escenario posible</em>, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. <code>serif</code>, <code>sans-serif</code> y <code>monospace</code> son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, <code>cursive</code> y <code>fantasy</code> son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.</p> + +<p>Los cinco nombres se definen de la manera siguiente:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nombre</th> + <th scope="col">Definición</th> + <th scope="col">Ejemplo</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>Tipos de letra que tienen <em><a href="https://es.wikipedia.org/wiki/Gracia_(tipograf%C3%ADa)">serifas</a></em> (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)</td> + <td><span style="font-family: serif;">Mi gran elefante rojo</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>Tipos de letra que carecen de <em>serifas</em>.</td> + <td><span style="font-family: sans-serif;">Mi gran elefante rojo</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>Tipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.</td> + <td><span style="font-family: monospace;">Mi gran elefante rojo</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Tipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.</td> + <td><span style="font-family: cursive;">Mi gran elefante rojo</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>Tipos de letra que pensados para ser decorativos.</td> + <td><span style="font-family: fantasy;">Mi gran elefante rojo</span></td> + </tr> + </tbody> +</table> + +<h4 id="Listas_de_tipos_de_letra">Listas de tipos de letra</h4> + +<p>Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un <strong>lista de tipos de letra</strong> para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de <code>font-family</code>, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.</p> + +<p>Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra <em>serif</em> por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra <em>sans-serif</em>!</p> + +<div class="note"> +<p><strong>Nota</strong>: Los nombres de los tipos de letra que están constituidos por más de una palabra (como <code>Trebuchet MS</code> ) han de ponerse entre comillas, por ejemplo <code>"Trebuchet MS"</code>.</p> +</div> + +<h4 id="Un_ejemplo_con_font-family">Un ejemplo con font-family</h4> + +<p>Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>Esto nos da el resultado siguiente:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}</p> + +<h3 id="Tamaño_de_la_letra">Tamaño de la letra</h3> + +<p>En el artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Unidades y valores de CSS</a> de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">porcentajes</a>). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:</p> + +<ul> + <li>Unidades <code>px</code> (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación.</li> + <li>Unidades <code>em</code>: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades <code>em</code> para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades <code>em</code>, lo que facilita su mantenimiento.</li> + <li>Unidades <code>rem</code>: Funcionan igual que las unidades <code>em</code>, excepto que 1<code>rem</code> equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad <code>rem</code>.</li> +</ul> + +<p>La propiedad <code>font-size</code> de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad <code>font-size</code> se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.</p> + +<p>Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de <code>1.5em</code> (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <code><article></code> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad <code>em</code> deberías usar?</p> + +<pre class="brush: html notranslate"><!-- El tamaño de letra base del documento es 16px --> +<article> <!-- Si mi tamaño de letra es 1.5em --> + <p>Mi párrafo</p> <!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? --> +</article></pre> + +<p>Necesitarías establecer el valor en unidades <code>em</code> de 20/24, es decir, <code>0.83333333 em</code>. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades <code>rem</code> donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.</p> + +<h4 id="Un_ejemplo_sencillo_de_definición_de_tamaños">Un ejemplo sencillo de definición de tamaños</h4> + +<p>Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (<code>font-size</code>) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (<code>font-size</code>) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.</p> + +<p>Nuestro nuevo resultado es:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}</p> + +<h3 id="Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto">Estilo y cuerpo del tipo de letra, efectos y decoración del texto</h3> + +<p>El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:</p> + +<ul> + <li>{{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón): + <ul> + <li><code>normal</code>: Pone el texto en tipo de letra normal (desactiva la cursiva).</li> + <li><code>italic</code>: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo <code>oblique</code> en su lugar.</li> + <li><code>oblique</code>: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal.</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos <code>normal</code> y <code>bold</code>: + <ul> + <li><code>normal</code>, <code>bold</code>: Grueso del tipo de letra normal y <strong style="font-weight: bold;">negrita</strong></li> + <li><code>lighter</code>, <code>bolder</code>: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre.</li> + <li><code>100</code>–<code>900</code>: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario.</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen: + <ul> + <li><code>none</code>: Impide cualquier transformación.</li> + <li><code>uppercase</code>: Transforma TODO EL TEXTO A MAYÚSCULAS.</li> + <li><code>lowercase</code>: Transforma todo el texto a minúsculas.</li> + <li><code>capitalize</code>: Transforma <span style="text-transform: capitalize;">Las Letras Iniciales De Cada Palabra A Mayúscula</span>.</li> + <li><code>full-width</code>: Transforma todos los caracteres para cada uno quede <span style="text-transform: full-width;">dentro de una caja de ancho fijo</span>, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.)</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son: + <ul> + <li><code>none</code>: Desactiva cualquier decoración de texto que presente.</li> + <li><code>underline</code>: <u>Subraya el texto</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Proporciona al texto una línea superpuesta</span>.</li> + <li><code>line-through</code>: Coloca un <s style="text-decoration: line-through;">tachado sobre el texto</s>.</li> + </ul> + Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}</p> + +<h3 id="Textos_sombreados">Textos sombreados</h3> + +<p>Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:</p> + +<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red;</pre> + +<p>Las cuatro propiedades son las siguientes:</p> + +<ol> + <li>El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone CSS, pero lo más habitual es usar <code>px</code>. Es un valor obligatorio.</li> + <li>El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.</li> + <li>El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone el CSS.</li> + <li>El color de base de la sombra, que admite cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color de que dispone CSS</a>. Si no se incluye este valor, el valor predeterminado es <code>negro</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo <code>-1px -1px</code>, mueven la sombrea hacia la izquierda o hacia arriba.</p> +</div> + +<h4 id="Sombras_múltiples">Sombras múltiples</h4> + +<p>Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo <em>Tommy The Cat</em>, obtenemos esto:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Puedes ver más ejemplos interesantes del uso de <code>text-shadow</code> en el artículo de <em>Sitepoint</em> <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="Diseño_del_texto">Diseño del texto</h2> + +<p>Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.</p> + +<h3 id="Alineación_del_texto">Alineación del texto</h3> + +<p>La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:</p> + +<ul> + <li><code>left</code>: Alinea el texto por la izquierda.</li> + <li><code>right</code>: Alinea el texto por la derecha.</li> + <li><code>center</code>: Centra el texto.</li> + <li><code>justify</code>: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas.</li> +</ul> + +<p>Si aplicamos <code>text-align: center;</code> al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}</p> + +<h3 id="Interlineado">Interlineado</h3> + +<p>La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (<code>line-height</code>). El texto del cuerpo (<code>body</code>) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:</p> + +<pre class="brush: css notranslate">line-height: 1.5;</pre> + +<p>Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Interlineado', '100%', 250) }}</p> + +<h3 id="Espacio_entre_letras_y_espacio_entre_palabras">Espacio entre letras y espacio entre palabras</h3> + +<p>Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>.</p> + +<p>Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>y obtendremos:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>Well I remember it as though it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}</p> + +<h3 id="Otras_propiedades_interesantes">Otras propiedades interesantes</h3> + +<p>Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:</p> + +<p>Aplicación de estilos a tipos de letra:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra.</li> + <li>{{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra.</li> + <li>{{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li> + <li>{{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado.</li> + <li>{{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas.</li> + <li>{{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino.</li> + <li>{{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto.</li> + <li>{{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales.</li> + <li>{{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice.</li> + <li>{{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra.</li> + <li>{{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado.</li> + <li>{{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor <code>underline</code> de la propiedad <code>text-decoration-line</code>.</li> + <li>{{cssxref("text-rendering")}}: Intenta optimizar la representación del texto.</li> +</ul> + +<p>Estilos de disposición de los textos</p> + +<ul> + <li>{{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.</li> + <li>{{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda.</li> + <li>{{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento.</li> + <li>{{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea.</li> + <li>{{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto).</li> + <li>{{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos.</li> + <li>{{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos.</li> + <li>{{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado.</li> + <li>{{cssxref("text-orientation")}}: Define la orientación del texto en una línea.</li> + <li>{{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido.</li> + <li>{{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes.</li> +</ul> + +<h2 id="Propiedades_abreviadas_para_los_tipos_de_letra">Propiedades abreviadas para los tipos de letra</h2> + +<p>Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p> + +<p>De entre todas estas propiedades, solo <code>font-size</code> y <code>font-family</code> son obligatorias al usar la propiedad abreviada de <code>font</code>.</p> + +<p>Se debe colocar una barra inclinada (<em>slash</em>) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.</p> + +<p>Un ejemplo completo se vería así:</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Aprendizaje_activo_Jugar_a_aplicar_estilos">Aprendizaje activo: Jugar a aplicar estilos</h2> + +<p>En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.</p> + +<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +const cssInput = document.querySelector(".css-input"); +const reset = document.getElementById("reset"); +let htmlCode = htmlInput.value; +let cssCode = cssInput.value; +const output = document.querySelector(".output"); + +const styleElem = document.createElement('style'); +const headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Resumen">Resumen</h2> + +<p>Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Aplicar estilo al texto base y tipos de letra</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicación de estilo a listas</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicación de estilo a enlaces</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li> +</ul> diff --git a/files/es/learn/css/styling_text/index.html b/files/es/learn/css/styling_text/index.html new file mode 100644 index 0000000000..a87012ec5c --- /dev/null +++ b/files/es/learn/css/styling_text/index.html @@ -0,0 +1,57 @@ +--- +title: Estilo de texto +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Con los conceptos básicos del lenguaje CSS cubiertos, el siguiente tema de CSS para concentrarse es estilizar texto — una de las cosas más comunes que hará con CSS. Aquí observamos los fundamentos para estilizar texto, incluyendo la configuración de fuente, negrita, cursiva, linea y espacios entre letras, sombras paralelas y otras funciones de texto. Completamos el módulo observando la aplicación de fuentes personalizadas en su página, y el diseño de listas y enlaces.</p> + +<h2 id="Requisitos_previos">Requisitos previos</h2> + +<p>Antes de iniciar este módulo, ya debe estár familizarizado con HTML, como se explica en el módulo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducción a HTML</a>, y sentirse cómodo con los fundamentos de CSS, como se explica en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducción a CSS</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si está trabajando en una computadora/tableta/u otro dispositivo donde no tenga la capacidad de crear sus propios archivos, puede probar (la mayoría) de los ejemplos de código en un programa de codificación en línea como <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guías">Guías</h2> + +<p>Este módulo contiene los siguientes artículos, los cuales le enseñarán todos los elementos esenciales detras del diseño de contenido de texto HTML.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Texto fundamental y estilo de fuente</a></dt> + <dd>En este artículo iremos a través de todos los aspectos básicos del estilo de texto/fuente en detalle, incluyendo configuraciones del peso de la fuente, la familia y el estilo, taquigrafía de fuente, alineación de texto y otros efectos, línea y espaciado de letras.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilos de listas</a></dt> + <dd>Las listas, en su mayor parte, se comportan como cualquier otro texto, pero hay algunas propiedades de CSS específicas para las listas que debe conocer, y algunas de las mejores prácticas para tener en cuenta. Este artículo explica todo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilos de enlaces</a></dt> + <dd>Al diseñar enlaces, es importante comprender cómo hacer uso de pseudo-clases para diseñar estados de enlaces de manera efectiva, y cómo diseñar enlaces para su uso en características de interfaces variadas comunes tales como menús de navegación y pestañas. Veremos todos estos temas en este artículo.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Fuentes web</a></dt> + <dd>Aquí exploraremos las fuentes web en detalle — estas permiten descargar fuentes personalizadas junto con su página web, para permitir un estilo de texto más variado y personalizado.</dd> +</dl> + +<h2 id="Evaluaciones">Evaluaciones</h2> + +<p>Las siguientes evaluaciones pondrán a prueba su comprensión de las técnicas del diseño de texto cubiertas en las guías anteriores.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribiendo una página de inicio para la comunidad de la escuela</a></dt> + <dd>En esta evaluación, pondremos a prueba su comprensión del estilo del texto haciendo que redacte el texto de la página principal de la escuela comunitaria.</dd> +</dl> diff --git a/files/es/learn/css/styling_text/styling_links/index.html b/files/es/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..b5180d51df --- /dev/null +++ b/files/es/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,434 @@ +--- +title: Dar estilo a los enlaces +slug: Learn/CSS/Styling_text/Styling_links +translation_of: Learn/CSS/Styling_text/Styling_links +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">A la hora de dar estilo a los <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">enlaces</a>, es importante comprender cómo utilizar las pseudoclases para diseñar los estados de un enlace de manera efectiva y cómo diseñar enlaces para su uso en diversas funciones de interfaz comunes, como menús y pestañas de navegación. Veremos todos estos temas en este artículo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conceptos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conocimientos básicos de CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">nociones de aplicación de estilo con CSS a textos y tipos de letra</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a dar formato a los estados de un enlace y a usarlos de manera efectiva en algunas funciones de interfaz de usuario comunes, como los menús de navegación.</td> + </tr> + </tbody> +</table> + +<h2 id="Echemos_un_vistazo_a_algunos_enlaces">Echemos un vistazo a algunos enlaces</h2> + +<p>Analizamos cómo se implementan los enlaces en tu HTML de acuerdo con las buenas prácticas de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">Creación de hipervínculos</a>. En este artículo desarrollaremos estos conocimientos y te mostraremos las buenas prácticas del diseño de enlaces.</p> + +<h3 id="Los_estados_de_un_enlace">Los estados de un enlace</h3> + +<p>Lo primero que hay que entender es el concepto de estados de un enlace (diferentes estados en los que pueden estar los enlaces, que pueden diseñarse usando diferentes <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS">pseudoclases</a>):</p> + +<ul> + <li><strong>Link (no visitado)</strong>: El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase {{cssxref(":link")}}.</li> + <li><strong>Visited</strong>: Un enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase {{cssxref(":visited")}}.</li> + <li><strong>Hover</strong>: Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase {{cssxref(":hover")}}.</li> + <li><strong>Focus</strong>: Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla <kbd>Tab</kbd> del teclado o se le da el foco mediante programación usando {{domxref("HTMLElement.focus()")}}); se le aplica un formato diferente con la pseudoclase {{cssxref(":focus")}}.</li> + <li><strong>Active</strong>: Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase {{cssxref(":active")}}.</li> +</ul> + +<h3 id="Estilos_predeterminados">Estilos predeterminados</h3> + +<p>El ejemplo siguiente ilustra cómo se comportará un enlace por defecto (el CSS simplemente amplía y centra el texto para que destaque más).</p> + +<pre class="brush: html notranslate"><p><a href="#">Un enlace simple</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Estilos_predeterminados', '100%', 120) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Todos los enlaces que hay en los ejemplos de esta página son simulados, encontrarás un símbolo <code>#</code> (almohadilla) en el lugar de una URL real. Esto es porque si incluyéramos enlaces reales, los ejemplos quedarían interrumpidos al hacer clic (daría error, o se cargaría una página en el ejemplo incrustado de la que no podrías volver atrás). <code>#</code> solo establece enlaces dentro de la misma página.</p> +</div> + +<p>A medida que explores los estilos predeterminados, observarás algunas cosas:</p> + +<ul> + <li>Los enlaces están subrayados.</li> + <li>Los enlaces no visitados se ven de color azul.</li> + <li>Los enlaces visitados se ven de color morado.</li> + <li>Al pasar el puntero del ratón sobre un enlace, cambia a un pequeño icono en forma de mano.</li> + <li>Los enlaces que tienen el foco presentan un contorno alrededor: deberías poder saltar por los enlaces de esta página con el teclado pulsando la tecla de tabulación (en Mac, es posible que necesites habilitar la opción <em>Acceso total por teclado: Todos los controles</em> presionando <kbd>Ctrl</kbd> + <kbd>F7</kbd> para que funcione).</li> + <li>Los enlaces activos se muestran de color rojo (intenta mantener el cursor sobre el enlace mientras haces clic).</li> +</ul> + +<p>Curiosamente, estos estilos predeterminados son casi los mismos que se utilizaban al inicio de los navegadores en la década de 1990. Esto se debe a que los usuarios conocen y esperan que sea de esta forma. Podría confundir a mucha gente que los enlaces se mostrasen de manera diferente. Esto no quiere decir que no puedas cambiar el formato de los enlaces, solo que no deberías alejarte mucho de la conducta esperada. Al menos deberías:</p> + +<ul> + <li>Subrayar los enlaces, pero no otros elementos. Si no quieres hacerlo, al menos destacarlos de alguna otra forma.</li> + <li>Hacer que reaccionen de alguna manera cuando se les pasa el cursor por encima, y de una manera algo diferente cuando se activan.</li> +</ul> + +<p>Los estilos por defecto se pueden desactivar/cambiar usando las propiedades CSS siguientes:</p> + +<ul> + <li>{{cssxref("color")}} para el color del texto.</li> + <li>{{cssxref("cursor")}} para el estilo del cursor (no debes deshabilitar esta opción a menos que tengas una muy buena razón para hacerlo).</li> + <li>{{cssxref("outline")}} para el contorno del texto (un contorno es similar a un borde, la única diferencia es que el borde ocupa un espacio en la caja y el contorno solo se solapa sobre el fondo). El contorno es una ayuda de accesibilidad útil, así que piénsatelo bien antes de desactivar esta opción; al menos deberías plantear dos estilos para los estados de pasar el puntero por encima y de tener el foco.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: No estás limitado a las propiedades anteriores para diseñar tus enlaces; tienes libertad para usar cualquier propiedad que te guste. ¡Solo trata de que no resulte descabellado!</p> +</div> + +<h3 id="Dar_formato_a_algunos_enlaces">Dar formato a algunos enlaces</h3> + +<p>Ahora que hemos visto los estados predeterminados, veamos un conjunto típico de estilos de enlace.</p> + +<p>Para empezar, escribiremos nuestro conjunto de reglas vacío:</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>Este orden es importante porque los estilos de enlace se construyen sobre los anteriores. Por ejemplo, los estilos de la primera regla se aplicarán a todas las reglas siguientes, y cuando activas un enlace también pasas con el cursor por encima. Si los pones en un orden incorrecto, no funcionarán adecuadamente. Para recordar este orden, puedes intentar utilizar una fórmula nemotécnica como <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p> + +<p>Ahora vamos a añadir algo más de información para darles formato:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-size: 1.2rem; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: #265301; +} + +a:visited { + color: #437A16; +} + +a:focus { + border-bottom: 1px solid; + background: #BAE498; +} + +a:hover { + border-bottom: 1px solid; + background: #CDFEAA; +} + +a:active { + background: #265301; + color: #CDFEAA; +}</pre> + +<p>También proporcionaremos algún ejemplo de HTML al que aplicar CSS:</p> + +<pre class="brush: html notranslate"><p>Dispones de varios navegadores, como <a href="#">Mozilla +Firefox</a>, <a href="#">Google Chrome</a> y +<a href="#">Microsoft Edge</a>.</p></pre> + +<p>Poner los dos juntos nos da este resultado:</p> + +<p>{{ EmbedLiveSample('Dar_formato_a_algunos_enlaces', '100%', 150) }}</p> + +<p>¿Qué hemos hecho aquí? Sin duda tiene un aspecto diferente al estilo predeterminado, pero todavía ofrece una experiencia lo suficientemente familiar como para que los usuarios sepan de qué se trata:</p> + +<ul> + <li>Las dos primeras reglas no presentan gran interés en esta explicación.</li> + <li>La tercera regla usa el selector <code>a</code> para eliminar el subrayado de texto predeterminado y el contorno en el estado de foco (que de todos modos varía dependiendo del navegador), y añade una pequeña cantidad de área de relleno a cada enlace (todo esto se aclarará más adelante).</li> + <li>A continuación, utilizamos los selectores <code>a:link</code> y <code>a:visited</code> para establecer un par de variaciones de color en los enlaces no visitados y visitados, para que se distingan.</li> + <li>Las dos reglas siguientes usan <code>a:focus</code> y <code>a:hover</code> para establecer colores de fondo diferentes para los enlaces con el foco y los enlaces activados con el paso del cursor, y además un subrayado para que el enlace destaque aún más. Aquí destacamos dos aspectos: + <ul> + <li>El subrayado se ha creado usando {{cssxref("border-bottom")}} y no {{cssxref("text-decoration")}}, y es que algunas personas lo prefieren porque el primero tiene mejores opciones en cuanto a estilo, y se dibuja un poco más abajo, por lo que no pisa los trazos descendentes de la palabra que se subraya (por ejemplo, los trazos de la g o la y).</li> + <li>El valor {{cssxref ("border-bottom")}} se ha establecido en <code>1px solid</code> sin especificar ningún color. Así, el borde adopta el mismo color que el texto del elemento, lo que es útil en casos en los que el texto es de un color diferente en cada caso.</li> + </ul> + </li> + <li>Finalmente, <code>a:active</code> se usa para dar a los enlaces un esquema de color inverso mientras se activan, ¡para dejar claro que algo importante sucede!</li> +</ul> + +<h3 id="Aprendizaje_activo_proporciona_estilo_a_tus_enlaces">Aprendizaje activo: proporciona estilo a tus enlaces</h3> + +<p>En esta sesión de aprendizaje activo, queremos que tomes nuestro conjunto de reglas vacías y añadas tus propias declaraciones para lograr unos enlaces geniales. Da rienda suelta a tu imaginación. Estamos seguros de que puedes crear algo genial y tan funcional como nuestro ejemplo anterior.</p> + +<p>Si te equivocas, puedes volver a empezar pulsando el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para recuperar el ejemplo anterior.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>Entrada de HTML</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p> Hay varios navegadores disponibles, tales como <a href="#">Mozilla + Firefox</a>, <a href="#">Google Chrome</a> y +<a href="#">Microsoft Edge</a>.</p></textarea> + + <h2>Entrada CSS</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Salida</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reinicio" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Mostrar la solución" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Incluir_iconos_en_los_enlaces">Incluir iconos en los enlaces</h2> + +<p>Una práctica común es incluir iconos en los enlaces para proporcionar más de un indicador en cuanto a qué tipo de contenido apunta. Echemos un vistazo a un ejemplo muy simple que añade un icono a enlaces externos (enlaces que conducen a otros sitios web). Este icono suele parecerse a una pequeña flecha que sale de un cuadro; para este ejemplo, usaremos <a href="https://icons8.com/web-app/741/external-link">este fantástico ejemplo de icons8.com</a>.</p> + +<p>Echemos un vistazo a algunos elementos HTML y CSS que nos van a proporcionar el efecto que queremos. En primer lugar, algunos elementos HTML sencillos para dar estilo:</p> + +<pre class="brush: html notranslate"><p>Para obtener más información sobre el tiempo, visite nuestra <a href="http://#">página del tiempo</a>, +mire la <a href="http://#">Wikipedia</a>, o cheque +<a href="http://#">Extreme Science</a>.</p></pre> + +<p>A continuación, el CSS:</p> + +<pre class="brush: css notranslate">body { + width: 300px; + margin: 0 auto; + font-family: sans-serif; +} + +p { + line-height: 1.4; +} + +a { + outline: none; + text-decoration: none; + padding: 2px 1px 0; +} + +a:link { + color: blue; +} + +a:visited { + color: purple; +} + +a:focus, a:hover { + border-bottom: 1px solid; +} + +a:active { + color: red; +} + +a[href*="http"] { + background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; + background-size: 16px 16px; + padding-right: 19px; +}</pre> + +<p>{{ EmbedLiveSample('Incluir_iconos_en_los_enlaces', '100%', 150) }}</p> + +<p>¿Qué pasa aquí? Omitiremos la mayor parte del CSS, ya que es la misma información que has visto antes. Sin embargo, la última regla es interesante: insertamos una imagen de fondo personalizada en enlaces externos de una manera similar a como manejamos <a href="/es/docs/Learn/CSS/Styling_text/Styling_lists#Uso_de_una_imagen_personalizada_como_vi%C3%B1eta">viñetas personalizadas en los elementos de lista</a> en el último artículo. Esta vez, sin embargo, utilizamos la propiedad abreviada {{cssxref("background")}} en lugar de las propiedades individuales. Establecemos la ruta a la imagen que queremos insertar, especificamos el valor <code>no-repeat</code> para que solo se inserte una copia, y luego especificamos la posición como al 100% a la derecha del contenido de texto y a 0 píxeles del extremo superior.</p> + +<p>También usamos {{cssxref("background-size")}} para especificar el tamaño de la imagen de fondo (es útil tener un icono más grande y luego cambiar su tamaño de esta manera, según sea necesario para fines de diseño web adaptativo). Sin embargo, esto solo funciona con Internet Explorer 9 y versiones posteriores, por lo que si trabajas con navegadores antiguos, tendrás que cambiar el tamaño de la imagen e insertarla tal como es.</p> + +<p>Finalmente, establecemos un área de relleno a la derecha ({{cssxref ("padding-right")}}) para los enlaces, para crear un espacio en que aparezca la imagen de fondo, de modo que no se superponga con el texto.</p> + +<p>Un último apunte: ¿cómo seleccionamos solo los enlaces externos? Bueno, si escribes tus enlaces <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Creating_hyperlinks">HTML</a> de forma adecuada, solo deberías usar URL absolutos para los enlaces externos. Para enlazar con otras partes del mismo sitio web, resulta más eficiente usar enlaces relativos. Por lo tanto, el texto «http» solo debe aparecer en los enlaces externos y es posible seleccionarlos con un <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS#Selectores_de_atributo">selector de atributos</a>: <code>a[href*="http"]</code> selecciona los elementos {{HTMLElement ( "a")}}, pero solo si tienen un atributo {{htmlattrxref("href","a")}} con un valor que contiene «http» en algún lugar de su contenido textual.</p> + +<p>Eso es todo. Vuelve a la sección de aprendizaje activo anterior ¡y prueba esta nueva técnica!</p> + +<div class="note"> +<p><strong>Nota</strong>: No te preocupes si aún no estás familiarizado con los <a href="/es/docs/Learn/CSS/Building_blocks">fondos</a> y el <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">diseño web adaptativo</a>, lo explicaremos en otros artículos.</p> +</div> + +<h2 id="Dar_aspecto_de_botón_a_un_enlace">Dar aspecto de botón a un enlace</h2> + +<p>Las herramientas que has explorado hasta ahora en este artículo también se pueden usar de otras maneras. Por ejemplo, los estados como <code>hover</code> se pueden usar para diseñar muchos elementos diferentes, no solo enlaces. Es posible que desees diseñar un estado que señale el paso del cursor por encima de párrafos, elementos de lista u otras cosas.</p> + +<p>Además, suele ser bastante común dar a los enlaces un aspecto y un comportamiento de botón en ciertas circunstancias: el menú de navegación de un sitio web generalmente está marcado como una lista que contiene enlaces, y es posible aplicarle estilo fácilmente para que se parezca a un conjunto de botones de control o pestañas que proporcionan al usuario acceso a otras partes del sitio web. Vamos a ver cómo.</p> + +<p>En primer lugar, un poco de HTML:</p> + +<pre class="brush: html notranslate"><ul> + <li><a href="#">Inicio</a></li> <li><a href="#">Pizza</a></li> <li><a href = "#">Música</a> </li> <li><a href="#">Wombats</a></li> <li><a href="#">Finlandia</a></li> +</ul></pre> + +<p>Y ahora nuestro CSS:</p> + +<pre class="brush: css notranslate">body,html { + margin: 0; + font-family: sans-serif; +} + +ul { + padding: 0; + width: 100%; +} + +li { + display: inline; +} + +a { + outline: none; + text-decoration: none; + display: inline-block; + width: 19.5%; + margin-right: 0.625%; + text-align: center; + line-height: 3; + color: black; +} + +li:last-child a { + margin-right: 0; +} + +a:link, a:visited, a:focus { + background: yellow; +} + +a:hover { + background: orange; +} + +a:active { + background: red; + color: white; +}</pre> + +<p>Esto nos da el resultado siguiente:</p> + +<p>{{ EmbedLiveSample('Dar_aspecto_de_botón_a_un_enlace', '100%', 100) }}</p> + +<p>Vamos a explicar qué pasa aquí, y nos vamos a centrar en los aspectos más interesantes:</p> + +<ul> + <li>Nuestra segunda regla elimina el área de relleno ({{cssxref ("padding")}}) predeterminada del elemento {{htmlelement ("ul")}} y establece un ancho para abarcar el 100% del contenedor externo (el {{htmlelement ("body")}}, en este caso).</li> + <li>Los elementos {{htmlelement ("li")}} por defecto suelen ser elementos de bloque (repasa los <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">tipos de cajas CSS</a>), lo que significa que ocupan sus propias líneas. En este caso, creamos una lista de enlaces horizontal, para lo que en la tercera regla establecemos la propiedad {{cssxref ("display")}} en el valor <code>inline</code>, que ubica todos los elementos de la lista sobre la misma línea porque ahora se comportan como elementos de línea.</li> + <li>La cuarta regla (que da formato al elemento {{htmlelement("a")}}) es la más complicada. Vamos a verla paso a paso: + <ul> + <li>Como en los ejemplos anteriores, comenzamos por desactivar las propiedades predeterminadas {{cssxref ("text-decoration")}} y {{cssxref ("outline")}}, ya que no queremos que estropeen nuestro aspecto.</li> + <li>A continuación, configuramos la propiedad {{cssxref ("display")}} en el valor <code>inline-block</code>: los elementos {{htmlelement ("a")}} se muestran en línea de forma predeterminada y, aunque no queremos que ocupe más de una línea, como haría un valor de <code>block</code>, queremos poderlos dimensionar: <code>inline-block</code> nos permite hacerlo.</li> + <li>Ahora nos centramos en el tamaño. Queremos llenar todo el ancho del elemento de lista {{htmlelement ("ul")}} y dejar un pequeño margen entre cada botón (pero ningún hueco en el borde derecho), y queremos los 5 botones del mismo tamaño. Para hacer esto, establecemos el atributo {{cssxref ("width")}} en 19,5%, y el atributo {{cssxref ("margin-right")}} en 0,625%. Observa que el ancho completo suma 100,625%, lo que haría caer el último botón <code><ul></code> a la siguiente línea por desbordamiento. Sin embargo, lo restituimos al 100% con la siguiente regla, que selecciona solo el último elemento <code><a></code> de la lista y elimina de él el margen. ¡Hecho!</li> + <li>Las tres últimas declaraciones son bastante sencillas y tienen principalmente finalidades estéticas. Centramos el texto dentro de cada enlace, establecemos {{cssxref ("line-height")}} en 3 para dar algo de altura a los botones (lo que también presenta la ventaja de centrar verticalmente el texto), y establecemos el color del texto a negro.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Es posible que hayas observado que en el HTML se han colocado todos los elementos de lista en una misma línea; esto es porque los espacios/saltos de línea que se colocan entre elementos de bloque crean espacios en la página, igual como lo hacen los espacios entre las palabras, y estos espacios romperían nuestro diseño de menú de navegación horizontal. Así que hemos eliminado esos espacios. Puede encontrar más información sobre este problema (y sus soluciones) en <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Combatir los espacios entre elementos de bloque colocados en línea</a>.</p> +</div> + +<h2 id="Resumen">Resumen</h2> + +<p>Esperamos que este artículo te haya proporcionado todo lo que necesitas saber acerca de los enlaces... ¡por ahora! En el artículo final de nuestro módulo de aplicar estilo al texto detallaremos cómo usar tipos de letra personalizados para sitios web (o tipos de letra para web, como se les conoce comúnmente).</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Nociones de aplicación de estilo con CSS a textos y tipos de letra</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicar estilo a listas</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicar estilo a enlaces</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composición tipográfica de una página de inicio de una escuela comunitaria</a></li> +</ul> diff --git a/files/es/learn/css/styling_text/styling_lists/index.html b/files/es/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..eeb395313b --- /dev/null +++ b/files/es/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,392 @@ +--- +title: Aplicación de estilo a listas +slug: Learn/CSS/Styling_text/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Las <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">listas</a> se comportan como cualquier otro texto en su mayor parte, pero hay algunas propiedades CSS específicas de las listas que debes conocer y algunas prácticas recomendadas a tener en cuenta. Este artículo te lo explica.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerrequisitos:</th> + <td>Conocimientos básicos de informática, conocimientos básicos de HTML (estudio <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">introducción a HTML</a>), nociones de cómo trabaja con CSS (estudio <a href="/es/docs/Learn/CSS/First_steps">introducción a CSS</a>), <a href="/es/docs/Learn/CSS/Styling_text/Fundamentals">Conocimientos básicos de CSS para texto y tipos de letra</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Familiarizarse con las buenas prácticas y propiedades relacionadas con la aplicación de estilo a listas.</td> + </tr> + </tbody> +</table> + +<h2 id="Un_ejemplo_sencillo_de_lista">Un ejemplo sencillo de lista</h2> + +<p>Para empezar, veamos un ejemplo sencillo de una lista. A lo largo de este artículo veremos listas no ordenadas, listas ordenadas y listas de descripciones; todas tienen características de estilo similares, algunas que son particulares del tipo de lista. El ejemplo sin ningún estilo aplicado está <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible en Github</a> (consulta también el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">código fuente</a>.)</p> + +<p>El HTML para nuestro ejemplo de lista se ve así:</p> + +<pre class="brush: html notranslate"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Humous</li> + <li>Pitta</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Humous</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pitta</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>Si accedes al ejemplo en vivo e investigas los elementos de la lista usando las <a href="/es/docs/Learn/Common_questions/What_are_browser_developer_tools">herramientas de desarrollador del navegador</a>, observarás un par de valores de estilo predeterminados:</p> + +<ul> + <li>Los elementos {{htmlelement("ul")}} y {{htmlelement("ol")}} tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>) y un {{cssxref("padding-left")}} de <code>40px</code> (<code>2.5em</code>.)</li> + <li>Los elementos de lista {{htmlelement("li")}} no tienen valores de espacio predeterminados.</li> + <li>El elemento {{htmlelement("dl")}} tiene un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), pero no tiene ningún {{cssxref("padding")}} establecido.</li> + <li>Los elementos {{htmlelement("dd")}} tienen un {{cssxref("margin-left")}} de <code>40px</code> (<code>2.5em</code>).</li> + <li>Los elementos de referencia {{htmlelement("p")}} que hemos incluido tienen un {{cssxref("margin")}} superior e inferior de <code>16px</code> (<code>1em</code>), al igual que los diferentes tipos de lista.</li> +</ul> + +<h2 id="Manejar_el_espaciado_de_la_lista">Manejar el espaciado de la lista</h2> + +<p>Al diseñar listas, es necesario ajustar el diseño para que mantengan los mismos espaciados verticales (a veces denominados ritmos verticales) que el resto de elementos circundantes, como párrafos e imágenes; y el mismo espaciado horizontal entre uno y otro (en Github puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">ejemplo de diseño terminado</a>, y también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">encontrar el código fuente</a>.)</p> + +<p>El CSS que se utiliza para aplicar estilo al texto y al espaciado de texto es el siguiente:</p> + +<pre class="brush: css notranslate">/* Estilos generales */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Estilos para las listas de descripciones */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +}</pre> + +<ul> + <li>La primera regla establece un tipo de letra para todo el sitio y un tamaño de letra base de 10px. Estos valores se heredan para toda la página.</li> + <li>Las reglas 2 y 3 establecen tamaños de letra relativos para los títulos, diferentes tipos de listas (que heredan los hijos de los elementos de listas), y párrafos. Esto significa que todos los párrafos y todas las listas tendrán el mismo tamaño de letra y el mismo espaciado superior e inferior, lo que ayudará a mantener el ritmo vertical constante.</li> + <li>La regla 4 establece el mismo interlineado ({{cssxref("line-height")}}) en los párrafos y los elementos de las listas, de modo que todos los párrafos y todos los elementos individuales de las listas tendrán el mismo espaciado entre las líneas. Esto también ayudará a mantener el ritmo vertical consistente.</li> + <li>Las reglas 5 y 6 se aplican a las listas de descripciones; establecemos la misma altura de interlineado (<code>line-height</code>) en los términos y las descripciones de la lista de descripciones, así como hicimos con los párrafos y los elementos de la lista. De nuevo, ¡la coherencia es buena! También establecemos que los términos de las descripciones tengan un estilo de negrita, para que destaquen visualmente.<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="Estilos_específicos_de_las_listas">Estilos específicos de las listas</h2> + +<p>Ahora que hemos analizado el espaciado general de las listas, exploremos algunas propiedades específicas de las listas. Para empezar, debes conocer tres propiedades que pueden establecerse en los elementos {{htmlelement("ul")}} o {{htmlelement("ol")}}:</p> + +<ul> + <li>{{cssxref("list-style-type")}}: Establece el tipo de viñetas para la lista, por ejemplo, viñetas cuadradas o circulares para una lista no ordenada; números, letras, o números romanos para una lista ordenada.</li> + <li>{{cssxref("list-style-position")}}: Establece si las viñetas aparecen dentro de los elementos de la lista o fuera de ellos, antes del inicio de cada elemento.</li> + <li>{{cssxref("list-style-image")}}: Te permite usar una imagen personalizada para la viñeta, en lugar de un simple cuadrado o círculo.</li> +</ul> + +<h3 id="El_estilo_de_la_viñeta">El estilo de la viñeta</h3> + +<p>Como ya sabes, la propiedad {{cssxref("list-style-type")}} te permite establecer qué tipo de viñeta usar. En nuestro ejemplo, hemos establecido que se usen números romanos en mayúsculas para la lista ordenada, con:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>Esto nos da el aspecto siguiente:</p> + +<p><img alt="Una lista ordenada con las viñetas establecidas para aparecer fuera del texto del elemento de lista." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia de {{cssxref("list-style-type")}}.</p> + +<h3 id="La_posición_de_la_viñeta">La posición de la viñeta</h3> + +<p>La propiedad {{cssxref("list-style-position")}} establece si las viñetas aparecen dentro de los elementos de la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es <code>outside</code>, que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa arriba.</p> + +<p>Si estableces el valor en <code>inside</code>, las viñetas se ubican dentro de las líneas:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Uso_de_una_imagen_personalizada_como_viñeta">Uso de una imagen personalizada como viñeta</h3> + +<p>La propiedad {{cssxref("list-style-image")}} te permite usar una imagen personalizada para tu viñeta. La sintaxis es muy simple:</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>Sin embargo, esta propiedad es un poco limitada por lo que respecta al control de la posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de propiedades {{cssxref("background")}}, de la cual aprenderás mucho más en el módulo <a href="/es/docs/Learn/CSS/Building_blocks">Aplicar diseño a las cajas</a>.</p> + +<p>En nuestro ejemplo terminado, hemos aplicado estilo a la lista no ordenada de este modo (encima de lo que ya has visto arriba):</p> + +<pre class="brush: css notranslate">ul { + padding-left: 2rem; + list-style-type: none; +} + +ul li { + padding-left: 2rem; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>Aquí hemos hecho lo siguiente:</p> + +<ul> + <li> + <p dir="ltr" id="tw-target-text">Reducir el valor de la propiedad {{cssxref("padding-left")}} del elemento {{htmlelement ("ul")}} desde su valor predeterminado de 40 px hasta 20 px. A continuación, establecer<br> + la misma cantidad para los elementos de la lista. De este modo, todos los elementos de la lista siguen alineados con los elementos de la lista ordenada y las descripciones, pero los elementos de lista tienen algo de relleno (<code>padding</code>) para poder insertar las imágenes de fondo. Si no hiciéramos esto, las imágenes de fondo se solaparían con el texto de los elementos de la lista y quedaría un aspecto desordenado.</p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Establecer la propiedad {{cssxref("list-style-type")}} en <code>none</code>, para que no aparezca la viñeta predeterminada. En lugar de ello, vamos a utilizar las propiedades {{cssxref("background")}} para manejar las viñetas.</p> + </li> + <li>Insertar una viñeta en cada elemento de la lista sin ordenar. Las propiedades relevantes son las siguientes: + <ul> + <li>{{cssxref("background-image")}}: Proporciona la ruta que apunta al archivo de imagen que quieres usar como viñeta.</li> + <li>{{cssxref("background-position")}}: Define en qué lugar del elemento seleccionado va a aparecer la imagen; en este caso le decimos <code>0 0</code>, que significa que la viñeta va a aparecer en el extremo superior izquierdo de cada elemento de lista.</li> + <li>{{cssxref("background-size")}}: Establece el tamaño de la imagen de fondo. En teoría queremos que las viñetas sean del mismo tamaño que los elementos de lista (o solo un poco menores o mayores). Utilizamos un tamaño de <code>1.6rem</code> (<code>16px</code>), que encaja muy bien con el área de relleno de <code>20px</code> que hemos elegido para que quepa la viñeta; 16 px más 4 px de espacio entre la viñeta y el texto del elemento de lista funciona bien.</li> + <li>{{cssxref("background-repeat")}}: Por defecto, las imágenes de fondo se repiten hasta rellenar todo el espacio de fondo disponible. En este caso solo queremos una copia de la imagen, de modo que establecemos el valor de esta propiedad en <code>no-repeat</code>.</li> + </ul> + </li> +</ul> + +<p>Esto nos da el resultado siguiente:</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="Propiedad_abreviada_list-style">Propiedad abreviada list-style</h3> + +<p>Es posible configurar las tres propiedades anteriores con una sola propiedad abreviada, {{cssxref("list-style")}}. Por ejemplo, observa el CSS siguiente:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Podría reemplazarse por esto:</p> + +<pre class="notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>Los valores pueden escribirse en cualquier orden, y puedes usar uno, dos o los tres (los valores por defecto que se utilizan para las propiedades que no están incluidas son <code>disc</code>, <code>none</code> y <code>outside</code>). Si se especifican tanto <code>type</code> como <code>image</code>, el tipo se usa como una segunda opción en el caso de que la imagen no sea posible cargar la imagen por cualquier motivo.</p> + +<h2 id="Control_de_numeración_de_las_listas">Control de numeración de las listas</h2> + +<p>A veces puedes querer numerar las listas de manera diferente, por ejemplo, que empiece con un número que no sea el 1, o que cuente hacia atrás, o que cuente a saltos de más de una unidad. HTML y CSS tienen algunas herramientas para ayudarte con esto.</p> + +<h3 id="start">start</h3> + +<p>El atributo {{htmlattrxref("start","ol")}} te permite empezar la numeración de la lista en un número diferente de 1. Observa el ejemplo siguiente:</p> + +<pre class="brush: html notranslate"><ol start="4"> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Este código da el resultado siguiente:</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>El atributo {{htmlattrxref("reversed","ol")}} empieza la lista contando hacia atrás, en lugar de hacia adelante. Observa el ejemplo siguiente:</p> + +<pre class="brush: html notranslate"><ol start="4" reversed> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Da el resultado siguiente:</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Si en una lista inversa hay más elementos de lista que el valor que se ha establecido para el atributo <code>start</code>, la numeración continuará hasta cero y luego con valores negativos.</p> +</div> + +<h3 id="value">value</h3> + +<p>El atributo {{htmlattrxref("value","ol")}} te permite establecer para tus elementos de lista unos valores numéricos específicos. Observa el ejemplo siguiente:</p> + +<pre class="brush: html notranslate"><ol> + <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Da el resultado siguiente:</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Incluso si utilizas una propiedad {{cssxref("list-style-type")}} sin números, vas a tener que usar los valores numéricos equivalentes para el atributo <code>value</code>.</p> +</div> + +<h2 id="Aprendizaje_activo_aplicar_estilo_a_una_lista_anidada">Aprendizaje activo: aplicar estilo a una lista anidada</h2> + +<p>En esta sesión de aprendizaje activo, queremos que tomes lo que has aprendido arriba y pruebes a aplicar estilo a una lista anidada. Te hemos provisto con un HTML, y queremos que hagas lo siguiente:</p> + +<ol> + <li>Poner viñetas cuadradas en la lista no ordenada.</li> + <li>Establecer un interlineado de 1,5 con respecto al tamaño de la letra tanto para la lista ordenada como para la lista no ordenada.</li> + <li>Poner letras minúsculas en la lista ordenada.</li> + <li>Juega con el ejemplo, libremente y cuanto quieras, experimenta con los tipos de viñetas, los espacios, o cualquier otra cosa con que te encuentres.</li> +</ol> + +<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>. Si te quedas encallado, pulsa el botón <em>Mostrar la solución</em> para ver una posible solución.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Véase_también">Véase también</h2> + +<p>Los contadores CSS proporcionan herramientas avanzadas para la personalización de las numeraciones y la aplicación de estilo a las listas, pero son bastante complejos. Te recomendamos echarles un vistazo si quieres ampliar tus conocimientos. Consulta:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Resumen">Resumen</h2> + +<p>La aplicación de estilo a listas se domina con relativa facilidad una vez que conoces algunos principios básicos y propiedades específicas asociados. En el artículo siguiente vamos a continuar con las técnicas de aplicación de estilo a enlaces.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + +<h2 id="En_este_módulo">En este módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Nociones de aplicación de estilo con CSS a textos y tipos de letra</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicar estilo a listas</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicar estilo a enlaces</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li> +</ul> diff --git a/files/es/learn/css/sábercomo/generated_content/index.html b/files/es/learn/css/sábercomo/generated_content/index.html new file mode 100644 index 0000000000..605e87f9e2 --- /dev/null +++ b/files/es/learn/css/sábercomo/generated_content/index.html @@ -0,0 +1,178 @@ +--- +title: Usando CSS para generar contenido +slug: Learn/CSS/Sábercomo/Generated_content +tags: + - CSS + - Fundamentos + - Guía + - Principiante + - Web + - graficos +translation_of: Learn/CSS/Howto/Generated_content +--- +<p>{{ CSSTutorialTOC() }}</p> + +<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.</p> + +<h2 class="clearLeft" id="Informacion_Contenido">Informacion: Contenido</h2> + +<p>Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.</p> + +<p>El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.</p> + +<div class="tuto_details"> +<div class="tuto_type"> +<p>Más detalles</p> + +<p>Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.</p> + +<p>Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.</p> + +<p>El contenido especificado en una hoja de estilo no se convierte en parte del DOM.</p> +</div> +</div> + +<h3 id="Text_content" name="Text_content">Texto contenido</h3> + +<p>CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html">Un texto donde necesito <span class="ref">alguna cosa</span> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.ref::before { + font-weight: negrita; + color: navy; + content: "Reference: "; +}</pre> + +<h4 id="Output">Output</h4> + +<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Mas detalles</div> + +<p>El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.</p> + +<p>Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.</p> +</div> + +<h3 id="Imagen_contenido">Imagen contenido</h3> + +<p>Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:</p> + +<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");} +</pre> +</div> + +<p>Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.</p> + +<div class="tuto_example"> +<div class="tuto_type">Ejemplo</div> + +<p>Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.</p> + +<p>El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:</p> + +<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Mas detalles</div> + +<p>Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.</p> +</div> + +<h2 id="Acción_Añadir_una_imagen_de_fondo">Acción: Añadir una imagen de fondo</h2> + +<p>Esta imagen es un cuadrado blanco con una línea azul en la parte inferior:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<ol> + <li>Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).</li> + <li>Edit your CSS file and add this rule to the body, setting a background image for the entire page.</li> + <li> + <pre class="brush:css">background: url("Blue-rule.png"); +</pre> + + <p>La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:</p> + + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p> + </div> + + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p> + </div> + </div> + </div> + </li> +</ol> + +<div class="tuto_example"> +<div class="tuto_type">Reto</div> + +<p>Descarga esta imagen:</p> + +<table style="border: 2px solid #cccccc;"> + <tbody> + <tr> + <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> + </tr> + </tbody> +</table> + +<p>Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:</p> + +<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> +<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p> + +<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> +<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div> + +<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div> +</div> +</div> + +<div class="tuto_details" id="tutochallenge"> +<div class="tuto_type">Possible solution</div> + +<p>Add this rule to your stylesheet:</p> + +<pre class="brush: css">p:before{ + content: url("yellow-pin.png"); +} +</pre> + +<p> </p> +<a class="hideAnswer" href="#challenge">Hide solution</a></div> +<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver la solución a este reto.</a></div> + +<h2 id="Qué_sigue">Qué sigue?</h2> + +<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">especificar estilos para una lista de elementos.</a></p> diff --git a/files/es/learn/css/sábercomo/index.html b/files/es/learn/css/sábercomo/index.html new file mode 100644 index 0000000000..ffff1653c0 --- /dev/null +++ b/files/es/learn/css/sábercomo/index.html @@ -0,0 +1,81 @@ +--- +title: Usa CSS para resolver problemas comunes +slug: Learn/CSS/Sábercomo +translation_of: Learn/CSS/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Los siguientes enlaces apuntan a soluciones comunes a los problemas cotidianos que necesitará resolver con CSS.</p> + +<h2 id="Casos_de_uso_común">Casos de uso común</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Básicos">Básicos</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cómo aplicar CSS al HTML</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">Cómo escribir comentarios en CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">Cómo seleccionar elementos mediante nombre del elemento, clase o ID</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">Cómo seleccionar elementos mediante nombre del atributo y contenido</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">Cómo usar pseudo-clases</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">Cómo usar pseudo-elementos</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">Cómo aplicar múltiples selectores a la misma regla</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">Cómo especificar colores en CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Cómo depurar CSS en el navegador</a></li> +</ul> + +<h3 id="CSS_y_texto">CSS y texto</h3> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Cómo dar estilo al texto</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Cómo personalizar una lista de elementos</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">Cómo dar estilo a links</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">Cómo agregar sombras al texto</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Cajas_y_diseños">Cajas y diseños</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">Cómo redimensionar cajas CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">Cómo controlar el contenido que desborda</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">Cómo controlar la parte de una caja CSS en la que se dibuja el fondo</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Cómo defino un elemento inline, block o inline-block?</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_or_advanced_techniques">Uncommon or advanced techniques</h2> + +<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p> + +<h3 id="General">General</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects">Advanced effects</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> +</ul> |