Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.
CSS: propiedad de tipo de estilo de lista
Este tutorial de CSS explica cómo usar una propiedad de CSS llamada Tipo de estilo de lista Con sintaxis y ejemplos.
describir
La propiedad CSS list-style-type define la apariencia de los elementos de la lista.
sintaxis
La sintaxis de la propiedad CSS de tipo de estilo de lista es:
list-style-type: value;parámetro o parámetro
valor
La apariencia del elemento del elemento de la lista. Puede ser uno de los siguientes:
| valor | describir |
|---|---|
| CD | Círculo sólido. Esta es la configuración predeterminada. ul {tipo de estilo de lista: disco;} |
| circulo | circulo hueco ul {tipo de estilo de lista: círculo;} |
| cuadrado | cuadrado sólido ul {tipo de estilo de lista: cuadrado;} |
| decimal | Números decimales que comienzan con 1 ol { tipo de estilo de lista: decimal; } |
| ceros iniciales para decimales | Números decimales que comienzan con 1, los números menores de 10 se completan con 0 ol { tipo de estilo de lista: ceros iniciales decimales; } |
| bajo romano | números romanos en minúsculas ol {tipo de estilo de lista: pequeño romano;} |
| roma alta | números romanos en mayúsculas ol { tipo de estilo de lista: mayúscula romana; } |
| bajo griego | griego en minúsculas ol { tipo de estilo de lista: bajo griego; } |
| bajo alfa | letras minúsculas ASCII ol {tipo de estilo de lista: alfa bajo;} |
| latín bajo | Letras ASCII en minúsculas (no compatibles con IE7) ol { tipo de estilo de lista: latín inferior; } |
| alfa superior | letras mayúsculas ASCII ol { tipo de estilo de lista: alfa superior; } |
| latín superior | Letras ASCII en mayúsculas (no compatible con IE7) ol { tipo de estilo de lista: latín superior; } |
| armenio | número armenio ol {tipo de estilo de lista: armenio;} |
| georgiano | número georgia ol {Tipo de estilo de lista: Georgia; } |
| no cualquiera | No aparecerá ningún número o símbolo antes de cada elemento de la lista. ol { tipo de estilo de lista: ninguno; } ul { tipo de estilo de lista: ninguno; } |
| heredar | El elemento heredará el tipo de estilo de lista de su elemento principal ol { tipo de estilo de lista: herencia; } ul {tipo de estilo de lista: herencia;} |
notas
- El atributo de tipo de estilo de lista se puede aplicar a
- ,
- Etiqueta.
- list-style-type se aplica a los elementos con display: list-item.
- IE7 no es compatible con latín inferior y superior, pero utiliza alfa inferior y alfa superior.
- Después de que se enumeran 26 elementos, los estilos de letra como alfa inferior o alfa superior generarán números indefinidos.
- Consulte también las propiedades list-style, list-style-image y list-style-position.
- Aleación de cromo
- androide
- Firefox (Geco)
- Firefox móvil (Geco)
- Navegador de Internet (IE)
- es decir, móvil
- ópera
- Ópera Móvil
- Safari (WebKit)
- Safari para móvil
- Aparecen cuadrados rellenos (en lugar de discos de lista desordenados) delante del elemento.
Esto también hará que los elementos de la lista aparezcan de la siguiente manera (independientemente de si el elemento de la lista es parte de una lista ordenada o desordenada):
- o
Compatibilidad del navegador
La propiedad CSS list-style-type tiene soporte básico para los siguientes navegadores:
ejemplo
Discutiremos la propiedad de tipo de estilo de lista a continuación, explorando ejemplos de cómo usar esta propiedad en CSS.
Usar una lista ordenada
Veamos un ejemplo de tipo de estilo de lista CSS donde aplicamos tipo de estilo de lista a una lista ordenada.
HTML se ve así:
<ol> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ol>CSS se ve así:
ol { list-style-type: upper-roman; }La lista ordenada se ve así:
En este ejemplo de estilo de lista CSS, elegimos
- Cada elemento de la lista en el marcado está precedido por un número romano en mayúsculas.
Usar una lista desordenada
A continuación, veamos un ejemplo de tipo de estilo de lista CSS en el que aplicamos el tipo de estilo de lista a una lista desordenada.
HTML se ve así:
<ul> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ul>CSS se ve así:
ul { list-style-type: none; }La lista desordenada se ve así:
En este ejemplo de tipo de estilo de lista CSS, comenzamos con
- El disco se quita delante de cada elemento de la lista en el marcado. Los elementos de la lista seguirán sangrándose (a menos que se anulen con CSS), pero no aparecerá nada antes de cada elemento de la lista.
con elementos de lista
Veamos un ejemplo de tipo de estilo de lista CSS donde aplicamos el tipo de estilo de lista a los elementos de la lista.
HTML se ve así:
<ul> <li>TechOnTheNet.com</li> <li>CheckYourMath.com</li> <li>BigActivities.com</li> </ul>CSS se ve así:
li { list-style-type: square; }En este ejemplo de tipo de estilo de lista CSS, elegimos