By 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
- 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.
Comments