.:Divinità:.
- Group
- Precursore
- Posts
- 26,519
- Status
- Anonymous
|
|
Si potrebbe esordire dicendo: "Ma come?! Testo e Carattere non sono sinonimi?"
La risposta è NI (o SO, come preferite xD).
Linguisticamente parlando, sono due sostantivi che delineano lo stesso concetto, ma in linguaggio HTML sono ben diversi.
Per TESTO si intende l'INSIEME DI CARATTERI, per CARATTERE si intende il FONT.
Mi preme sottolineare questa, all'apparenza, banalità, per mettere bene in chiaro di cosa andremo ad occuparci.
Quando dichiariamo degli attributi che non riguardino il font, stiamo parlando di attributi propri del TESTO, ovvero, in altre parole, di un contenuto (in questo caso testuale) che riempie una pagina web, una tabella, un box, una textarea, e via dicendo.
Un'immagine esemplificativa potrebbe essere QUESTA.
In virtù di questa precisazione, dunque, andiamo ad analizzare dapprima gli attributi del testo.
text-align: left | right | center | justify
Un esempio, con text-align:center
CONTENUTO
Un esempio, con text-align:justify
BLA BLA BLA BLA BLA BLA BLA BLA BLA BLA
Cos'è la giustificazione? Oltre a quella che occorre presentare a scuola a seguito di un assenza  , per giustificazione si intende l'allineamento del testo sia al margine sinistro che a quello destro.
text-decoration: overline | underline | line-through | blink | none
Esempi:
text-decoration: overline - testo sopralineato
text-decoration: underline - testo sottolineato
text-decoration: line-through - testo barrato
text-decoration: blink - testo lampeggiante (Non supportato da IE  )
text-decoration: none - testo privo di decorazione
text-indent: valore (Il valore può essere espresso secondo la tabella che trovate a fondo pagina.)
Esempio:
Notare il rientro di questa prima riga
rispetto a questa seconda riga.
line-height: normal | valore
line-height viene comunemente chiamata 'interlinea', ovvero la distanza tra una frase e l'altra. Con il valore normal il testo non avrà alcuna variazione. Il valore può essere espresso secondo la tabella che trovate a fondo pagina.
Esempi:
PROVA PROVA PROVA PROVA
PROVA PROVA PROVA PROVA HTML <div style="line-height: 3em">PROVA PROVA PROVA PROVA
PROVA PROVA PROVA PROVA</div>
PROVA PROVA PROVA PROVA
PROVA PROVA PROVA PROVA HTML <div style="line-height: 70%">PROVA PROVA PROVA PROVA
PROVA PROVA PROVA PROVA</div>
text-transform: capitalize | uppercase | lowercase
Ogni parola ha l'iniziale maiuscola Tutto il testo viene trasformato in maiuscolo Tutto il testo viene trasformato in minuscolo
letter-spacing: valore
Spazio fra le lettere che compongono il testo. Il valore può essere espresso secondo la tabella che trovate a fondo pagina.
PROVA HTML <div style="letter-spacing: 3cm">PROVA</div>
Passiamo adesso agli attributi del carattere, ovvero di tutto ciò che riguardi il FONT.
E' opportuna una premessa: qualora voi dichiaraste un font presente sul vostro PC, ma NON presente sul pc di un qualsiasi lettore, il vostro lavoro verrà visualizzato con un font classico, selezionato tra quelli sicuramente presenti sul PC (e saranno, dunque, evidenti i problemi di visualizzazione, qualora aveste impostato un'estetica ben precisa...).
E' sempre preferibile, dunque, utilizzare font piuttosto classici, o, qualora si volesse cambiare, allegare un LINK dal quale scaricare il font utilizzato.
font-family: nomeFont
font-size: lunghezza | valore assoluto | valore relativo | percentuale
Si possono esprimere le dimensioni del font facendo riferimento ad uno dei quattro possibili attributi. Riferirsi alla tabella dei valori, presente a fondo pagina.
Solitamente, si utilizzando i punti (pt) o i pixel (px).
font-style: normal | italic | oblique
font-variant: normal | small-caps
Assegna il maiuscoletto con small-caps, mentre con normal rimuove tutto.
Esempio (notare le lettere iniziali di ogni parola):
Questo E' Un Messaggio Predefinito HTML <div style="font-variant: small-caps">Questo E' Un Messaggio Predefinito</div>
font-weight: bold | bolder | lighter | normal | 100 ---> 900
Per impostare lo spessore del testo, oltre alle parole riservate è possibile introdurre anche un valore numerico da 100 a 900 con incrementi di 100. Soltanto a partire dal valore 700 si avvertirà l'effetto grassetto.
TABELLE A CURA DI www.web-link.it
UNITA' DI MISURA
| Unità di misura | Descrizione | Esempio | Risultato | | cm | Centimetri | 1cm | Risultato | | mm | Millimetri | 7mm | Risultato | | in | Pollici | 0,25in | Risultato | | pt | Punti | 12pt | Risultato | | pc | Pica(=12 punti) | 2pc | Risultato | | px | Pixel | 25px | Risultato | | em | Lun. lettera m | 2,5em | Risultato | | ex | Altezza carattere x | 3ex | Risultato |
VALORI ASSOLUTI
| Valore | Sintassi descrizione | Risultato | | xx-small | font-size: xx-small | Risultato | | x-small | font-size: x-small | Risultato | | small | font-size: small | Risultato | | medium | font-size: medium | Risultato | | large | font-size: large | Risultato | | x-large | font-size: x-large | Risultato | | xx-large | font-size: xx-large | Risultato |
VALORI RELATIVI
| Valore | Sintassi descrizione | Risultato | | smaller | font-size: smaller | Risultato | | larger | font-size: larger | Risultato |
COLORI
| Valore | Sintassi descrizione | Risultato | | nome | color: lime | Risultato | | valore esadecimale | color: #00ff00 | Risultato | | valore RGB | color: rgb(0,255,0) | Risultato | | percentuale RGB | color: rgb(0%,100%,0%) | Risultato |
|
|
.
Web