Stile ed effetti su testo

Cascade style sheets
di Risorse.net

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 &nbsp;

  • 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


    © Risorse.net (www.risorse.net)
    pagina in versione stampabile:
    http://www.risorse.net /css/testolinkcss.asp?print=ok