10 Proprietà di stile del testo nei CSS

I Cascading Style Sheets (CSS) descrivono come l'HTML visualizza gli elementi sullo schermo. I CSS possono controllare il layout di più pagine Web con poche righe di codice.

I CSS hanno proprietà di formattazione che influenzano la spaziatura, l'aspetto e l'allineamento del testo. Di seguito sono riportate alcune proprietà che puoi utilizzare per definire lo stile del testo nelle pagine dell'app.

1. Colore del testo

IL colore La proprietà specifica il colore di primo piano principale del testo. Puoi usare un nome di colore predefinito come rosso, bianco, O verde. Puoi anche utilizzare un valore esadecimale o altre unità come RGB, HSL e RGBA.

Framework CSS come CSS vento in coda hanno una funzione di colore incorporata che mostra una varietà di sfumature. Questo ti rende più facile selezionare una tonalità che preferisci. Cambiamo il colore delle seguenti intestazioni utilizzando alcune di queste proprietà:

<corpo>
<h1>Cambia il mio coloreh1>
<h2>Cambia il mio coloreh2>
<h3>Cambia il mio coloreh3>
<h4>Cambia il mio coloreh4>
corpo>

Il CSS sarà simile a questo:

h1 {
colore: arancia;
}
h2 {
colore: #ff6600;
}
h3 {
colore: rgb(255, 102, 0);
}
h4 {
colore: hsl(24, 100%, 50%);
}

E il testo in stile apparirà così:

2. Colore di sfondo

Puoi usare il colore di sfondo proprietà da creare sfondi accattivanti. Usalo per impostare sfondi diversi per le seguenti intestazioni:

<corpo>
<h1>Cambia il mio colore di sfondoh1>
<h2>Cambia il mio colore di sfondoh2>
<h3>Cambia il mio colore di sfondoh3>
<h4>Cambia il mio colore di sfondoh4>
corpo>

Con il seguente CSS:

h1 {
colore di sfondo: arancia;
}
h2 {
colore di sfondo: #009900;
}
h3 {
colore di sfondo: rgb(204, 0, 0);
}
h4 {
colore di sfondo: hsl(60, 100%, 50%);
}

Quando il tuo browser esegue il rendering di questa pagina, avrà un aspetto simile a questo:

3. Allineamento del testo

IL allineamento del testo La proprietà imposta l'allineamento orizzontale del testo. Questo valore può essere Sinistra, Giusto, centro, O giustificare.

Il valore di giustificazione allunga ogni riga di testo, in modo che occupino tutti la stessa larghezza sui margini destro e sinistro. Utilizzare il seguente codice di esempio per esplorare questi quattro valori:

<corpo>
<h1>Allineami a sinistrah1>
<h2> Allineami beneh2>
<h3>Allineami al centroh3>
<Pclasse="ex4"><forte>Allineami giustificatoforte>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero roncus ut.P>
<P><forte>Nessun allineamento forte>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero roncus ut.P>
corpo>

Utilizza il seguente CSS per applicare diversi allineamenti:

h1 {
allineamento del testo: Sinistra;
}
h2 {
allineamento del testo: Giusto;
}
h3 {
allineamento del testo: centro;
}
.ex4{
allineamento del testo: giustificare;
}

Nel browser, apparirà così:

4. Direzione del testo

IL direzione del testo proprietà definisce la direzione del testo. Definire la direzione utilizzando le proprietà rtl (da destra a sinistra) o ltr (da sinistra a destra). Questi due specificano la direzione in cui vuoi che scorra il testo.

Ad esempio, usa rtl quando si lavora con lingue scritte da destra a sinistra come l'ebraico o l'arabo. Usate ltr per le lingue scritte da sinistra a destra come l'inglese.

Illustriamolo con il codice seguente:

<corpo>
<div>
<Pclasse='ex1'>Questo paragrafo va da destra a sinistra. Il cursore
 si sposta da destra a sinistra quando si digitano ulteriori informazioni su
 pagina.P>
<Pid="ex2">Questo paragrafo va da sinistra a destra. Il cursore si sposta
 da sinistra a scrivere quando digiti più informazioni sulla pagina!P>
div>
corpo>

Con questo CSS di accompagnamento:

.ex1 {
direzione: rtl;
}
#ex2 {
direzione: ltr;
}

Il risultato finale sarà simile a questo:

5. Decorazione del testo

IL decorazione del testo La proprietà imposta l'aspetto delle linee decorative sul testo. È una scorciatoia per linea-di-decorazione-del-testo,testo-decorazione-colore,stile di decorazione del testo, E testo-decorazione-spessore proprietà. Se non desideri avere la proprietà su elementi che hanno collegamenti, usa decorazione del testo: nessuna;

Dovresti evitare di sottolineare il testo normale poiché quello stile di solito indica un collegamento. L'illustrazione seguente mostra alcuni esempi nel codice:

