CSSProgrammazione

Come far interagire il testo nel CSS!

0

Benvenuto in questo nuovo articolo in cui scopriremo come far interagire il testo nel CSS.

Incominciamo con il dire che le proprietà che consentono di controllare l’aspetto del testo sono sostanzialmente suddivise in due gruppi.

  • Quelle che influenzano la forma, il carattere e l’aspetto.

  • Quelle che hanno lo stesso effetto sul testo indipendentemente dal tipo di carattere utilizzato.

Vi sono vari modi per utilizzare i caratteri nel CSS, ma alcuni di questi sono protetti da diritti, quindi dobbiamo scegliere con cura il nostro carattere.

La proprietà font-family è probabilmente la più veloce da far caricare al nostro CSS, ma abbiamo bisogno che il carattere sia installato sui nostri dispositivi.

body {

font-family:Arial, Verdana, sans-serif}

La proprietà @font-face invece specifica da dove scaricare il tipo di carattere se non è installato nei dispositivi, con questa proprietà possono essere utilizzati alcuni caratteri a pagamento.

@font-face{

font-family: ‘Exo’, sans-serif;

src: url(‘fonts/exo.tff’)}

Dove la proprietà src specifica il percorso nel quale cercare il font.

Per variare la grandezza del carattere si utilizza la proprietà font-size,

body {

font-family:Arial, Verdana, sans-serif;

font-size: 12px;}

h1 {

font-size: 200%}

h2 {

font-size: 1.3em;}

Dove i pixel (px) vengono utilizzati perché consentono di avere un controllo molto preciso sullo spazio occupato dal testo, anche se con risoluzioni basse il testo potrebbe risultare più grande del dovuto.
Invece la differenza tra EMS e percentuale è che 1em corrisponde e il 100% corrispondono a 16px.

Per creare del testo in grassetto viene utilizzata la proprietà font-weight, dove con il valore normal viene utilizzato il “peso” normale e con il valore bold il grassetto.
Per il corsivo invece si utilizza font-style, dove nomal corrisponde sempre allo stile normale, italic al corsivo e oblique al testo obliquo.
Se invece vogliamo rendere il testo tutto maiuscolo, minuscolo o solo con le iniziali maiuscole possiamo utilizzare proprietà text-transform e rispettivamente i valori uppercase, lowercase e capitalize.
Invece utilizzando la proprietà text-decoration abbiamo la possibilità di sottolineare il testo tramite il valore underline, aggiungere una linea sopra tramite overline e al centro con line-through, utilizzando none invece rimuoviamo ogni decorazione. Ci sarebbe anche un altro valore, blink, il quale è sconsigliato da utilizzare perchè facendo lampeggiare il testo può essere molto fastidioso.

Con la proprietà line-height interveniamo su l’interlinea e con letter-spacing e word-spacing interveniamo sul kerning ovvero sullo spazio tra ogni lettera e parola.

Per allineare il testo si utilizzano due proprietà, il text-align e il vertical-align, dove per il primo interviene orizzontalmente e il secondo verticalmente, rispettivamente hanno come valori justify, center, right, left e baseline, sub, super, top, text-top, middle, bottom e text-bottom.

Le proprietà text-indent e text-shadow vengono utilizzate per far spostare il primo rigo di un testo e per aggiungere un’ombra al testo, :first-letter e :first-line invece ci consentono di apportare modifiche o solo sulla prima lettera o sulla prima linea di testo.

Infine per interagire con i link e collegamenti abbiamo a disposizione :link e :visited, che permettono di dare un aspetto diverso ai link da visitare e visitati, ma possiamo utilizzare anche la proprietà :hover, che cambierà lo stile solo quando saremo con il puntatore su di essa, la proprietà :active, che sarà visibile solo quando il nostro elemento sarà attivo, e :focus, che viene applicato su elementi che hanno il controllo, ad esempio in un form, quando l’input è pronto ad accettare la richiesta.

Bene, questo era il tutto, spero di averti aiutato nell’ampliare le tue conoscenze nell’ambito informatico, in particolare su come il testo interagisce nel CSS.

Techno Age Admin

Utilizzo delle variabili, costanti e dei commenti in Java!

Previous article

Recovery: cos’è, a cosa serve e come installarne una modificata!

Next article

Comments

Rispondi

Login/Sign up