Introduzione alla formattazione del testo CSS
Nei giorni precedenti, eri costretto a rappresentare il testo utilizzando la vecchia versione di CSS. Avevi un tag per cambiare l'ombreggiatura e il carattere tipografico del contenuto, tuttavia la misurazione veniva ostacolata utilizzando le dimensioni del testo pre-caratterizzato. I vari impatti come intensità e barrato erano concepibili solo in strutture fondamentali con l'aiuto di etichette HTML. Attualmente, l'utente può utilizzare una varietà di proprietà di formattazione del testo CSS per organizzare il testo sulle pagine Web a modo suo.
In questo capitolo vedrai numerose proprietà di formattazione del testo CSS. Le proprietà di formattazione del testo CSS vengono utilizzate per progettare il testo, dare uno stile al testo, descrivere un paio di stili di formattazione, ecc. Le proprietà forniscono la rappresentazione visiva di caratteri, spazi, parole, paragrafi e molti altri.
Elenco delle proprietà di formattazione del testo CSS:
Dettagli sui modi di formattazione del testo nei CSS: -
1) Colore del testo
Questa proprietà può essere utilizzata per modificare il colore del testo. Può essere definito usando la proprietà color.
Esempio : illustrazione del colore del testo
CSS Text Color Property
Ciao mondo….
Benvenuto a EDUCBA …
Verrà visualizzato il seguente output:
2) Allineamento del testo
Questa proprietà può essere utilizzata per modificare l'orizzontale del testo. Può essere definito usando le proprietà giustificazione sinistra, destra, centro.
Esempio : illustrazione dell'allineamento del testo
Text Alignment Property
Ciao mondo…
Benvenuti in EDUCBA …
Consulente educativo …
Verrà visualizzato il seguente output:
3) Decorazione del testo
Questa proprietà può essere utilizzata per decorare il testo. Può essere definito utilizzando le proprietà di sottolineatura, sottolineatura e line-through.
Esempio : illustrazione della decorazione del testo
Text DecorationProperty
Ciao mondo…
Benvenuti in EDUCBA …
Consulente educativo …
Verrà visualizzato il seguente output:
4) Trasformazione del testo
Questa proprietà può essere utilizzata per modificare i casi del testo. Può essere definito utilizzando le proprietà maiuscole, maiuscole e minuscole.
Esempio : illustrazione della trasformazione del testo
Text Transformation Property
Ciao mondo…
Benvenuti in educba …
Consulente educativo …
Verrà visualizzato il seguente output:
5) Rientro del testo
Questa proprietà può essere utilizzata per rientrare nella prima riga del testo. Può essere definito usando le proprietà px, cm, pt.
Esempio : illustrazione del rientro del testo
Text Indentation Property
Ciao mondo…
Benvenuti in Educba …
Consulente educativo …
Verrà visualizzato il seguente output:
6) Spaziatura parole
Questa proprietà può essere utilizzata per dare spazio tra le parole. Può essere definito usando la proprietà di spaziatura delle parole.
Esempio : illustrazione della spaziatura delle parole
Word Spacing Property
Ciao mondo…
Benvenuti in Educba …
Consulente educativo …
Verrà visualizzato il seguente output:
7) Spaziatura lettere
Questa proprietà può essere utilizzata per dare spazio tra i caratteri. Può essere definito utilizzando la proprietà di spaziatura tra lettere.
Esempio : illustrazione della spaziatura delle lettere
Letter Spacing Property
Ciao mondo…
Benvenuti in Educba …
Consulente educativo …
Verrà visualizzato il seguente output:
8) Altezza della linea
Questa proprietà può essere utilizzata per dare spazio tra le linee. Può essere definito usando la proprietà line-height.
Esempio : illustrazione dell'altezza della linea
Line Height Property
h3
(
line-height:2.5;
)
h4
(
line-height:150%;
)
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) è una
principale fornitore globale di istruzione basata sulle competenze
In eduCBA, è una questione di orgoglio per noi orientare il lavoro
corsi pratici disponibili a chiunque, sempre e ovunque.
Verrà visualizzato il seguente output:
9) Testo direzione
Questa proprietà può essere utilizzata per modificare la direzione del testo. Può essere definito usando la proprietà rtl. Imposta la direzione da destra a sinistra.
Esempio : illustrazione della direzione del testo
Text Direction Property
Ciao mondo … Benvenuto in Educba …
Verrà visualizzato il seguente output:
10) text-shadow
Questa proprietà può essere utilizzata per dare ombra al testo. Può essere definito usando la proprietà text-shadow. Utilizza componenti come la posizione a sinistra, la posizione in alto, la dimensione della sfocatura, il nome del colore.
Esempio : illustrazione di text-shadow
Text Shadow Property
h3
(
text-shadow:3px 3px 2px lightblue;
)
h4
(
text-shadow:3px 3px 2px plum;
)
Ciao mondo … Benvenuto in EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) è una formazione basata sulle competenze
Verrà visualizzato il seguente output:
11) Ems
Questa è un'unità scalabile per il dimensionamento. Questa proprietà em può essere utilizzata per definire la dimensione del testo in base al testo circostante. La dimensione predefinita del testo è 1em, che è uguale a 12pt. 2em è uguale a 24pt e così via.
Esempio : illustrazione della proprietà ems
Ems Property
h3
(
font-size: 0.8em;
)
h4
(
font-size: 1.2em;
)
Ciao mondo … Benvenuto in EDUCBA …
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) è una formazione basata sulle competenze
Verrà visualizzato il seguente output:
12) Famiglia di caratteri
Questa proprietà viene utilizzata per fornire vari tipi di nomi di famiglia di caratteri per il testo selezionato. Ad esempio, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, ecc.
Esempio : illustrazione della proprietà della famiglia di caratteri
Font Family Property
Ciao mondo…
Benvenuti in Educba …
Consulente educativo …
Verrà visualizzato il seguente output:
Conclusione
Finora, abbiamo studiato i modi di formattazione del testo nei CSS. Si potrebbe vedere che il testo viene presentato con diversi tipi di proprietà di formattazione del testo. Queste proprietà sono aspetti molto importanti del CSS per visualizzare il testo sulla pagina Web in modo che gli utenti o i lettori possano attirare vedendo il tuo testo sul sito Web. Utilizzare queste proprietà del testo in modo molto semplice ed efficace sulle pagine Web.
Articoli consigliati
Questa è stata una guida alla formattazione del testo CSS. Qui discutiamo un'introduzione e un elenco delle proprietà di formattazione del testo CSS in dettaglio con esempi di codice di esempio e output corretto. Puoi anche consultare i nostri altri articoli suggeriti per saperne di più -
- Che cos'è il CSS?
- SASS vs CSS
- Comandi CSS
- Domande di intervista CSS3