Text-align : valore;
left
right
center
justify
sinistra, destra, centrato, giustificato.
Esempio di stile in linea.
<p {text-align:justify;}>il testo ha un allineamento giustificato</p>
text-decoration: valore;
overline
underline
line-through
blink
none
overline = sopralineato
underline = sottolineatoline-through = sbarrato
blink = lampeggiante (NON funziona con IE)
none
= nessuno.
E' anche possibile combinarne più di uno, per esempio inserendo sia underline che overline. None lo si adopera in particolar modo con i link in quanto toglie la sottolineatura che altrimenti avrebbero per default.
Esempio di stile in linea.
<h1 {text-decoration:underline;}> titolo con sottolineatura </h1>
<h2 {text-decoration:underline;text-decoration:overline;}> titolo sottolineato e sopralineato.
text-indent:valore;
lunghezza
percentuale
Indentazione,
rientro della prima riga di un blocco di testo dal margine sinistro.
E' possibile fare uso anche di numeri negativi per un rientro esterno
(prima riga più a sinistra del resto del testo).
text-transform:valore;
Capitalize = trasforma in maiuscola
la prima lettera di ogni parola
uppercase = trasforma in
maiuscolo l'interno blocco di testo
lowercase = trasforma in
minuscolo l'interno blocco di testo
normal
numero
percentuale
Interlinea
: è l'altezza della riga del testo e quindi lo spazio tra due
linee di testo. I valori possibili:
normal = è uno spazio gestito dal PC
numero = la riga è alta n volte l'altezza del carattere, il testo occupa la prima riga dello spazio. Oppure al numero puro posso aggiungere le varie unità di misura (px, em, etc.)
percentuale = definisce l'altezza della riga di testo rispetto all'altezza del carattere.
Vertical-align:valore;
bottom
percentuale
valore in cm
Allinea verticalmente degli elementi, all'interno di celle di tabelle o elementi di riga (inline) in riferimento ad altri elementi inline. Per esempio per posizionare una immagine rispetto al testo in un paragrafo. Vale anche per un altro elemento testo rispetto a quello di riferimento.
baseline = linea di base uguale tra testo ed immagine, quindi la parte bassa di entrambi coincide alla stessa riga orizzontale
sub = un testo o un immagine o altri elementi si posizionano rispetto al genitore nella posizione del pedice (non modifica il font)
super = un testo o un immagine o altri elementi si posizionano rispetto al genitore nella posizione dell'apice (non modifica il font)
middle = viene fatto un allineamento simmetrico, la linea orizzontale taglia a metà gli elementi interessati
bottom = allinea l'elemento alla parte inferiore della riga di testo
text-bottom = allinea l'elemento con la parte bassa del carattere
top
= allinea la parte superiore dell'elemento con quella dell'elemento
genitore, in pratica sono appesi alla stessa linea orizzontale (il
contrario del bottom)
text-top = all'inea la parte superiore dell'elemento al riquadro superiore dell'elemento genitore
percentuale
= sposta in alto (valori positivi) o in basso (valori negativi)
l'elemento rispetto a un livello 0 (baseline), la percentuale di
spostamento fa riferimento all'altezza della riga (line-height)
font-family: famiglia1, famiglia2, famiglia3;
Si
possono elencare più famiglie di caratteri per dare la
possibilità al browser di selezionare quella presente sul PC
del visitatore. Si tenterà di visualizzare la prima
specificata per poi passare a quelle successive nel caso in cui non
fossero presenti quelle precedenti. A questo proposito è
opportuno chiudere la lista con una famiglia generica come sans-serif
per essere certi di trovare un riscontro sempre e comunque. Nel caso
in cui il nome del font fosse composto da più di una parola,
per esempio Microsoft Tai Le, questo dovrà essere
racchiuso fra doppie virgolette "Microsoft Tai
Le" nelle dichiarazioni sul foglio esterno e
nella pagina. Mentre il nome del carattere va inserito tra singoli
apostrofi nel caso di dichiarazione in linea, dato che usa già
le doppie virgolette per accettare la dichiarazione stessa di style.
Esempio.
P {font-family:verdana, arial, sans-serif
font-size:valore;
da xx-small a xx-large = sono dimensioni in ordine crescente (quindi sono certo che medium è un carattere più grande di x-small).
Smaller e larger = sono rispettivamente un carattere più piccolo e più grande del carattere genitore
inherit = eredita dimensioni dal carattere genitore
larghezza specificata con un valore numerico seguita dall'unità di misura (senza spazio divisorio tra i due). Segue la tabella delle varie unità di misura da utilizzare per valori numerici :
larghezza
percentuale = definisce la grandezza del carattere in percentuale
alle dimensioni del carattere del genitore (esempio. Font-size:200%;
in questo caso il carattere è il doppio di quello del blocco
genitore)
Normal = è il testo normale
italic = stile italico, tipo corsivo
oblique = il testo viene inclinato sulla destra
Font-variant:valore;
font-weight:valore;
Per
impostare lo spessore del testo.
normale = testo normale
lighter = leggero
bolder = un po' più marcato
bold = grassetto
Nome = si può inserire il nome dei colori direttamente
codice esadecimale = codice #xxxxxx
Esempi.
P {color:green;} i paragrafi avranno un carattere di colore verde
strong {color:red;} il tag grassetto avrà anche il testo rosso
strong {color:#ff0000;} uguale a quello sopra ma abbiamo usato il codice colore.
Questo
attributo definisce il colore di sfondo di uno style e può
essere adoperato indipendentemente dal colore del testo.
Se abbinato al markup body diventa l'immagine di sfondo di tutta la pagina.
Esempio.
Body {background-image: url(percorso/nome_immagine.gif;}
Questo
attributo serve per specificare come disporre l'immagine di sfondo
quando non si tratta di uno sfondo omogeneo a tinta unita che riempie
tutta la pagina:
repeat = indica che l'immagine deve
essere replicata in orizzontale ed in verticale
coprendo tutto lo schermo.
repeat-x = deve essere
replicata soltanto in orizzontale.
repeat-y = deve
essere replicata soltanto in verticale.
no-repeat
= indica che l'immagine non deve essere
replicata.
Logicamente
questo attributo dovrà necessariamente essere adoperato in
abbinamento con background-image illustrato sopra. Quindi un
esempio
body {background-image: url (percorso/nome_immagine.gif); background-repeat: repeat;}
Partendo da questa immagine :
l'effetto
dei possibili valori, in ordine di presentazione, è il
seguente
repeat
repeat-x
repeat-y
no-repeat
Questo attributo definisce il punto da cui iniziare a posizionare l'immagine di sfondo e funziona se abbinato con background-image e background-repeat.
Si possono adoperare parole chiave :
per la posizione orizzontale: left, center, right
per
la posizione verticale: top, center,bottom.
Coordinate
percentuali
= è
possibile esprimere valori percentuali, dove: 0% 0% indica
l'angolo in alto a sinistra (default) e: 100% 100% indica
l'angolo in basso a destra.
coordinate x y = seguite da unità di misura per maggior precisione. Si possono specificare anche coordinate espresse in mm, cm, inc.
(esempio. Background-position: 10px 50px;
tanto per prendere confidenza con il linguaggio, è importante sapere che il codice sopra si può scrivere anche nel seguente modo :
body
{
background-image: url (percorso/nome_immagine.gif);
background-repeat: repeat;
background-position:50% 50%;
}
Vedi questi altri esempi:
background-position
30% 50%
background-positione left
background-position
center
background-position right
background-position
top
background-position top right
background-position
bottom
background-position bottom left
scroll
Questo attributo definisce se l'immagine usata come sfondo deve scorrere sullo schermo insieme al testo (scroll) oppure restare fissa sullo sfondo (fixed) nel momento in cui si scorre la pagina verticalmente.
Sitografia : http://www.web-link.it
