Tipo di stile elenco CSS

Un foglio di stile a cascata contiene il pezzo di codice responsabile dell'aggiunta di effetti e proprietà al contenuto sviluppato da HTML. Sia HTML che CSS vengono utilizzati per creare una pagina Web statica o un sito Web dinamico. CSS contiene diversi effetti, uno di questi è una proprietà di stile che viene applicata all'elenco di HTML. Questa proprietà è quella di migliorare gli elementi dell'elenco, che molto probabilmente è il testo, aggiungendo gli effetti sui proiettili. Oggi, la nostra discussione riguarda il tipo di stile dell'elenco. Nell'articolo, menzioniamo un paio di esempi per modellare in modo univoco i proiettili dell'elenco.

Un codice HTML contiene due parti di base: e . La parte della testa contiene il tag e tag del titolo se utilizziamo un CSS interno. Il tag contiene i tag di tutti i contenuti che vogliamo creare sulla pagina web. Il tag elenco è anche scritto all'interno del tag corporeo.

Allo stesso modo, il codice CSS è classificato come CSS in linea, interno ed esterno. L'effetto che è scritto con il tag all'interno del tag di contenuto è il CSS in linea. Quello che è scritto all'interno della sezione della testa HTML è il CSS interno. E il terzo, il CSS esterno, è dichiarato nel file di un altro editor di testo con ".Estensione CSS ".

Cos'è un elenco HTML?

Il linguaggio di markup ipertestuale crea contenuti per formare un sito Web che include testo, immagini, tabelle, forme, paragrafi, ecc. Il testo è il blocco degli edifici di qualsiasi sito Web. Questo può essere scritto in diversi modi e un approccio è l'elenco HTML. L'elenco è la dimostrazione verticale di un testo insieme a o senza proiettili. L'elenco HTML appare solo allo stesso modo in cui creiamo un elenco manuale. Un elenco è diviso in ulteriori categorie. Quando il testo è rappresentato con numeri, viene eseguito da un elenco ordinato

. Se la rappresentazione è attraverso qualsiasi simbolo o forma, è un elenco non ordinato
. La sintassi che viene utilizzata per creare un elenco è menzionata come segue:


• Item1


• Item2



La sintassi dell'elenco non ordinato è riportata nell'esempio precedente. Vengono dichiarati i primi tag di apertura e chiusura per l'elenco. Questi tag esterni decidono se l'elenco è ordinato o non ordinato. All'interno di entrambi i tag, il

