CSS per la creazione di elenchi accattivanti

• Aprile 25, 2024

Gli elenchi sono un ottimo elemento di web design perché consentono una facile lettura da parte dell'utente finale. La maggior parte degli utenti desidera risposte rapidamente e inizialmente sfoglia un sito Web solo per vedere se risponde alla sua domanda. Ciò è particolarmente vero se accedono al tuo sito Web tramite un motore di ricerca.

L'uso di tag ed elenchi di titoli è un ottimo modo per consentire alle persone di vedere facilmente il contenuto principale del tuo sito web. Se ritengono che gli elenchi e i sottotitoli siano interessanti, è più probabile che rimangano sul tuo sito. Questo, naturalmente, porta a tassi di "rimbalzo" ridotti e aiuta a migliorare la credibilità del tuo sito Web e il posizionamento nei motori. Tutto ciò che migliora la leggibilità, facilitando la scrematura degli occhi, andrà sempre a beneficio di un sito Web. Un grande design tiene sempre presente la leggibilità.

Il CSS è un modo semplice e molto efficace per creare elenchi di stile con elenchi puntati personalizzati. Puoi includere forme diverse o semplici grafiche personalizzate che si collegano al logo, ai colori o al tema del tuo sito web. Ad esempio, su un sito Web di Ghost Tour, ho creato una piccola icona fantasma che è stata utilizzata nella barra di navigazione laterale e su voci di elenco non ordinate nella pagina principale. Era semplice, ma molto carino e legato al tema dei siti, facendo risaltare quegli elementi della pagina.

Altre volte i punti elenco possono distrarre dai contenuti importanti in un elenco. In tal caso, è possibile utilizzare una proprietà di tipo elenco "nessuna" per rimuovere i marcatori generati automaticamente.

Proprietà stile elenco

Utilizzare la proprietà di tipo elenco per selezionare il tipo di indicatore visualizzato con ciascun elemento dell'elenco. I valori disponibili sono disco, cerchio, quadrato, decimale, romano inferiore, romano superiore, greco inferiore, latino inferiore, latino superiore, alfa inferiore, alfa superiore e nessuno.

Per specificare la tua immagine come marker, usa la proprietà list-style-image come segue:

ul {list-style-image: url (imagename.jpg);
posizione stile elenco: esterno;
}

L'URL è relativo al foglio di stile e dovrebbe puntare alla cartella in cui si trova l'immagine. In questo caso, l'immagine sarebbe nella stessa cartella del file css e html. Se metti le tue immagini in una cartella separata, includi anche questo: url (images / imagename.jpg)

Posizioni dei marker

Puoi anche personalizzare la posizione dei marker. Nell'esempio sopra, la proprietà outside fa apparire il punto elenco al di fuori dell'area del contenuto.
list-style-position: inside consente il punto elenco all'interno dell'area del contenuto in modo che scorra nel contenuto dell'elenco.

Tecnica di stenografia

Un altro modo rapido per formattare un elenco utilizzando CSS è la tecnica abbreviata. Con questo metodo, tutte le proprietà dell'elenco sono specificate in una singola proprietà:

ul
{
list-style: circle url ("image.gif");
}

nel metodo abbreviato, tutti i valori devono apparire in un ordine specificato come segue:

list-style-type
list-style-position (dentro, fuori)
list-style-image

Non importa se salti un valore, purché gli altri rimangano nell'ordine corretto.

Gli elenchi personalizzati sono molto utili e CSS li rende facili da raggiungere. I dettagli semplici trasformano i siti Web medi in siti Web dalle prestazioni migliori.

Istruzioni Video: TUTORIAL - Come creare un menu a tendina in HTML5 e CSS3 | FoglioDiStile.Com (Aprile 2024).