Tecnología

Inicio

Cómo hacer Puntos de bala en HTML

May 14

Cómo hacer Puntos de bala en HTML


El uso de viñetas ayuda a romper grandes trozos de texto y señalar las listas de información útil. Las viñetas son fáciles de crear en el software de procesamiento de textos, pero cuando se está escribiendo un documento HTML, lo que necesita saber el código para crearlos. No se requiere mucho código para crear una lista de viñetas. Envolver cada lista en las etiquetas <li> y luego envolver toda la lista en <ul> y de marcas "lista desordenada". A continuación, puede hacer lo que quiera con la lista de viñetas utilizando el código Cascading Style Sheet.

Instrucciones

1 Escribe el texto para sus puntos de bala. Comience cada punto en una línea distinta. Envolver cada línea <li> y </ li> etiquetas, así:

<Li> Este es un punto viñetas </ li>

<Li> Este es otro punto de viñeta </ ​​li>

2 Crear una línea en blanco por encima de la lista con viñetas y escriba una abertura <ul> etiqueta en esa línea. Encontrar el final de la lista con viñetas y luego crear otra línea en blanco allí. Escriba una etiqueta de cierre </ ul> en esa línea. Si desea el estilo de la lista con CSS más tarde, a continuación, añadir una clase o atributo ID de la etiqueta de apertura <ul>. Aquí está un ejemplo de una lista de viñetas corta con un atributo ID:

<Ul ID = "milista">

<Li> Bullet uno </ li>

<Li> Bullet dos </ li>

</ Ul>

3 Utilice el "estilo" para crear su lista de viñetas utilizando el código CSS. Añadir código CSS entre las etiquetas <style> y </ style> etiquetas entre las etiquetas <head> y </ head>, o puede escribir el código CSS en un archivo .css externo e incrustar el archivo mediante una etiqueta <link> como esto: <link rel = "stylesheet" href = "ruta / a / stylesheet.css" type = "text / css" />. Cambio "ruta / a / stylesheet.css" con la ruta al archivo .CSS se crea. Utilice el atributo de identificación o clase para elegir sus listas de viñetas, así:

li milista {font-style: cursiva; }

El código anterior se seleccionan todos <li> etiquetas dentro de una etiqueta con un ID de "milista." Vuelva a colocar el símbolo de almohadilla con un período de la hora de seleccionar el atributo de clase.

4 Utilice la propiedad "list-style" en el CSS para cambiar el tipo de bala. Los tipos de balas disponibles incluyen círculos abiertos, discos cumplimentados y plazas para las listas no numeradas, no en orden alfabético. Este es un ejemplo de balas cuadradas:

li milista {list-style: cuadrado;}

Consejos y advertencias

  • Se utiliza la etiqueta <ol> en lugar de <ul> para crear listas ordenadas. A continuación, puede establecer el tipo de "estilo de lista" en diversos tipos de números o letras.
  • Crear viñetas de imagen mediante la especificación de "ninguno" para el atributo "estilo de lista" y luego dar a cada etiqueta <li> una imagen de fondo que no se repite, alineado a la izquierda. Agregar relleno a la parte izquierda de cada etiqueta <li> para mover el texto a través, de lo contrario se superponen la imagen.