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
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
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
