diff options
Diffstat (limited to 'files/es/web/css/shorthand_properties/index.html')
| -rw-r--r-- | files/es/web/css/shorthand_properties/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/es/web/css/shorthand_properties/index.html b/files/es/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..7e6cb6a359 --- /dev/null +++ b/files/es/web/css/shorthand_properties/index.html @@ -0,0 +1,155 @@ +--- +title: Propiedades abreviadas +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guía + - Propiedades + - Referencia + - abreviatura + - propiedades abreviadas +translation_of: Web/CSS/Shorthand_properties +--- +<h2 id="Definition" name="Definition">Definición</h2> + +<p>Las <strong><dfn>propiedades abreviadas</dfn></strong> son propiedades CSS que permiten asignar el valor de muchas otras propiedades de CSS al mismo tiempo. Usando una propiedad abreviada ('shorthand'), se pueden escribir hojas de estilo más concisas (y a menudo más legibles), ahorrando tiempo y energía.</p> + +<p>La especificación de CSS define las propiedades abreviadas para agrupar la definición de propiedades en común para el mismo tema. Ejemplo: La propiedad {{cssxref("background")}} de CSS es una propiedad abreviada que puede definir el valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, y {{cssxref("background-position")}}. Similarmente, las propiedades más comúnes relacionadas con las fuentes se pueden definir usando la abreviación {{cssxref("font")}}, y los diferentes márgenes alrededor de una caja pueden ser definidos usando la abreviación {{cssxref("margin")}}.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Casos especiales delicados</h2> + +<p>Incluso si son convenientes de utilizar, hay algunos casos especiales que mantener en mente al utilizarlos:</p> + +<ol> + <li>Si no se especifica un valor, se le asignará su valor inicial. Suena a algo anecdótico, pero significa que se <strong>sobreescribirán</strong> los valores previamente definidos. Por lo tanto: + + <pre class="brush:css">background-color: red; +background: url(images/bg.gif) no-repeat top right; +</pre> + no pondrá el color en rojo sino al valor por defecto de {{cssxref("background-color")}} , <code>transparent</code>, puesto que la segunda regla tiene precedencia.</li> + <li>Solo los valores de las propiedades individuales pueden heredar. Dado que los valores omitidos son reemplazados por su valor inicial, es imposible permitir la herencia de propiedades individuales omitiéndolas. La palabra clave <code>inherit</code> puede ser aplicada a una propiedad, pero solo como un todo, no como una palabra clave para un valor u otro. Eso significa que la única manera de hacer que un valor específico sea heredado es usar la propiedad a mano con la palabra clave <code>inherit.</code></li> + <li>Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories: + <ol> + <li>Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges: + <table> + <tbody> + <tr> + <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word <em>trouble</em>: TRBL)</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners: + <table> + <tbody> + <tr> + <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">Propiedades Background</h2> + +<p>Un fondo con las siguientes propiedades...</p> + +<pre class="brush:css">background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> + +<p>... puede acortarse con una sola declaración:</p> + +<pre class="brush:css">background: #000 url(images/bg.gif) no-repeat top right;</pre> + +<p>(La forma abreviada es realmente equivalente a las propiedades a mano anteriores más <code>background-attachment: scroll</code> y, en CSS3, a algunas propiedades adicionales.)</p> + +<h2 id="Font_Properties" name="Font_Properties">Propiedades Font</h2> + +<p>Las siguientes declaraciones:</p> + +<pre class="brush:css">font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>... pueden ser abreviadas como sigue:</p> + +<pre class="brush:css">font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p>Esta declaración abreviada es realmente equivalente a las declaraciones a mano anteriores así como también a <code>font-variant: normal</code> y <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> + +<h2 id="Border_Properties" name="Border_Properties">Propiedades Border</h2> + +<p>Con los bordes, el ancho, color y estílo pueden ser simplificados en una declaración. Por ejemplo,</p> + +<pre class="brush:css">border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>... puede ser simplificada como</p> + +<pre class="brush:css">border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Propiedades Margin y Padding</h2> + +<p>Versiones abreviadas de <code>margin</code> y <code>padding</code> funcionan de la misma forma. Las siguientes declaraciones CSS:</p> + +<pre class="brush:css">margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>son la misma a la declaración siguiente (note que los valores estan en el sentido de las manecillas del reloj desde arriba: arriba, derecha, abajo e izquierda (TRBL, las consonantes en "trouble", peligro en inglés)). (Norte, Este, Sur, Oeste)</p> + +<pre class="brush:css">margin: 10px 5px 10px 5px;</pre> + +<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">La propiedad abreviada universal</h2> + +<p>CSS provee una propiedad abreviada universal, {{cssxref("all")}}, que aplica su valor a toda propiedad en el documento. Su propósito es cambiar el modelo de herencia de las propiedades a uno de los siguientes:</p> + +<p>{{page("/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance", "Controlling_inheritance")}}</p> + +<p>Ver <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> o <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> para más información acerca de como trabaja la herencia en CSS.</p> + +<h2 id="See_also" name="See_also">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> + <li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("animation")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}, {{cssxref("flex")}}.</li> +</ul> |