list-style-type

  • Enlace amigable (slug) de la revisión: CSS/list-style-type
  • Título de la revisión: list-style-type
  • Id de la revisión: 170113
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario creo+traduzco (en+fr)+categorías

Contenido de la revisión

{{template.CSSRef()}}

Resumen

El {{template.Cssxref("list-style-type", "tipo de estilo de lista")}} especifica la apariencia del orden de lista.

  • {{template.Cssxref("initial", "Valor inicial")}}: {{template.Cssxref("disc", "disco/punto")}}
  • Se aplica a: elements with 'display: list-item'
  • {{template.Cssxref("inheritance", "Valor heredado")}}: Sí
  • Porcentajes: n/a
  • Medio: {{template.Cssxref("Media:Visual", "visual")}}
  • {{template.Cssxref("computed value", "Valor calculado")}}: según se especificó

Sintaxis

 list-style-type:  <std-list-style-name> | {{template.Cssxref("none")}} | {{template.Cssxref("inherit")}} ;

Valores

<std-list-style-name>
un nombre de estilo de lista estándar: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha
disc 
un disco.
circle 
un círculo.
square 
un cuadrado.
decimal 
números decimales empezando con 1.
decimal-leading-zero 
números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).
lower-roman 
números romanos en minúscula (i, ii, iii, iv, v, etc.).
upper-roman 
números romanos en mayúscula (I, II, III, IV, V, etc.).
lower-greek 
letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...
lower-latin 
letras ASCII en minúscula (a, b, c, ... z).
upper-latin 
letras ASCII en mayúscula (A, B, C, ... Z).
armenian 
numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).
georgian 
numeración georgiana tradicional (an, ban, gan, ..., he, tan, in, in-an, ...).
lower-alpha 
es igual que lower-latin.
upper-alpha 
es igual que upper-latin.
none 
nada.

Ejemplos

ol {
    list-style-type: decimal;
}

Notas

Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con lower-latin no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.

Especificaciones

Compatibilidad con navegadores

Ver también

{{template.Cssxref("list-style")}}, {{template.Cssxref("list-style-image")}}, {{template.Cssxref("list-style-position")}}

{{ wiki.languages( { "fr": "fr/CSS/list-style-type", "pl": "pl/CSS/list-style-type", "en": "en/CSS/list-style-type" } ) }}

Fuente de la revisión

<p> 
{{template.CSSRef()}}
</p>
<h3 name="Resumen"> Resumen </h3>
<p>El {{template.Cssxref("list-style-type", "tipo de estilo de lista")}} especifica la apariencia del <a href="es/HTML/Element/li">orden de lista</a>.
</p>
<ul><li> {{template.Cssxref("initial", "Valor inicial")}}: {{template.Cssxref("disc", "disco/punto")}}
</li><li> Se aplica a: elements with 'display: list-item'
</li><li> {{template.Cssxref("inheritance", "Valor heredado")}}: Sí
</li><li> Porcentajes: n/a
</li><li> Medio: {{template.Cssxref("Media:Visual", "visual")}}
</li><li> {{template.Cssxref("computed value", "Valor calculado")}}: según se especificó
</li></ul>
<h3 name="Sintaxis"> Sintaxis </h3>
<pre class="eval"> list-style-type:  &lt;std-list-style-name&gt; | {{template.Cssxref("none")}} | {{template.Cssxref("inherit")}} ;
</pre>
<h3 name="Valores"> Valores </h3>
<dl><dt>&lt;std-list-style-name&gt;
</dt><dd>un nombre de estilo de lista estándar: <code>disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha</code>
</dd><dt> <code>disc</code> </dt><dd> un disco.
</dd><dt> <code>circle</code> </dt><dd> un círculo.
</dd><dt> <code>square</code> </dt><dd> un cuadrado.
</dd><dt> <code>decimal</code> </dt><dd> números decimales empezando con 1.
</dd><dt> <code>decimal-leading-zero</code> </dt><dd> números decimales empezando eventualmente por ceros (por ejemplo: 01, 02, 03, ..., 98, 99).
</dd><dt> <code>lower-roman</code> </dt><dd> números romanos en minúscula (i, ii, iii, iv, v, etc.).
</dd><dt> <code>upper-roman</code> </dt><dd> números romanos en mayúscula (I, II, III, IV, V, etc.).
</dd><dt> <code>lower-greek</code> </dt><dd> letras griegas en minúscula alfa/α, beta/β, gamma/γ, ...
</dd><dt> <code>lower-latin</code> </dt><dd> letras ASCII en minúscula (a, b, c, ... z).
</dd><dt> <code>upper-latin</code> </dt><dd> letras ASCII en mayúscula (A, B, C, ... Z).
</dd><dt> <code>armenian</code> </dt><dd> numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, ...).
</dd><dt> <code>georgian</code> </dt><dd> numeración georgiana tradicional  (an, ban, gan, ..., he, tan, in, in-an, ...).
</dd><dt> <code>lower-alpha</code> </dt><dd> es igual que <code>lower-latin</code>.
</dd><dt> <code>upper-alpha</code> </dt><dd> es igual que <code>upper-latin</code>.
</dd><dt> <code>none</code> </dt><dd> nada.
</dd></dl>
<h3 name="Ejemplos"> Ejemplos </h3>
<pre>ol {
    list-style-type: decimal;
}
</pre>
<h3 name="Notas"> Notas </h3>
<p>Ésta especificación no define el comportamiento en el caso de una lista con más elementos que la cantidad de letras del alfabeto utilizado. Por ejemplo, después de 26 letras, el resultado con <code>lower-latin</code> no es definido (y continuará como: AA, AB, AC,...). Por eso, para listas largas, es recomendable utilizar números.
</p>
<h3 name="Especificaciones"> Especificaciones </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#list-style-type">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-type">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-lists/#list-style-type">css3-lists</a>
</li></ul>
<h3 name="Compatibilidad_con_navegadores"> Compatibilidad con navegadores </h3>
<h3 name="Ver_tambi.C3.A9n"> Ver también </h3>
<p>{{template.Cssxref("list-style")}}, {{template.Cssxref("list-style-image")}}, {{template.Cssxref("list-style-position")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/list-style-type", "pl": "pl/CSS/list-style-type", "en": "en/CSS/list-style-type" } ) }}
Revertir a esta revisión