• Il tag viene utilizzato per aggiungere i nomi degli elementi che vogliamo far parte dell'elenco.

  Proprietà in stile elenco

  La proprietà in stile elenco CSS è gli effetti applicati ai proiettili dell'elenco. Esistono diversi tipi di proprietà di stile degli elenchi. Alcuni di loro sono spiegati qui. La sintassi di base è scritta come:

  Implementare e spiegare il funzionamento di questa proprietà.

  Tipo di stile elenco per elenco non ordinato

  Innanzitutto, applichiamo alcuni effetti ai proiettili della lista non ordinata. Questi proiettili sono simboli e forme. Ad esempio, cerchi, quadrati, dischi, ecc.

  Valore della proprietà: disco

  Creiamo una semplice pagina web in cui viene data un'intestazione all'interno della parte del corpo. Usiamo un tag di paragrafo per scrivere un po 'di testo. Quindi, viene creato un elenco non ordinato come abbiamo precedentemente descritto. Segue la stessa sintassi. Dentro il

  tag, dichiariamo il nome di classe che appartiene al CSS interno. Tutti gli effetti menzionati all'interno della classe sono applicati a questo elenco qui:

  All'interno del tag, sono dichiarati tre elementi dell'elenco. Chiudi l'elenco e il tag esterno. Questo è tutto dalla sezione del corpo del codice HTML.

  Ora, conduciamo verso la sezione testa. All'interno della testa, diamo un titolo alla pagina. Quindi, viene dichiarato il tag in stile CSS interno. Al suo interno, viene dichiarata una classe "sub", il nome utilizzato all'interno del tag dell'elenco non ordinato. Tutti gli effetti vengono applicati all'interno di questa classe.

  Gli ID e le classi vengono creati per utilizzare gli effetti collettivamente che si desidera applicare. Quindi, usa questi nomi all'interno dei tag in cui vogliamo applicare questi effetti.

  .sub
  Tipo elenco: disco;
  

  Lo stile dell'elenco che viene utilizzato qui è un disco. Se non utilizziamo questa proprietà nella creazione dell'elenco, i proiettili predefiniti che sono formati sono a forma di disco.

  Ulteriori effetti sono nell'intestazione. Il colore del carattere viene aggiunto all'intestazione. Oltre al corpo, vengono applicati il ​​colore di sfondo e il colore dei caratteri.

  Salva il codice nell'editor di testo con un'estensione HTML per creare una pagina Web da eseguire nel browser. Usando questa estensione, vedrai che il simbolo del file dell'editor di testo che hai salvato viene cambiato nell'icona del browser. È l'indicazione che questa è una pagina web.

  Vedrai nell'esecuzione che la pagina web creata contiene l'elenco dei nomi dei soggetti e questi elementi sono dichiarati attraverso i proiettili del disco.

  Valore della proprietà: cerchio

  Dopo aver utilizzato il valore del proiettile del disco predefinito, utilizziamo un'altra forma per modellare un elenco non ordinato. Questa volta, la proprietà di stile contiene la classe con il tipo di cerchio di stile elenco. Mentre il resto del codice, se la porzione di testa o la sezione del corpo, è lo stesso. Apportare solo cambiamenti nel tipo di stile per vedere gli effetti funzionanti.

  Tipo elenco: cerchio;

  Codice CSS:	Produzione:

  Chiudi il tag di stile ed esegui il codice nel browser. Vedrai che i proiettili del disco riempiti vengono sostituiti attraverso i proiettili a forma di cerchio.

  Tipo di stile elenco per l'elenco ordinato

  Ora utilizziamo i valori numerici e alfabetici per applicare gli effetti sui proiettili dell'elenco ordinato.

  Valore della proprietà: decimale

  Per quanto riguarda l'elenco ordinato da creare, utilizziamo qualsiasi valore numerico. Quello che viene normalmente usato nel conteggio o nella numerazione manuale è la notazione decimale. Andremo prima per la numerazione decimale. L'intero codice HTML è lo stesso e il codice CSS viene intrattenuto solo attraverso il nome del proiettile che viene definito "decimale". L'effetto tipo di stile elenco menzionato nella classe CSS è il decimale.

  Tipo elenco: decimale;

  Codice CSS	Produzione:

  All'esecuzione, vedrai che i proiettili vengono cambiati da un cerchio ai numeri decimali.

  Valore della proprietà: inferiore-greco
  La proprietà in stile elenco è denominata in basso-greco per applicare questo effetto e modificare la proprietà in stile elenco dell'elenco.

  Codice CSS	Produzione:

  Valore della proprietà: nessuno

  Possiamo anche nascondere i proiettili dell'elenco utilizzando le parole chiave "nessuna" nella proprietà del tipo di stile elenco.

  Codice CSS	Produzione

  Valore della proprietà: georgiano

  L'ultimo ma non meno importante, il valore utilizzato è il valore "georgiano" che viene aggiunto ai proiettili dell'elenco.

  Codice CSS	Produzione

  Conclusione

  La proprietà in stile elenco CSS è l'effetto applicato sui proiettili dell'elenco se l'elenco è ordinato o non ordinato. Abbiamo iniziato con una semplice introduzione di lingue sia HTML che CSS, inclusa la loro dichiarazione di tag. Quindi, abbiamo elaborato la struttura degli elenchi di HTML insieme ai loro tipi. La proprietà del tipo di stile elenco è elaborata e abbiamo implementato alcuni stili per vedere come funziona questa proprietà. Abbiamo usato alcuni esempi sia per gli elenchi ordinati che non ordinati separatamente.