La Lista en CSS especifica la lista de los contenidos o elementos de una manera particular, es decir, se puede organizar de forma ordenada o desordenada, lo que ayuda a crear una página web limpia. Se puede usar para organizar los grandes con una variedad de contenido, ya que son flexibles y fáciles de administrar. El estilo predeterminado de la lista no tiene bordes. La lista se puede clasificar en 2 tipos:
- Lista desordenada : en las listas desordenadas, los elementos de la lista están marcados con viñetas, es decir, pequeños círculos negros de forma predeterminada.
- Lista ordenada : en las listas ordenadas, los elementos de la lista están marcados con números y un alfabeto.
Marcador de elemento de lista: esta propiedad especifica el tipo de marcador de elemento, es decir, lista desordenada u ordenada. La propiedad list-style-type especifica la apariencia del marcador de elemento de lista (como un disco, carácter o estilo de contador personalizado) de un elemento de elemento de lista. Su valor predeterminado es un disco.
Sintaxis:
list-style-type:value;
Se puede utilizar el siguiente valor:
- circulo
- decimal, por ejemplo: 1,2,3, etc.
- ceros decimales a la izquierda, por ejemplo: 01,02,03,04, etc.
- bajo-romano
- romano superior
- alfa inferior, por ejemplo: a, b, c, etc.
- alfa superior, por ejemplo: A, B, C, etc.
- cuadrado
Ejemplo : este ejemplo describe la lista CSS con varios tipos de estilo de lista donde los valores se establecen en cuadrado y alfa inferior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-type: square;
}
ol.c {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<ul class="b">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<p> Ordered Lists </p>
<ol class="c">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
<ol class="d">
<li>one</li>
<li>two</li>
<li>three</li>
</ol>
</body>
</html>
Producción:
Imagen como marcador de lista: esta propiedad especifica la imagen como marcador de elemento de lista. La propiedad list-style-image se utiliza para establecer una imagen que se utilizará como marcador de elemento de lista. Su valor por defecto es “ninguno”.
Sintaxis:
list-style-image: url;
Ejemplo : este ejemplo describe la lista CSS con varias imágenes de estilo de lista donde los valores se establecen en la URL de la imagen.
HTML
<!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>
<h1>
GeeksforGeeks
</h1>
<p> Unordered lists </p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Producción:
Posición del marcador de lista: esta propiedad especifica la posición del marcador de elemento de lista. La propiedad list-style-position se utiliza para establecer la posición del marcador en relación con un elemento de la lista. Su valor por defecto es “fuera”.
Hay 2 tipos de marcadores de posición:
- posición-estilo-lista: fuera; En esto, las viñetas estarán fuera del elemento de la lista. El inicio de cada línea de la lista se alineará verticalmente.
Sintaxis:
list-style-position: outside;
Ejemplo : este ejemplo describe la lista CSS con las diversas posiciones de estilo de lista donde el valor se establece en el exterior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one
<br>
In this the bullet points will be outside the list item.</li>
<li>two
<br>
The start of each line of the list will be aligned vertically. </li>
<li>three</li>
</ul>
</body>
</html>
Producción:
posición-estilo-lista: dentro; En esto, las viñetas estarán dentro de la lista. La línea junto con las viñetas se alinearán verticalmente.
Sintaxis:
list-style-position: inside;
Ejemplo : este ejemplo describe la lista CSS con las diversas posiciones de estilo de lista donde el valor se establece en el interior.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: inside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one
<br>
In this the bullet points will be inside the list item.</li>
<li>two
<br>
The line along with the bullet points will be aligned vertically.. </li>
<li>three</li>
</ul>
</body>
</html>
Producción:
Propiedad abreviada : esta propiedad nos permite establecer todas las propiedades de la lista en un solo comando. El orden de propiedad es tipo, posición e imagen. Si falta alguna de las propiedades, se inserta el valor predeterminado.
Ejemplo : este ejemplo describe la lista CSS utilizando la propiedad abreviada.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square inside;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Producción:
Listas de estilo: la lista se puede formatear en CSS. Se pueden configurar diferentes colores, bordes, fondos y rellenos para las listas.
Ejemplo : este ejemplo describe la lista CSS donde se aplican las diversas propiedades de estilo al elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style: square;
background: pink;
padding: 20px;
}
</style>
</head>
<body>
<h2>
GeeksforGeeks
</h2>
<p> Unordered lists </p>
<ul class="a">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
Producción:
Lista anidada: las listas también se pueden anidar. Tenemos subsecciones para secciones, por lo que necesitamos el anidamiento de listas.
Ejemplo : este ejemplo describe la Lista CSS que tiene una lista declarada dentro de otra lista.
HTML
<!DOCTYPE html> <html> <head></head> <body> <h2> GeeksforGeeks </h2> <ul> <li> one <ul> <li>sub one</li> <li>sub two</li> </ul> </li> <li> two <ul> <li>sub one</li> <li>sub two</li> </ul> </li> <li> three <ul> <li>sub one</li> <li>sub two</li> </ul> </li> </ul> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome 95.0
- Microsoft Edge 95.0
- Firefox 93.0
- Internet Explorer 11.0
- Ópera 80.0
- Safari 15.0
Publicación traducida automáticamente
Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA