diff options
Diffstat (limited to 'files/es/web/css/@counter-style/symbols/index.html')
| -rw-r--r-- | files/es/web/css/@counter-style/symbols/index.html | 144 |
1 files changed, 144 insertions, 0 deletions
diff --git a/files/es/web/css/@counter-style/symbols/index.html b/files/es/web/css/@counter-style/symbols/index.html new file mode 100644 index 0000000000..8a81c04645 --- /dev/null +++ b/files/es/web/css/@counter-style/symbols/index.html @@ -0,0 +1,144 @@ +--- +title: symbols +slug: Web/CSS/@counter-style/symbols +tags: + - Descriptor CSS + - Estilos de contadores CSS +translation_of: Web/CSS/@counter-style/symbols +--- +<h2 id="Summary">Summary</h2> + +<p><span class="seoSummary">El descriptor <code>symbols</code> es usado para definir los símbolos que usará un sistema de conteo específico para construir una representación de conteo. Un símbolo puede ser un texto, una imagen o un identificador.</span> El descriptor symbols debe ser especificado cuando el valor del descriptor {{cssxref('system')}} es <em>cyclic</em>, <em>numeric</em>, <em>alphabetic</em>, <em>symbolic</em>, o <em>fixed</em>. Cuando se usa el sistema <em>additive</em>, el descriptor {{cssxref('additive-symbols')}} es usado para especificar los símbolos.</p> + +<p>Los valores posibles para descriptor de símbolos incluyen:</p> + +<ul> + <li>Textos ({{cssxref("<string>")}}) - secuencia de caracteres definidos entre comillas sencillas o dobles. Se pueden usar diagonales invertidas (\) para escapar caracteres especiales. Por ejemplo, los caracteres Unicode pueden ser especificados en formato "\24B6".</li> + <li>Imágenes - Usando la función {{cssxref("<url>", "url()")}}</li> + <li>Identificadores</li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxis">Sintaxis</h2> + +<pre class="brush: css">symbols: A B C D E; +symbols: "\24B6" "\24B7" "\24B8" D E; +symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9"; +symbols: url('first.svg') url('second.svg') url('third.svg'); +symbols: indic-numbers; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code><symbol></code></dt> + <dd>Representa u símbolo (<code><symbol></code>) usado dentro del sistema de conteo.</dd> +</dl> + +<h3 id="Sintaxis_formal">Sintaxis formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplo">Ejemplo</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul class="list"> + <li>One</li> + <li>Two</li> + <li>Three</li> + <li>Four</li> + <li>Five</li> +</ul></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">@counter-style symbols-example { + system: fixed; + symbols: A "1" "\24B7" D E; +} + +.list { + list-style: symbols-example; +}</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/@counter-style/symbols') }}</p> + +<h2 id="Specifications" name="Specifications">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Counter Styles', '#counter-style-symbols', 'symbols')}}</td> + <td>{{Spec2('CSS3 Counter Styles')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característic</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(33)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Véase_también">Véase también</h2> + +<ul> + <li>{{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}</li> + <li>{{cssxref("symbols", "symbols()")}}, la notación funcional para crear estilos de contador anónimos.</li> +</ul> |