CSS | Propiedad de imagen de estilo de lista

La propiedad list-style-image en CSS se utiliza para establecer la imagen que se utilizará como marcador de elementos de la lista.

Sintaxis:

list-style-image: none|url|initial|inherit;

Valores de propiedad :

ninguno: este valor especifica que no se utiliza ninguna imagen como marcador. Si se establece este valor, se utiliza en su lugar el marcador definido en list-style-type. Este es el valor predeterminado.
Sintaxis:

list-style-image: none;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul  {
          list-style-image: none;
        }
    </style>
    </head>
    <body style = "">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS list-style-image Property
        </h2>
          
        <p>Sorting Algorithms</p>
          
        <ul>
          <li>Bubble Sort</li>
          <li>Selection Sort</li>
          <li>Merge Sort</li>
        </ul>
    </body>
</html>

Producción:
imagen de estilo de lista

url: en este valor, la ruta a la imagen se utiliza como marcador de elemento de lista.
Sintaxis:

list-style-image: url;

Ejemplo:

<!DOCTYPE html>
<html>
    <head>
    <title>
        CSS list-style-image Property
    </title>
    <style>
        ul  {
          list-style-image: 
url("https://contribute.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
        }
    </style>
    </head>
    <body style = "">
        <h1 style = "color:green;">
            GeeksforGeeks
        </h1>
          
        <h2>
            CSS list-style-image Property
        </h2>
          
        <p>Sorting Algorithms</p>
          
        <ul>
          <li>Bubble Sort</li>
          <li>Selection Sort</li>
          <li>Merge Sort</li>
        </ul>
    </body>
</html>

Producción:
imagen de estilo de lista

initial: este modo establece esta propiedad en su valor predeterminado.
Sintaxis:
```
list-style-image: initial;
```

Navegadores compatibles: los navegadores compatibles con la propiedad list-style-image se enumeran a continuación:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Ópera 7.0
Apple Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta