Cómo hacer viñetas en HTML

El uso de viñetas ayuda a dividir grandes fragmentos de texto y señala listas de información útil. Las viñetas son fáciles de crear en el software de procesamiento de texto, pero cuando escribe un documento HTML, necesita conocer el código para crearlas. No se requiere mucho código para crear una lista de viñetas. Envuelva cada lista en

etiquetas

y luego envuelva la lista completa en etiquetas

o "lista desordenada". A continuación, puede hacer lo que quiera con la lista de viñetas utilizando el código de hoja de estilo en cascada.

Paso 1

Escriba el texto para sus viñetas. Comience cada punto en su propia línea. Envuelva cada línea en

y

etiquetas así:

Este es un punto con viñetas

Esta es otra viñeta

Paso 2

Cree una línea en blanco encima de la lista con viñetas y luego escriba una apertura

etiqueta

en esa línea. Busque el final de su lista con viñetas y luego cree otra línea en blanco allí. Escriba un cierre

etiqueta en esa línea. Si desea diseñar la lista con CSS más tarde, agregue un atributo de clase o ID a la etiqueta de apertura

. Este es un ejemplo de una breve lista de viñetas con un atributo de ID:

• Viñeta uno
• Viñeta dos

Paso 3

Use "estilo" para crear su lista de viñetas usando el código CSS. Agregue código CSS entre

etiquetas entre los y etiquetas, o puede escribir el código CSS en un archivo .CSS externo e incrustar el archivo usando una etiqueta como esta:. Cambie "path/to/stylesheet.css" con la ruta al archivo .CSS que crea. Use el ID o el atributo de clase para seleccionar sus listas de viñetas, así:

#mylist li { estilo de fuente:cursiva;

El código anterior selecciona todos

etiquetas dentro de una etiqueta con un ID de "mylist". Reemplace la marca hash con un punto al seleccionar por el atributo de clase.

Paso 4

Use la propiedad "estilo de lista" en CSS para cambiar el tipo de viñeta. Los tipos de viñetas disponibles incluyen círculos abiertos, discos rellenos y cuadrados para listas no numeradas ni alfabetizadas. Este es un ejemplo de viñetas cuadradas:

#mylist li {estilo-lista:cuadrado;}

Consejo

Utilice el

Etiqueta

en lugar de
para crear listas ordenadas. A continuación, puede establecer el tipo de "estilo de lista" en diferentes tipos de números o letras.

Cree viñetas de imagen especificando "ninguno" para el atributo "estilo de lista" y luego proporcione cada

• etiquete una imagen de fondo alineada a la izquierda que no se repita. Agregue relleno al lado izquierdo de cada
etiqueta
• para mover el texto, de lo contrario se superpondrá a la imagen.