Home-theater-designers
Se hai mai stampato prenotazioni di biglietti o indicazioni stradali per un hotel dal web, probabilmente non sei stato molto colpito dai risultati. Potresti, quindi, non sapere che i documenti stampati possono essere stilizzati nello stesso modo in cui possono essere visualizzati sullo schermo, utilizzando i fogli di stile a cascata (CSS).
Separazione degli interessi
Un vantaggio chiave dei CSS è la separazione del contenuto dalla presentazione. In parole povere, questo significa invece di un markup stilistico molto vecchio stile come:
Heading
Usiamo il markup semantico:
Non solo è molto più pulito, ma significa anche che la nostra presentazione è separata dal nostro contenuto. Rendering dei browser h1 elementi come testo grande e in grassetto per impostazione predefinita, ma possiamo cambiare quello stile in qualsiasi momento con un foglio di stile:
h1 { font-weight: normal; }
Raccogliendo quelle dichiarazioni di stile in un file separato e facendo riferimento a quel file dal nostro documento HTML, possiamo fare un uso ancora migliore della separazione. Il foglio di stile può essere riutilizzato e possiamo modificare quel singolo file in qualsiasi momento per aggiornare la formattazione in ogni documento che lo utilizza.
Includere un foglio di stile di stampa
In modo simile all'inclusione di un foglio di stile dello schermo, possiamo specificare un foglio di stile per la stampa. Un foglio di stile dello schermo è in genere incluso in questo modo:
Tuttavia, un attributo aggiuntivo, metà , consente il targeting in base al contesto in cui viene visualizzato il documento. Per impostazione predefinita, l'elemento precedente è equivalente a:
Ciò significa che il foglio di stile verrà applicato a qualsiasi supporto in cui viene visualizzato il documento. Tuttavia, l'attributo media può anche assumere valori di stampa e schermo:
In questo esempio, il print.css il foglio di stile verrà utilizzato solo quando il documento viene stampato. Questo è un meccanismo molto utile. Possiamo raccogliere tutti gli stili comuni (forse la famiglia di caratteri o l'interlinea) in un foglio di stile che si applica a tutti i media e la formattazione specifica del media nei singoli fogli di stile. Di nuovo, questo è un altro uso della separazione delle preoccupazioni.
Alcuni esempi di dichiarazioni di stile
Uno sfondo pulito
Quasi certamente non vuoi sprecare inchiostro per stampare uno sfondo colorato o un'immagine di sfondo. Inizia ripristinando eventuali valori predefiniti per questi valori che potrebbero essere stati impostati nel tuo documento:
body {
background: white;
color: black;
}
Potresti anche voler impedire la stampa di qualsiasi immagine di sfondo, che dovrebbe essere decorativa e, quindi, non una parte richiesta del tuo contenuto:
* {
background-image: none !important;
}
Imparentato: Come impostare un'immagine di sfondo in CSS
quale sito web è stato lanciato 15 anni fa oggi?
Controllo dei margini
Un altro punto ovvio da considerare per quanto riguarda la stampa è il margine della pagina. Sebbene i CSS forniscano un mezzo per impostare la dimensione dei margini, tieni presente che anche il tuo browser e la tua stampante possono influenzare le stesse impostazioni dei margini.
Ad esempio, nella finestra di dialogo di stampa di Chrome, c'è un'impostazione del margine che ha valori che includono nessuno e costume che sovrascriverà qualsiasi cosa specificata tramite CSS:
Per questo motivo, si consiglia di lasciare le decisioni sui margini al lettore sulle pagine Web pubbliche. Tuttavia, per uso personale o per creare un layout predefinito, potrebbe essere appropriato impostare i margini di stampa tramite CSS. Il @pagina regola consente di impostare i margini e deve essere utilizzata come segue:
@page {
margin: 2cm;
}
I CSS hanno anche la capacità per layout di stampa più sofisticati, come la variazione del margine a seconda che la pagina sia dispari (a destra), pari (a sinistra) o la pagina di copertina.
come guardare youtube con gli amici
Sfortunatamente, questo è scarsamente supportato, specialmente l'opzione della copertina, ma può essere utilizzato in misura minima. I seguenti stili producono pagine con margini inferiori leggermente più grandi rispetto a quelli superiori e margini leggermente più grandi sul bordo esterno della pagina rispetto al dorso:
@page {
margin-left: 20mm;
margin-right: 20mm;
margin-top: 40mm;
margin-bottom: 50mm;
}
@page :left {
margin-left: 30mm;
}
@page :right {
margin-right: 30mm;
}
Nascondere contenuti irrilevanti
Non tutti i contenuti saranno adatti per una versione stampata del documento. Se la tua pagina include la navigazione tramite banner, annunci pubblicitari o una barra laterale, potresti voler impedire che tali dettagli vengano visualizzati nella versione stampata, ad esempio:
#contents, div.ad { display: none; }
Collegamenti di fissaggio
I collegamenti ipertestuali non sono ovviamente rilevanti nel materiale stampato, quindi probabilmente vorrai rimuovere tutti gli stili che li differenziano dal testo circostante:
a { text-decoration: none; color: inherit; }
Tuttavia, potresti comunque volere che i lettori abbiano accesso agli URL originali e una soluzione semplice è inserirli automaticamente dopo il testo collegato:
a[href]:after {
content: ' (' attr(href) ')';
font-size: 90%;
color: #333;
}
Questo CSS fornisce risultati come i seguenti:
a[href]:dopo mira specificamente alla posizione dopo ( :dopo ) ogni elemento di collegamento ( a ) che ha effettivamente un URL ( [riferimento] ). Il contenuto dichiarazione qui inserisce il valore di href attributo tra parentesi. Si noti che è possibile applicare altre regole di stile per controllare la visualizzazione del contenuto generato.
Gestire le interruzioni di pagina
Per evitare che le interruzioni di pagina lascino il contenuto isolato o lo rompano in modo imbarazzante nel mezzo, utilizza le proprietà di interruzione di pagina: page-break-prima , interruzione di pagina dopo e page-break-inside . Per esempio:
table { page-break-inside: avoid; }
Ciò dovrebbe aiutare a evitare che le tabelle si estendano su più pagine, a condizione che nessuna sia più alta di una singola pagina. Allo stesso modo:
h1, h2 { page-break-before: always; }
Ciò significa che tali titoli iniziano sempre una nuova pagina. Potrebbe causare problemi se segui immediatamente h1 della tua pagina con un h2, tuttavia, poiché h1 finirà su una pagina da solo. Per evitare ciò, annulla semplicemente l'interruzione di pagina utilizzando un selettore che ha come target quell'istanza specifica, ad esempio:
come creare la tua mod
h1 + h2 { page-break-before: avoid; }
Visualizzazione degli stili di stampa
In tutti i casi, il browser e il sistema operativo dovrebbero fornire una funzione di anteprima di stampa, spesso come parte della finestra di dialogo di stampa standard.
Il browser Chrome rende più comodo controllare e persino eseguire il debug dei tuoi stili di stampa tramite gli Strumenti per sviluppatori, come dimostrato da questo esempio che mostra un CV con un foglio di stile di stampa. Per prima cosa, apri il menu principale e seleziona Altri strumenti seguito da Strumenti di sviluppo opzione:
Dal nuovo pannello che appare, seleziona Menù , poi Altri strumenti , seguito da Rendering :
Quindi scorrere verso il basso fino a Emula il tipo di supporto CSS collocamento. Il menu a discesa ti consente di alternare tra la visualizzazione di stampa e schermata del tuo documento:
Quando si emula il foglio di stile di stampa, lo standard Browser degli stili è disponibile per ispezionare e modificare le regole dello stile live. Tieni presente che l'emulazione dell'output di stampa su uno schermo non è ancora accurata al 100%. Il browser non sa nulla delle dimensioni della carta e il @pagina regola non può essere emulata.
Stampa su PDF
Una caratteristica utile dei moderni sistemi operativi è la possibilità di stampare su un file PDF. In effetti, tutto ciò che puoi stampare può, invece, essere inviato a un file PDF, nessuna vera sorpresa dal momento che un file PDF dovrebbe rappresentare un documento stampato, dopo tutto.
Questo rende l'HTML, in combinazione con un foglio di stile di stampa, un mezzo eccellente per creare un documento di alta qualità che può essere inviato come allegato, oltre che stampato.
Stampa una varietà di documenti
Puoi utilizzare un foglio di stile di stampa per creare documenti di qualità, incluso qualsiasi cosa, dal tuo CV a ricette o annunci di eventi. Le pagine Web in genere sembrano brutte e contengono dettagli indesiderati quando vengono stampate, ma un piccolo numero di modifiche di stile può migliorare notevolmente i risultati di stampa. Salvare i risultati finali come PDF è un modo rapido per creare documenti attraenti e professionali.
Condividere Condividere Tweet E-mail Come stampare pagine Web in PDF con Microsoft EdgeTi sei mai imbattuto in un articolo interessante che volevi salvare per dopo? Bene, puoi salvare come PDF con Edge in tre semplici passaggi.
Leggi Avanti Argomenti correlati- Programmazione
- Stampa
- CSS
Bobby è un appassionato di tecnologia che ha lavorato come sviluppatore software per quasi due decenni. È appassionato di giochi, lavora come editor di recensioni presso Switch Player Magazine ed è immerso in tutti gli aspetti dell'editoria online e dello sviluppo web.
Altro da Bobby JackIscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti