Come creare punti elenco in HTML

L'uso di elenchi puntati aiuta a suddividere grandi porzioni di testo e ad evidenziare elenchi di informazioni utili. I punti elenco sono facili da creare nel software di elaborazione testi, ma quando si digita un documento HTML, è necessario conoscere il codice per crearli. Non è necessario molto codice per creare un elenco puntato. Avvolgi ogni elenco in

e quindi racchiude l'intero elenco nei tag

o "elenco non ordinato". Puoi quindi fare tutto ciò che vuoi con l'elenco puntato utilizzando il codice del foglio di stile a cascata.

Passaggio 1

Scrivi il testo per i tuoi punti elenco. Inizia ogni punto su una propria linea. Avvolgi ogni riga in

e

tag in questo modo:

Questo è un punto elenco

Questo è un altro punto elenco

Passaggio 2

Crea una riga vuota sopra l'elenco puntato e quindi digita un'apertura

tag su quella riga. Trova la fine dell'elenco puntato e quindi crea un'altra riga vuota lì. Digita una chiusura

tag su quella riga. Se desideri applicare uno stile all'elenco con CSS in un secondo momento, aggiungi un attributo di classe o ID al tag di apertura

. Ecco un esempio di un breve elenco puntato con un attributo ID:

• Punto elenco uno
• Punto elenco due

Passaggio 3

Usa "stile" per creare il tuo elenco puntato usando il codice CSS. Aggiungi il codice CSS tra

tag tra i e tag, oppure puoi scrivere il codice CSS in un file .CSS esterno e incorporare il file utilizzando un tag come questo:. Modifica "percorso/di/foglio di stile.css" con il percorso del file .CSS che crei. Utilizza l'attributo ID o classe per selezionare i tuoi elenchi puntati, in questo modo:

#mylist li { font-style:corsivo; }

Il codice sopra seleziona tutto

tag all'interno di un tag con ID "mylist". Sostituisci l'hash mark con un punto durante la selezione in base all'attributo class.

Passaggio 4

Usa la proprietà "list-style" in CSS per cambiare il tipo di punto elenco. I tipi di punti elenco disponibili includono cerchi aperti, dischi riempiti e quadrati per elenchi non numerati e non alfabetizzati. Ecco un esempio di punti elenco quadrati:

#mylist li {list-style:square;}

Suggerimento

Usa

Tag

invece di
per creare elenchi ordinati. È quindi possibile impostare il tipo "stile elenco" su diversi tipi di numeri o lettere.

Crea punti elenco immagine specificando "nessuno" per l'attributo "stile elenco" e quindi assegna ogni

• tagga un'immagine di sfondo non ripetitiva allineata a sinistra. Aggiungi imbottitura sul lato sinistro di ciascuno
• tag per spostare il testo, altrimenti si sovrapporrà all'immagine.