diff options
Diffstat (limited to 'files/es/web/css/text-emphasis/index.html')
| -rw-r--r-- | files/es/web/css/text-emphasis/index.html | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/files/es/web/css/text-emphasis/index.html b/files/es/web/css/text-emphasis/index.html new file mode 100644 index 0000000000..94979eb8af --- /dev/null +++ b/files/es/web/css/text-emphasis/index.html @@ -0,0 +1,178 @@ +--- +title: text-emphasis +slug: Web/CSS/text-emphasis +translation_of: Web/CSS/text-emphasis +--- +<div> +<p>La <strong>propiedad</strong> <strong><a href="https://developer.mozilla.org/es/docs/Web/CSS">CSS</a></strong> de <strong>text-emphasis</strong>, es una propiedad <em>abreviada</em> para establecer los valores de <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-style">text-empahasis-style</a> y <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis-color">text-emphasis-color</a>, en una sola declaración.</p> + +<p>Esta <strong>propiedad</strong> aplicara el énfasis a cada carácter especificado en el texto del elemento, a excepción de caracteres separados como espacios y caracteres de control .</p> +</div> + +<pre class="brush:css no-line-numbers">/* Valor Inicial */ +text-emphasis: none; /* No emphasis marks */ + +/* <string> valor */ +text-emphasis: 'x'; +text-emphasis: '点'; +text-emphasis: '\25B2'; +text-emphasis: '*' #555; +text-emphasis: 'foo'; /* Should NOT use. It may be computed to or rendered as 'f' only */ + +/* Valor de la Palabra Clave */ +text-emphasis: filled; +text-emphasis: open; +text-emphasis: filled sesame; +text-emphasis: open sesame; + +/* Valor de la Palabra clave combinada con un color */ +text-emphasis: filled sesame #555; + +/* Valores Globales */ +text-emphasis: inherit; +text-emphasis: initial; +text-emphasis: unset; +</pre> + +<p>La propiedad <strong>text-emphasis</strong> es diferente a la propiedad <a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">text-decoration</a>.</p> + +<p><a href="https://developer.mozilla.org/es/docs/Web/CSS/text-decoration">Text-decoration</a> no hereda y la decoración se aplica atreves de todo el elemento. Sin embargo, la propiedad <strong>test-emphasis</strong> si hereda, lo que significa que es posible cambiar el <strong>énfasis</strong> para los descendientes.</p> + +<p>The size of the emphasis symbol, like ruby symbols, is about 50% of the size of the font, and <code>text-emphasis</code> may affect line height when the current leading is not enough for the marks.</p> + +<div class="note"> +<p><code>text-emphasis</code> doesn't reset the value of {{cssxref("text-emphasis-position")}}. This is because if the style and the color of emphasis marks may vary in a text, it is extremely unlikely that their position will. In the very rare cases when this is needed, the property {{cssxref("text-emphasis-position")}}.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>none</code></dt> + <dd>No emphasis marks.</dd> + <dt><code>filled</code></dt> + <dd>The shape is filled with solid color. If neither <code>filled</code> nor <code>open</code> is present, this is the default.</dd> + <dt><code>open</code></dt> + <dd>The shape is hollow.</dd> + <dt><code>dot</code></dt> + <dd>Display small circles as marks. The filled dot is <code>'•'</code> (<code>U+2022</code>), and the open dot is <code>'◦'</code> (<code>U+25E6</code>).</dd> + <dt><code>circle</code></dt> + <dd>Display large circles as marks. The filled circle is <code>'●'</code> (<code>U+25CF</code>), and the open circle is <code>'○'</code> (<code>U+25CB</code>). This is the default shape in horizontal writing modes when no other shape is given.</dd> + <dt><code>double-circle</code></dt> + <dd>Display double circles as marks. The filled double-circle is <code>'◉'</code> (<code>U+25C9</code>), and the open double-circle is <code>'◎'</code> (<code>U+25CE</code>).</dd> + <dt><code>triangle</code></dt> + <dd>Display triangles as marks. The filled triangle is <code>'▲'</code> (<code>U+25B2</code>), and the open triangle is <code>'△'</code> (<code>U+25B3</code>).</dd> + <dt><code>sesame</code></dt> + <dd>Display sesames as marks. The filled sesame is <code>'﹅'</code> (<code>U+FE45</code>), and the open sesame is <code>'﹆'</code> (<code>U+FE46</code>). This is the default shape in vertical writing modes when no other shape is given.</dd> + <dt><code><string></code></dt> + <dd>Display the given string as marks. Authors should not specify more than one<em> character</em> in <code><string></code>. The UA may truncate or ignore strings consisting of more than one grapheme cluster.</dd> + <dt><code><color></code></dt> + <dd>Defines the color of the mark. If no color is present, it defaults to <code>currentColor</code>.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="A_heading_with_emphasis_shape_and_color">A heading with emphasis shape and color</h3> + +<p>This example draws a heading with triangles used to emphasize each character.</p> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h2 { + text-emphasis: triangle #D55; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><h2>This is important!</h2></pre> + +<h4 id="Resultado">Resultado</h4> + +<p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> + <td>{{Spec2('CSS3 Text Decoration')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td> + <td>25.0{{property_prefix("-webkit")}}</td> + <td>{{CompatNo()}}</td> + <td>15.0{{property_prefix("-webkit")}}</td> + <td>6.1{{property_prefix("-webkit")}}<br> + 7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop("46")}}<sup>[1]</sup></td> + <td>4.4{{property_prefix("-webkit")}}</td> + <td>{{CompatNo()}}</td> + <td>33{{property_prefix("-webkit")}}</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Firefox 45, it wasn't activated by default: in <code>about:config</code>, the user has to set the preference <code>layout.css.text-emphasis.enabled</code> to <code>true</code>. Activated by default in Firefox 46, this preference was removed in Firefox 49.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>The longhand properties {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}.</li> + <li>The {{cssxref('text-emphasis-position')}} property allowing to define the position of the emphasis marks.</li> +</ul> |