Adottare i fogli di stile
Quali tipi di fogli di stile esistono?
In che modo posso collegare un foglio di stile ad una pagina?
Domande abbastanza comuni a chi si avvicina alle specifiche W3C ed ai CSS. Vediamo di chiarirle con precisione.
Esistono due tipi fondamentali di fogli di stile: interni ed esterni; ci si riferisce ai primi quando il codice del CSS è compreso in quello del documento, mentre si fa riferimento ai secondi quando il codice del CSS è ospitato da un file differente da quello del documento di riferimento.
Che si ricorra ai CSS interni o a quelli esterni, esistono comunque tre metodi per associare un foglio di stile ad un documento (X)HTML: collegarlo, incorporarlo o aggiungerlo in-line.
Collegarlo significa necessariamente usare un CSS esterno a cui fare riferimento nelle nostre pagine, esattamente tramite l’uso del tag <LINK> all’interno della sezione <HEAD> del documento (X)HTML.
Codice d’esempio:
<html>
<head>
<title>Titolo pagina</title>
<link rel=”stylesheet” type=”text/css” href=”main.css”>
</head>
<body>…
Dove rel identifica la relazione tra documento e file collegato e può assumere solo i due valori stylesheet o alternate stylesheet, type identifica il tipo di dati e consente, per i CSS, la sola scelta di text/css ed href indica l’URL assoluto o relativo, come nell’esempio, del foglio di stile.
Tutto gli attributi indicati si intendono obbligatori per l’associazione del CSS al documento. Se si sbaglia nella formattazione o nella definizione di uno di essi, il contenuto del CSS non sarà applicato alla pagina.
Un modo più semplice per raggiungere lo scopo appena espresso, cross-browser perfettamente retrocompatibile è rappresentato nel seguente codice:
<style>
@import url(stile.css);
</style>
La sintassi è da rispettare in tutto e per tutto, punto e virgola compreso alla fine del comando @import e l’elemento <STYLE> è da racchiudere nella sezione <HEAD> del documento (X)HTML.
E se, invece, non volessimo usare un file esterno ma avere tutto il codice nel file (X)HTML che pubblicheremo?
In tal caso possiamo incorporar le definizioni degli stili nel nostro documento, attraverso un codice del tutto simile al seguente:
<html>
<head>
<title>Titolo pagina</title>
<style type=”text/css”>
body {
background: #FFFFFF;
}
#footer {
width: 600px;
}
.header {
border: 1px #000000 solid;
}
</style>
</head>
<body>…
Per questo codice valgono le raccomandazioni fatte in precedenza.
Esiste anche un secondo metodo, l’ultimo che analizzeremo in questo blog, per inserire un CSS all’interno di un documento (X)HTML e consiste nel definire le regole CSS direttamente all’interno del tag. Tale metodo, detto in-line, può essere esemplificato tramite il seguente codice:
<h1 style=”color: red; background: black;”>…</h1>
Come si può notare, in questo caso sparisce del tutto l’adozione di parentesi graffe e la definizione di stile viene implementata attraverso una lista di voci divise da punti e virgola, all’interno dell’attributo style.
Tags: CSS
