*Linux Guide

Web Design - CSS Parte 7

Parliamo quindi di come ottenere semplici effetti rollover con l'uso dei soli CSS.
La struttura di un link è la seguente :


<a href="http://www.paginataldeitali.it" title="Vai alla pagina">Pagina</a>

Per poter ravvivare un links dandogli degli effetti di interattività basta veramente poco. Ecco il codice da inserire nel CSS e valido per ogni link della pagina, provvisto di commenti.


a{font-family : verdana,arial,sans-serif;
font-weight : normal;
color : #00c;
text-decoration : underline; /*Tutti i links appariranno sottolineati*/
}
/*Con queste indicazioni, gli attributi e i relativi valori si applicano a tutti i links e questo è l'elemento progenitore*/

a:link{font-weight : normal;
color : #00c;
text-decoration : underline;
}

a:visited{font-weight : normal;
color : #036; /*Il colore è diverso da quello impostato dal progenitore*/
text-decoration : underline;
}
/*Con queste indicazioni si trattano tutti i links che sono già stati visitati e le caratteristiche cromatiche sono diverse da quelle adottate per links ancora da visitare*/

a:hover{font-weight : normal;
text-decoration : none; /*Il link perderà la sua sottolineatura*/
background : #009; /*Il colore di fondo del links diverrà blu ...*/
color : #fff; /*... mentre il colore del testo diverrà bianco*/
}
/*Con queste indicazioni l'aspetto dei links cambierà non appena il puntatore del mouse si porta sopra di essi*/

a:active{font-weight : normal;
text-decoration : none; /*Il link perderà la sua sottolineatura*/
background : #f00; /*Il colore di fondo del links diverrà rosso ...*/
color : #fff; /*... mentre il colore del testo rimarrà bianco*/
}
/*Con queste indicazioni l'aspetto dei links cambierà non appena si cliccherà per raggiungere la destinazione*/

Stabilito quindi il comportamento dei links, andiamo a vedere come creare un CSS adatto a quel menù fatto con le liste visto alla pagina precedente.
Come detto la struttura XHTML della lista era la seguente.


<ul>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
<li><a href="#" title="Collegamento a">Link</a></li>
</ul>

quindi una struttura molto semplice e realizzabile in serie. Il CSS adatto a far si che i vari links abbiano un bell'aspetto è quello sotto riportato.


