Estilos de listas en CSS

CSS | Estilos de listas : Aquí, vamos a aprender sobre la labrar las listas en CSS (Cascading Style Sheet).

CSS | Estilos de listas

El CSS propiedad styling se utiliza para establecer diferentes marcadores y estilos de elementos de lista class ordenadas y listas desordenadas. Algunos de los valores son for listas desordenadas, mientras que algunos son for listas ordenadas.

El lista de estilo es la propiedad abreviada que se puede utilizar con el disco de valores for fuera ninguno tipo default, la posición, y la imagen respectivamente.

propiedades de elemento de la lista:

  • list-style-type
  • list-style-image
  • list-style-posición

Sintaxis:

    li
{
list-style-type : value;
}

de tipo de estilo de lista propiedad

Esta propiedad se utiliza para definir la forma o tipo de punto de bala usada for cada lista-elemento.

El valor for es disco.

Otros valores son,

  • decimal : En este valor, un marcador es un número.
  • disco : En este valor, el marcador de círculo está vacío.
  • círculo : En este valor, el marcador es una forma de círculo.
  • cuadrado : En este valor, el marcador es una forma cuadrada.
  • inferior roman : En este valor del marcador es de tipo inferior-romano.
  • superior-roman : En este valor del marcador es de tipo default roman superior.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
ul.list1 {
list-style-type: decimal;
}
ul.list2 {
list-style-type: disc;
}
ul.list3 {
list-style-type: circle;
}
ul.list4 {
list-style-type: square;
}
ul.list5 {
list-style-type: lower-roman;
}
ul.list6 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<p><b>Indian cities...</b></p>
<ul class="list1">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list2">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list3">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list4">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list5">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
<p><b>Indian cities...</b></p>
<ul class="list6">
<li>New Delhi</li>
<li>Mumbai</li>
<li>Banglore</li>
</ul>
</body>
</html>

salida

Styling Lists in CSS - 4

propiedad list-style-image

Esta propiedad determina si el icono de elemento de lista se establece con una imagen y acepta un valor de ninguno o un URL que apunta a una imagen.

Una imagen se utiliza en lugar de un marcador.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
li {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<ul class="list">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</body>
</html>

salida

Styling Lists in CSS - 5

En el ejemplo anterior un URL se utiliza imagen de punto de bala para a cada elemento de la lista.

propiedad list-style-position

Esta propiedad define dónde colocar el marcador de ítems de lista.

list-style-posición acepta uno de dos valores:

  • Dentro : significa las balas estarán dentro del elemento de la lista.
  • Fuera : significa las balas estarán fuera del elemento de la lista.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
ul.list1 {
list-style-position: inside;
}
ul.list2 {
list-style-position: outside;
}
</style>
</head>
<body>
<p><b>Inside property example...</b></p>
<ul class="list1">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
<p><b>Outside property example...</b></p>
<ul class="list2">
<li>red</li>
<li>green</li>
<li>blue</li>
</ul>
</body>
</html>

salida

Styling Lists in CSS - 6


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *