symbols
Summary
El descriptor symbols
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. El descriptor symbols debe ser especificado cuando el valor del descriptor system
es cyclic, numeric, alphabetic, symbolic, o fixed. Cuando se usa el sistema additive, el descriptor additive-symbols
es usado para especificar los símbolos.
Los valores posibles para descriptor de símbolos incluyen:
- Textos (
<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". - Imágenes - Usando la función
url()
- Identificadores
Related at-rule | @counter-style |
---|---|
Valor inicial | n/a (required) |
Valor calculado | como se especifica |
Sintaxis
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;
Valores
<symbol>
-
Representa u símbolo (
<symbol>
) usado dentro del sistema de conteo.
Sintaxis formal
symbols =
<symbol>+
<symbol> =
<string> |
<image> |
<custom-ident>
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Ejemplo
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
CSS
@counter-style symbols-example {
system: fixed;
symbols: A "1" "\24B7" D E;
}
.list {
list-style: symbols-example;
}
Resultado
must be provided
Especificaciones
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Compatibilidad con navegadores
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
symbols |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
Véase también
list-style
,list-style-image
,list-style-position
symbols()
, la notación funcional para crear estilos de contador anónimos.