[vc_row][vc_column][wpproads id=”202″ center=”1″][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Gli elenchi puntati sono molto utili durante lo sviluppo delle pagine web, possono essere utilizzati per creare degli elenchi di elementi, allineati uno sotto l’altro.
Creare un elenco puntato in HTML è molto semplice, avremo bisogno di utilizzare 2 tag:
- ul
- li
Il tag ul (unordered list) serve ad indicare che al suo interno è presente una lista non ordinata e che quindi il browser dovrà considerare ogni elemento contenuto come parte di quella lista.
Il tag li (list item) indica invece che il contenuto è uno degli elementi della lista.
Per poter scrivere correttamente una lista non ordinata dovremo aprire il tag ul, ed al suo interno inserire tanti elementi li, quanti sono gli elementi che vogliamo aggiungere alla lista, e quindi chiudere il tag ul.
Ecco un esempio di una lista:
<ul>
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ul>
In questo esempio, abbiamo creato 3 elementi, contenuti in una lista non ordinata (quindi visualizzati come elenco puntato).
E’ possibile personalizzare la lista tramite codice CSS, che consiglio di scrivere su un file CSS a parte, da collegare al file HTML, ma per semplicità in questo esempio, andrò ad inserire il codice in CSS direttamente nel codice HTML utilizzando l’attributo style.
<ul style="list-style-type: circle; color: red;">
<li> Elemento 1 </li>
<li> Elemento 2 </li>
<li> Elemento 3 </li>
</ul>
In questo secondo esempio, il codice HTML resta lo stesso, ma abbiamo aggiunto l’attributo style, che permette di aggiungere uno stile in CSS all’elemento.
Nel nostro caso abbiamo aggiunto 2 attributi:
- List-style-type :permette di cambiare l’aspetto dell’elemento prima della lista (punto, cerchio, numero, ecc.
- Color: Imposta il colore del testo della lista
[/vc_column_text][vc_video link=”https://youtu.be/8zYUMqa_N8M” align=”center”][/vc_column][/vc_row][vc_row][vc_column][wpproads id=”233″ center=”1″][/vc_column][/vc_row]
Rispondi