Come formattare il testo negli elenchi HTML

May 1



A prima vista, la lista delle tag HTML non sembrano eccitante. Il loro scopo originale era quello di creare elenchi puntati o numerati. Quando Cascading Style Sheets (CSS) divenne prevalente, gli sviluppatori esperti hanno iniziato la pubblicazione di articoli su come trasformare queste liste in menu complicati, e programmatori in concorrenza tra loro per inventare nuove tecniche. Ora gli sviluppatori utilizzare gli elenchi tag per strutturare qualsiasi elenco di contenuti, compresi i collegamenti all'interno dei menu. Hanno poi usare i CSS per lo stile delle liste. Con una conoscenza di CSS po 'e un po' di sperimentazione, è possibile replicare alcune delle loro tecniche.

istruzione

1 Utilizzare questo codice CSS per modificare come una lista non ordinata mostra sulle pagine:

ul {

list-style: disc;

background-color: colorname;

}

Sostituire "ul" con "OL" per modificare un elenco ordinato invece. Change "colorname" con il nome di un colore web-safe o il valore esadecimale di qualsiasi colore. Ogni linea tra le parentesi graffe è una proprietà e il suo ambiente. Includere solo le proprietà che si desidera modificare.

2 Utilizzare il seguente codice CSS per modificare la modalità di display di testo all'interno dei tag <li>:

li {

font-family: "Nome del carattere";

colore: colorname;

background-color: colorname;

font-style: italic;

font-weight: bold;

}

Sostituire "Nome del font" con il nome di un tipo di carattere che si desidera utilizzare e sostituire "colorname" con il nome di un colore sicuro per il Web o il codice esadecimale per ogni colore.

3 Impostare la proprietà "list-style" a "nessuno" per il tag <ul> a spogliare proiettili. Rimuovere l'imbottitura e il margine sul lato sinistro del tag <ul> per sbarazzarsi di rientranze, a meno che non si desidera mantenere loro. Il codice è simile al seguente:

ul {

list-style: none;

padding-left: none;

margin-left: none;

}

4 Aggiungi elenco immagine, dando la <li> ogni uno sfondo e un po 'di imbottitura. Questo è il metodo più comune per la sostituzione regolari "a disco" pallottole di stile. Ecco il codice:

li {

background-image: URL (path / to / image.png) centro sinistra no-repeat;

padding-left: 20px;

}

Modificare il percorso tra le parentesi per il percorso del file di immagine. Utilizzare "centro-sinistra" per l'immagine di sfondo per il lato sinistro e dargli un allineamento verticale centrato. È inoltre possibile utilizzare "in alto a sinistra" per metterlo nell'angolo in alto a sinistra. Change "padding-left" per la quantità di pixel è necessario spostare il testo elemento della lista in modo che non si sovrapponga l'immagine proiettile.

5 Trasforma il tuo lista HTML in un menu verticale mettendo a nudo fuori padding di default, i margini e proiettili. Impostare ogni tag <li> a "float: left" Così l'articolo di visualizzazione di ciascuna side-by-side. Dare imbottitura ai tag <a> per renderli più facili da cliccare. Usa il codice in questo modo:

ul {padding-left: none; padding-right: none; list-style: none; }

li {float: left; }

li a {padding: 10px; }

Stile del tag <ul> per dare il menu di sfondo e quindi lo stile dei tag <a> con effetti al passaggio del mouse e così via per creare un menu di funzionamento.

Consigli e avvertenze

  • Posto codice CSS tra <style> e </ style> tag della tua pagina, se non utilizza un file css esterno. I tag <style> tra i tag <head> e </ head> tag nella parte superiore di un file HTML.