A veces, una página web tiene un buen contenido para leer, pero el estilo de los textos se ve inadecuado, por lo que se vuelve aburrido para los lectores y, por último, abandonan la página web. Pero cuando leen artículos con el estilo y las listas adecuados, los leen por completo debido a las buenas imágenes que se muestran allí, lo que los mantiene atraídos por el artículo y las lecturas.
Entonces, qué hacer para mejorar las imágenes y el estilo de los textos y listas en la página web. Las propiedades de lista CSS se pueden aplicar en elementos de lista HTML como CSS list-style-type , CSS list-style-image y CSS list-style-position property para hacerlos atractivos y llamativos.
En este artículo, aprenderemos a declarar y diseñar las propiedades de la lista.
Tipos de listas HTML :
- Listas ordenadas : una lista de elementos, donde cada lista de elementos está marcada con números.
- Listas desordenadas: una lista de elementos, donde cada lista de elementos está marcada con viñetas.
Propiedades de la lista de estilos:
CSS proporciona varias propiedades para diseñar y dar formato a las listas ordenadas y desordenadas más utilizadas. Estas propiedades de la lista CSS generalmente le permiten
- Controla la forma o apariencia de los elementos.
- Especifique una imagen para los elementos en lugar de una viñeta o un número.
- Establezca la distancia entre los elementos y el texto en la lista.
- Especifica si los elementos aparecerán dentro o fuera del cuadro que contiene los elementos de la lista.
Las propiedades de la lista contienen las siguientes propiedades:
- list-style-type: Especifica el tipo de marcador de elemento de lista. Los valores se pueden establecer como círculo, cuadrado, caracteres romanos, etc., donde el valor predeterminado se establece en disco .
- list-style-position: especifica la posición o lugar del marcador de elemento de lista. Los valores se pueden establecer en interior, exterior (valor predeterminado), heredar e inicial .
- list-style-image: Especifica la imagen del marcador de elemento de lista.
Nota: el estilo de lista
Sintaxis:
list-style: list-style-type list-style-position list-style-image| initial|inherit;
Ejemplo 1: el siguiente código usa el archivo de imagen «gfg3.png» para el estilo de la viñeta.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS List style Properties</title>
<style>
ul {
list-style: square inside url("gfg3.png");
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<b>CSS list-style property for grocery list</b>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
<li>Cereals</li>
</ul>
</body>
</html>
Producción:
propiedad de estilo de lista
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Style List Properties</title>
<style>
body{
background-color: pink;
}
ul{
list-style: decimal inside none;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<b>The list-style property for fruits</b>
<p>This is a another example of list-style properties</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por rutvichristian y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA