W3Docs

Apariencia

Español

Propiedad list-style-type de CSS ​

La propiedad list-style-type de CSS se utiliza para especificar el tipo de elemento de un elemento de lista.

Un marcador de lista puede tener tres tipos: glifos (círculo, disco, cuadrado), sistemas de numeración y sistemas alfabéticos.

El color del marcador será el mismo que el color calculado del elemento al que se aplica. Puedes elegir colores desde aquí.

Solo los elementos <li> y <summary> tienen el valor "list-item" de la propiedad display. Podemos aplicar la propiedad list-style-type a cualquier elemento con display establecido en list-item. Esta propiedad se puede establecer en un elemento padre (generalmente <ol> o <ul>).

Valor inicialdisc
Se aplica aElementos de lista.
HeredadoSí.
AnimableNo.
VersiónCSS1
Sintaxis DOMobject.style.listStyleType = "armenian";

Sintaxis ​

Sintaxis de la propiedad list-style-type de CSS

css
list-style-type: disc | armenian | circle | cjk-ideographic | decimal | decimal-leading-zero | georgian | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-alpha | lower-greek | lower-latin | lower-roman | none | square | upper-alpha | upper-latin | upper-roman | initial | inherit;

Ejemplo de la propiedad list-style-type: ​

Ejemplo de la propiedad CSS list-style-type con valores square y hebrew

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.list-styles {
        list-style-type: square;
      }
      ul.list-styles2 {
        list-style-type: hebrew;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <ul class="list-styles">
      <li>Appetizers</li>
      <li>Main Course</li>
      <li>Salads</li>
    </ul>
    <ul class="list-styles2">
      <li>Cold Drinks</li>
      <li>Hot Drinks</li>
      <li>Ice-Creams</li>
    </ul>
  </body>
</html>
Try it Yourself »

Resultado ​

CSS list-style-type Property

Ejemplo de la propiedad list-style-type con el valor "disc": ​

Ejemplo de la propiedad list-style-type con el valor "disc":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: disc;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property with "disc" value.
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Ejemplo de la propiedad list-style-type con el valor "decimal": ​

Ejemplo de la propiedad list-style-type con el valor "decimal":

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        list-style-type: decimal;
      }
    </style>
  </head>
  <body>
    <h1> 
      Example of the list-style-type property 
    </h1>
    <ul class="text">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ul>
  </body>
</html>
Try it Yourself »

Ejemplo de la propiedad list-style-type con listas ordenadas: ​

