La formattazione del testo in CSS spiegata
La formattazione del testo comprende proprietà come colore, allineamento, decorazione, rientro, spaziatura e molti altri. Lo scopo di questa guida è quello di illuminare l'importanza della formattazione del testo in CSS ed esplorare le proprietà che possono essere utilizzate per la formattazione del testo.
Che tipo di formattazione di testo in CSS è supportata?
La formattazione del testo è assistita da diverse proprietà qui descritte e la sintassi di queste proprietà è anche definita.
Allineamento: Allinea il testo usando la sintassi scritta di seguito.
selettore text-align: value;Il valore del testo-allineamento può essere:
- a destra: il testo sarebbe sul lato destro dell'elemento
- A sinistra: il margine sinistro delle linee è dritto
- Centro: il testo sarebbe al centro e i margini sinistra/destra saranno uguali
- Giustifica: il testo è disposto in un modo in cui i margini sinistro e destro sono mantenuti dritti e uguali
Esempio:
Il testo è allineato a sinistra
Il testo è allineato
Il testo è allineato a destra
Il testo è giustificato
Vengono create quattro classi CSS, la classe "a sinistra" rappresenta l'allineamento sinistro del testo. Allo stesso modo, i "giusti", "cent" e "giusti" sono usati per allineare il testo a destra, centrati e giustificati.
Produzione
Spaziatura del carattere: È usato per definire lo spazio tra le lettere di una parola in PX, EM, MM o CM.
Selector lettera-spaziatura: valore;Esempio: Per verificare la funzionalità della proprietà che spazia le lettere, abbiamo utilizzato il seguente codice.
La spaziatura delle lettere è 5px
La spaziatura delle lettere è 0.5em
La spaziatura delle lettere è 1 mm
Nel codice sopra, le classi CSS vengono create per impostare le lettere in PX, EM e MM.
Produzione
Spaziatura delle parole: Questa proprietà viene utilizzata per aggiungere spazio tra le parole di una linea.
selettore spaziatura di parole: valore;Esempio: La proprietà di spaziatura delle parole viene fornita utilizzando le seguenti righe di codice.
Ogni parola sarà separata da 10px
Una classe CSS viene creata per creare uno spazio 10px tra le parole.
Produzione
Colore: Questo definisce il colore del testo utilizzato con l'aiuto di seguire la sintassi.
selettore color: value;Il valore della proprietà del colore può essere,
- Nome del colore I.e., rosso, arancione
- Valore esadecimale del colore (#00000)
Esempio: Il seguente è esercitata per impostare il colore del
testo a rosso.
Benvenuti in Linuxhint
Produzione
Decorazione: La decorazione viene eseguita per eseguire azioni su testo come sottolineatura, linea-through, overline e nessuna.
selettore decorazione del testo: valore;Il valore può essere uno dei seguenti
- Linea-through: una linea orizzontale è posizionata sul testo
- Overline: una riga viene disegnata sopra il testo
- Sottolinea: la linea orizzontale è posizionata sotto la linea
- Nessuno: nessuna linea verrebbe posizionata
Esempio:
testo sottolineato
riga attraverso il testo
testo sovrapposto
Il codice di cui sopra comprende tre classi CSS e tre paragrafi. Le classi CSS "UN", "LT" e "OV" rappresentano lo stile di decorazione e sono usate in tre diversi paragrafi.
Produzione
Rientro: Il rientro CSS viene eseguito per rientrare (mantenendo il testo nello spazio specifico dal margine) la prima linea di paragrafo.
Selettore Indent text: valore;Il valore può essere in mm, cm, em, px.
Esempio: Qui, abbiamo applicato la proprietà di rientro (in PX, EM e CM) su vari paragrafi nel codice.
Il rientro è impostato su 25px
Il rientro è impostato su 1EM
Il rientro è impostato su 1 cm
Il codice sopra contiene tre classi CSS e ogni classe rientra il testo in diverse unità di misurazione.
Produzione
Trasformazione: Il caso del testo è gestito utilizzando la proprietà di trasformazione seguita dalla sintassi qui fornita.
selettore Testo-transform: value;Il valore può essere uno dei seguenti
- maiuscola: per cambiare le lettere in maiuscolo
- minuscolo: cambia le lettere in minuscolo
- capitalizzare: viene utilizzato per capitalizzare la prima lettera di ogni parola
Esempio: È possibile controllare la funzionalità della trasformazione di testo dal codice indicato di seguito.
Convertirsi in un caso inferiore
Convertirsi in maiuscolo
La prima parola sarà capziale
Il codice sopra indicato contiene tre classi CSS che dovrebbero trasformare il testo del paragrafo in una forma minuscola, superiore e capitalizza.
Produzione
Altezza della linea: L'altezza delle linee di testo può essere definita utilizzando la proprietà della linea di linea in PX, CM, EM e MM.
Selector line-height: value;Esempio: Le seguenti righe di codice mostrano l'utilizzo della proprietà della linea di linea per regolare l'altezza delle righe di testo.
L'altezza della linea è 25px
L'altezza della linea è 2em
L'altezza della linea è 1 cm
Il codice sopra utilizza la linea di riga in PX, EM e CM. Inoltre, lo stile di confine dei paragrafi è impostato su solido (per comprendere meglio il concetto di altezza della linea).
Produzione
Direzione del testo: La direzione di scrittura del testo in CSS può essere gestita utilizzando la proprietà di direzione.
Selettore Direzione: valore;Il valore può essere RTL (da destra a sinistra), LTR (da sinistra a destra), iniziale () e eredità (recuperato dall'elemento genitore).
Esempio:
La direzione del testo è da destra a sinistra
Viene creata una classe CSS che consente di impostare la direzione da destra a sinistra.
Produzione
Text-shadow: L'ombra del testo viene praticata aggiungendo ombra con varie proprietà.
selettore text-shadow: valore1 valore2 valore3;I valori sono descritti come segue
- Valore1 rappresenta la dimensione orizzontale dell'ombra
- Value2 definisce la dimensione verticale dell'ombra
- Value3 viene utilizzato per i colori dell'ombra e può essere il nome esatto del colore, la combinazione RGB/RGBA di un colore, il valore esagonale di un colore.
Esempio: Il seguente codice imposta un'ombra verticale e orizzontale colorata.
Viene data un'ombra rossa di 1px
Viene creata una classe CSS denominata "SH" che crea un'ombra rossa spessa da 1 px sul testo fornito.
Produzione
Dopo aver attraversato questa sezione, avresti ottenuto la comprensione di varie proprietà di formattazione del testo fornite da CSS.
Conclusione
La formattazione del testo in CSS consente di abbellire il testo utilizzando le proprietà. Questo articolo fornisce il funzionamento e l'utilizzo di tutte le proprietà di formattazione del testo supportate da CSS. Ogni proprietà è guidata dalla sintassi che segue e viene anche fornito un esempio per comprenderne l'uso. Questa guida completa ti consentirebbe di applicare tutti i tipi di possibile formattazione di testo in CSS.
Resta connesso con LinuxHint per guide più informative su CSS e HTML.