Come evidenziare il testo usando CSS

Come evidenziare il testo usando CSS
Durante la lettura di note o articoli, alcuni punti importanti o terminologie devono essere rivisti in seguito. Per questo, usiamo evidenziatori per contrassegnare le cose importanti invece di studiare ogni volta l'intero articolo. Dà anche un aspetto avvincente a tali informazioni. Quindi, per contrassegnare le informazioni sul sito Web, HTML ci offre il “"Tag e CSS ci consente di utilizzare proprietà diverse per evidenziare il testo.

Il risultato di questo blog sono:

  • Metodo 1: evidenziare il testo usando il tag HTML
  • Metodo 2: evidenziare il testo usando il tag HTML
  • Metodo 3: evidenziare il testo usando i colori del gradiente CSS

Metodo 1: evidenziare il testo usando il tag HTML

L'HTML “"Il tag viene utilizzato per evidenziare o contrassegnare il testo che fornisce informazioni importanti. Per impostazione predefinita, i browser rendono il testo marcato con un colore di sfondo giallo.

Sintassi
La sintassi dell'uso del ""L'elemento HTML è menzionato di seguito:

Contenuto…

Esempio: come aggiungere elemento in HTML?
In HTML, in primo luogo, crea un div con il nome di classe "scatola". Poi,

viene aggiunto per includere l'intestazione e il

Il tag viene utilizzato per aggiungere un paragrafo alla pagina web. All'interno del

elemento, usa il ""Elemento per evidenziare il testo richiesto:


Elemento Mark HTML


L'elemento marchio viene utilizzato per definire il marcatotesto.


Quindi, applica le proprietà CSS agli elementi HTML.

Style Box Div

.scatola
Bordo: 5px Solid #9A1663;
background-color: #fdf0e0;
larghezza: 90%;
Altezza: 200px;
Margine: auto;
imbottitura: auto;
Testo-align: centro;
Font-size: 20px;

Qui, ".scatola"Viene utilizzato per accedere all'elemento Div con la casella di classe e applicare le seguenti proprietà: -

  • "confine"La proprietà può avere più di due valori per specificare lo stile del bordo, come larghezza, tipo di linea e colore.
  • "larghezza"L'attributo viene utilizzato per specificare la larghezza dell'elemento.
  • "colore di sfondo"La proprietà viene utilizzata per specificare il colore dello sfondo dell'elemento.
  • "altezza"La proprietà definisce l'altezza dell'elemento HTML.
  • "margine"La proprietà definisce lo spazio al di fuori dell'elemento.
  • "imbottitura"La proprietà definisce lo spazio all'interno dell'elemento.
  • "allineamento"La proprietà viene utilizzata per regolare l'allineamento del testo.
  • "dimensione del font"Specifica la dimensione dei caratteri.

Il codice sopra fornito genererà il seguente risultato:

Possiamo anche applicare stili diversi all'elemento con CSS.

Elemento HTML di stile
Per impostazione predefinita, il “"Tag mostra un colore giallo. Ma con l'aiuto di CSS, puoi applicare proprietà diverse per modificare lo stile dell'elemento marchio HTML.

In questo esempio, abbiamo usato CSS in linea per lo styling del tag HTML:

L'elemento Mark viene utilizzato per definire il segnato testo.

Si può osservare che ora il testo è evidenziato usando il colore rosso:

Metodo 2: evidenziare il testo usando il tag HTML

L'HTML “"L'elemento è un elemento in linea utilizzato per contrassegnare una parte di un documento.

Esempio: come aggiungere elemento a HTML?
Innanzitutto, a

Il tag è posizionato per aggiungere un paragrafo. Dentro il

tag, il ""Il tag viene utilizzato per contrassegnare una parte specifica del paragrafo. A ogni tag di span viene dato un ID come "S1".

Html

Linuxhint è il migliore Tutorial online sito web.
Se vuoi imparare Programmazione Bash, allora sei nel posto giusto.

Ora, applica gli stili CSS agli elementi di span sopra.

CSS

#s1
Background-color: RGB (235, 247, 6);

IL "#S1"Si riferisce all'ID per span. Qui, la proprietà "colore di sfondo"Con il valore RGB (233, 247, 6) viene applicato all'elemento span.

Dall'output si può osservare che il testo all'interno dell'elemento span è contrassegnato con il colore specificato:

Metodo 3: evidenziare il testo usando i colori del gradiente CSS

In HTML, aggiungi un ID come "principale". Quindi, all'interno di questo elemento Div, Posiziona

Tag per aggiungere contenuto. All'interno del contenuto di

tag, posizionare il tag con il nome di classe come "evidenziare". Infine, applicheremo il CSS "pendenza"Proprietà in questa area span.

Html


Il prezzo del successo è lavoro duro e dedizione.


STANI CLASSE CLASSE ELEMENTO

.evidenziare
Immagina di background: gradiente lineare (a destra, #06283D, #8BBCCC, #47B5FF, #256D85);
raggio di confine: 6px;
imbottitura: 3px 6px;

Di seguito è riportata la descrizione delle proprietà CSS sopra:

  • ".evidenziare"Viene utilizzato per accedere al momento saliente della classe del

    elemento.

  • "immagine di sfondo"Proprietà come"gradiente lineare"Utilizza i parametri come direzione, quindi due o più colori.
  • "raggio di confine"La proprietà viene utilizzata per far girare i bordi degli elementi.
  • "imbottitura"Viene utilizzato per fornire spazio attorno al contenuto dell'elemento.

Style Main Div

#principale
Margine: 10px Auto;
larghezza: 90%;
Altezza: 150px;
Bordo: 5px Solid #FB2576;
raggio di confine: 10px;
Background-color: nero;
imbottitura: 5px;

Le proprietà CSS descritte di seguito vengono applicate all'elemento Div con ID come "principale":

  • "#principale"Viene fatto riferimento al principale ID dell'elemento Div.
  • "margine"La proprietà applica la spaziatura al di fuori dell'elemento Div.
  • "larghezza"La proprietà viene utilizzata per impostare la larghezza del contenitore.
  • "altezza"Imposta l'altezza del contenitore.
  • "confine"Specifica la larghezza, il tipo e il colore del bordo.
  • "raggio di confine"Si applica per fare i bordi degli elementi.
  • "colore di sfondo"Viene utilizzato per applicare il colore sullo sfondo dell'elemento div.
  • "imbottitura"Viene applicato per dare spazio attorno al contenuto del div.

Stile

elemento

#main> p
Colore: #FFF;
Testo-align: centro;
Font-Family: sans-serif;
Spazio di lettere: 2px;
imbottitura: 20px 0;
Font-size: 2em;

IL

Elemento di Div Main è stili applicati con le proprietà CSS elencate:

  • "colore"La proprietà specifica il colore del testo.
  • "allineamento"La proprietà applica l'allineamento al testo, come il centro, a sinistra e altro ancora.
  • "famiglia di font"È utilizzato per impostare la famiglia dei caratteri del testo.
  • "spaziatura del carattere"La proprietà massimizza o minimizza la spaziatura tra i caratteri del testo.
  • "imbottitura"Rappresenta lo spazio attorno al contenuto di un elemento.
  • "dimensione del font"Indica la dimensione del carattere.

Dopo aver salvato il codice sopra, la pagina Web nel nostro browser Web sarà così:

Abbiamo discusso alcuni metodi per evidenziare il testo usando CSS.

Conclusione

Per evidenziare il testo, HTML e CSS ci facilita molte tecniche. Html "" E ""I tag vengono utilizzati per contrassegnare il testo, ma possiamo personalizzare lo stile di evidenziazione usando CSS. Questo blog ha discusso della procedura di evidenziare il testo usando HTML e colori gradienti.