El descriptor de símbolos aditivos de CSS se usa principalmente para especificar símbolos cuando el valor de un descriptor de sistema de contador es aditivo . Define tuplas aditivas, cada una de las cuales es un par que contiene un símbolo y un peso entero no negativo.
Sintaxis:
additive-symbols : positiveIntegerCounter identifier(s)/string(s)/image(s);
Valores de propiedad: hay algunos valores de propiedad importantes que se pueden usar en símbolos aditivos:
- identificadores
- instrumentos de cuerda)
- imagen(es)
Programas para ilustrar el descriptor de símbolos aditivos CSS:
Ejemplo 1:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
@counter-style mylist {
system: additive;
additive-symbols: 3 "A", 2 "\2764";
}
ul {
list-style-type: mylist;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>
CSS | additive-symbols descriptor
</h3>
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE HTML>
<html>
<head>
<style>
@counter-style dice {
system: additive;
additive-symbols: 6 "\2685",
5 "\2684", 4 "\2683",
3 "\2682", 2 "\2681", 1 "\2680";
suffix: " ";
}
ul {
list-style-type: dice;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h3>
CSS | additive-symbols descriptor
</h3>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</body>
</html>
Producción:
Navegadores compatibles:
- Google cromo 91
- Borde 91
- Firefox 33
- Ópera 77
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA