Las hojas de estilo en cascada proporcionan un conjunto de herramientas para personalizar y controlar el aspecto del sitio web de su empresa. Cambiar el estilo de viñeta en una lista desordenada es tan simple como usar "list-style-type:" para especificar un círculo, cuadrado o disco. También es posible sustituir una imagen para personalizar aún más las viñetas de la lista. Sin embargo, el tamaño de las viñetas de la lista está determinado por el tamaño de fuente actual. Para controlar el tamaño exacto de las viñetas de la página para complementar la apariencia de un sitio o la imagen de marca, deberá usar el pseudoelemento ": before".
1
Abra el archivo CSS en un editor de texto.
2
Especifique el tamaño de fuente y la familia para el cuerpo de la página web. Para este ejemplo, use:
cuerpo {familia de fuentes: Verdana, Arial, Helvetica, sans-serif; tamaño de fuente: 14pt; }
Estas dos declaraciones establecen el tipo de letra de la página en fuentes sans-serif comúnmente disponibles con un tamaño de 14 puntos. La única forma de asegurarse de que sus viñetas sean más pequeñas que el texto que las acompaña es especificar el tamaño de fuente en lugar de depender de una configuración estándar del navegador.
3
Restablezca el estilo de lista desordenada a ninguno con la declaración:
ul {estilo de lista: ninguno; }
Esta declaración nuevamente anula los valores predeterminados del navegador para restablecer el estilo de lista desordenada a "ninguno".
4
Inserte el símbolo que se usará para la viñeta y especifique el tamaño de fuente a usar así:
ul li: antes de {contenido: "•"; tamaño de fuente: 10pt; }
El pseudoelemento ": before" inserta un elemento de viñeta delante del contenido de cada elemento de la lista. La declaración "tamaño de fuente" especifica una viñeta de 10 puntos, un poco más pequeña, como marcador de lista. Ajuste el tamaño según sea necesario para su página web.