Come modificare un marcatore in un elenco. Come cambiare il colore di un indicatore di elenco html utilizzando i CSS. Indicatori con prima

Elenchi CSS— un insieme di proprietà responsabili della progettazione degli elenchi. L'utilizzo degli elenchi HTML è molto comune durante la creazione delle barre di navigazione del sito Web. Gli elementi dell'elenco rappresentano una raccolta di elementi di blocco.

Usando le proprietà CSS standard puoi modificare l'aspetto del contrassegno dell'elenco, aggiungi un'immagine per il marcatore, E modificare la posizione dell'indicatore. L'altezza del blocco marcatore può essere impostata con la proprietà line-height.

Progettare elenchi utilizzando gli stili CSS

1. Tipo di marcatore di elenco tipo di stile di elenco

La proprietà cambia il tipo di marcatore o rimuove il contrassegno per elenchi puntati e numerati. Ereditato.

Sintassi

Ul (tipo stile elenco: nessuno;) ul (tipo stile elenco: quadrato;) ol (tipo stile elenco: nessuno;) ol (tipo stile elenco: alfa inferiore;) Riso. 1. Esempio di progettazione di elenchi puntati e numerati

2. Immagini per gli elementi dell'elenco list-style-image

Puoi utilizzare immagini e riempimenti sfumati come indicatori di voci di elenco. Ereditato.

Sintassi

Ul (immagine-stile-elenco: url("images/romb.png");) ul (immagine-stile-elenco: gradiente-lineare(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);)
Riso. 2. Progetta un elenco puntato utilizzando un'immagine
Riso. 3. Progetta un elenco puntato utilizzando un gradiente

3. Posizione in stile elenco

Questa proprietà offre la possibilità di posizionare il marcatore all'esterno o all'interno del contenuto dell'elemento dell'elenco. Ereditato.

Oggi, ogni persona dovrebbe avere competenze informatiche e padroneggiare almeno un set minimo di programmi. Lo standard e il più popolare includono Microsoft Word. Quando lavorano in Word, gli utenti si trovano ad affrontare la necessità di evidenziare determinate aree di testo per maggiore chiarezza. Molto spesso è necessario inserire una lista all'interno di un documento. Può trattarsi di un elenco puntato o numerato: l'utente ha la possibilità di navigare a seconda della situazione.

Il programma ti consente di creare qualsiasi documento, lettera e progetto, utilizzando ampie opportunità per apprendere tutte le funzioni di Microsoft Word, devi dedicare tempo, ma ne vale la pena.

Gli elenchi sono necessari per rendere il testo chiaro ed espressivo. Nella maggior parte dei documenti vengono utilizzati elenchi numerati e puntati a un livello. Nelle tesi di laurea e negli articoli scientifici viene utilizzato un elenco a più livelli.

Numerazione e marcatori

Prima di tutto, devi selezionare i paragrafi che dovrebbero essere formattati come un elenco. Questo può essere fatto utilizzando il mouse o semplicemente posizionando il cursore all'inizio della riga da cui inizierà l'elenco.

In MS Word c'è una scheda "Home", in cui è possibile selezionare l'inserto desiderato nel gruppo "Paragrafo". L'utente fa clic sui pulsanti "Numerazione" o "Marcatori", quindi utilizza il righello per impostare i rientri. Questo metodo è molto semplice e diretto, ma un utente inesperto potrebbe incontrare difficoltà nascoste. Quando reinserisci gli elenchi puntati e numerati, dovrai modificare nuovamente i rientri.

Nel caso in cui sia necessario formattare ciascun elenco separatamente e modificare i parametri dei caratteri, non tutti gli utenti del programma saranno in grado di correggere il testo e, inoltre, ciò richiederà molto tempo e impegno.

Elenchi numerati

Ogni elemento dell'elenco viene evidenziato con un numero e la numerazione viene regolata automaticamente. Per creare e modificare elenchi, è presente un pulsante "Numerazione" nel gruppo "Paragrafo". Puoi anche utilizzare la funzione "Numerazione" nel menu contestuale del paragrafo selezionato.

Opzioni elenco:

