*Linux Guide

Web Design - CSS Parte 2

Affrontiamo ora la descrizione dettagliata dei singoli elementi che si possono includere in un CSS. La faremo in ordine alfabetico per praticità.

In via preliminare stabiliamo un concetto importante.
La pagina web deve avere un albero gerarchico per cui si definisce elemento progenitore quello che gerarchicamente si trova in alto rispetto ad un altro elemento che perciò diviene erede. Se un elemento ne contiene un altro, questo è il progenitore del contenuto e il contenuto eredita le proprietà del progenitore qualora siano proprietà ereditabili. Nella lettura delle proprietà e nei prossimi esempi si comprenderà meglio quanto stabilito ora.

:active
E' una pseudo-classe che si applica ad elementi Link con attributo 'href'. I valori assegnati a questa pseudo-classe si applicano al collegamento quando viene cliccato. La sintassi di applicazione è la seguente :


a :active{color : #ff0000;
background : #ffff00;
}

:first-letter
E' uno pseudo-elemento che si applica agli elementi di blocco (come i paragrafi, i div e gli headers) e che permette di ottenere l'effetto capolettera. Le proprietà che si possono utilizzare sono :
  • text-decoration (per sottolineare, sopralineare, ecc.)
  • text-transform (per trasformare la lettera in minuscola o maiuscola)
  • text-shadow (per applicare un effetto di ombreggiatura)
  • line-height (per gestire l'altezza della linea)
  • vertical-align (per collocare la lettera in alto, a metà e in basso)
  • float (per spostare la lettera in senso spaziale)
  • clear (per liberare lo spazio ai quattro lati della lettera)
  • le proprietà dei font (size, family, weight)
  • le proprietà di colore (color e background)
  • le proprietà di margine, bordo esfondo


:first-letter{font : 150% verdana,arial,sans-serif;
color : #f00;
font-weight :bold;
}

:first-line
E' uno pseudo-elemento che si applica ad elementi di blocco e che dona degli effetti alla prima riga di un paragrafo. Le proprietà che possono essere utilizzate sono :
  • word-spacing (per modificare lo spazio tra parole)
  • letter-spacing (per modificare lo spazio tra lettere)
  • text-decoration
  • text-transform
  • text-shadow
  • vertical-align
  • clear
  • le proprietà dei font (size, family, weight)
  • le proprietà di colore (color e background)


:first-line{font : 110% verdana,arial,sans-serif;
color : #999;
font-style : italic;
}

!important
E' una dichiarazione che si applica alle Regole di Stile per indicare che la regola applicata è di prioritaria importanza. Questo fa si che gli stili applicati caratterizzati da simile dichiarazione siano prevalenti su tutti gli altri.


.attenzione{font : 100% verdana,arial,sans-serif;
font-weight : bold !important;
}

:link
E' una pseudoclasse che si applica ad elementi Link con attributo 'href', ma non alle ancore e applica degli stili a quei links che non sono ancora stati visitati.


a :link{color : #OOf;
text-decoration : underline;
}

:visited
E' un altra pseudoclasse che si applica agli elementi Link con attributo 'href' e non alle ancore. Applica degli stili a quei links che sono già stati visitati.


a :visited{color : #c09;
text-decoration : underline;
}

background
E' una proprietà che può avere i seguenti valori (tra parentesi i valori di default) :
  • background-color (transparent)
  • background-image (none)
  • background-repeat (repeat)
  • background-attachment (scroll)
  • background-position (0% 0%)
Non è ereditabile dagli altri elementi della pagina nel senso che il background di un dato elemento, non si estende anche agli altri, ma si applica unitariamente a tutti gli elementi. E' bene impiegare la forma sintetica tenendo a mente che se non vengono specificati i valori, vengono impiegati quelli di default.


body{background : #ccc url(sfondo.gif);
}

h1{background : #999 url(logo.gif) center repeat-x;
}

background-attachment
Può avere i valori di scroll e fixed e quindi è un valore che stabilisce se l'immagine di sfondo scorre o meno insieme all'elemento che la ospita. In genere si applica al <body> ed ha 'scroll' come valore di default.


body{background-attachment : fixed;
}

background-color
Può avere i valori dei colori (in cifre e lettere o nominali) e quello di default è 'transparent'. Non è ereditabile e si applica a tutti gli elementi.
Questa proprietà determina il tipo di colore di fondo del contenitore che lo dichiara e questo colore si estende fino al margine esterno del bordo tanto che se questo è tratteggiato, il colore di fondo si dovrebbe vedere tra un trattino e l'altro.


h1{background-color : #cccccc;
}

background-image
Il valore si riferisce all'URL dell'immagine collocata sul server. Il suo valore di default è 'none', non è ereditabile e si applica atutti gli elementi.
Determina la comparsa di una immagine di fondo che compare sul fondo del contenitore che lo dichiara. Questa proprietà si lega molto a quella 'background-repeat' che determina la ripetizione o meno della stessa immagine.


body{background-image : url(sfondo.gif);
}

background-position
Il valore può essere espresso in percentuale (percentage) o in lunghezza (length), ma possono essere inseriti valori come 'top', 'center', 'bottom', 'left', 'center', 'right'. Il valore assegnato di default è di '0% 0%', non è ereditabile e si applica agli elementi blocco.
E' una proprietà che definisce la posizione di partenza di un immagine all'interno dell'elemento di blocco che la ospita e si può esprimere in percentuale o dichiarandola.


body{background-position: 50% 25%;
}
td .centro{background-position : center top;
}

background-repeat
E' una proprietà il cui valore può essere espresso con 'repeat', 'repeat-x', 'repeat-y' e 'no-repeat'. Il valore di default è 'repeat, non è ereditabile e si applica a tutti gli elementi.
Stabilisce se una immagine alloggiata dentro ad un elemento debba essere o non ripetuta e se la ripetizione debba avvenire sull'asse orizzonatale o verticale. Si associa alla proprietà 'background-position'.


body{background-repeat : no-repeat;
}
h1{background-repeat : repeat-x;
}

border
E' una proprietà che può esprimere il valore con :
  • border-width
  • border-style
  • color
il suo valore di default non è dichiarato e si può applicare a tutti gli elementi.
Definisce larghezza, stile e colore ai bordi di un elemento.


h1{border : 1px solid #000000;
}

border-bottom
E' una proprietà che può esprimere il valore con :
  • border-bottom-width
  • border-style
  • color
il valore di default non è dichiarato, non è ereditabile e si applica a tutti gli elementi.
Definisce la larghezza, lo stile e il colore del bordo inferiore dell'elemento che lo dichiara.


h1{border-bottom : 1px dotted #ff0000;
}

border-bottom-width
E' una proprietà che può avere i seguenti valori:
  • thin (sottile)
  • medium
  • thick (spesso)
e può esprimere il valore con :
- length (da dichiararsi con grandezze precise)
Il suo valore di default è 'medium', non è ereditabile e si applica a tutti gli elementi.
Definisce la larghezza del bordo inferiore dell'elemento che lo dichiara.


h1{border-bottom-width: thin;
}
td .centro{border-bottom-width: 2px;
}

border-color
E' una proprietà che possiede il valore 'color' espresso in codice alfa-numerico o tipico, non è ereditabile e si applica a tutti gli elementi.
Determina il colore del bordo dell'elemento che lo dichiara ed è possibile ottenere più colori con l'ordine alto-destra-basso-sinistra.


h1{border-color : red;
}
td .centro{border-color : #OOffff;
}

border-left
E' una proprietà che può esprimere il valore con :
  • border-left-width
  • border-style
  • color
ha un valore di default non dichiarato, non è ereditabile e si applica a tutti gli elementi.
Definisce larghezza, stile e colore del bordo sinistro dell'elemento che lo dichiara.


h1{border-left : 2px solid #f00;
}

border-left-width
E' una proprietà che può mostrare i seguenti valori :
  • thin
  • medium
  • thick
e può esprimere il valore con :
- lenght (da dichiararsi con grandezze precise)
ha un valore di default 'medium', non è ereditabile e si applica tutti gli elementi.
Determina la larghezza del bordo sinistro dell'elemento che lo dichiara.


h1{border-left-width : 2px; }

border-right
E' una proprietà che può esprimere il valore con :
  • border-right-width
  • border-style
  • color
ha un valore di default non dichiarato, non è ereditabile e si applica ad ogni elemento.
Definisce la larghezza, lo stile e il colore del bordo destro dell'elemento che lo dichiara.


h1{border-right : 2px solid #000000;
}

border-right-width
E' una proprietà che può avere i seguenti valori:
  • thin
  • medium
  • thick
e può esprimere il valore con :
- lenght (da dichiararsi con grandezze precise)
ha un valore di default 'medium', non è ereditabile e si applica a tutti gli elementi.
Definisce la larghezza del bordo destro dell'elemento che lo dichiara.


h1{border-right-width : 2px;
}

border-style
E' una proprietà che può presentare i seguenti valori:
  • none
  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
ha come valore di default 'none', non è ereditabile e si applica a tutti gli elementi.
Definisce l'aspetto del bordo dell'elemento che lo dichiara.


h1{border-style : dashed;
}

border-top
E' una proprietà che può esprimere il valore con :
  • border-top-width
  • border-style
  • color
ed il valore di default non è dichiarato, non è ereditabile e si applica a tutti gli elementi.
Definisce larghezza, stile e colore del bordo superiore dell'elemento che lo dichiara.


h1{border-top : 2px solid #000000;
}

border-top-width
E' una proprietà che può avere i seguenti valori:
  • thin
  • medium
  • thick
e può esprimere il valore con :
- lenght (da dichiararsi con grandezze precise)
ha un valore di default 'medium', non è ereditabile e si applica a tutti gli elementi.
Definisce la larghezza del bordo superiore dell'elemento che lo dichiara.


h1{border-top-width : 2px;
}

border-width
E' una proprietà che può avere i seguenti valori:
  • thin
  • medium
  • thick
e può esprimere il valore con :
- lenght (da dichiararsi con grandezze precise)
ha un valore di default 'medium', non è ereditabile e si applica a tutti gli elementi.
Definisce la larghezza del bordo dell'elemento che lo dichiara.


h1{border-width : 2px;
}

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto