Come configurare smartphone e PC. Portale informativo
  • casa
  • Windows 7, XP
  • Testo in grassetto utilizzando HTML e CSS. Come creare caratteri in grassetto in HTML grassetto corsivo css

Testo in grassetto utilizzando HTML e CSS. Come creare caratteri in grassetto in HTML grassetto corsivo css

Uno dei modi più semplici per evidenziare una parola o una frase nel testo è utilizzare caratteri diversi. Quindi puoi sottolineare una parola o una frase, l'utilizzo di pagine in grassetto ti consente di evidenziare facilmente le parole utilizzando stili diversi: corsivo, sottolineato, grassetto.

Il grassetto come modo per evidenziare la cosa principale

Le parole più sorprendenti e accattivanti appaiono evidenziate in grassetto. Tali parole e frasi catturano immediatamente l'attenzione. Quindi, per imparare a selezionare rapidamente i posti necessari nel testo, dovresti ricordare lo speciale codice HTML. Il grassetto viene impostato utilizzando un tag associato.

Prima di una parola o frase, una frase che dovrebbe essere evidenziata, viene posizionato un tag di apertura ... Dopo l'ultima lettera del testo da selezionare, c'è un tag di chiusura... Qualsiasi cosa tra questi due tag è in grassetto quando viene visualizzata in un browser.

Altre opzioni di selezione

Quindi, abbiamo scoperto che puoi selezionare il testo usando uno stile diverso. Abbiamo stabilito che il modo più semplice e allo stesso tempo efficace è utilizzare l'HTML in grassetto. Ora parliamo di altre opzioni di selezione.

Quindi, puoi evidenziare il testo in corsivo usando il tag associato , sottolinealo con ... Questi sono i modi più semplici per selezionare il testo.

Esistono anche tag meno conosciuti e utilizzati che possono essere utilizzati per evidenziare parole e frasi nel testo. Quindi, per cancellare il testo, è sufficiente usare ... Un tag abbinato aiuterà a rendere il testo monospazio. ... Se hai bisogno di creare apice usa , parte inferiore - .

In questo caso, come prima, il testo che ti serve deve trovarsi tra i tag di apertura e chiusura. Come puoi vedere, non c'è nulla di difficile, l'importante è ricordare questi codici o scriverli.

Utilizzo di più caratteri

Se vuoi rendere il testo più espressivo, puoi usare qualcosa di più del semplice grassetto. Il markup HTML ti consente di evidenziare contemporaneamente una parola utilizzando più facce. Quindi, puoi rendere una parola in grassetto, barrata e in corsivo allo stesso tempo.

Allo stesso tempo, è necessario ricordare una cosa: tutti i tag devono essere chiusi in sequenza. Ad esempio, la voce corretta potrebbe essere:

  • il testo selezionato.

Se chiudi i tag in un ordine diverso, il testo non verrà evidenziato correttamente. Un esempio di inserimento errato:

  • il testo selezionato.

In questo caso, il browser si confonderà e non capirà esattamente cosa vuoi da esso.

A proposito, qui si può notare che le tre varianti dello stile - grassetto, sottolineato e corsivo - sono facili da ricordare se conosci i tasti di scelta rapida in Word. Lì, lo stile viene impostato utilizzando gli stessi tasti delle lettere mentre si tiene premuto Ctrl.

Come puoi vedere, puoi usare più del corsivo o del grassetto. Il markup HTML ti consente di evidenziare le parole con la stessa facilità di Word normale.

conclusioni

Per evidenziare il testo, sono ampiamente utilizzati non solo una varietà di colori e sfumature, diverse dimensioni e tipo di carattere, ma anche il suo stile. Inoltre, è con l'aiuto di un contorno diverso che l'uno o l'altro frammento del testo può essere facilmente e facilmente distinguibile.

Per cambiare lo stile del carattere, dovresti usare qualsiasi tag che conosci. Il carattere in grassetto di una pagina HTML è il più sorprendente e visibile, e quindi viene utilizzato più spesso per dare enfasi.

In HTML, il testo in grassetto può essere eseguito in diversi modi. Questi includono:

  • Etichetta B;
  • Etichetta forte;
  • Proprietà CSS carattere-peso.

Parliamo di ciascuna delle opzioni per selezionare il testo in ordine.

Testo in grassetto: tag

Etichetta B L'HTML viene applicato in questo modo:

Costruttore di siti web "Nubex"

Per tag ci deve essere una chiusura, e gli attributi universali sono a sua disposizione (come classe, id, titolo eccetera.)

