Utilizzando fogli di stile CSS, è possibile scrivere codice che interessa solo le pagine Web quando si sono visti con supporti specifici, come lo schermo di un dispositivo mobile, un lettore di schermo per i non vedenti o una stampante. Stili scritti per stampanti consentono di controllare come pagine stampate su carta. Raramente si vuole fare un sito Web lo stesso aspetto su carta come avviene in un browser, poiché ciò sarà scarti di inchiostro, dell'utente e creare brutto cut-off tra le pagine. Utilizzando le regole di "il @media", è possibile creare uno stile completamente diverso per la versione stampata del vostro sito Web, aggiungendo e sottraendo gli stili a vostra discrezione.

Istruzioni

1

Aprire il foglio di stile per il tuo sito e scorrere fino alla fine del suo codice. Su una nuova riga, è necessario aggiungere una regola di "il @media" per la stampa come segue:

stampa {@media
}

Tutte le regole di stile per la versione stampata delle pagine sul tuo sito Web andrà tra le parentesi graffe della regola "il @media". Questi stili si basano o modificare stili già applicati alla versione schermata del foglio di stile; in altre parole, gli stili applicati al sito Web quando viene visualizzato in un browser.

2

Creare una regola di targeting per l'intero corpo della pagina Web. All'interno di tale regola, impostare la spaziatura interna per essere uguale all'altezza dell'immagine oltre a qualsiasi spazio che necessario tra l'immagine e il resto della pagina:

stampa {@media
corpo () {
Imbottitura: 200px;
}
}

3

Aggiungere l'immagine come sfondo nella regola di stile per il corpo della pagina:

stampa {@media
corpo () {
Imbottitura: 200px;
immagine di sfondo: url('path/to/image.png') non centro-repeat;
}
}

Modificare il percorso del file all'interno di "URL ()" per scegliere la posizione dell'immagine sul server Web. Successivamente, specificare una posizione, quale "centro" o di "sinistra". Utilizzare "no-repeat" per impedire l'immagine di piastrellatura.