CSS Lists (Elenco)

Le proprietà dell'elenco controllano la visualizzazione delle etichette degli elementi dell'elenco.

Tipi di elenco HTML

Ci sono tre tipi diversi di elenchi HTML:

• Elenco non ordinato — elenco di punti, con ogni elemento dell'elenco marcatto con un punto.

• l'elenco ordinato — elenco di punti, con ogni elemento dell'elenco numerato.

• Definizione elenco - elenco di punti, che contiene una descrizione di ciascun punto.

Per ulteriori informazioni sugli elenchi, consulta la guidaHTML elenco.

Guida CSS elenco

CSS offre diverse proprietà per stilizzare gli elenchi non ordinati e ordinati più comuni. Queste proprietà CSS consentono di:

• Controllare la forma o l'aspetto dell'etichetta.

• Specificare l'immagine dell'etichetta invece del punto dell'elenco o del numero.

• Impostare la distanza tra l'etichetta e il testo dell'elenco.

• specifica se l'etichetta o il punto deve apparire all'interno o all'esterno della casella che contiene l'elenco non ordinato o ordinato.

il tipo di stile elenco

Di default,l'elenco ordinatogli elementi sono numerati con numeri arabi (1, 2, 3, ecc.), mentre inNell'elenco non ordinatoI punti degli elementi dell'elenco non ordinato sono marcati con un cerchio. Ma puoi utilizzare l'attributo list-style-type per cambiare questo tipo di etichetta predefinita in qualsiasi altro tipo, come cerchio, quadrato, numeri romani, lettere latine, ecc.

ul　{
　　　　list-style-type: square;
}
ol　{
　　　　list-style-type: upper-roman;
}

Modificare la posizione dell'etichetta dell'elenco

Di default, le etichette di elenco si trovano all'esterno della casella dell'elemento dell'elenco. Tuttavia, puoi utilizzare l'attributo list-style-position per specificare se l'etichetta o il punto dell'elenco deve apparire all'interno o all'esterno del bordo dell'elemento dell'elenco.

Questa proprietà utilizza i valori inside o outside, e outside è il valore predefinito. Se si utilizza il valore inside, queste linee saranno circondate sotto l'etichetta invece di essere rientrate.

ul.in li {
　　　　list-style-position: inside;
}
ul.out li {
　　　　list-style-position: outside;
}

Utilizzo dell'immagine come etichetta dell'elenco

Puoi anche impostare l'immagine come etichetta dell'elenco utilizzando l'attributo list-style-image.

Le regole di stile nella seguente esempio assegnano a tutti gli elementi dell'elenco non ordinato un'immagine PNG trasparente chiamata "arrow.png" come etichetta dell'elenco.

ul　li　{
　　　　list-style-image: url("arrow.png");
}

L'esempio riportato non produce lo stesso output in tutti i browser. Internet Explorer e Opera mostrano etichette di immagine leggermente più alte rispetto a Firefox, Chrome e Safari.

Soluzione di soluzione a cruscotto di immagini di bulletto incrociato

Quando si utilizza l'attributo list-style-image per utilizzare l'immagine come bullet, il bullet non si allinea accuratamente con il testo nel browser. La soluzione è quella di background-image L'attributo CSS correctly aligns the bullet image. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.

Esempio che mostra l'indicatore di immagine corretto in tutti i browser:

ul　{
　　　　list-style-type:　none;
}
ul　li　{
　　　　background-image:　url("arrow.png");
　　　　background-position:　0px　5px;　　　　/*　X-pos　Y-pos　(from　top-left)　*/
　　　　background-repeat:　no-repeat;
　　　　padding-left:　20px;
}

Attributo abbreviato di stile elenco

L'attributo list-style è un attributo abbreviato che definisce i tre attributi list-style-type, list-style-image e list-style-position in un unico elenco.

Questa regola di stile imposta il segno di elenco del elenco ordinato come lettere latine maiuscole, che appaiono all'inizio dell'elemento elenco:

ol　{
　　　　list-style:　upper-latin　inside;
}