I fogli di stile a cascata forniscono una serie di strumenti per personalizzare e controllare l'aspetto del sito web della tua azienda. Cambiare lo stile del punto elenco in un elenco non ordinato è semplice come usare "list-style-type:" per specificare un cerchio, un quadrato o un disco. È anche possibile sostituire un'immagine per personalizzare ulteriormente i punti elenco. La dimensione dei punti elenco, tuttavia, è determinata dalla dimensione del carattere corrente. Per controllare la dimensione esatta dei punti elenco della pagina per completare l'aspetto di un sito o l'immagine del marchio, è necessario utilizzare lo pseudo-elemento ": before".
1
Apri il file CSS in un editor di testo.
2
Specificare la dimensione e la famiglia del carattere per il corpo della pagina Web. Per questo esempio usa:
corpo {font-family: Verdana, Arial, Helvetica, sans-serif; dimensione del carattere: 14pt; }
Queste due istruzioni impostano il carattere della pagina sui caratteri sans-serif comunemente disponibili con una dimensione di 14 punti. L'unico modo per essere sicuri che i punti elenco siano più piccoli del testo di accompagnamento è specificare la dimensione del carattere piuttosto che fare affidamento su un'impostazione del browser standard.
3
Reimposta lo stile dell'elenco non ordinato su nessuno con la dichiarazione:
ul {list-style: nessuno; }
Questa istruzione sostituisce nuovamente le impostazioni predefinite del browser per reimpostare lo stile dell'elenco non ordinato su "nessuno".
4
Inserisci il simbolo da utilizzare per il punto elenco e specifica la dimensione del carattere da utilizzare in questo modo:
ul li: prima di {contenuto: "•"; dimensione del carattere: 10pt; }
Lo pseudo-elemento ": before" inserisce un elemento punto elenco davanti al contenuto di ogni voce dell'elenco. L'istruzione "font-size" specifica un punto elenco leggermente più piccolo, a 10 punti, come indicatore di elenco. Regola le dimensioni come necessario per la tua pagina Web.