Nonostante la validità del tag B e non è deprecato dalla specifica HTML, più rilevante da usare è il tag forte, vediamo perché.

Testo in grassetto: tag

Secondo le specifiche HTML, il tag B serve per evidenziare il testo in grassetto. Al contrario, il tag forte HTML è per evidenziare importante cornici, parole chiave di questa pagina.

Questo tag svolge un ruolo significativo nel posizionamento delle pagine nei risultati di ricerca, quindi è ampiamente utilizzato nella promozione del sito Web e nell'ottimizzazione SEO. I motori di ricerca tengono conto del testo racchiuso tra tag e contrassegnalo come importante.

Tag usato forte allo stesso modo:

Costruttore di siti web "Nubex"

Potresti notare che usando i tag esternamente e non è affatto diverso (dal momento che tutti i browser moderni li interpretano quasi allo stesso modo), ma esistono differenze semantiche nel codice per i motori di ricerca. Pertanto, la maggior parte dei SEO consiglia di utilizzare il tag forte.

Testo in grassetto con CSS

Abbiamo già notato l'importanza del tag forte nell'ottimizzazione per i motori di ricerca, ma cosa fare se è necessario rendere in grassetto una grande quantità di testo (ma il testo non ha bisogno di essere contrassegnato come importante per i motori di ricerca), o se è necessario controllare il grado di "audacia" di il carattere? In tali casi, viene utilizzata la proprietà CSS. carattere-peso... Si applica come segue:

Testo in grassetto con CSS - "Nubex"

I nostri siti sono, infatti, passo enorme nello sviluppo web.

Lo facciamo per davvero qualità siti.

Fidati di noi e noi lo faremo Non ti deluderemo.

I valori più audace e accendino puoi impostare il grado di grassezza maggiore (o minore) di quello del genitore. Un valore numerico (100-900) può impostare il grado di contenuto di grassi.

Ci sono tre modi per rendere il testo in grassetto su una pagina HTML, ma non affrettarti a usarne uno che ti piace subito, poiché tale evidenziazione può avere significati diversi e influenzare l'ottimizzazione del sito per il motore di ricerca.

Grassetto con tag forte

Questo metodo è adatto se vuoi evidenziare una parte importante del testo in grassetto. Il tag HTML è un tag di formattazione logico e la sua essenza: "sottolinea" l'importanza della selezione.

Ci sono altri tag di formattazione booleani in HTML. Ad esempio, un tag rende il testo in corsivo e indica l'enfasi sulla frase evidenziata.

Altri tipi di selezione del testo sono descritti nell'articolo:.

Testo normale evidenziato pezzo di testo importante... Testo normale.

Testo in grassetto utilizzando il tag b

Testo normale testo grassetto... Testo normale.

CSS in grassetto

Il testo in grassetto può essere creato non solo con speciali tag HTML. È possibile ottenere l'output in grassetto su qualsiasi tag impostando la proprietà font-weight su di esso: bold; (non funziona per tutti i caratteri).

Tale selezione sarà di natura stilistica, senza aggiungere peso logico al testo selezionato.

Inoltre, puoi selezionare un tag specifico o un gruppo di elementi contemporaneamente specificando gli stili tramite una classe CSS.

Proprietà CSS all'interno dell'attributo style:

Testo grassetto.

Testo grassetto.

Il testo è in caratteri regolari.

Testo grassetto.

Cosa fare se non riesci a rendere il testo in grassetto

Se non riesci a rendere il testo in grassetto, molto probabilmente il tuo sito ha sovrascritto gli stili degli elementi CSS. In questo caso, dovrai regolare questi stili. Nella maggior parte dei casi, questo può essere fatto tramite il file del foglio di stile CSS principale. Se non lo capisci, contatta il webmaster. Molto probabilmente, la risoluzione di questo problema non richiederà più di 5 minuti di lavoro (anche se, ovviamente, potrebbero esserci delle eccezioni).

Ciao cari lettori del blog! Questo articolo si concentrerà su tag di formattazione del testo... Il testo in grassetto o in corsivo è un ottimo esempio. Considereremo anche l'influenza di alcuni tag sull'ottimizzazione interna del sito e le regole per la loro scrittura. Puoi leggerlo nell'articolo dato. A proposito, puoi trovare elementi di design del testo simili in molti editor di testo, ad esempio in Word.

