Para presentar una lista de datos en HTML que no tienen orden/secuencia pero que están relacionados entre sí , se utiliza una lista desordenada . Las listas desordenadas se crean usando la etiqueta <ul> y cada elemento de la lista se escribe usando la etiqueta <li> . Los elementos de la lista se señalan con viñetas simples.
Nota: No podemos cambiar el color de la viñeta de la lista desordenada de forma predeterminada, pero podemos tomar la ayuda de algunas otras etiquetas y selectores.
Hay dos formas de cambiar el color de la viñeta:
- Usar una etiqueta de marcado adicional.
- Usando el estilo Css :: antes del selector
Estilo por defecto: Vamos a crear una lista de datos utilizando una lista desordenada.
HTML
<ul> <li>Welcome to "GFG"</li> <li>Geeks</li> <li>For</li> <li>Geeks</li> </ul>
Producción:
Lista simple
CSS se puede utilizar para cambiar estas viñetas y hacerlas más atractivas y llamativas para los lectores. Veamos cómo podemos cambiar el color de las viñetas para que tengan más sentido visual para los lectores.
Agregar un marcado adicional: puede tener colores separados para el texto de la lista y la viñeta después de agregar un marcado adicional. En el siguiente ejemplo, encerraremos el texto de la lista en un lapso, luego definiremos el estilo para mostrar los resultados. Puede incluir cualquier etiqueta HTML como <strong>,<p>, etc. según sus necesidades.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
li {
color: blue;
/* Bullet Color */
}
li span {
color: green;
/* Text Color */
}
</style>
</head>
<body>
<ul>
<li><span>Welcome to "GFG"</span></li>
<li><span>Geeks</span></li>
<li><span>For</span></li>
<li><span>Geeks</span></li>
</ul>
</body>
</html>
Producción:
Lista de viñetas de colores
Uso de CSS ::before Selector: El primer paso es eliminar el estilo predeterminado a través de estilos CSS. A continuación, agregue el estilo correspondiente al contenido de la viñeta que desee. Puede editar los estilos según el diseño y el espaciado que necesite. Cree su propia viñeta personalizada con su propia sangría y estilos de color. No es necesario agregar un marcado adicional en comparación con el paso anterior. Los navegadores antiguos no admitirán “ :before ” y, en ese caso, pueden dificultar el aspecto de su sitio web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Download Link</title>
<style>
li {
/* Default bullets style erased */
list-style: none;
}
li::before {
/* Unicode for a bullet */
content: "\2022";
/* Styles for Indentation*/
color: violet;
display: inline-block;
width: 1em;
margin-left: -1em;
}
li {
color: green;
}
</style>
</head>
<body>
<ul>
<li><span>Welcome to "GFG"</span></li>
<li><span>Geeks</span></li>
<li><span>For</span></li>
<li><span>Geeks</span></li>
</ul>
</body>
</html>
Producción:
balas violetas
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA