Modifica dei marcatori di elenco in CSS (prima della pseudo-classe). Impostazione di un marcatore di elenco in diversi modi Come modificare il marcatore di un elenco puntato

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 necessità 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.
• Definizione delle 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.

Compito

Cambia l'aspetto dei marcatori nell'elenco e sostituiscili con un altro simbolo.

Soluzione

Utilizzando HTML o CSS, puoi impostare uno dei tre tipi di marcatori: disco (punto), cerchio (cerchio), quadrato (quadrato). È necessario aggiungere questi valori alla proprietà stile list-style-type, specificata per il selettore UL o LI (esempio 1).

Esempio 1: marcatori standard

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Gena coccodrillo
• Shapoklyak

In questo esempio, come contrassegni viene utilizzato un quadrato (Fig. 1).

Riso. 1. Tipologia di marcatori

La selezione e l'impostazione del proprio simbolo marcatore avviene in un modo davvero unico, attraverso lo pseudo-elemento :before. Il primo passo è rimuovere del tutto i punti elenco dall'elenco impostando la proprietà list-style-type su none, quindi aggiungere lo pseudo-elemento :before al selettore LI. L'output del simbolo stesso viene eseguito utilizzando la proprietà content, il cui valore è il testo o il simbolo desiderato (esempio 2).

Esempio 2: Utilizzo:prima e contenuto

HTML5 CSS 2.1 IE Cr Op Sa Fx

• Cheburashka
• Gena coccodrillo
• Shapoklyak

In questo esempio, il marcatore predefinito è nascosto e al suo posto viene aggiunto un simbolo (Figura 2).

Riso. 2. Indicatori sotto forma di simbolo

Per impostare alcuni simboli complicati come marcatori, puoi utilizzare Microsoft Word o una tabella dei simboli, questo è un programma standard incluso in Windows. La codifica del codice deve essere UTF-8.

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 stili 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 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 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.

Voglio cambiare il tipo di marcatore in un altro simbolo. Come farlo?

Utilizzando HTML o CSS, puoi impostare uno dei tre tipi di marcatori: disco (punto), cerchio (cerchio), quadrato (quadrato). È necessario aggiungere questi valori al parametro di stile list-style-type, specificato per il selettore UL o LI.

• Cheburashka


• Gena coccodrillo


• Shapoklyak

La selezione e l'impostazione del proprio simbolo marcatore avviene in un modo davvero unico, attraverso lo pseudo-elemento precedente. Innanzitutto, dovresti rimuovere del tutto i punti elenco dall'elenco impostando l'attributo list-style-type style su none e quindi aggiungere lo pseudo-elemento before al selettore LI, separato da due punti. L'output del simbolo stesso viene eseguito utilizzando il parametro content, il cui valore è il testo o il codice carattere desiderato in Unicode.

• Cheburashka


• Gena coccodrillo


• Shapoklyak

Questo esempio nasconde il marcatore predefinito e aggiunge invece un simbolo +.

Commento

Lo pseudo-elemento before non funziona in Internet Explorer, quindi i marcatori nativi non verranno visualizzati in Internet Explorer.

Per impostare alcuni simboli complicati come marcatori, puoi utilizzare Microsoft Word selezionando il menu Inserisci > Simbolo... Dopodiché si aprirà una finestra, come mostrato in Fig. 1.

Riso. 1. Selezione di un carattere in Microsoft Word

Il codice carattere, evidenziato a colori in figura, va inserito come parametro di contenuto, preceduto da una barra. Ad esempio, per il simbolo specificato dovresti specificare il contenuto: "\25aa" .

• Modifica dell'aspetto del punto elenco standard per gli elenchi numerati
• Impostazione del tipo di punto elenco per gli elenchi puntati
• Impostazione di un'immagine anziché di un punto elenco per gli elementi dell'elenco

Utilizzando i tag HTML, puoi creare due tipi di elenchi con punti elenco: numerati e puntati. Per impostazione predefinita, la maggior parte dei browser visualizza gli indicatori di elenco puntato come cerchi e gli indicatori di elenco numerato come numeri in ordine. I CSS offrono la possibilità di modificare l'aspetto dei marcatori standard. Successivamente, mostreremo esempi con diversi tipi di marcatori, con l'aiuto dei quali potrai modificare l'aspetto dei tuoi elenchi.

Modifica ed eliminazione dei marcatori

Per modificare l'aspetto predefinito di un indicatore nei CSS, utilizza la proprietà list-style-type; il valore è impostato sul tipo di indicatore con cui desideri sostituire lo standard.

Un esempio che mostra alcuni tipi di punti elenco per elenchi numerati:

Proprietà CSS:

tipo-stile-elenco:

Risultato:

1. Fare clic sul valore della proprietà del tipo di stile elenco
2. Guarda i marcatori cambiare
3. Utilizza i punti elenco più appropriati per i tuoi elenchi

Ol#miaLista (
tipo-stile-elenco: decimale;
}

Fare clic su qualsiasi valore della proprietà per visualizzare il risultato

Per gli elenchi puntati, sono disponibili solo tre tipi di indicatori, che possono essere specificati utilizzando i valori cerchio, disco e quadrato:

• Caffè
• Tè

• Caffè
• Tè

• Caffè
• Tè

Tentativo "

Utilizzando il valore none, puoi rimuovere i marcatori dagli elementi nell'elenco, ma il rientro sinistro rimarrà comunque:

• Caffè
• Tè

1. Caffè
2. Tè

Tentativo "

Sostituzione dei marcatori con le immagini

Se nessuno dei marcatori predefiniti è adatto a te, i CSS offrono la possibilità di sostituirli con qualsiasi immagine; in questo ti aiuterà la proprietà list-style-image, nel cui valore devi specificare il percorso dell'immagine selezionata.

Tieni presente che l'immagine non si ridimensionerà automaticamente per adattarsi all'elenco e verrà visualizzata con le sue dimensioni, quindi dovrai selezionare un'immagine di dimensioni adatte o modificarne una esistente, riducendola o ingrandendola alla dimensione desiderata. dimensione desiderata:

• Caffè
• Tè

1. Caffè
2. Tè

Tentativo "

Rientro dell'elenco

Quando rimuovi i punti elenco dagli elementi dell'elenco, puoi anche rimuovere o ridurre la dimensione di riempimento sinistro predefinita del browser. Per rimuovere completamente il riempimento, dovrai utilizzare la proprietà padding-left, che ti consente di regolare il riempimento:

• Caffè
• Tè

1. Caffè
2. Tè

Tentativo "

Nell'esempio, abbiamo rimosso completamente il rientro sul lato sinistro, quindi gli elementi dell'elenco ora si adattano al bordo della finestra del browser. E come puoi vedere dall'esempio, l'elenco puntato viene visualizzato esattamente come previsto, ma nell'elenco numerato mancano i marcatori. Il motivo risiede nei marcatori stessi: per impostazione predefinita, i marcatori non fanno parte del contenuto degli elementi dell'elenco, quindi se rimuovi il rientro sinistro non si spostano insieme al contenuto degli elementi

, ma semplicemente nascondilo dietro il bordo della finestra del browser.

La proprietà list-style-position specifica se il punto elenco deve essere posizionato all'interno o all'esterno degli elementi dell'elenco. Questa proprietà può assumere due valori:

• esterno: l'indicatore si trova a sinistra del contenuto (questa è l'impostazione predefinita)
• inside: il marcatore si trova all'interno dell'elemento dell'elenco insieme al contenuto

Ora puoi riscrivere l'esempio precedente in modo che il rientro sul lato sinistro venga rimosso, ma i marcatori non escano dal bordo del browser:

• Caffè
• Tè

• Caffè
• Tè

• Caffè
• Tè

Tentativo "

Nell'esempio è stato aggiunto un bordo a ciascun elemento dell'elenco per mostrare visivamente i limiti degli elementi dell'elenco.