La propiedad list-style-type en CSS especifica la apariencia del marcador de elementos de la lista (como un disco, un carácter o un estilo de contador personalizado) si ‘list-style-image’ tiene el valor ‘none’.
Sintaxis:
list-style-type: disc|circle|square|decimal|lower-roman|upper-roman| lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none| inherit;
Valores de propiedad :
- disco: Este es el valor predeterminado. El marcador es un círculo relleno.
Sintaxis:
list-style-type: disc;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: disc;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: disc;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- círculo: El marcador es un círculo hueco.
Sintaxis:
list-style-type: circle;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: circle;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: circle;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- cuadrado: El marcador es un cuadrado.
Sintaxis:
list-style-type: square;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: square;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: square;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- decimal: el marcador es un número decimal que comienza con 1.
Sintaxis:
list-style-type: decimal;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: decimal;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: decimal;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- lower-roman: El marcador es un número romano en minúsculas (i, ii, iii, iv, v, etc.).
Sintaxis:
list-style-type: lower-roman;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: lower-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- upper-roman: El marcador es un número romano en mayúsculas (I, II, III, IV, V, etc.).
Sintaxis:
list-style-type: upper-roman;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: upper-roman;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- lower-greek: El marcador es un griego clásico en minúsculas alfa, beta, gamma,… (?, ?, ?,…).
Sintaxis:
list-style-type: lower-greek;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-greek;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: lower-greek;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- latín inferior: el marcador es una letra ascii minúscula (a, b, c, … z).
Sintaxis:
list-style-type: lower-latin;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: lower-latin;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: lower-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- latín superior: el marcador es una letra ascii mayúscula (A, B, C, … Z).
Sintaxis:
list-style-type: upper-latin;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: upper-latin;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: upper-latin;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
- none: No se muestra ningún marcador en este modo.
Sintaxis:
list-style-type: none;
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS list-style-type Property</title>
<style>
.geek1 {
list-style-type: none;
}
</style>
</head>
<body>
<h1 style = "text-align: center; color: green">
list-style-type: none;
</h1>
<p>Sorting Algorithms</p>
<ul class="geek1">
<li>Bubble Sort </li>
<li>Merge Sort</li>
<li>Insertion Sort</li>
</ul>
</body>
</html>
Producción:
Nota: alfa inferior y alfa superior son lo mismo que latín inferior y latín superior, respectivamente.
Navegadores compatibles: los navegadores compatibles con la propiedad de tipo de estilo de lista se enumeran a continuación:
- Google Chrome 1.0
- Borde 12.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Apple 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