Liste, Tabelle e Moduli, come editarli nel CSS!

Benvenuto in questo nuovo articolo in cui scopriremo come editare tabelle, liste e moduli tramite CSS.

Iniziamo con il dire che molte proprietà CSS sono state create con lo scopo di operare su specifici elementi HTML, come le liste, le tabelle e i moduli.

La proprietà list-style-type consente di controllare la forma o lo stile di un richiamo o contrassegno di una lista, il marker.

Essa può essere utilizzata negli elementi <ol>, <ul> e <li>.

Possono essere utilizzati i seguenti valori nelle liste non ordinate

⬤ none

⭘ disc

◼ circle square

Mentre per le liste ordinate vengono impiegati i seguenti:

decimal

1 2 3

decimal-leading-zero

01 02 03

lower-alpha

a b c

upper-alpha

A B C

lower-roman

1. ii. iii.

upper-roman

I II III

Tramite la proprietà list-style-image si può specificare invece, un’immagine da utilizzare come marker.

ul { list-style-image: url(“images/cats.png”)}
dove con url viene indicato il percorso dell’immagine che verrà visualizzata (si, una lista con dei gatti ahah).

Con list-style-position si indica se il contrassegno deve comparire all’interno, proprietà inside, o all’esterno, outside.

Come per molte altre proprietà CSS, esiste anche una proprietà che si comporta come abbreviazione per lo stile delle liste.

Si chiama list-style e consente di esprimere lo stile, l’immagine e la posizione del contrassegno, in qualsiasi ordine.

Per personalizzare le tabelle si utilizzano invece le seguenti proprietà:

width per impostare la larghezza della tabella, padding per impostare lo spazio fra bordo di ciascuna cella della tabella e il suo contenuto, text-transform per convertire in lettere maiuscole il contenuto delle intestazioni delle tabelle, letter-spacing, font-size per aggiungere uno stile al contenuto delle intestazioni, border-top, border-bottom per impostare bordi sotto e sopra le intestazioni, text-align per allineare i testi, background-color per cambiare il colore di sfondo una riga sì ed una no ed infine :hover per evidenziare una riga della tabella quando il puntatore del mouse sarà sopra.

Bene per adesso è tutto, nella seconda parte finirò di spiegarti come modificare le Celle e parleremo degli stili dei moduli.