• Il formato del numero determina quale carattere apparirà accanto a ciascun elemento.
• Lo stile di numerazione può essere selezionato a seconda delle caratteristiche di un particolare documento: numeri arabi o romani, maiuscolo o ecc.
• Il campo “Valore iniziale” permette di selezionare il numero con cui inizierà la lista.
• Nel caso in cui sia necessario creare un elenco simile, ma numerarlo di nuovo, è conveniente utilizzare la funzione "Inizia un nuovo elenco". È necessario selezionare gli elementi e impostare tutti i parametri.

È possibile inserire automaticamente un elenco numerato. Per fare ciò è necessario fare quanto segue:

• All'inizio del paragrafo, prima di inserire il testo, è necessario inserire “1.”, quindi “Spazio” o Tab. Il paragrafo verrà visualizzato come primo elemento nell'elenco.
• Anteponendo un paragrafo con "1)" e quindi premendo Spazio o Tab, l'utente creerà un diverso tipo di elenco.
• Per analogia vengono redatte liste con lettere. Nelle righe è necessario inserire un punto o una parentesi. Dopo ogni paragrafo devi premere Spazio o Tab.

Crea automaticamente un elenco puntato

È possibile inserire un elenco puntato in Word come segue:

• All'inizio di un paragrafo è necessario digitare un asterisco o un segno maggiore di, quindi premere Spazio o Tab.
• Crea automaticamente un elenco puntato. Puoi abilitarlo andando alla scheda "File" e selezionando il gruppo "Opzioni". Nella scheda "Ortografia", seleziona "Opzioni di correzione automatica". Nella sezione "Formattazione automatica", devi selezionare le caselle accanto agli stili.

È possibile creare un elenco puntato dei seguenti tipi:

Elenco a più livelli

Gli elenchi puntati e numerati sono elementi che devono essere configurati in base alle esigenze dell'utente in un caso particolare. La struttura può essere modificata utilizzando la funzione Definisci elenco multilivello. È utile controllare come vengono visualizzati tutti gli elenchi nel gruppo "Elenchi nei documenti". Per modificare le impostazioni del carattere di ogni singolo carattere, agli stili di paragrafo è associato un elenco a più livelli.

Opzioni chiave per la creazione di un elenco a più livelli

Quando si imposta un elenco composto da più livelli, è necessario prestare attenzione ai seguenti parametri:

• Selezione di un livello e un esempio del suo design.
• Definire le impostazioni del carattere; se necessario, è possibile impostare una parte costante del numero.
• Seleziona il tipo di numerazione: simbolo, immagine, lettere e altre opzioni.
• Determinare il livello al quale viene aggiornata la numerazione.
• Definire il rientro e il posizionamento del testo.
• Ulteriori opzioni di modifica.
• Stile di paragrafo corrispondente ed elenco multilivello.

Le impostazioni create una volta possono essere applicate automaticamente agli elenchi successivi. Ma se è necessario apportare modifiche, dovrai lavorare con ciascun elenco separatamente. Questo inconveniente può sembrare insignificante, ma se nel testo sono presenti numerose liste, la formattazione richiederà molto tempo.

Come cambiare lo stile del marcatore?

Facendo clic sul pulsante "Marker" è possibile selezionare l'opzione adatta in questo caso. Per fare ciò, vai nell'area "Libreria" e fai clic su di essa. Il tipo di numerazione si seleziona allo stesso modo: nell'area “Libreria numerazione”.

Per trasformare un elenco numerato o puntato in testo in Word, devi solo premere il pulsante corrispondente.

Ogni elemento di testo può essere evidenziato con un pennarello speciale. Per formattare l'elenco in base ai requisiti di un documento specifico, è necessario selezionare il comando “Definisci nuovo marcatore”.

Dopo aver padroneggiato tutte le funzionalità di Microsoft Word, lavorare con i documenti sarà un piacere e non dovrai dedicare molto tempo alla formattazione del testo. Un elenco puntato, come quello numerato, è incluso in quasi tutti i documenti e viene spesso utilizzato, quindi sarà utile per l'utente del programma acquisire familiarità con la creazione di elenchi di vario tipo.

Utilizzando la finestra di dialogo ElencoÈ possibile modificare le seguenti opzioni dell'elenco puntato:

Simbolo marcatore su qualsiasi simbolo dei caratteri installati sul computer.

La dimensione della sporgenza.

La distanza tra il simbolo del punto elenco e il testo.

Allineamento.

Per questi scopi è necessario accedere al menu Formato – Elenco e premere il pulsante Modifica, dopodiché si aprirà una finestra di dialogo Modifica l'elenco puntato, presentato in Fig. 4.25.

Riso. 4.25. Finestra di dialogo Modifica l'elenco puntato

Di seguito è riportato l'elenco delle sue opzioni:

Modificare il formato di un elenco numerato

Gli elenchi numerati vengono creati nella scheda Numerato(Fig. 4.24). Se i formati di elenco numerati suggeriti non sono adatti alla progettazione di un particolare documento, puoi creare il tuo formato di elenco personalizzato facendo clic su Modifica nella finestra di dialogo Elenco sulla scheda Numerato. Si aprirà una finestra di dialogo Modificanumeratoelenco(Fig. 4.26).

Riso. 4.26. Finestra di dialogo Modifica elenco numerato

Di seguito sono riportate le opzioni in questa finestra di dialogo che consentono di modificare il formato dell'elenco numerato.

Creazione di elenchi multilivello

Tipi di elenchi più complessi si trovano in molti tipi di documenti. Questi sono i cosiddetti multilivello elenchi. Usano anche segni o numerazioni e talvolta una combinazione di entrambi. Ma la loro principale differenza rispetto ai tipi precedenti di elenchi è la presenza di diversi livelli. A seconda del livello, ad ogni paragrafo viene assegnato un simbolo o un numero.

Riso. 4.27. Tab Multilivello finestre di dialogo Elenco.

Gli elenchi multilivello differiscono dagli elenchi normali per la presenza di rientri. Una certa rientranza viene presa come livello di tale elenco.

La creazione di un elenco a più livelli è possibile solo utilizzando una finestra di dialogo Elenco. Inoltre, i livelli sono stabiliti dall'esecutore stesso, impostando determinati rientri. Word analizza i rientri e, a seconda della loro dimensione, li numera, creando livelli.

È possibile creare formati di numerazione modificati per diversi livelli di un elenco a più livelli, ma è consentito un solo formato di elenco a più livelli per documento.

Per creare un elenco a più livelli, è necessario completare i seguenti passaggi:

1. Determina un frammento del documento che dovrebbe essere formattato come un elenco.

2. Crea rientri per ciascun paragrafo utilizzando il pulsante Aumenta rientro sulla barra degli strumenti Formattazione(non è possibile utilizzare le tabulazioni durante la creazione dei rientri).

3. Selezionare il frammento di testo selezionato.

4. Seleziona una squadra Formato–Elenco. Nella finestra di dialogo Elenco vai alla scheda Multilivello(Fig. 4.27).

5. Selezionare il tipo di elenco multilivello desiderato tra le opzioni proposte. Clic OK.

Oggi scopriremo come vengono creati gli elenchi su una pagina Web, quali marcatori vengono utilizzati e testeremo stili diversi per modificarne l'aspetto.

Lascia che ti ricordi come gli stili sono collegati a una pagina HTML:

Ci sono elenchi puntati o non ordinati CSS e numerati.

Elenco marcatori sono immagini di forme diverse: cerchi, quadrati, taccole e simili. Sono anche chiamati proiettili. Puoi anche utilizzare i tuoi disegni come indicatori per l'elenco.

Elenco numerato rappresenta l'output delle informazioni numerate 1, 2, 3, ecc.

In genere, i marcatori sono semplici cerchi neri, che sono familiari all'utente, ma d'altra parte non attirano molta attenzione sul testo.

Se decidi di sostituire queste tazze con quelle di design, devi padroneggiarle stilizzare un elenco usando i css. Questo è quello che faremo oggi.

La base di qualsiasi elenco è costituita dal seguente codice di pagina web:

• Primo elemento della lista
• Secondo elemento dell'elenco
• Ultimo elemento della lista

Questo blocco assomiglia a questo:

• Primo elemento della lista
• Secondo elemento dell'elenco
• Ultimo elemento della lista

Stile CSS dei marcatori dell'elenco

Scriveremo l'output esterno nel file di stile style.css. Può essere chiamato diversamente, ma ha un'estensione .css.

Indicatori CSS standard: cerchio (cerchio) – cerchio vuoto, punto (disco) – cerchio pieno, quadrato (quadrato) – quadrato pieno.

