Nel corso di questa serie, è stato già più volte sottolineato lo stile. Questi fogli di stile consentono una rigorosa separazione tra layout e design. Gli elementi HTML sono responsabili esclusivamente della descrizione logica o semantica del documento Web grazie al CSS.
Di solito è utile sapere come appare un foglio di stile all'inizio. Guardate un primo esempio a tal proposito.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
p {
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#0066FF;
}
</style>
</head>
<body>
<h1>PSD-Tutorials.de</h1>
<p>dein Grafik-, Web- & Fotoportal</p>
</body>
</html>Nel browser il documento appare così:
Nell'area body del file HTML sono state definite due elementi:
• un'intestazione
• un paragrafo
Attraverso il CSS, questi due elementi vengono formattati. A tal scopo, nell'area head viene definita un'area foglio di stile mediante style. All'interno di quest'area avviene la formattazione degli elementi.
Ecco nuovamente la definizione per l'intestazione h1:
h1 {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
Attraverso la sintassi mostrata vengono stabilite due cose:
• Viene determinata la famiglia di font.
• Viene definita la dimensione del font.
In questo punto si vuole trattare inizialmente in modo molto generale la sintassi utilizzata. Ogni istruzione CSS è composta fondamentalmente da due parti - un selettore e la dichiarazione CSS. Attraverso il selettore si specifica l'elemento da formattare. Come questa formattazione sarà alla fine, la determina la dichiarazione CSS. Il selettore è sempre a sinistra, la dichiarazione CSS a destra tra parentesi graffe.
La vera dichiarazione CSS a sua volta è composta da due elementi, cioè la proprietà e il valore. Proprietà e valore sono separati da due punti. Dopo il valore segue un punto e virgola.
Selektor {
Eigenschaft: Wert;
}Includere fogli di stile
Esistono varie possibilità per includere fogli di stile nelle pagine web. Innanzitutto, è possibile assegnare istruzioni di stile direttamente a un tag HTML. Un esempio:
<h1 style="color: #0033CC;">PSD-Tutorials.de</h1>
In questo esempio, l'intestazione viene visualizzata in colore blu.
È anche possibile aggiungere più istruzioni di stile a un tag HTML stesso.
<h1 style="color: #0033CC; background-color: #99FF66">PSD-Tutorials.de</h1>
È sufficiente elencarle una di seguito all'altra, separate da un punto e virgola.
In generale, queste cosiddette stili inline sono utili solo se singole parti all'interno di una pagina devono essere formattate individualmente. Di norma, dovresti evitare questo tipo di formattazione diretta in quanto rende il codice HTML poco chiaro.
Definizione centrale nell'area head
È possibile definire un foglio di stile centrale all'interno dell'area della testata del file HTML. Vengono definite lì tutte le stili che devono essere valide per quel file.
<head>
<style type="text/css">
.text {
font-family: "Courier New", Courier, monospace;
font-size: 200%;
}
</style>
</head>
Vantaggio di questa variante: a differenza dell'opzione inline, i formati definiti possono essere utilizzati più volte nel documento. Nell'esempio precedente è stata definita la classe CSS text. (Informazioni dettagliate sui selettori come la classe usata qui verranno fornite nel prossimo tutorial). Questa classe può essere utilizzata arbitrariamente nel documento.
<h1 class="text">PSD-Tutorials.de</h1> <p class="text">dein Grafik-, Web- & Fotoportal</p>
Questa definizione ha naturalmente il vantaggio rispetto all'opzione inline che le modifiche possono essere apportate molto rapidamente.
Esternalizzare istruzioni CSS
La variante più praticabile per definire CSS è esternalizzare gli stili in un file esterno. In questo modo qualsiasi numero di file HTML può accedere allo stesso file CSS. Pertanto, è facilmente possibile applicare una formattazione uniforme a tutti i file appartenenti al progetto Web. Ciò consente di realizzare facilmente modifiche future che dovranno avere impatto su tutte le pagine.
<link rel="stylesheet" type="text/css" href="css/styles.css">
Nell'intestazione del file HTML viene definito l'elemento link. In link si specifica prima la combinazione attributo-valore rel="stylesheet". Successivamente si aggiunge type="text/css". All'attributo href viene assegnato il file CSS relativo. Fate attenzione – simile a quanto accade con le immagini – alla corretta specifica del percorso. Nell'esempio attuale si presume che il file CSS styles.css si trovi nella directory css, che a sua volta è sullo stesso livello del file HTML effettivo.
Il file CSS referenziato è un normale file di testo con estensione css. In questo file CSS esterno vengono definite le relative istruzioni CSS.
h1 {
font-family:"Courier New", Courier, monospace;
font-size: 200%;
}
In alternativa alla variante link mostrata, è possibile importare anche fogli di stile. Anche in questo caso, le istruzioni CSS si trovano in un file esterno. Per fare ciò, viene utilizzata la seguente sintassi:
<style type="text/css>
@import url("css/styles.css");
</style>
All'interno delle parentesi si specifica il percorso del file CSS da importare. Per inciso, @import è una sintassi CSS. Quindi, è possibile utilizzare l'istruzione @import anche all'interno dei file CSS. Ciò consente di richiamare fogli di stile da un foglio di stile, il che permette un migliore ordine dei fogli di stile.
Ovviamente sorge la domanda se si debba utilizzare link o @import. In generale, preferisco link, poiché questa variante è semplicemente più veloce, quindi migliora le prestazioni della pagina.
Stili specifici per i media
È possibile definire fogli di stile per media molto diversi come ad esempio stampanti o schermi. Per questo si utilizza l'attributo media. È possibile assegnare un foglio di stile a più media separati da virgola.
<link rel="stylesheet" media="screen" href="css/styles.css"> <link rel="stylesheet" media="print" href="css/druck.css"></pre>
In questo caso sono stati chiamati due fogli di stile, uno per lo schermo e un altro nel caso in cui la pagina venga stampata. Quindi il file CSS druck.css verrà caricato quando viene chiamata la funzione di stampa del browser. Nel complesso, i seguenti valori dimediasono disponibili:
•all– Valido per tutti i media di output.
•aural– Il file CSS è utilizzato per i sistemi di output vocale.
•braille– Il file CSS è destinato alle stampanti Braille con feedback tattile che possono generare il cosiddetto "Braille".
•embossed– Indirizza le stampanti Braille.
•handheld– Destinato ai dispositivi portatili.
•
•projection– Questa variante è destinata a presentazioni proiettate.
•screen– Destinato alla visualizzazione a schermo.
•tty– Il file CSS è valido per i media che utilizzano una griglia di caratteri fissa. Questi possono essere, ad esempio, telescriventi e terminali.
•tv– Indirizza dispositivi simili alla TV. Si presume che i dispositivi abbiano una bassa risoluzione e siano solo limitatamente scorrevoli.
Oltre alla sintassi HTML mostrata tramite l'elemento link, ci sono anche varianti CSS speciali. Vengono utilizzati@importo@media.<style type="text/css> @media screen, projection { /* Formati per lo schermo */ } @media print { /* Formati per la stampa */ } </style>
All'interno dell'elementostylesi definisce tramite@mediaun'area per le definizioni di formato destinate a un particolare media di output. Dopo@media, deve essere specificato uno dei tipi di media precedentemente descritti, separati da spazi. Più tipi di media devono essere separati da virgole.