I tag sono divisi in 2 tipi: tag di blocco e tag in linea. Quando si utilizza il primo, è possibile modificare il contenuto di una parte del testo (righe, singoli frammenti o parole), mentre i secondi lo sono. I tag di formattazione che esamineremo in questo articolo sono prevalentemente minuscoli.

Regole e ordine di scrittura dei tag

Sai già cosa sono i tag di inizio e fine. In caso contrario, leggi l'articolo all'inizio di questo materiale. In breve, ci sono due tipi di tag: tag singoli (ad esempio, il ritorno a capo su una nuova riga
) e contenitore (accoppiato). Quindi, tutti i tag di formattazione del testo sono accoppiato... Ciò significa che ogni elemento ha un tag di inizio e di fine e la selezione deve essere posizionata tra di essi. Ad esempio, la selezione corretta di una frase sarebbe simile a questa: Frammento selezionato

Quando il browser elabora questo frammento, vedrai il seguente testo: Frammento selezionato. A proposito, tutti i tag non vengono visualizzati nel feed RSS ().

La cosa principale quando si scrivono i tag è tenerli chiusi. In caso contrario, tutto il testo sulla pagina sarà in grassetto (nell'esempio con il tag ). Ma ci sono momenti in cui è necessario evidenziare un determinato frammento in grassetto e corsivo allo stesso tempo. Ma non c'è nessun tag che esegua questa azione. C'è solo una via d'uscita da questa situazione: utilizzare due tag contemporaneamente. Non importa in che ordine li usi. Pertanto, scrivendo il testo con tag come questo:

Frammento selezionato

o così:

Frammento selezionato

Avrai ancora Frammento selezionato in corsivo e grassetto allo stesso tempo. Tuttavia, è preferibile utilizzare la prima opzione, perché inizialmente era l'unica e corretta. Inoltre, non dimenticare che ogni browser può gestire i tag in modo diverso (), a seconda delle impostazioni. Passiamo ora ai tag di formattazione stessi.

Testo in grassetto e corsivo - Tag , , e

Tag di formattazione del testo più popolari - Enfatizzarlo grassetto e in corsivo... Di solito sono usati per dare importanza a un pezzo. Il primo caso serve per evidenziare un frammento contenente informazioni utili o parole chiave. Il corsivo viene utilizzato per gli stessi scopi del testo in grassetto, ma l'informazione è meno importante perché il corsivo è meno visibile sullo sfondo del corpo del testo rispetto al testo in grassetto.

Considera prima testo grassetto... Ci sono due tag usati per questa azione: e ... Non c'è differenza nell'aspetto. Tuttavia, dato che qualsiasi browser può interpretare ogni elemento in modo diverso, potresti essere in grado di vedere eventuali differenze. Ecco come appare il testo nei tag e nel modulo già elaborato dal browser:

Testo in tag forti

Testo nei tag b

Ed ecco come appaiono queste due righe nel codice sorgente della pagina:

Testo in tag forti Testo nei tag b

Possiamo osservare la stessa situazione nel caso di tag in corsivo e ... Prova a trovare le differenze tra i due esempi:

Testo nei tag em

Testo nei tag I

Ed ecco il codice sorgente:

Testo nei tag em Testo nei tag I

Quindi, i tag considerati in grassetto e in corsivo non differiscono in realtà, ma perché allora abbiamo bisogno, ad esempio, del tag se c'è ? Dopotutto, quest'ultimo contiene un solo carattere (senza contare le parentesi) e, quindi, è più facile da scrivere. Il fatto è che i tag e intaccare. Se racchiudi le parole chiave con questi tag, avrà un effetto benefico sulla promozione del sito Web. La cosa principale è non esagerare: il testo massimo dovrebbe essere il 5% di testo in grassetto nel tag. , e la stessa quantità di corsivo nel tag .

Se vuoi solo evidenziare qualche momento nel testo, usa il tag o ... In generale, penso che anche i motori di ricerca considerino più importante il testo in questi tag, ma su ottimizzazione interna hanno ancora un impatto minore di e .

Slash tag di testo - , e

Ora diamo un'occhiata ad alcuni tag che utilizzano un tratto nello stile del testo. L'editor di testo più famoso che conosci è etichetta o sottolineare. Questo tag non influisce sulla classifica (per quanto ne so), ma aiuterà a evidenziare del testo ea concentrarsi su di esso. Ho fornito un esempio dell'utilizzo di questo tag appena sopra.

Ci sono altri due tag che hanno uno scopo simile: e ... Entrambi hanno la funzione di testo barrato. Puoi usare questo tag in qualsiasi situazione: se aggiorni un documento (o meglio una parte di esso), puoi cancellare quello vecchio e aggiungerne uno nuovo; se hai intenzione di scrivere qualcosa che si discosta dall'argomento del materiale; qualcosa che non corrisponde a standard morali ed etici.

Le differenze tra questi due tag sono solo nel loro scrivere, per cui è preferibile utilizzare il primo, poiché in primo luogo, è più comodo scrivere e, in secondo luogo, ci sarà meno codice HTML sulla tua pagina e i motori di ricerca lo adorano.

Etichetta e attributi - parametri del carattere del testo

Ora, considera un tag che non viene utilizzato senza attributi. Con esso, puoi impostare i parametri per una parte di testo specifica. In generale, ora è preferibile utilizzare (fogli di stile a cascata) perché possono accorciare notevolmente l'intero codice HTML della pagina. Quindi, diamo un'occhiata allo stesso tag . Per lui c'è tutto tre attributi:

  • faccia- il carattere stesso. Ad esempio, Arial, Courier o Verdana. Puoi elencarne alcuni, tk. non tutti gli utenti dispongono di un ampio set di font, e scrivendone alcuni nell'attributo face il browser potrà scegliere quale utilizzare, ovvero quale è presente nel sistema;
  • dimensione- un attributo che indica la dimensione del testo. Può essere espresso sia in unità arbitrarie che in pixel;
  • colore- colore del testo. Questo attributo può essere utilizzato sia nei codici HTML dei colori che nelle parole. I primi sono della forma #FFFFFF (dove F è qualsiasi numero o lettera da A a F), e i secondi sono scritti in parole semplici (ad esempio, il rosso è rosso).

Ecco come appare il testo nel tag utilizzando ciascun attributo:

Questo testo ha una dimensione di 6px


Questo testo è rosso

Questo testo è in carattere Arial

Questo testo è rosso e ha una dimensione di 5 pixel

Ed ecco cosa vedrai dopo aver elaborato il codice scritto:

Elementi di design del testo a blocchi - intestazioni

-

, paragrafo

Infine, esamineremo gli elementi di blocco utilizzati in quasi tutti i documenti. Questi sono i tag di intestazione e paragrafo. Consideriamo il primo. Ci sono 6 tipi di titoli e ognuno ha il proprio tag. Ogni specie ha solo il proprio numero di serie ed è registrata tramite tag

,

,...,

... Ecco come appaiono tutte le intestazioni una volta elaborate:

Il numero dopo il titolo della parola corrisponde al numero nel tag ... Le intestazioni hanno un enorme impatto sull'ottimizzazione interna, quindi includi i tag parole chiave. Ci sono alcune caratteristiche di questo caso, di cui parlerò nei prossimi articoli.

Ora parliamo del tag di evidenziazione del paragrafo.

La funzione di questo tag è di separare il testo da un altro testo simile con una riga vuota. Se guardi il codice sorgente di un documento, puoi vedere quanto segue:

Le caselle verdi hanno un paragrafo, le caselle rosse ne hanno un altro. Ed ecco come appare questo codice dopo essere stato elaborato dal browser (la freccia indica una riga vuota):

Di conseguenza, otteniamo una separazione piuttosto evidente di un paragrafo dall'altro, il che è vantaggioso: la lettura diventa più conveniente.

Quindi l'articolo su tag di formattazione del documento... Ce ne sono molti di più di quelli che ho descritto in questo materiale. È solo che devi dire molto su alcuni di loro, a seguito dei quali saranno dedicati articoli separati con una recensione completa.!

In html, la dimensione del carattere gioca un ruolo importante. Consente di attirare l'attenzione dell'utente su importanti informazioni pubblicate sulla pagina del sito. Sebbene non solo la dimensione delle lettere sia importante, ma anche il loro colore, spessore e persino la famiglia.

Tag e attributi durante la scansione con caratteri html

Il linguaggio ipertestuale ha un ampio set di strumenti per lavorare con i caratteri. Dopotutto, è la formattazione del testo il compito principale di html.

Il motivo della creazione del linguaggio HTML è stato il problema della visualizzazione delle regole di formattazione del testo nei browser.


Considera i tag che vengono utilizzati per lavorare con i caratteri in html e i loro attributi. Il principale è il tag ... Utilizzando i valori dei suoi attributi, puoi impostare diverse caratteristiche del carattere:

  • color - imposta il colore del testo;
  • size - dimensione del carattere in unità convenzionali.

Sono supportati i valori degli attributi positivi da 1 a 7.

  • face - utilizzato per impostare la famiglia di caratteri del testo da utilizzare all'interno del tag ... Sono supportati più valori contemporaneamente, separati da virgole.

Viene formattato solo il testo tra le parti del tag dei caratteri accoppiati. Il resto del testo viene visualizzato con il carattere standard predefinito.

Anche in html ci sono un certo numero di tag accoppiati che specificano solo una regola di formattazione. Questi includono:

  • - imposta il carattere in grassetto in html. Etichetta l'azione è simile alla precedente;
  • - la dimensione è maggiore di quella predefinita;
  • - dimensione del carattere più piccola;
  • - testo in corsivo. tag simile ;
  • - testo sottolineato;
  • - barrato;
  • - visualizzare il testo solo in minuscolo;
  • - in maiuscolo.

Testo normale

Miniatura

Miniatura

Più del solito

Meno del solito

Corsivo

Corsivo

Sottolineato

barrato

Funzionalità degli attributi di stile

Oltre ai tag descritti, ci sono molti altri modi per cambiare il carattere in html. Uno di questi è l'uso dell'attributo di stile generico. Utilizzando i valori delle sue proprietà, puoi impostare lo stile di visualizzazione del carattere:

1) font-family - la proprietà imposta la famiglia di font. È possibile l'enumerazione di più valori.
La modifica del carattere in html al valore successivo avverrà se la famiglia precedente non è installata sul sistema operativo dell'utente.

Sintassi di scrittura:

famiglia di caratteri: nome del carattere [, nome del carattere [, ...]]

2) font-size - la dimensione è impostata da 1 a 7. Questo è uno dei modi principali per aumentare il carattere in html.
Sintassi di scrittura:

font-size: dimensione assoluta | dimensione relativa | valore | interesse | ereditare

La dimensione del carattere può anche essere impostata:

  • In pixel;
  • In valore assoluto ( xx-piccolo, x-piccolo, piccolo, medio, grande);
  • In percentuale;
  • In punti (pt).

Dimensione carattere: 7

Dimensione carattere: 24px

Dimensione carattere: x-large

Dimensione carattere: 200%

Dimensione carattere: 24pt

3) font-style - imposta lo stile di scrittura del font. Sintassi:

stile del carattere: normale | corsivo | obliquo | ereditare

Valori:

  • normale - ortografia normale;
  • corsivo - corsivo
  • obliquo - carattere inclinato a destra;
  • inherit - eredita l'ortografia dell'elemento genitore.

Un esempio di come cambiare il carattere in html usando questa proprietà:

stile del carattere: eredita

stile del carattere: corsivo

stile del carattere: normale

stile del carattere: obliquo

4) font-variant - converte tutte le lettere maiuscole in maiuscole. Sintassi:

