CSS prima di tipo

Un foglio di stile a cascata ha una proprietà per evidenziare il primo contenuto di HTML tra molti di un tipo specifico e quindi applicare gli effetti. HTML e CSS svolgeranno entrambi un ruolo vitale nell'implementazione di questo fenomeno.

Come funziona la prima proprietà prima di tipo in CSS?

Questa proprietà funziona in modo tale che il contenuto su cui vogliamo applicare qualsiasi effetto specificato sia scritto con le parole chiave "primo tipo". Accede automaticamente al contenuto che viene dichiarato la prima volta all'interno del codice. La sintassi di base per questa proprietà è:

Tag del contenuto HTML: primo tipo
// Effetti che desideri applicare.

Perché usiamo prima del tipo in CSS?

In CSS, possiamo applicare effetti diversi sul contenuto di HTML. Uno degli approcci principali e importanti per applicare gli effetti sui tag HTML è attraverso il CSS interno, in linea o esterno. Il CSS in linea è scritto all'interno dei tag, il che significa che viene utilizzato solo quando viene applicato un effetto su quel tag specificamente. Mentre i CS interni ed esterni vengono utilizzati quando le classi e gli ID che utilizziamo nel foglio di stile si accede solo da quei tag in cui abbiamo incluso i nomi di classi e ID.

Ma nel caso del "primo tipo", non abbiamo bisogno di usare classi o ID. Questa proprietà viene utilizzata quando si desidera utilizzare un tag HTML in un numero ripetitivo di volte, ma si desidera applicare l'effetto solo sul tag che appare per primo. Questa proprietà ha reso più semplice il processo di applicazione degli effetti sul tag rispetto al CSS in linea. Qui, scriviamo solo un semplice pezzo di codice all'inizio nel tag di stile anziché trovare ogni tag di contenuto HTML e menzionare il tag di stile con effetti al suo interno.

Esempio 1: prima del tipo nel paragrafo e intestazione

Questa proprietà del primo tipo viene applicata semplicemente al paragrafo del contenuto HTML.

Innanzitutto, verrà impostato il colore di sfondo della pagina web. È una proprietà extra appena usata per rendere l'output più attraente. Viene dichiarata un'intestazione insieme a un

Tag di intestazione. Ancora una volta, qui viene utilizzata una nuova intestazione. Questa volta è in testa 2

. Quindi, è in uso un semplice tag di paragrafo. All'interno dei tag di apertura e chiusura del paragrafo, abbiamo aggiunto un testo di esempio fittizio. Una nuova voce

viene aggiunto che è di nuovo seguito da un nuovo tag di paragrafo. Questa è la gerarchia o la sequenza di tutti i contenuti HTML che abbiamo usato:

..

..

..

..

..

Codice corporeo HTML

Questo primo tipo CSS viene applicato su alcuni di questi tag HTML solo su di essi che sono apparsi per primi. Quindi, questo aiuterà sicuramente l'utente a identificare i tag al primo arrivo.

Codice CSS HTML

Dopo il corpo HTML, è necessario aggiungere CSS nella sezione testa del codice HTML. Nella posizione della testa, abbiamo assegnato un titolo alla nostra pagina. Quindi, all'interno del tag di stile, un paragrafo viene aggiunto alla proprietà del primo tipo. Abbiamo aggiunto il colore e il paragrafo lo stile del carattere.

P: primo tipo
Colore rosso;
Font in stile: corsivo;

Inoltre, intestazione 3

viene applicato con un colore giallo e viene scelto lo stile del carattere.

Chiudi tutti i tag e salva il codice con un'estensione HTML per creare una pagina Web HTML sul browser. Altrimenti, il '.L'estensione txt "forma il testo solo per apparire sul sito Web quando si apre il file nel browser Web.

Produzione

Durante l'esecuzione del file, vedrai che la proprietà del primo tipo viene applicata all'intestazione e al paragrafo.

Esempio 2: CSS primo del tipo nell'elenco di descrizione

In HTML, un elenco di descrizione viene utilizzato per contenere il contenuto HTML proprio come fa un semplice elenco non ordinato. Innanzitutto, queste sono alcune terminologie di base dell'elenco di descrizione che verrà utilizzato nel codice di esempio:

• è per l'elenco di descrizione.

• Questo tag è per la definizione del termine descrittivo o del nome.
• è usato per descrivere ogni termine menzionato.

Ora vedremo come funziona nel codice del corpo HTML. All'interno del corpo, viene aggiunta un'intestazione. Dopodiché iniziamo l'elenco di descrizione utilizzando

Tag e poi due

sono usati. All'interno di entrambi i tag a termine

, Abbiamo usato 3 descrizioni dei termini

.Questo esempio mostra le verdure e i frutti come dt e i nomi come

. Di seguito è scritto un piccolo pezzo di codice.

Verdure:

1. Pomodori

Dopodiché, chiudi tutti i tag e spostati verso la parte CSS.

Codice corporeo HTML

Una volta terminato con la parte HTML nel tag di stile, applica un effetto a

tagga con il peso o lo stile del carattere come audace.

Dt
Font-weight: audace;

COME

I tag sono due, non abbiamo menzionato la proprietà del primo tipo, questo effetto verrà applicato sia a

valori.

Tutti i termini scritti come

ricevono una distanza di imbottitura tra loro. Quindi, abbiamo semplicemente scritto il nome "DD" per applicare questo effetto a tutti i DD.

Dd
Margine: 3px;

Codice CSS HTML

Ma vogliamo applicare un effetto di confine solo su quel DD che appare per primo tra tutti 6 <

tag. Quindi useremo questa proprietà CSS. Inoltre, l'effetto di sfondo viene aggiunto al

Tag con il bordo.

Dd: primo tipo
Bordo: 2 px viola solido;
Background-color: Lightgreen;

Produzione

Durante l'esecuzione, vedrai che il primo

è evidenziato con un colore di sfondo e un bordo.

Nota
Nel corpo HTML, non ci sono criteri da menzionare all'interno del tag o evidenziare specificamente per mostrare che un tag particolare è il primo o che vogliamo applicare un effetto su un tag specifico. Devi solo assicurarti che tutti i tag siano dichiarati correttamente insieme ai tag di apertura e chiusura. E l'ordine del contenuto HTML dovrebbe essere notato durante la scrittura del codice perché questa prima proprietà di tipo verrà applicata solo al contenuto che viene dichiarato per primo.

Conclusione

In questo articolo, abbiamo cercato di aiutare l'utente con un aspetto importante del design CSS con la proprietà di tipo primo. Questa proprietà è utile quando è necessario applicare gli effetti sul primo contenuto HTML dichiarato tra il numero dello stesso tipo di contenuto. Innanzitutto, abbiamo iniziato con il funzionamento di base dell'effetto primo di tipo e la necessità di questa proprietà nella progettazione della pagina web. Abbiamo spiegato due esempi tra cui l'intestazione e la selezione del paragrafo nel primo esempio. Mentre il secondo esempio contiene l'elenco di descrizione per essere influenzato attraverso questa proprietà CSS.