diff options
Diffstat (limited to 'files/pt-br/web/css/shorthand_properties/index.html')
| -rw-r--r-- | files/pt-br/web/css/shorthand_properties/index.html | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/files/pt-br/web/css/shorthand_properties/index.html b/files/pt-br/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..f993c40fc5 --- /dev/null +++ b/files/pt-br/web/css/shorthand_properties/index.html @@ -0,0 +1,140 @@ +--- +title: Propriedades shorthand +slug: Web/CSS/Shorthand_properties +translation_of: Web/CSS/Shorthand_properties +--- +<h2 id="Definition" name="Definition">Definição</h2> + +<p><dfn>Propriedades shorthand (tradução literal: Propriedades abreviadas) são propriedades de CSS que deixam você setar os valores de outras propriedades de CSS simultaneamente. Usando shorthand property, um desenvolvedor web pode escrever folhas de estilo mais concisas e legíveis,economizando tempo e energia.</dfn></p> + +<p>A especificação CSS define como shorthand properties, o grupo de propriedades com o mesmo tema. Ex: a propriedade CSS {{cssxref("background")}} é uma propriedade shorthand que é capaz de definir o valor de {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, e {{cssxref("background-position")}}. Assim também,como as propriedades comuns e relacionadas a fonte podem ser definidas e usadas com o shorthand {{cssxref("font")}},e os diferentes margins em volta de um box podem ser definidas com o shorthand {{cssxref("margin")}}.</p> + +<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Casos específicos</h2> + +<p>Mesmo sendo convenientes para se usar, existem alguns casos que precisam ser analisados antes de usar:</p> + +<ol> + <li>Um valor que não especificado é setado seu valor inicial. Isso parece uma anedota, mas realmente significa que sobrescreve valores previamente setados. Por exemplo: + <pre>background-color: red; +background: url(images/bg.gif) no-repeat top right; +</pre> + não irá setar a cor do background para vermelho, mas para {{cssxref("background-color")}}'s padrão, transparente, como a segunda regra tem precedência.</li> + <li>Apenas propriedades individuais são herdadas. Como valores que faltam são substituidos pelo seu valor inicial, é impossivel herdar valores individuais os omitindo. O valor <code>inherit </code>pode ser aplicado a uma propriedade, mas num total e não como uma palavra-chave para um valor ou outro. Isso significa que a unica forma de um valor específico ser herdado é usando a propriedade em longhand com o valor <code>inherit</code>.</li> + <li>Propriedades shorthand tentam não forçar uma ordem específica para os valores das propriedades que elas substituem. Isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, isso funciona bem quando essas propriedades usam valores de diferentes tipos, como a ordem não tem importância, mas isso não funciona tão facilmente quando várias propriedades podem ter valores idênticos. O tratamento destes casos está agrupado em várias categorias: + <ol> + <li>Propriedades shorthand que lidam com valores da borda de um box, como {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, sempre usam um consistente 1-para-4 valor de sintaxe representando essas bordas: + <table> + <tbody> + <tr> + <td><img alt="border1.png" src="/files/3646/border1.png"></td> + <td><em>A sintaxe de um valor</em>: <code>border-width: 1em</code> — O valor único representa todas as bordas</td> + </tr> + <tr> + <td><img alt="border2.png" src="/files/3647/border2.png"></td> + <td><em>As sintaxes de dois valores</em>: <code>border-width: 1em 2em</code> — O primeiro valor representa a vertical, isto é, as bordas superior e inferior, a segunda as horizontais, que é a esquerda e a direita.</td> + </tr> + <tr> + <td><img alt="border3.png" src="/files/3648/border3.png"></td> + <td><em>As sintaxes de três valores</em>: <code>border-width: 1em 2em 3em</code> — O primeiro valor representa a borda superior, a segunda, a horizontal, que é esquerda e direita, e o terceiro valor a borda inferior</td> + </tr> + <tr> + <td><img alt="border4.png" src="/files/3649/border4.png"></td> + <td> + <p><em>As sintaxes de quatro valores</em>:<code>border-width: 1em 2em 3em 4em</code> — Os quatro valores representam as margens superior, direita, inferior e esquerda, respectivamente, sempre nessa ordem, que é no sentido horário começando pelo topo (a letra inicial de Top-Right-Bottom-Left corresponde à ordem da consoante da palavra <em>trouble</em>: TRBL)</p> + </td> + </tr> + </tbody> + </table> + </li> + <li>Também parecido, shorthand que lidam com os cantos de um box {{cssxref("border-radius")}}, sempre usam 1-para-4-valor de sintaxe representando esses cantos: + <table> + <tbody> + <tr> + <td><img alt="corner1.png" src="/files/3650/corner1.png"></td> + <td><em>A sintaxe de um valor</em>: <code>border-radius: 1em</code> — O valor único representa todos os cantos</td> + </tr> + <tr> + <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> + <td><em>As sintaxes de dois valores</em>: <code>border-radius: 1em 2em</code> — O primeiro valor representa o canto superior esquerdo e inferior direito, o segundo o superior direito e inferior esquerdo</td> + </tr> + <tr> + <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> + <td><em>As sintaxes de três valores</em>: <code>border-radius: 1em 2em 3em</code> — O primeiro valor representa o canto superior esquerdo, o segundo o canto superior direito eo inferior esquerdo e o terceiro o canto inferior direito</td> + </tr> + <tr> + <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> + <td> + <p><em>As sintaxes de quatro valores</em>: <code>border-radius: 1em 2em 3em 4em</code> — Os quatro valores representam os cantos superior esquerdo, superior direito, inferior direito e inferior esquerdo respectivamente, sempre nessa ordem, que é no sentido horário começando no canto superior esquerdo.</p> + </td> + </tr> + </tbody> + </table> + </li> + </ol> + </li> +</ol> + +<h2 id="Background_Properties" name="Background_Properties">Propriedades de background</h2> + +<p>Um background com as seguintes declarações:</p> + +<pre>background-color: #000; +background-image: url(images/bg.gif); +background-repeat: no-repeat; +background-position: top right;</pre> + +<p>Pode ser resumido em uma unica declaração:</p> + +<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre> + +<p>(A forma shorthand é o equivalente as propriedades longhand acima, mais <code>background-attachment: scroll</code>, em CSS3, algumas propriedades adicionais.)</p> + +<h2 id="Font_Properties" name="Font_Properties">Propriedades de fonte</h2> + +<p>As seguintes declarações:</p> + +<pre>font-style: italic; +font-weight: bold; +font-size: .8em; +line-height: 1.2; +font-family: Arial, sans-serif;</pre> + +<p>Podem ser resumidas a:</p> + +<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre> + +<p><br> + Essa declaração shorthand é o equivalente as declarações longhand acima, mais <code>font-variant: normal</code> e <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> + +<h2 id="Border_Properties" name="Border_Properties">Propriedades de borda</h2> + +<p>Com a borda, o width (largura), color (cor), podem ser simplificados em uma declaração. Por exemplo,</p> + +<pre>border-width: 1px; +border-style: solid; +border-color: #000;</pre> + +<p>Podem ser escritas como</p> + +<pre>border: 1px solid #000;</pre> + +<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Propriedades de margin e padding</h2> + +<p>As versões shorthand de margin e padding funcionam da mesma maneira. As seguintes declarações CSS:</p> + +<pre>margin-top: 10px; +margin-right: 5px; +margin-bottom: 10px; +margin-left: 5px;</pre> + +<p>são as mesmas da seguinte declaração (note que os valores estão em ordem horária: top, right, bottom e left(TRBL, mesmas consoantes de TRBL "trouble"))</p> + +<pre>margin: 10px 5px 10px 5px;</pre> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> + <li>{{css_key_concepts}}</li> + <li>Propriedades shorthand : {{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")}}.</li> +</ul> |