Regole CSS per personalizzare l'aspetto di un elenco su una pagina html. proprietà dello stile elenco (tipo, immagine, posizione)

Materiale dal Web Language Reference

Valori usati

Questa proprietà è di lettura/scrittura per tutti gli oggetti. Il valore predefinito è disco fuori nessuno. L'attributo CSS (Cascading Style Sheets) viene ereditato.

Osservazioni

Proprietà listStyleè una proprietà composita generica. Quando entrambi i valori sono impostati per il tipo e anche per l'immagine, il valore per l'immagine ha la precedenza (l'immagine verrà mostrata anziché uno degli indicatori di elenco standard), tranne quando listStyleImage è impostato su nessuno o link ( URL) sull'immagine è impostato in modo errato o non è aggiornato.

Proprietà listStyle si applica anche a tutti gli elementi impostati su voce di elenco per la proprietà Schermo. Per impostare la visualizzazione dell'indicatore di elenco come punti in grassetto, è necessario descrivere in dettaglio la proprietà del margine o impostare il valore dentro per la proprietà listStylePosition su tali elementi.

Valori in una proprietà listStyle può essere descritto in qualsiasi ordine. Devono essere separati da uno spazio.

Esempi

Gli esempi seguenti illustrano l'uso della proprietà listStyle e attributo stile elenco per dare uno stile alla lista.

L'esempio utilizza le classi ul e UL compatto, così come l'attributo stile elenco per definire due liste non ordinate. Per classe UL compatto per sostituire il modello descritto in ul, è necessario impostare il valore nessuno per l'attributo list-style-image.

• ...
• ...

• ...
• ...

Il secondo esempio usa la proprietà listStyle. Se l'immagine specificata per l'elenco non è disponibile, verrà utilizzato il marcatore. cerchio vuoto(cerchio vuoto).

Il terzo esempio mostra che la proprietà listStyle applicabile per gli elementi che hanno una proprietà Schermo assume il valore voce di elenco.

Descrizione

Una proprietà universale che consente di impostare contemporaneamente lo stile del marker, la sua posizione e l'immagine che verrà utilizzata come marker. Per informazioni dettagliate, vedere le informazioni su ciascuna proprietà e separatamente.

Sintassi

stile-elenco: tipo-stile-elenco || posizione-stile-elenco || immagine-stile-elenco | ereditare

I valori

Qualsiasi combinazione dei tre valori di stile dell'indicatore, separati da uno spazio. Le combinazioni di valori devono essere nell'ordine elencato, con prima il tipo di indicatore, quindi la posizione e l'immagine. Nessuno dei valori è richiesto, quindi quelli non utilizzati possono essere omessi.

Eredita Eredita il valore del padre.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing élite
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Applicazione della proprietà in stile elenco

Modello a oggetti

document.getElementById("IDelemento").style.listStyle

Browser

Internet Explorer fino alla versione 7.0 non supporta il valore ereditario.

Foglio di stile esterno consente di concentrare le informazioni sulla formattazione del sito in un unico file. Per fare riferimento a un foglio di stile CSS esterno, nel corpo dopo il titolo scrivi la riga successiva

L'attributo href specifica il percorso del file del foglio di stile esterno. Questa riga deve essere scritta nel testo di tutte le pagine Web in cui si desidera utilizzare un foglio di stile esterno.

Pertanto, le modifiche apportate al file style.css si riflettono immediatamente su tutte le pagine che si collegano a questo file.

Definizione privata degli stili

Se è necessario applicare uno stile privatamente, in relazione a un'istanza separata del descrittore, per questo è necessario utilizzare l'attributo STYLE. Questa tecnica consente di sfruttare tutti i vantaggi offerti dagli stili senza dover creare fogli di stile. L'uso privato degli stili può essere utilizzato anche se la pagina contiene già un foglio di stile interno o un collegamento a un foglio di stile esterno, perché lo stile privato ha la precedenza più alta.

Esempio:

Attributo ID

Se si desidera applicare uno stile a un singolo elemento di una pagina Web, è necessario utilizzare l'attributo ID.

A tale scopo, è necessario assegnare un identificatore al tag dell'elemento della pagina desiderato. È quindi possibile definire le proprietà di questo elemento nel foglio di stile interno o esterno. Gli attributi di formattazione specificati verranno impostati solo per l'elemento contrassegnato con l'identificatore specificato.

L'esempio utilizza due diversi valori di proprietà Tipo di stile elenco:

posizione in stile elenco

La proprietà specifica la posizione dell'indicatore dell'elemento. O il marker si trova all'interno dell'elemento o all'esterno di esso.

I valori:

dentro- il marker si trova all'interno dell'elemento della lista.
fuori da— il marcatore viene spostato all'esterno del blocco di testo.
ereditare- eredità dall'elemento padre.

L'esempio mostra chiaramente la differenza tra i valori dentro e fuori da proprietà posizione in stile elenco:

Immagine in stile elenco

La proprietà specifica il percorso di un'immagine che fungerà da indicatore per un elemento in un elenco numerato o puntato. La posizione dell'immagine dell'indicatore può essere controllata utilizzando la proprietà posizione in stile elenco.

I valori:

URL— percorso del file grafico.
nessuno- cancella l'immagine del marker, ad esempio, per l'elemento padre.
ereditare- eredità dall'elemento padre.

Ul (list-style-image: url(papka/find.png); list-style-position:inside;)

Nell'esempio, abbiamo utilizzato una piccola immagine come indicatore, che dimostra chiaramente le capacità della proprietà. Immagine in stile elenco:

Descrizione

Imposta l'indirizzo di un'immagine che funge da indicatore di elenco. Questa proprietà viene ereditata, quindi il valore di none viene utilizzato per i singoli elementi dell'elenco per ripristinare il token.

Sintassi

immagine-stile-elenco: nessuna | url("percorso del file") | ereditare

I valori

nessuno Disabilita l'immagine come marcatore per l'elemento padre. url Percorso relativo o assoluto del file grafico. Il valore può essere specificato tra virgolette singole, doppie o senza di esse. inherit Eredita il valore del padre.

HTML5 CSS2.1 IE Cr Op Sa Fx

• Lorem ipsum dolor sit amet
• Consectetuer adipiscing élite
• Sed diem nonummy nibh euismod
• Tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. Applicazione della proprietà list-style-image

Modello a oggetti

document.getElementById("IDelemento").style.listStyleImage

Browser

In diversi browser, la distanza tra l'immagine e il testo può variare.

Le versioni di Internet Explorer fino alla versione 7.0 inclusa non visualizzano i punti elenco quando la proprietà float viene aggiunta all'elenco. Inoltre, il valore ereditario non è supportato in questo browser.