Cree viñetas en HTML usando
- etiquetas
El uso de viñetas ayuda a dividir grandes fragmentos de texto y señalar listas de información útil. Las viñetas son fáciles de crear en un software de procesamiento de texto, pero cuando escribe un documento HTML, necesita conocer el código para crearlos. No se requiere mucho código para crear una lista de viñetas. Envuelva cada lista en
- o etiquetas de "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
Escribe el texto de tus viñetas. Empiece cada punto en su propia línea. Envuelva cada línea en
Video del día
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. A continuación, se muestra un ejemplo de una breve lista de viñetas con un atributo de ID:
- Bala uno
- Bala dos
Paso 3
Use "estilo" para crear su lista de viñetas usando código CSS. Agregue código CSS entre las etiquetas entre las etiquetas y, o puede escribir el código CSS en un archivo .CSS externo e incrustar el archivo usando un etiqueta como esta:. Cambie "ruta / a / hoja de estilo.css" por la ruta al archivo .CSS que cree. Utilice el atributo ID o clase para seleccionar sus listas de viñetas, así:
#mylist li {estilo de fuente: cursiva; }
El código anterior selecciona todo
Etapa 4
Utilice 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 y no alfabéticas. A continuación, se muestra un ejemplo de viñetas cuadradas:
#mylist li {estilo de lista: cuadrado;}
Propina
Utilizar el
- etiqueta en lugar de
- para crear listas ordenadas. A continuación, puede establecer el tipo de "estilo de lista" en distintos tipos de números o letras.
- etiquetar 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.
Cree viñetas de imagen especificando "none" para el atributo "list-style" y luego asigne cada
