Introduzione ai CSS
Invece di abusare dell' HTML per controllare la rappresentazione dei documenti, i webdesigner stanno "migrando" verso questa tecnologia sviluppata negli ultimi 6-7 anni.
I CSS hanno ottenuto, finalmente, sufficiente supporto dagli sviluppatori dei browser e hanno riscosso parere favorevole dagli addetti ai lavori a tal punto da cominciare a fare emergere il loro potenziale. Gli sviluppatori di browser come Microsoft e Netscape hanno rilasciato versioni di Internet Explorer e Navigator che supportano i CSS ad un livello che supera le versioni precedenti.
Cos'è un CSS
Il nucleo di un CSS è allo stesso tempo molto semplice e potente. Consente di associare regole stilistiche agli elementi del codice HTML come il tag <p> o <a>.
Queste regole definiscono l' aspetto rappresentativo degli elementi HTML a cui vengono applicati, come il colore o il carattere tipografico. Per rendere un' idea di cosa si sta parlando, si veda l' esempio seguendo questo link.
Esso presenta regole di formattazione incorporate nei tag XHTML. Visto come si presenta a video la pagina? Adesso diamo uno sguardo al codice ed alle regole di formattazione. Si vedranno i dettagli nelle lezioni seguenti; qualche parte di codice potrebbe sembrarvi priva di significato ma lo scopo del corso è quello di rendere agevole l' acquisizione dell'uso dei Fogli di Stile. La prima cosa da mettere in evidenza è l' elemento <style>.
........
</style>
Esso compare nel tag <head> di un documento;
il suo attributo type dichiara che il linguaggio di stile è CSS e che sovrascriverà il linguaggio di rappresentazione di default del browser. n effetti non esistono altri linguaggi di stile nei browser di oggi.
Nell' elemento <style> sono contenute le regole stilistiche che definiscono gli aspetti di rappresentazione della pagina. Ogni regola contiene due parti molto importanti:
un selettore seguito da una lista di dichiarazioni.
Il selettore definisce a quale(i) elemento(i) del documento si applica la regola e le dichiarazioni specificano l' aspetto rappresentativo (grafico) che sarà applicato a questo(i) elemento(i).
La prima regola della nostra pagina di esempio definisce il tag <body>:
font-family: Verdana, Arial, sans-serif;
}
Viene dichiarato che il testo contenuto in esso dovrà avere il carattere Verdana. Nel caso in cui questo font non fosse installato nel pc dell'utente, allora si dovrà usare l'Arial; se neanche questo carattere fosse disponibile, si dovrà usare il sans-serif (tradotto: senza grazie; vedere le parti finali del carattere Times per capire cosa sono le "grazie").
La regola successiva del foglio di stile dichiara che tutti i tag <a> devono essere visualizzati in rosso, senza sottolineatura, grassetto.
color: red;
text-decoration: none;
font-weight: bold;
}
Le ultime tre regole sono diverse dalle precedenti: ognuna di queste tre regole non si può applicare a tutti gli elementi di un certo tipo, come nel caso precedente, ma soltanto a quelli che hanno un attributo identificativo id specifico. Il simbolo # viene usato per indicare questo tipo di regola, seguito dal valore di id che si vuole attribuire ad essa.
position: absolute;
left: 25px;
top: 10px;
}
#MainText {
position: absolute;
left: 220px;
top: 100px;
margin-right: 20px;
}
#SiteNav {
position: absolute;
left: 25px;
top: 100px;
width: 170px;
height:400px;
border-right:1px solid #666;
}
La regola seguente:
position: absolute;
left: 25px;
top: 10px;
}
si applica al seguente elemento:
<h1>TITOLO PAGINA</h1>
</div>
dando indicazione al browser dove dovrà apparire l' elemento <div> a video.
La pagina di esempio è solo una parte infinitesimale di quello che si può ottenere con i CSS. Nel seguito del corso si dovrà come i Fogli di Stile offrono potenti strumenti di controllo tipografico, permettendo non solo di specificare il carattere, ma la dimensione, l' interlinea e altri aspetti del testo.
| < Prec. | Succ. > |
|---|
