Grazie ai Css, e' possibile applicare dello stile al testo, o meglio ancora, degli effetti sui links ipertestuali. I famosi cambi di sottolineatura, colore e quant'altro ai collegamenti al momento di passarci sopra con il mouse, sono ottenuti grazie ai fogli di stile. Questi tipi di interazioni agli eventi dell'utente verranno trattati nel prossimo passaggio.
Come prima cosa pero', vediamo come usare i Cascade Style Sheets su comune testo.
Font family
E' l'equivalente dell'attributo FACE del tag <FONT> in HTML. Per attribuire piu' di un font a questo carattere (in modo che in assenza di uno il browser utilizzi il successivo) e' necessario separarli da una virgola e, se si intendesse usare un font composto da piu' termini (per es.: Times New Roman) bisognera' raggrupparli sotto le " ".
Ecco un esempio di CSS con l'attributo font-family.
<STYLE>
FONT { font-family:"times new roman", tahoma, arial }
</STYLE>
Font style
Come si puo' intuire dal nome, questo attributo garantisce dello stile al font. I diversi valori possono essere:
normal o roman, ovvero nessuno stile (default).
italic corsivo, equivalente a <I> o <EM> in Html.
oblique rende obliquo il testo.
Per esempio:
<STYLE>
FONT { font-style:italic }
</STYLE>
Font size
Imposta la grandezza del font, che, a differenza di Html, non soffre di alcun limite di grandezza e di precisione.
Un'altra differenza con Html, risiede nel fatto che invece di possedere una sola unita' di misura (da 1 a 7), i Css possono essere scelti tra varie unita' di misura (rimandiamo alla seconda puntata di questo tutorial).
I possibili valori sono:
absolute-size che possono essere: medium (default), small, x-small, xx-small large, x-large, xx-large.
relative-size che sono smaller e larger.
Unita' di misura quali pixel, centimetri ecc.
Percentuale
Non sono permessi valori negativi. Ecco comunque un esempio su come utilizzare la proprieta' Font size.
<STYLE>
FONT { font-size:10pt }
</STYLE>
Font weight
Come i tag <B> e <STRONG> in Html, questo attributo specifica lo spessore del font. I valori da utilizzare sono:
normal che equivale al valore 400.
bold che equivale al valore 700.
bolder relativo al peso ereditato dall'elemento parent.
lighter relativo al peso ereditato dall'elemento parent.
100, 200, 300 fino a 900 sequenza ordinata dove ogni numero indica un peso.
E come sempre ecco un esempio:
<STYLE>
FONT { font-weight:bold }
</STYLE>
Font variant
Assegna uno stile tutto maiscolo al testo accluso al tag a cui questo CSS fa riferimento. I valori sono:
normal (default).
small-caps
Ecco un esempio:
<STYLE>
FONT { font-variant: small-caps }
</STYLE>
Font
In un'unica proprieta' un insieme di attributi. I valori sono gli stessi di: font-style, font-variant, font-weight e font-size.
Ecco un esempio:
<STYLE>
FONT { font: italic bold 10px/12px Times, Serif }
</STYLE>
Color
Imposta il colore al testo accluso al tag a cui si riferisce. E' lo stesso dell'attributo color del tag <font> nel comune Html.
<STYLE>
FONT { color:gray }
</STYLE>
Text decoration
All'inizio della puntata, avevamo lasciato un discorso a meta', quello degli effetti su links. L'attributo da usare e' text-decoration e puo' assumere svariati valori:
none (default).
underline
overline
line-through
blink
Per esempio:
<STYLE>
FONT { text-decoration: overline }
</STYLE>
List style type
Indica il tipo di punteggiatura degli elementi contenuti in una lista. I valori che puo' assumere sono:
circle
square
disc
decimal
upper-roman
lower-roman
upper-alpha
lower-alpha
none
disc (default)
<STYLE>
OL { list-style-type: decimal }
</STYLE>
List style position
Indica dove deve essere posizionato il marcatore rispetto alla rispettiva voce della lista. I valori che puo' assumere sono:
inside la linea va a capo sotto il marcatore senza essere indentata.
outside la linea va a capo indentata rispetto al marcatore. (default)
<STYLE>
UL { list-style-position: inside }
</STYLE>
List style image
Il comune marcatore viene sostituito da un'immagine. I possibili valori sono:
l'indirizzo dell'immagine.
none (default)
<STYLE>
UL { list-style-image: URL(http://server/img.gif }
</STYLE>
List style
Dichiara all'interno di una lista la punteggiatura, la posizione e l'immagine che identifica ciascun elemento. I possibili valori sono gli stessi di list style type e di list style position
<STYLE>
UL { list-style: circle inside }
</STYLE>
White space
Determina la gestione degli spazi all'interno di una pagina. I valori che puo' assumere sono:
normal (default) mantiene la comune formattazione del testo dell'Html. Quindi in caso di spazi essi verranno ridotti a uno, se non esplicitamente richiesti utilizzando il comando
pre preformatta il testo. Gli spazi, verranno quindi tutti considerati.
nowrap non permette un ritorno a capo, se non tramite il tag <BR>
<STYLE>
p { white-space: pre }
</STYLE>
Display
Nel contesto di una box indica come deve essere visualizzato un elemento. I valori che puo' assumere sono:
block (default) inserisce un ritorno a capo prima e dopo l'elemento.
inline non viene inserito alcun ritorno a capo, ne'prima ne' dopo l'elemento.
list-item simile al block, con l'unica differenza che viene aggiunto un marcatore ad ogni elemento.
none non visualizza l'elemento.
<STYLE>
p { display: inline }
</STYLE>
Pagina successiva ->
Clicca per sapere come utilizzare font non presenti nel client