Genera un elenco nel codice CSS ul- con il suo aiuto impostiamo quale dei marcatori standard verrà visualizzato sulla pagina.

Ad esempio, visualizziamo gli elenchi utilizzando un cerchio. La voce nel file css sarà così:

Ul (tipo di stile elenco: cerchio)

Ma spesso è necessario sostituire i marcatori non in tutti gli elenchi visualizzati, ma solo in alcuni blocchi. Ad esempio, modifica nei post, ma non nei commenti. In questo caso, il codice ul non dovrebbe avere alcun significato e lo stile del cerchio dovrebbe essere specificato solo per le liste nei post. Ecco come appare il codice senza il valore:

Ul (tipo di stile elenco: nessuno)

Se non riesci a trovare il codice nel file CSS responsabile della visualizzazione dell'elenco nel blocco che ti serve, utilizza il plug-in per Firefox - Firebug o in Google Chrom, fai clic con il pulsante destro del mouse sulla pagina web del blog. Quindi "visualizza codice elemento".

Ad esempio, una delle opzioni per modificare l'aspetto dell'elenco nei post in una cerchia standard, se non è presente contenuto per il blocco ul:

Post-content ul (tipo di stile elenco: cerchio)

Oppure un altro esempio:

#content-blok ul(tipo-stile-elenco:quadrato)

Corso completo “Pratica Css”

]]> ]]>

La conoscenza dei CSS è necessaria per ogni webmaster, perché è un modo universale per realizzare un design di alta qualità senza sovraccaricare il codice della pagina.

Per chi vuole impara i trucchi per lo styling CSS molto rapidamente, ]]> consiglia ]]> corso avanzato "Pratica CSS" di Evgeniy Popov.

Prossimi articoli:

Indicatori grafici per l'elenco.

Elenco rientro css.

Come cambiare il colore CSS di un indicatore di elenco in modo che il suo colore sia diverso dal colore del testo.

Elenchi nidificati. Come creare una lista orizzontale in CSS. Cambia lo stile degli elenchi numerati.

Scarica bellissimi marcatori per elenchi di siti.

L’uso di elenchi in un articolo ha un effetto positivo sia sul SEO che sulla percezione delle informazioni da parte dell’utente. Esistono molti modi per visualizzare magnificamente i marcatori (con un'immagine o utilizzando CSS). Esamineremo un metodo abbastanza semplice ma elegante per modificare i marcatori di elenco utilizzando i CSS.

Che cosa sembra?

In questo caso non possiamo fare a meno delle nuove tecnologie, ovvero CSS3 con supporto per la pseudo-classe precedente. Utilizzando solo stili e layout HTML di base, trasformeremo noiosi marcatori standard che non soddisfano gli standard moderni.

Nel primo caso utilizzeremo l'elenco puntato che il tag ci offre

:
• Quello che abbiamo ottenuto.
• Non male, vero?

Di conseguenza, nel secondo caso, l'elenco numerato dal tag

:
1. A sinistra del testo c'è un numero.
2. Continuazione dell'elenco per il numero di campi di cui abbiamo bisogno.

Gli elementi si trovano alla stessa distanza dall'inizio del blocco di testo, il che conferisce loro ulteriore fascino.

Bel elenco puntato

Vari significati possono essere usati come simboli. È sufficiente inserire il nuovo codice nella proprietà content.

HTML

• Elemento 1
• Elemento 2

CSS

ul ( tipo stile elenco: none; ) ul li:before ( contenuto: "\203A "; riempimento destro: 6px; dimensione carattere: 16px; colore: #00bf80; peso carattere: grassetto; )

Bella lista numerata

Utilizzando un elenco numerato, puoi progettare bene un blocco di testo su una pagina o creare qualcosa di comodo e comprensibile, come all'inizio di questo materiale.

HTML

1. Elemento 1
2. Elemento 2

CSS

ol ( margine sinistro: 63px; tipo stile elenco: nessuno; contatore-reimposta: li; ) ol li:prima ( contenuto: contatore(li); contatore-incremento: li 1; riempimento: 0px 6px; margine sinistro : -28px; dimensione carattere: 12px; colore: bianco;

Formatta correttamente i tuoi articoli in modo che l'utente non aumenti la frequenza di rimbalzo.