font-variant: normale | maiuscoletto | ereditare

Un esempio di come cambiare il carattere in html con questa proprietà:

font-variant: eredita

font-variant: normale

font-variant: maiuscoletto

5) font-weight - permette di impostare lo spessore della scrittura del testo (saturazione). Sintassi:

font-weight: grassetto | grassetto | più chiaro | normale | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Valori:

  • grassetto - imposta il carattere grassetto html;
  • più audace - più grasso rispetto al normale;
  • più leggero - meno saturo rispetto al normale;
  • normale - ortografia normale;
  • 100-900 - imposta lo spessore del carattere in equivalente numerico.

font-weight: grassetto

font-weight: più audace

peso del carattere: più leggero

peso del carattere: normale

peso del carattere: 900

peso del carattere: 100

La proprietà del carattere e il colore del carattere html

Font è un'altra proprietà del contenitore. Internamente, ha combinato i valori di diverse proprietà progettate per cambiare i caratteri. La sintassi del carattere è:

font: font-size font-family | ereditare

Inoltre, il valore può essere impostato sui caratteri utilizzati dal sistema nelle iscrizioni sui vari controlli:

  • didascalia - per i pulsanti;
  • icona - per le icone;
  • menù - menù;
  • message-box - per finestre di dialogo;
  • piccola didascalia - per piccoli controlli
  • barra di stato - carattere della barra di stato.

carattere: icona

carattere: didascalia

carattere: menu

font: message-box

sottotitolo

carattere: barra di stato

font: corsivo 50px grassetto "Times New Roman", Times, serif

Per impostare il colore del carattere in html, puoi utilizzare la proprietà color. Ti consente di impostare il colore, utilizzando una parola chiave o in formato rgb. E anche sotto forma di codice esadecimale.

Principali articoli correlati