<corpo>
<h1>Decorazione del testo sopralineatoh1>
<h2>Decorazione di testo line-throughh2>
<h3>Sottolinea la decorazione del testoh3>
<Pclasse="ex">Sottolinea e sottolinea la decorazione del testo.P>
<P><UNhref="predefinito.asp">Questo è un collegamentoUN>P>
corpo>

Puoi applicare vari effetti decorativi con questo CSS:

h1 {
decorazione del testo: sopralineare;
}
h2 {
decorazione del testo: line-through;
}
h3 {
decorazione del testo: sottolineare;
}
P.ex {
decorazione del testo: sopralinearesottolineare;
}
UN {
decorazione del testo: nessuno;
}

E mostreranno qualcosa del genere:

6. Trasformazione del testo

IL trasformazione del testo La proprietà specifica il tipo di maiuscolo/minuscolo in cui appaiono le lettere. Questo può essere in lettere maiuscole o minuscole. Puoi anche usarlo per scrivere in maiuscolo la prima lettera di ogni parola:

L'esempio seguente mostra come farlo nel codice:

<corpo>
<h1>Esempi di proprietà di trasformazione del testoh1>
<Pclasse="maiuscolo">Questa frase è in maiuscolo.P>
<Pclasse="minuscolo">Questa frase è in minuscolo.P>
<Pclasse="capitalizzare">Scrivi in ​​maiuscolo questo testo.P>
corpo>

Il file CSS:

P.maiuscolo {
trasformazione del testo: maiuscolo;
}
P.minuscolo {
trasformazione del testo: minuscolo;
}
P.capitalizzare {
trasformazione del testo: capitalizzare;
}

Con il seguente risultato:

7. Spaziatura del carattere

IL spaziatura del carattere La proprietà specifica lo spazio tra le lettere nel testo. L'esempio seguente illustra come specificare diversi stili di spaziatura.

<corpo>
<h1>Esempi di spaziatura delle lettereh1>
<h2>Questa è la rubrica 1h2>
<h3>Questa è la rubrica 2h3>
corpo>

Usa i pixel o altre unità di misura nel tuo file CSS:

h2 {
spaziatura del carattere: 7px;
}
h3 {
spaziatura del carattere: -2px;
}

E il testo risultante sarà allungato o schiacciato:

8. Spaziatura delle parole

IL spaziatura delle parole proprietà specifica lo spazio tra le parole in un testo. I browser hanno una lunghezza standard per lo spazio tra le parole, ma puoi impostarne una tua. L'esempio seguente illustra come aumentare o diminuire lo spazio tra le parole:

<corpo>
<h1>Esempi della proprietà Word-spacingh1>
<P>Spaziatura normale delle parole.P>
<Pclasse="ex1">Grande spaziatura delle parole.P>
<Pclasse="ex2">Piccola spaziatura delle parole.P>
corpo>

Usando questo CSS:

P.ex1 {
spaziatura delle parole: 1rem;
}
P.ex2 {
spaziatura delle parole: -0.3rim;
}

Puoi vedere chiaramente l'effetto della spaziatura delle parole:

9. Altezza della linea

IL altezza della linea specifica la spaziatura tra le righe in un paragrafo. L'altezza della riga standard e predefinita nella maggior parte dei browser è compresa tra il 110% e il 120% circa. Il codice seguente illustra come modificarlo:

<corpo>
<h1>Usando l'altezza della lineah1>
<P>
 Altezza riga standard.
 Altezza riga standard.
P>
<Pclasse="piccolo">
 Piccola piccola altezza della linea.
 Altezza della linea ridotta
P>
<Pclasse="grande">
 Altezza della linea maggiore.
 Altezza della linea maggiore.
P>
corpo>

Utilizzando il seguente CSS:

P.piccolo {
altezza della linea: 0.7;
}
P.grande {
altezza della linea: 1.8;
}

Puoi vedere i risultati tra ogni riga in ogni paragrafo:

10. Ombra del testo

IL testo-ombra La proprietà applica ombre al testo. Devi specificare l'ombra orizzontale e l'ombra verticale. Testo-ombra può includere il colore e il raggio di sfocatura. Illustriamolo con il seguente codice:

<corpo>
 <h1>EsempiDiTesto-ombraeffetto.h1>
 <h1classe="ex1">Testo-ombraconcoloreh1>
 <h1classe="ex2">Testo-ombraconsfocaturaeffetto.h1>
corpo>

Con questo CSS:

h1 {
 ombra del testo: 2px 2px;
}
.ex1 {
 text-shadow: 2px 2px arancione;
}
.ex2 {
 text-shadow: 2px 2px 10px rosso;
}

Produrrà alcuni effetti insoliti e interessanti:

Perché imparare le proprietà di stile del testo CSS?

I CSS sono la spina dorsale del web design moderno. Sia nella sua forma vanilla che nei framework, la funzione di base delle proprietà CSS è la stessa. La padronanza delle proprietà di formattazione del testo consente di creare interfacce utente attraenti e leggibili.

L'ultima versione di CSS, CSS3, introduce nuovi concetti dalle animazioni ai layout a più colonne. Questi concetti semplificano la creazione di applicazioni e documenti professionali.