La propiedad de estilo de lista en CSS se usa para establecer el estilo de lista. Esta propiedad es una combinación de otras tres propiedades, a saber, tipo de estilo de lista, posición de estilo de lista e imagen de estilo de lista, que se pueden utilizar como una notación abreviada para estas tres propiedades. El valor predeterminado de esta propiedad se utilizará si se pierde alguno de los valores.
Sintaxis:
list-style: list-style-type list-style-position list-style-image|initial|inherit;
Valores de propiedad:
- list-style-type : este valor establece el marcador (como un disco, carácter o estilo de contador personalizado) de un elemento de lista. Su valor predeterminado es un disco.
- list-style-position : este valor establece la posición del marcador en relación con un elemento de la lista. Su valor por defecto es “fuera”.
- list-style-image : este valor establece una imagen que se utilizará como marcador de elementos de la lista. Su valor por defecto es “ninguno”.
Comprenderemos los conceptos de propiedad de estilo de lista a través de los ejemplos.
Ejemplo 1: este ejemplo ilustra el uso de la propiedad de estilo de lista donde el valor de posición se establece en el interior.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<style>
ul {
list-style: square inside url(
"https://write.geeksforgeeks.org/wp-content/uploads/listitem-1.png");
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo ilustra el uso de la propiedad de estilo de lista donde el valor de posición se establece en el exterior.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS list-style Property </title>
<style>
ul {
list-style: square outside;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS list-style Property
</h2>
<p>Sorting Algorithms</p>
<ul>
<li>Bubble Sort</li>
<li>Selection Sort</li>
<li>Merge Sort</li>
</ul>
</body>
</html>
Producción:
Nota: si no se especifica una imagen de estilo de lista, se tomará como ninguna.
Navegadores compatibles: los navegadores compatibles con la propiedad de estilo de lista se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Microsoft Edge 12.0
- Firefox 1.0
- Ópera 7.0
- 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