ul{list-style: none; /*Rimuove la sferetta che compare di default*/
font-size : 92%;
margin:0;
padding:0;
border : 1px solid #336;
text-align : left;
}
ul li{margin:0; /*Fa in modo che le liste stiano adese ai bordi del contenitore*/
padding:1px; /*Fa in modo che i contenuti delle liste non stiano a ridosso dei bordi delle stesse*/
height : 20px;
background: #ccc;
display : block; /*Fa in modo che la lista si comporti come un blocco e che si adegui al contenitore nel quale è collocata*/
}
/*Il codice sottostante è uguale a quello che gestisce tutti i links e si adatta alle esigenze della lista*/
ul li a{display: block;
background : #fff url(sfondo.gif);
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:link{background : #fff url(sfondo.gif);
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:visited{
background : url(sfondo.gif);
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:hover, ul li a:active{
background: #009;
color: #fff;
border : 1px solid #336;
}

Possiamo ora vedere come è possibile realizzare un piè di pagina in modo molto semplice e incluso nella colonna dei contenuti impiegando l'elemento <span>, elemento che si presta a moltissimi usi.
Il codice XHTML adeguato per un più di pagina è il seguente.


<div id="colonna-sx">
<div class="box">
<div class="box2">
. . : : Contenuto della pagina : : . .
</div>
<span class="fondopagina">. . : : Contenuti del piè di pagina : : . .</span>
</div>
</div>

Si nota come il 'box2' (evidenziato in grassetto) faccia da contenitore ai contenuti della pagina, mentre il 'box' (evidenziato in verde) oltre a contenere 'box2' contenga anche il 'fondopagina' che è poi il piè di pagina di cui stiamo trattando. Nell'aspetto estetico della pagina, i contenuti si troveranno contornati da una sottile cornice, mentre il piè di pagina si collochera tra questa e la cornice del blocco più esterno conferendo un aspetto elegante e definito.
L'elemento <span> è un elemento detto "inline", cioè il suo inserimento nell'ambito della pagina, non determina la produzione di una nuova riga come avviene invece per gli elementi <p>, <div> <ul>, ecc. Tuttavia usando i CSS <span> può assumere l'aspetto di un blocco, impostando le sue dimensioni e il comportamento come si vede dal codice per il CSS sotto riportato e relativo al piè di pagina in argomento


.fondopagina{display : block; /*Con questa proprietà lo span si trasforma in un blocco*/
background : #999;
padding : 2px;
font : 70% Arial, Verdana, San-serif;
color : #006;
border : 1px solid #336;
text-align : center;
margin-top : 5px; /*Con questa proprietà, il pie di pagina si allontana dal 'box2'*/
}

Passiamo, infine, all'esperimento diretto.
Lanciate Bluefish e con un semplice copia/incolla inserite il seguente codice.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it">
<head>
<title>base</title>
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" href="linuxguide.css" type="text/css" title="Il foglio di stile di Linux Guide" />
</head>
<body>
<h1><a href="index.htm" title="collegamento alla Home"><img class="logo" src="Newbar3.png" width="80" height="50" border="0" alt="Il logo di B3 - A Big Box of Links" /></a> <a name="alto"></a><strong> Linux Guide</strong></h1>
<h2><strong>Menù : </strong>Chi siamo | Pensieri | Utilità | Links | Contattaci | Segnala un sito | Aiuto! | Bugs<br />
Informazione | Informatica | Il WWWeb | WebMasters</h2>
<h3>Home >></h3>
<div id="colonna-sx">
<div class="box">
<div class="box2">
<h4>Argomenti</h4>
<p class="sottotitolo">Sottotitolo</p>
<br />
<br />
<a href="#">Link di prova</a> <br />
<br />
<div class="box3">Contenuti di rilievo</div>
<br />
<br />
<br />
</div>
<span class="fondopagina">Linux Guide è un prodotto di borgio3 a cui spettano tutti i diritti.<br />
Copyleft © 2012-2013<br />
Per Informazioni contattare Giorgio Beltrammi</span><br />
<span class="tornasu"><a href="#alto" title="Torna in alto">Torna su</a></span></div>
</div>
<div id="principale">
<div class="box">
<div class="box2">
<ul>
<li><a href="#" title="Collegamento a">Link</a>
<li><a href="#" title="Collegamento a">Link</a>
<li><a href="#" title="Collegamento a">Link</a>
</ul>
</div>
<br />
</div>
</div>
</body>
</html>

Salvate con un nome fittizio tipo "prova.html".
Ora in CSSEd incollate questo CSS.


body { margin:0;
padding : 0;
background : #ccc;
font : 90% verdana,arial,sans-serif;
color : #333;
}
h1{padding : 10px;
margin : 0;
background : #666;
font : 200% verdana,arial,sans-serif;
font-weight : bold;
color : #ccc;
text-align : left;
border : 1px solid #009;
}
h2{padding : 3px;
margin : 0;
text-align : center;
background : #fc0;
font : 90% Verdana,Arial,Sans-serif;
border : 2px solid #00f;
}
h3{background : #ccc;
text-align : center;
padding : 2px;
font : 80% Verdana, Arial, Sans-serif;
font-weight : bold;
color : #333;
margin : 0;
border : 1px solid #000;
}
#colonna-sx {float:left;
background : #fff;
width: 80%;
text-align : center;
}
#colonna-sx .box{background : #fff;
margin-left : 5px;
margin-right : 5px;
border : 1px solid #000;
padding : 5px;
font : 90% verdana,arial,sans-serif;
text-align : center;
color : #000;
}
#colonna-sx .box .box2{background : #fff;
text-align : left;
padding : 5px;
font:100% verdana,Arial,sans-serif;
color : #000;
border : 1px solid #009;
}
#principale{float: left;
width: 20%;
}
#principale .box{background : #fff;
padding: 5px;
font : 95% verdana,Arial,sans-serif;
color : #009;
}
#principale .box .box2{font : 95% verdana,Arial,sans-serif;
text-align : left;
background : #fff;
color : #000;
margin-top : 5px;
border :2px solid #333;
padding: 2px;
width : 95%;
}
a{font-family : verdana,arial,sans-serif;
font-weight : normal;
color : #00c;
text-decoration : underline;
}
a:link{font-weight : normal;
color : #00c;
text-decoration : underline;
}
a:visited{font-weight : normal;
color : #036;
text-decoration : underline;
}
a:hover{font-weight : normal;
text-decoration : none;
background : #009;
color : #fff;
}
a:active{font-weight : normal;
text-decoration : none;
background : #f00;
color : #fff;
}
ul{list-style: none;
font-size : 92%;
margin:0;
padding:0;
border : 1px solid #336;
text-align : left;
}
ul li{margin:0;
padding:1px;
height : 20px;
background: #ccc;
display : block;
}
ul li a{display: block;
background : #fff;
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:link{background : #fff;
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:visited{
background : #fff;
padding : 1px;
color: #336;
border : 1px solid #336;
}
ul li a:hover, ul li a:active{
background: #009;
color: #fff;
border : 1px solid #336;
}

Salvate nella stessa cartella con nome "linuxguide.css" altrimenti non vedrete il risultato.
Lanciate il browser e aprite la pagina "prova.html". Se tutto è andato bene dovreste vedere una pagina come questa.
Potrete modificare il codice CSS a vostro piacimento per variare i colori e vedere se avete capito come si utilizzano i CSS, quale sia la loro sintassi e la loro potenza. Per l'uso dei colori "WebSafe", cioè adatti alla visualizzazione sul Web, è consigliabile impiegare il codice alfanumerico e la tabella dei colori di aiuto è questa.
L'importante è avere capito che ogni pagina che deve ricollegarsi ad un preciso foglio di stile, possegga il collegamento ad esso con la seguente sintassi:


<link rel="stylesheet" href="fogliodistile.css" media="screen" type="text/css" title="il foglio di stile />

<< Precedente | Indice | Successiva >>

Linux Guide | Torna in alto