I CSS (fogli di stile a cascata) offrono un notevole controllo sulla modalità di visualizzazione dei contenuti delle pagine Web sullo schermo. Questo controllo si estende anche ad altri supporti, ad esempio quando viene stampata la pagina Web.
Ti starai chiedendo perché vorresti aggiungere un funzione di stampa alla tua pagina web; dopotutto, molte persone già sanno o possono facilmente capire come stampare una pagina web usando i menu del proprio browser.
Ma ci sono situazioni in cui l'aggiunta di un pulsante di stampa o collegamento su una pagina non solo renderà il processo più semplice per i tuoi utenti quando dovranno stampare una pagina ma, forse ancora più importante, ti dà un maggiore controllo su come appariranno quelle stampe carta.
Ecco come aggiungere pulsanti di stampa o collegamenti di stampa sulle tue pagine e come definire quali parti del contenuto della tua pagina verranno stampate e quali no.
Aggiunta di un pulsante Stampa
È possibile aggiungere facilmente un pulsante di stampa alla pagina Web aggiungendo il seguente codice al documento HTML in cui si desidera visualizzare il pulsante:
onclick = "window.print (); return false;" />
Il pulsante verrà etichettato come stampa questa pagina quando appare sulla pagina web. Puoi personalizzare questo testo come preferisci modificando il testo tra le virgolette seguenti
valore =nel codice sopra.
Si noti che esiste un singolo spazio bianco che precede il testo e lo segue; ciò migliora l'aspetto del pulsante inserendo dello spazio tra le estremità del testo e i bordi del pulsante visualizzato.
Aggiunta di un collegamento di stampa
È ancora più semplice aggiungere un semplice link di stampa alla tua pagina web. Basta inserire il seguente codice nel documento HTML in cui si desidera visualizzare il collegamento:
Stampa
Puoi personalizzare il testo del link cambiando "stampa" come preferisci.
Rendere stampabili sezioni specifiche
È possibile impostare la possibilità per gli utenti di stampare parti specifiche della pagina Web utilizzando un pulsante o un collegamento di stampa. Puoi farlo aggiungendo a print.css file sul tuo sito, chiamandolo nella testa del tuo documento HTML e quindi definendo quelle sezioni che vuoi rendere facilmente stampabili definendo una classe.
Innanzitutto, aggiungi il seguente codice alla sezione head del tuo documento HTML:
type = "text / css" media = "print" />
Quindi, crea un file denominato print.css. In questo file, aggiungi il seguente codice:
body {visibilità: nascosto;}
.print {visibilità: visibile;}Questo codice definisce tutti gli elementi nel corpo come nascosti quando viene stampato a meno che all'elemento non sia assegnata la classe "print".
Ora, tutto ciò che devi fare è assegnare la classe "print" agli elementi della tua pagina web che vuoi stampare. Ad esempio, per rendere stampabile una sezione definita in un elemento div, si dovrebbe usare
Qualsiasi altro elemento della pagina non assegnato a questa classe non verrà stampato.