Prima lettera CSS

Un foglio di stile a cascata svolge un ruolo importante nella decorazione della prima lettera della parola in HTML. A volte, abbiamo bisogno che l'utente presti attenzione a un pezzo di testo specifico, in base al nostro requisito. Per raggiungere questo scopo, utilizziamo la decorazione e gli effetti del testo sulla prima lettera della parola del paragrafo o sull'intestazione. Ciò aiuta a deviare l'attenzione dell'utente sul punto pertinente. Questa selezione viene eseguita tramite il selettore CSS :: First-Letter che è lo pseudo-elemento CSS.

Pseudo-elemento CSS

È la parola chiave che viene aggiunta al selettore che consente di decorare o modellare la particolare sezione dell'elemento selezionato. La sintassi di base utilizzata per questo stile è definita nel seguente:

Il selettore in questo articolo rappresenta la prima lettera della parola. La proprietà di stile include la proprietà del bordo, il colore, il carattere, il margine, la decorazione del testo, l'imbottitura e la proprietà di sfondo. Applichiamo le tre proprietà di stile principale in questa guida.

Font and Color Style sulla prima lettera

Innanzitutto, applichiamo le due proprietà nel primo stile di lettera. A partire dal tag di apertura HTML, dichiariamo la testa e quindi apriamo il tag di stile. Poiché dobbiamo applicare qualsiasi effetto sulla prima lettera, è necessario menzionarla al momento dello stile. Altrimenti, l'intero testo del paragrafo verrà colpito. Quindi, la "P" per il paragrafo è menzionata insieme alla prima dichiarazione di lettera. Vengono applicati il ​​colore verde e le dimensioni del carattere in percentuale.

Successivamente, la sezione della testa è chiusa. Il tag del corpo è complimentato dal tag allineato al centro. È un esempio di stile in linea. All'interno del corpo, aggiungiamo di nuovo una voce. Il CSS in linea viene applicato per applicare il colore ad esso. Alla fine, il paragrafo viene aggiunto in cui abbiamo applicato lo stile. Possiamo anche applicare qualsiasi stile alla prima lettera dell'intestazione come nel paragrafo.

Codice:

Salva il codice ed eseguilo nel browser. Vedrai la pagina web risultante in cui la prima lettera del paragrafo è più grande rispetto al resto del testo e il suo colore è cambiato. Questo cambiamento di stile è utile per deviare il focus del lettore.

Produzione:

Stile di confine sulla prima lettera

Il secondo modo per rendere la prima lettera prominente è applicare una forma quadrata o un bordo attorno alla prima lettera del testo. Elaboriamo come funziona.

Questa volta, prendiamo i due modi per accumulare la prima lettera applicando uno stile sull'intestazione e l'altro al paragrafo. All'interno del tag di stile, lo stesso valore di prima lettere viene dichiarato alla voce "H3". Lo stile del bordo è impostato su "solido".

Codice:

Allo stesso modo, nella prima lettera del paragrafo, applichiamo lo stile di confine come doppio. Possiamo anche applicare un bordo semplice o tratteggiato sostituendo il nome in stile bordo con la parola "tratteggiata". All'interno del corpo, vengono dichiarati un'intestazione e un paragrafo, entrambi contenenti il ​​testo fittizio per mostrare gli effetti che abbiamo applicato su di essi. Salva il file dell'editor di testo, quindi eseguilo nel browser predefinito.

Produzione:

Vedrai che nell'intestazione, la prima lettera è "t" ed è disegnata con un bordo solido. Puoi applicare più effetti anche sul bordo, come il colore del bordo, ecc. Questo attirerà di più rispetto all'intero testo. Il paragrafo ha la prima lettera "L" di "Lorem". Questo è disegnato dal doppio bordo.

Nota: Entrambi gli effetti di confine sono applicati sulla prima lettera della prima parola come citato in CSS. Ma se la definizione di prima lettere viene rimossa, il bordo verrà applicato all'intero testo, sia nell'intestazione che nel paragrafo.

Stile di decorazione del testo sulla prima lettera

La prima lettera del testo può anche essere disegnata decorando il testo. Questa volta, utilizziamo la prima lettera dell'elenco. Ogni elenco sarà influenzato da uno stile diverso della decorazione del testo. La proprietà della decorazione del testo CSS ha diversi aspetti; Andremo con la linea di decorazione del testo.

Innanzitutto, considera la sezione del corpo del codice HTML. Vengono applicate due semplici titoli. Ater quello, dichiariamo un semplice elenco. Dai due tipi di elenchi, utilizziamo un elenco non ordinato qui. IL

Il tag è dichiarato. All'interno dei tag dell'elenco non ordinato, dichiariamo gli elenchi con il tag
• .

  1 2 3 4 5

  Shiza Ahsan

  Tutti e tre gli elenchi sono dichiarati all'interno del tag di

  . Ogni elenco è chiuso separatamente e dopo la dichiarazione di tutti gli elenchi,
  viene applicata. Ogni elenco viene applicato con un nome ID. Lo stile della prima lettera viene applicato identificando ogni esempio mentre applichiamo i diversi stili per ogni riga nell'elenco.

  Codice HTML:

  Se gli ID dall'elenco vengono rimossi, viene applicato un singolo stile a tutte le righe nell'elenco. Ora chiudi la sezione del corpo. Vai verso la sezione testa del corpo HTML.

  All'interno del tag di stile, viene applicato il colore dell'intestazione. È un effetto opzionale solo per spiegare il lavoro. L'intero corpo è applicato dallo stile per allineare sul lato sinistro della pagina web.

  1 2 3 4 5

  Ul li Margine-top: 15px;

  Un effetto comune che viene applicato a tutte le linee nell'elenco è un effetto margine. Per mantenere la distanza tra due righe nell'elenco, applichiamo questo effetto. Successivamente, ogni riga nell'elenco viene applicata nei diversi stili. Ad esempio, in ID Esempio1, applichiamo l'effetto della decorazione di testo con una sottolineatura punteggiata sulla prima lettera.

  1 2 3 4 5

  #Esempio1 :: First-Letter Decisore del testo: sottolineare punteggiato;

  Allo stesso modo, Esempio2 e Esempio3 sono applicati dalla decorazione di testo di una linea rossa attraverso la lettera. Mentre la terza riga nell'elenco ha un effetto blu sovrano.

  Codice CSS:

  Dopo aver aggiunto tutti gli effetti, salva il codice e eseguiamo il file. La prima lettera "s" della parola 'shiza ”ha una linea tratteggiata sotto. La prima lettera "s" della seconda riga ha una linea rossa attraverso di essa. E la "z" di Zaroon contiene una linea blu che ci passa sopra.

  Produzione:

  Conclusione

  La prima lettera CSS del testo in HTML svolge un ruolo importante nel deviare l'attenzione dell'utente. In questo articolo, diamo brevemente l'introduzione di base al selettore di primo lettere che è un elemento della proprietà pseudo CSS. Questo stile di proprietà ha diverse categorie. Possiamo applicare ciascuno per evidenziare la prima lettera. Le tre proprietà applicate sono l'effetto del carattere più colore, l'effetto del bordo e la proprietà di delerazione del testo con stili e colori diversi di linee che passano sotto o attraverso le prime lettere.