Le forme piu libere infatti creano effetti visivi gradevoli e decisamente piu “soft” rappresentando una soluzione semplice ma davvero efficace per mettere in risalto determinate aree della nostra pagina web.

Per prima cosa ci serve un box da tagliare. Per crearlo userò Photoshop ma va bene qualsiasi programma di grafica.

Il box creato con il programma di grafica

Vediamo dunque come utilizzare i CSS per un box con angoli arrotondati.

Come si può ben vedere niente di trascendentale. E’ un semplice box azzurro con il bordo di un colore piu scuro. Fatto questo ci basterà con delle sezioni utente di Adobe Photoshop creare tre immagini che raffigurino il lato superiore, inferiore e mediano. Vediamo come:

alto.gif

medio.gif

basso.gif

I file sopra li chiamaremo alto.gif, medio.gif e basso.gif.
Vediamo ora il codice CSS per creare il nostro box ad effetto:

div.box-alto
{
  width: 

300px;
  background-image: url('alto.gif');
  background-repeat: no-repeat;
  background-position: left top;
  padding-top: 20px;
}
div.box-medio
{
  width: 300px;
  background-image: url

('medio.gif');
  background-repeat: repeat-y;
}
div.box-basso
{
  width: 300px;
  background-image: url('basso.gif');
  background-repeat: no-repeat;
  background-position: left bottom;
  padding-

bottom: 20px;
}
div.box-testo
{
  margin: 0px 10px 0px 10px;
}

Mentre nel codice della nostra pagina HTML scriveremo:

<div class="box-alto">
  <div class="box-basso">

<div class="box-medio">
      <div class="box-testo">
      Scrivi qui il tuo testo...
      </div>
    </div>
  </div>
</div>

Facile Vero? Abbiamo detto all’HTML di utilizzare quelle immegini per visualizzare il suo DIV con gli angoli arrotondati. Tutto questo in attesa dei CSS 3 e del finale adeguamento dei browser microsoft alle specifiche CSS.

Indipendentemente dalla specificità del selettore, singole dichiarazioni possono assumere la massima priorità se seguite da ” !important ” (senza virgolette). Vediamo uno stralcio di codice:

p {
background: #f1f1f1  !important;
color: #000000;
}
p#selettore {
background: #EEE;
color: #000;
}

La dichiarazione riguardante la proprietà background della prima regola sovrascrive in ogni caso quella della seconda regola ( indipendentemente dal peso del selettore e/o dall’ordine di comparsa delle due regole), poichè la dichiarazione della prima regola contiene appunto la direttiva !

important. Si noti che la direttiva !important deve trovarsi sempre dopo il valore associato e quindi prima del punto e virgola ; che separa le varie dichiarazioni. Quando due o più dichiarazioni con direttiva !important entrano in conflitto, il browser solitamente tiene conto anche della specificità del selettore dando ” causa vinta ” al selettore che ritiene innocente .

Tenete sempre presente che ogni browser per quanto simile agli altri assume sempre un comportamento leggermente diverso e decisamente caratteristico del browser stesso.

Grazie a questi principi dei CSS potremo creare i nostri layout di pagina staccandoci definitivamente da quelle che sono le limitazioni che una tabella può dare.

Ho intenzione di affrontare la questione in due lezioni. Nella prima esamineremo la proprietà position e le diverse modalità di posizionamento. Nella seconda vedremo con quali proprietà è possibile posizionare con precisione gli elementi e gestirne alcuni decisivi aspetti visuali.

La proprietà position

position è la proprietà fondamentale per la gestione della posizione degli elementi, di cui determina la modalità di presentazione sulla pagina. Si applica a tutti gli elementi e non è ereditata. Sintassi:

<selettore> {position: <valore>;}

i valori che questo parametro può assumere sono 4: fixed, absolute, static, relative. Gli unici due al momento supportati dai vari browser sono solo due: absolute e relative. Parlerò, infatti, solo du questi due parametri.