Ejemplo de la propiedad CSS list-style-type con valores circle, square, upper-roman, lower-alpha, armenian, decimal, cjk-ideographic, georgian, upper-alpha y otros valores

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul.a {
        list-style-type: circle;
      }
      ul.b {
        list-style-type: square;
      }
      ol.c {
        list-style-type: upper-roman;
      }
      ol.d {
        list-style-type: lower-alpha;
      }
      ol.e {
        list-style-type: armenian;
      }
      ol.f {
        list-style-type: decimal;
      }
      ol.g {
        list-style-type: cjk-ideographic;
      }
      ol.h {
        list-style-type: decimal-leading-zero;
      }
      ol.i {
        list-style-type: georgian;
      }
      ol.j {
        list-style-type: hebrew;
      }
      ol.k {
        list-style-type: hiragana;
      }
      ol.l {
        list-style-type: hiragana-iroha;
      }
      ol.m {
        list-style-type: katakana;
      }
      ol.n {
        list-style-type: katakana-iroha;
      }
      ol.o {
        list-style-type: lower-greek;
      }
      ol.p {
        list-style-type: lower-latin;
      }
      ol.q {
        list-style-type: lower-roman;
      }
      ol.r {
        list-style-type: none;
      }
      ol.s {
        list-style-type: upper-alpha;
      }
      ol.t {
        list-style-type: upper-latin;
      }
    </style>
  </head>
  <body>
    <h2>List-style-type property example</h2>
    <p>Examples of unordered lists:</p>
    <h3>Circle</h3>
    <ul class="a">
      <li>New York</li>
      <li>Las Vegas</li>
      <li>Washington</li>
    </ul>
    <h3>Square</h3>
    <ul class="b">
      <li>San Francisco</li>
      <li>Los Angeles</li>
      <li>Miami</li>
    </ul>
    <p>Examples of ordered lists:</p>
    <h3>Upper-roman</h3>
    <ol class="c">
      <li>Barcelona</li>
      <li>Madrid</li>
      <li>London</li>
    </ol>
    <h3>Lower-alpha</h3>
    <ol class="d">
      <li>Dubai</li>
      <li>Anu Dhabi</li>
      <li>Qatar</li>
    </ol>
    <h3>Armenian</h3>
    <ol class="e">
      <li>Yerevan</li>
      <li>Paris</li>
      <li>Rome</li>
    </ol>
    <h3>Decimal</h3>
    <ol class="f">
      <li>Sydney</li>
      <li>Honk Kong</li>
      <li>Moscow</li>
    </ol>
    <h3>Cjk-ideographic</h3>
    <ol class="g">
      <li>Kiev</li>
      <li>Saint-Petersburg</li>
      <li>Tula</li>
    </ol>
    <h3>Decimal-leading-zero</h3>
    <ol class="h">
      <li>Bangkok</li>
      <li>Gyumri</li>
      <li>Valencia</li>
    </ol>
    <h3>Georgian</h3>
    <ol class="i">
      <li>Madrid</li>
      <li>Barcelona</li>
      <li>Prague</li>
    </ol>
    <h3>Hebrew</h3>
    <ol class="j">
      <li>Jerusalem</li>
      <li>Toronto</li>
      <li>Prague</li>
    </ol>
    <h3>Hiragana</h3>
    <ol class="k">
      <li>Cairo</li>
      <li>Tokyo</li>
      <li>Athens</li>
    </ol>
    <h3>Hiragana-iroha</h3>
    <ol class="l">
      <li>Tehran</li>
      <li>Tavriz</li>
      <li>Tel Aviv</li>
    </ol>
    <h3>Katakana</h3>
    <ol class="m">
      <li>Munich</li>
      <li>Berlin</li>
      <li>Bavaria</li>
    </ol>
    <h3>Katakana-iroha</h3>
    <ol class="n">
      <li>Brussels</li>
      <li>Istanbul</li>
      <li>Sydney</li>
    </ol>
    <h3>Lower-greek</h3>
    <ol class="o">
      <li>Seville</li>
      <li>Granada</li>
      <li>Venice</li>
    </ol>
    <h3>Lower-latin</h3>
    <ol class="p">
      <li>Budapest</li>
      <li>Vienna</li>
      <li>Amsterdam</li>
    </ol>
    <h3>Lower-roman</h3>
    <ol class="q">
      <li>Buenos Aires</li>
      <li>Rio de Janeiro</li>
      <li>San Paolo</li>
    </ol>
    <h3>None</h3>
    <ol class="r">
      <li>Vilnius</li>
      <li>Tallin</li>
      <li>Riga</li>
    </ol>
    <h3>Upper-alpha</h3>
    <ol class="s">
      <li>Montreal</li>
      <li>Melbourne</li>
      <li>Edinburgh</li>
    </ol>
    <h3>Upper-latin</h3>
    <ol class="t">
      <li>Dublin</li>
      <li>Mexico</li>
      <li>Florence</li>
    </ol>
  </body>
</html>
Try it Yourself »

Valores ​

ValorDescripciónProbar
discCrea un marcador como un círculo relleno. Es el valor predeterminado de esta propiedad.Probar »
armenianCrea un marcador como una numeración armenia tradicional.Probar »
circleCrea un marcador como un círculo.Probar »
cjk-ideographicCrea un marcador que son números ideográficos simples.Probar »
decimalCrea un marcador como un número.Probar »
decimal-leading-zeroCrea un marcador como un número con cero a la izquierda, como 01, 02, 05...Probar »
georgianCrea un marcador como una numeración georgiana tradicional.Probar »
hebrewCrea un marcador como una numeración hebrea tradicional.Probar »
hiraganaCrea un marcador como una numeración hiragana tradicional.Probar »
hiragana-irohaCrea un marcador como una numeración hiragana iroha tradicional.Probar »
katakanaCrea un marcador como una numeración katakana tradicional.Probar »
katakana-irohaCrea un marcador como una numeración katakana iroha tradicional.Probar »
lower-alphaCrea un marcador como minúsculas alfabéticas, como a, b, c, d...Probar »
lower-greekCrea un marcador como minúsculas griegas.Probar »
lower-latinCrea un marcador como minúsculas latinas, como a, b, c, d...Probar »
lower-romanCrea un marcador como números romanos en minúsculas, como i, ii, iii, iv...Probar »
noneIndica que el marcador no se mostrará.Probar »
squareCrea un marcador como un cuadrado.Probar »
upper-alphaCrea un marcador como mayúsculas alfabéticas, como A, B, C, D...Probar »
upper-latinCrea un marcador como mayúsculas latinas, como A, B, C, D...Probar »
upper-romanCrea un marcador como números romanos en mayúsculas, como I, II, III, IV, V...Probar »
initialHace que la propiedad use su valor predeterminado.Probar »
inheritHereda la propiedad de su elemento padre.

Práctica ​

¿Qué especifica la propiedad list-style-type en CSS?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.