HTML and CSS Reference
In-Depth Information
@media screen { body { font-size: 12px } }
@media print { body { font-size: 10px } }
</style>
</head>
<body>
...
</body>
</html>
La direttiva
media
accetta come parametro il tipo di device da utilizzare seguito dalla di-
chiarazione di un CSS all'interno del quale definiamo i nostri stili. Esistono diversi tipi di
device, ma quelli usati nella stragrande maggioranza dei casi sono
screen
e
print
che
non necessitano di spiegazioni. Se vogliamo specificare che un CSS vale per tutti i device,
possiamo utilizzare la parola chiave
all
. Ora che siamo in possesso delle basi, vediamo
come ottimizzare il processo attraverso l'uso dei file CSS.
Definire l'intero foglio di stile all'interno della pagina non è una cosa ottimale per il riuti-
lizzo del codice. Per creare dei fogli di stile in un file esterno e registrarli all'interno della
pagina in base al device, possiamo utilizzare la direttiva
import
o il tag HTML
link
.
Un esempio di queste tecniche è mostrato nel codice che segue.
Esempio 5.10
<!—- registrazione con direttiva import -->
<style type="text/css">
@import url(stylesheetscreen.css) screen;
@import url(stylesheetprint.css) print;
</style>
<!—- registrazione con tag link -->
<link rel="stylesheet" media="screen" hre-
f="stylesheetscreen.css" />
<link rel="stylesheet" media="print" hre-
f="stylesheetprint.css" />