• absolute – L’elemento, o meglio, il box dell’elemento viene rimosso dal flusso del documento ed è posizionato in base alle coordinate fornite con le proprietà top, left, right o bottom. Il posizionamento avviene sempre rispetto al box contenitore dell’elemento. Un elemento posizionato in modo assoluto scrorre insieme al resto del documento.
• relative - L’elemento viene posizionato relativamente al suo box contenitore. In questo caso il box contenitore è il posto che l’elemento avrebbe occupato nel normale flusso del documento. La posizione viene anche qui impostata con le proprietà top, left, bottom, right. Ma qui esse non indicano un punto preciso, ma l’ammontare dello spostamento in senso orizzontale e verticale rispetto al box contenitore.

La creazione di un livello tipo potrebbe essere questa:

#immagine{ position:absolute;
           top:50px; left:20px; z-index:1; }

In questo esempio, scopriamo una nuova proprietà: z-index. La proprietà z-index indica al browser la posizione sul piano azimutale, rispetto al resto della pagina. Cosa vuol dire: prendiamo due fogli di carta, su uno gli scriviamo testo, sull’altro immagine. Mettiamoli uno sull’altro: abbiamo definito lo z-index ovvero il “livello” superiore o inferiore dell’immagine rispetto al testo. L’unico valore permesso per questa proprietà è un valore numerico piu alto sarà il valore piu sara in rilievo rispetto al resto della pagina. Se mettiamo un valore negativo per esempio -1 il box contenitore andrà a finie sotto lo sfondo! Difficilmente visibile!

E a proposito di visibilità ci sarebbe anche un’altra proprietà, appunto visibility. Dal nome stesso si capisce a cosa può servire, ovvero a rendere visibile o meno un oggetto( testo, immagini o altro) fino a che non si verifichi una determinata condizione. I valori possibili per quest’ultima proprietà sono due: hidden (nascosto) e visible (visibile).

Una pseudo-classe non definisce infatti un elemento ma uno stato di quest’ultimo.

In buona sostanza imposta uno stile per un elemento al verificarsi di certo stato.
Cosa significa: non definisce infatti unelemento ma uno stato di quest’ultimo?

Quando crei un link involontariamente hai dato al browser 4 principali direttive o stati da interpretare, che sono: link non visitato, visitato, passaggio del mouse sul link,e click.
Questi 4 stati del link possono essere definiti singolarmente andando a creare un bell’effetto nelle nostre pagine.

A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. ma vediamo un esempio semplice:

a:link {color: #ff0000;}

La regola vuol dire: i collegamenti ipertestuali (<A>) non visitati (:link) avranno il colore rosso. Da qui risulta più chiaro il concetto espresso all’inizio: la pseudo-classe :link definisce uno stato di un link (colore quando non è stato visitato). Appena ciò dovesse avvenire, il testo non sarà più rossoe, perchè la condizione originaria è venuta meno e assumerà il colore di predefinito dal browser, questo se non abbiamo definito lo stato di VISITED cioè link visitato.

Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l’elemento.

Subito dopo si crea nel modo consueto il blocco delle dichiarazioni.
Una pseudo-classe può anche essere associata a selettori di tipo classe. I costrutti possibili sono due. Il primo è quello sancito nella specifica CSS1. La pseudo-classe doveva seguire la dichiarazione della classe:

a.collegamento:link {color: green;}

Come va letta questa regola? Avranno il testo verde (green) solo i link non visitati che abbiano come attributo class=”collegamento”. Sarà verde questo collegamento:

<a href=”pagina.htm” class=”collegamento”> LINK </a>

A partire dalla specifica CSS2 è consentita anche questa sintassi:

a:link.collegamento

in cui la classe segue la pseudo-classe. Significato e risultati sono comunque identici al primo esempio. Il primo tipo di sintassi garantisce una maggiore compatibilità con i browser più datati. Gli esempi e la sintassi presentati valgono per tutte le pseudo-classi.

Detto questo passiamo ora capire quali sono gli stati che un link può assumere e come definire i parametri per ciascuno di essi. Gli stati che un link può assumere abbiamo detto sono 4: link non visitato, visitato, passaggio del mouse sul link e click. Nel linguaggio CSS si traducono in :LINK, :HOVER, :VISITED e :ACTIVE.

Prendiamo come esempio lo stile utilizzato dal nostro sito per i link nel menu quindi colore sempre nero e semplice sottolineatura al passaggio del mouse:

<style type=”text/css”>
<!–
A:LINK 

{text-decoration : none; Color : #000000}
A:VISITED {text-decoration : none; Color : #000000}
A:HOVER {Color : #000000; text-decoration : underline;}
–> </style>

Per questo esempio abbiamo utilizzato un blocco di codice incorporato alla pagina e lo riconosciamo subito dalla presenza del tag <style> e relativa chiusura </style>. Ricordiamo inoltre, che per utilizzare gli stili incorporati alla pagina di deve scrivere il codice fra <head> e </head>.

Le pseudoclassi dinamiche: :hover, :focus, :active.

Le pseudoclassi dinamiche rispondono come per javascript ad azioni o eventi compiuti esclusivamente dall’utente, come il posizionamento del puntatore del mouse su un determinato oggetto, la selezione di un elemento o l’attivazione di un oggetto.

Ecco un piccolo trucco.

Anche se queste ultime pseudoclassi possano essere associate agli elementi piu disparati come paragrafi, campi di un form, bottoni ecc Internet Explorer 6, sempre lui…, e precedenti versioni per Windows le supporta solo quando vengono applicate ai collegamenti, mentre IE 7 suppora la pseudoclasse :hover su tutto. Essendo un linguaggio a CASCATA il css è importante scrivere bene il codice onde evitare inutili conflitti di “stato” per i vari link. Facciamo subito un esempio:

a:link{ .. }
a:visited:{  .. }
a:hover{ ... }
a:focus{ ... }
a:active{ ... }

In questo modo non ci saranno conflitti di stato di un collegamento poiche tutte le pseudoclassi hanno la medesima importanza, se per esempio, la regola associata a :visited fosse scritta dopo la regola:hover allora per tutti i collegamenti gia visitati la regola hover non avrebbe piueffetto poiche verrà sovrascritta dalla regola associata a :visited.

Spero vi sia utile questo articolo. Adesso avete le conoscenze necessarie per utilizzare i CSS per la gestione dei vostri link, cosa bisogna fare: provare provare e….vediamo un po provare si si provare! L’unico modo per rendersi conto di cosa si stia facendo. La semplice lettura non basta! Alla prossima lezione!

Le proprietà che definiscono il modo in cui il testo appare sullo schermo sono tante e abbiamo deciso di descriverne solo le piu diffuse. Sono quelle che definiscono i seguenti aspetti:

• font-family - Il carattere da utilizzare
• font-size – Dimensione del carattere
• font-weight – Spessore o consistenza del carattere
• font-style – Stile del carattere
• line-height – Altezza di riga
• text-decoration – Decorazione del testo Andiamo adesso ad esaminarli uno per uno.

font-family

Questo parametro viene utilizzato per determinare il tipo di font, ovvero il carattere del testo, da utilizzare all’intenro della nostra pagina o di uno specifico tag html.

Vediamo la sintassi:

p {font-family: Arial, Verdana, “Times New Roman”;}

Gli uomini del W3C hanno creato un meccanismo che consente all’autore di impostare nei CSS non un font singolo e unico, ma un elenco di caratteri alternativ nel caso in cui il primo non ci fosse.

Nel nostro esempio il browser interpreta questa riga di css cosi: utilizza il carattere Arial, se non c’è utilizza Verdana, se non c’è utilizza Times new roman se non c’è utilizza quello predefinito dal browser.

I nomi dei font della lista vanno separati dalla virgola. I caratteri con nomi composti da più parole vanno inseriti tra virgolette. Se usate famiglie strane e poco comuni come fantasy o cursive usate più di una famiglia generica. Questa andrebbe sempre messa alla fine, altrimenti risulta praticamente inutile la definizione di font specifici.

font-size

Insieme a font-family è la proprietà considerata essenziale nella definizione dell’aspetto del testo, di cui definisce le dimensioni.

Sintassi:

selettore { font-size: <valore>; }

I valori delle dimensioni del testo possono essere espressi in vari modi:

• espressi in unità di misura – per esempio 10px, 10pt, 10cm, 10mm, 10pc, 10in;
• percentuale – per esempio 10%;
• espressi in em (em-height) – per esempio 1.2em (decisamente poco utilizzati);

font-weight

Serve a definire la consistenza o “peso” visivo del testo. Sintassi:

selettore {font-weight: <valore>;}

i valori applicabili per questo parametro sono:

• bold – Il classico grassetto ottenibile con <strong></strong> o <b></b> in html ;
• bolder – Serve a specificare che una determinata porzione di testo dovrà apparire più pesante rispetto al testo dell’elemento;
• lighter – Misura relativa. Il testo sarà più leggero di quello dell’elemento parente;
• normal – E’ l’aspetto normale del font ed equivale al valore 400;
• valori numerici 100 – 200 – 300 – 400 – 500 – 600 – 700 – 800 – 900 ordinati in senso crescente (dal più leggero al più pesante);

Vediamo un esempio:

p {font-weight: 900;}

font-style

Imposta le caratteristiche del testo in base ad uno di questi tre valori:

• normal: il testo mantiene il suo aspetto normale
• italic: formatta il testo in corsivo
• oblique: praticamente simile a italic

Vediamo subito sintassi ed esempio:

p {font-style: italic;}

line-height

Grazie a line-height è possibile finalmente usare nelle nostre pagine un sistema di interlinea degno di questo nome. La proprietà, in realtà, serve a definire l’altezza di una riga di testo all’interno di un elemento blocco. Ma l’effetto ottenuto è appunto quello tanto ambito da tutti i web designer: un modo per impostare uno spazio tra le righe. La proprietà si applica a tutti gli elementi. Sintassi:

selettore {line-height: <valore>;}

i valori possibili per questo parametro sono diversi, vediamoli un po:

• normal. Il browser separerà le righe con uno spazio ritenuto “ragionevole”. Dovrebbe corrispondere a un valore numerico compreso tra 1 e 1.2
• valore numerico. Usando valori numerici tipo 1.2, 1.3, 1.5 si ottiene questo risultato: l’altezza della riga sarà uguale alla dimensione del font moltiplicata per questo valore.
• un valore numerico con unità di misura. L’altezza della riga sarà uguale alla dimensione
  specificata.
• percentuale. L’altezza della riga viene calcolata come una percentuale della dimensione del font.

Personalmente utilizzo solo il valore numerico senza definire in pixel o in cm l’altezza della riga. In queste pagine viene utilizzato 1.600 come valore numerico definito per l’altezza della riga, e secondo me, ma questo è soggettivo, è un giusto equilibrio che permette al visitatore di leggere senza difficoltà le guide, poichè tra un rigo e l’altro non si viene a creare quell’ammasso di grigio che infastidisce gli occhi davanti al monitor.

text-decoration

Questo parametro molto usato con le pseudo classi, che tratteremo piu avanti, per eliminare l’effetto sottolineatura di default dai link. Permette infatti di definire se una determinata porzione di testo debba avere appunto delle decorazioni. Sintassi:

selettore {text-decoration: <valore> o <valori>;}

i valori che definibili in text-decoration sono diversi:

• none - Il testo non avrà alcuna decorazione;
• underline – Il testo sarà sottolineato;
• overline – Il testo avrà una linea superiore;
• line-through – Il testo sarà attraversato da una linea orizzontale al centro;
• blink – testo lampeggiante;

vediamo alcuni esempi di utilizzo.

p {text-decoration: blink;}
 a {text-decoration: none;}