{"id":6847,"date":"2022-07-16T13:09:47","date_gmt":"2022-07-16T11:09:47","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/selezionare-parti-stampabili-di-una-pagina-web-con-css\/"},"modified":"2026-09-02T22:48:39","modified_gmt":"2026-09-02T20:48:39","slug":"selezionare-parti-stampabili-di-una-pagina-web-con-css","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/it\/selezionare-parti-stampabili-di-una-pagina-web-con-css\/","title":{"rendered":"Selezionare parti stampabili di una pagina web con CSS"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Video passo dopo passo<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Seleccionar partes imprimibles de una p\u00e1gina web con CSS\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/leZekem_VLY?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-23d3f6ce-140d-46da-bd4f-c9ac0fc1c03c\">Come stampare una pagina web<\/h2>\n\n<p class=\"wp-block-paragraph\">A volte abbiamo bisogno di stampare il contenuto di una pagina web per averla su carta. I browser (<a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Chrome<\/a>, <a href=\"https:\/\/www.microsoft.com\/es-es\/edge\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Edge<\/a>, <a href=\"https:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Firefox<\/a>, <a href=\"https:\/\/www.apple.com\/es\/safari\/\" target=\"_blank\" rel=\"noreferrer noopener\">Apple Safari<\/a> e <a href=\"https:\/\/www.opera.com\/es\" target=\"_blank\" rel=\"noreferrer noopener\">Opera<\/a>) includono una funzione per farlo che facilita questo compito. Possiamo invocare questa funzione dal browser stesso ma anche da Elementor, quindi prima di tutto vediamo come possiamo stampare una pagina web.  <\/p>\n\n<p class=\"has-text-align-center wp-block-paragraph\"><img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4773\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_chrome.png\" alt=\"Icono del navegador Google Chrome\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4774\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_edge.png\" alt=\"Microsoft Edge\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"31\" class=\"wp-image-4775\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_firefox.png\" alt=\"Firefox\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4777\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_safari.png\" alt=\"Safari\"\/>  <img loading=\"lazy\" decoding=\"async\" width=\"30\" height=\"30\" class=\"wp-image-4776\" style=\"width: 30px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/compatible_opera.png\" alt=\"Opera\"\/><\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">La scorciatoia da tastiera per stampare la pagina attiva in uno qualsiasi dei browser precedenti \u00e8 <strong>CTRL+P<\/strong> (Windows) e <strong>Comando+P<\/strong> (Mac).<\/p>\n<\/blockquote>\n\n<h3 class=\"wp-block-heading\" id=\"google-chrome-a253b023-f825-424f-bef5-a6c0cae9eda6\">Come stampare una pagina web con Google Chrome?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.google.com\/intl\/es\/chrome\/\" target=\"_blank\" rel=\"noreferrer noopener\" title=\"\">Google Chrome<\/a> \u00e8 di gran lunga il browser internet pi\u00f9 popolare, con una <a href=\"https:\/\/netmarketshare.com\/browser-market-share.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">quota del 70%<\/a> di utenti che preferiscono usare questo browser. Per stampare la pagina attiva segui questi passaggi. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-google-chrome.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-google-chrome.gif\" alt=\"Stampare una pagina con Google Chrome\" class=\"wp-image-4780\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Apriamo la pagina che vogliamo stampare.<\/li>\n\n\n\n<li>Facciamo clic sul menu di personalizzazione di Google Chrome <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"25\" class=\"wp-image-4778\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-google-chrome.png\" alt=\"Menu Google Chrome\"\/> e dal menu a comparsa facciamo clic su <strong>Stampa&#8230;<\/strong><\/li>\n\n\n\n<li>Si aprir\u00e0 la finestra per configurare la stampa e dovremo solo fare clic sul pulsante <strong>Stampa<\/strong>.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-con-edge-31d6d273-9f6a-4e50-b544-f7979d25d7ce\">Come stampare una pagina web con Edge?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.microsoft.com\/es-es\/edge\" target=\"_blank\" rel=\"noreferrer noopener\">Microsoft Edge<\/a> \u00e8 il successore di Microsoft Internet Explorer che a suo tempo fu il pi\u00f9 usato, principalmente perch\u00e9 veniva integrato nel sistema operativo Windows. Microsoft Edge continua a essere predefinito nei computer che lavorano con il sistema operativo Windows 10 in poi e attualmente \u00e8 il secondo browser pi\u00f9 usato con una <a href=\"https:\/\/netmarketshare.com\/browser-market-share.aspx\" target=\"_blank\" rel=\"noreferrer noopener\">quota dell&#8217;8%<\/a>.  <\/p>\n\n<p class=\"wp-block-paragraph\">Microsoft Edge ha un vantaggio di prestazioni significativo rispetto a Google Chrome, per quanto riguarda l&#8217;uso della memoria. In poche parole, Edge usa meno risorse. Chrome era noto per la poca RAM che usava, ma in questi giorni \u00e8 aumentata significativamente.  <\/p>\n\n<p class=\"wp-block-paragraph\">Come con Google Chrome, include una funzione per stampare una pagina web ed \u00e8 estremamente semplice, vediamo come si fa.<\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Edge.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Edge.gif\" alt=\"Stampare una pagina con Microsoft Edge\" class=\"wp-image-4781\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Apriamo la pagina che vogliamo stampare.<\/li>\n\n\n\n<li>Facciamo clic sul menu <em>Impostazioni e altro<\/em> di Edge &#8230; e dal menu a comparsa facciamo clic su <strong>Stampa<\/strong>.<\/li>\n\n\n\n<li>Si aprir\u00e0 la finestra per configurare la stampa e dovremo solo fare clic sul pulsante <strong>Stampa<\/strong>.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"como-imprimir-una-pagina-web-con-firefox-6588560c-a98c-4449-a515-816e3671ad0d\">Come stampare una pagina web con Firefox?<\/h3>\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.mozilla.org\/es-ES\/firefox\/new\/\" target=\"_blank\" rel=\"noreferrer noopener\">Mozilla Firefox<\/a> \u00e8 un browser robusto e si distingue dagli altri per la sua sicurezza e velocit\u00e0, \u00e8 il mio browser preferito perch\u00e9 gli strumenti per sviluppatori web mi piacciono pi\u00f9 di quelli di Chrome o Edge. Vediamo ora come possiamo stampare una pagina web. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Firefox.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/imprimir-una-pagina-con-Mozilla-Firefox.gif\" alt=\"Stampare una pagina con Mozilla Firefox\" class=\"wp-image-4782\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Apriamo la pagina che vogliamo stampare.<\/li>\n\n\n\n<li>Facciamo clic sul menu dell&#8217;applicazione <img loading=\"lazy\" decoding=\"async\" width=\"21\" height=\"18\" class=\"wp-image-4770\" style=\"width: 21px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-firefox.jpg\" alt=\"Menu Firefox\"\/> e dal menu a comparsa facciamo clic su <strong>Stampa<\/strong>&#8230;<\/li>\n\n\n\n<li>Si aprir\u00e0 la finestra per configurare la stampa e dovremo solo fare clic sul pulsante <strong>Stampa<\/strong>.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"anadir-un-boton-o-un-enlace-para-imprimir-la-pagina-activa-2a6e9be5-e875-4ddc-bdf1-0928ee88be39\">Aggiungere un pulsante per stampare la pagina attiva<\/h2>\n\n<p class=\"wp-block-paragraph\">Possiamo aggiungere un pulsante per stampare la pagina attiva, ad esempio nel template <em>Articolo singolo<\/em> o in qualsiasi pagina, cos\u00ec l&#8217;utente potr\u00e0 invocare la funzione stampa pagina del browser premendo questo pulsante. Vediamo come farlo. <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-boton-imprimir.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-boton-imprimir.gif\" alt=\"Inserire pulsante stampa pagina Elementor\" class=\"wp-image-4768\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Nel costruttore di Elementor fai clic su <img loading=\"lazy\" decoding=\"async\" width=\"21\" height=\"21\" class=\"wp-image-4772\" style=\"width: 21px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/widgets.jpg\" alt=\"Widget Elementor\"\/> cerca il widget <strong>Pulsanti di condivisione<\/strong> e trascinalo nella parte del documento dove vuoi inserirlo.<\/li>\n\n\n\n<li>Nella scheda Contenuto fai clic sul pulsante <strong>+Aggiungi Elemento<\/strong> e in Rete seleziona <strong>Print<\/strong>.<\/li>\n\n\n\n<li>Ora puoi personalizzare il testo e gli stili del pulsante a tuo piacimento.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"crear-una-clase-css-para-ocultar-partes-que-no-queremos-que-se-impriman-c716fad3-1bac-47e9-980d-120317681141\">Creare una classe CSS per nascondere le parti che non vogliamo stampare<\/h2>\n\n<p class=\"wp-block-paragraph\">Gli stili della pagina per la stampa non devono essere uguali a quelli che usiamo per visualizzarla su uno schermo (computer, tablet o telefono cellulare). Pu\u00f2 darsi che al momento di stampare vogliamo nascondere certe parti (intestazione, pi\u00e8 di pagina, barra laterale, &#8230;), cambiare i margini, i colori, le tipografie, ecc. Tutto questo possiamo farlo includendo la regola <strong>@media print<\/strong> nei nostri stili CSS personalizzati.  <\/p>\n\n<p class=\"wp-block-paragraph\">Possiamo cambiare molti stili, ma non ci dilungheremo e vedremo semplicemente come possiamo nascondere le parti della nostra pagina o template che non vogliamo stampare, vediamo un esempio:<\/p>\n\n<pre class=\"wp-block-code\"><code>@media print {\n     header {display: none !important;}\n     footer {display: none !important;}\n     .noimprimir {display: none !important;}\n     body {background: #fff !important;}     \n}<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Nell&#8217;esempio sopra vediamo come abbiamo creato all&#8217;interno della regola <strong>@media print<\/strong> una serie di classi CSS che verranno usate solo al momento di stampare il documento, quindi non influenzeranno il modo in cui lo visualizziamo sullo schermo. Vediamo come aggiungere questo codice al nostro CSS personalizzato nelle Impostazioni del sito: <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-css-personalizado.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-css-personalizado.gif\" alt=\"Inserire CSS personalizzato\" class=\"wp-image-4769\"\/><\/a><\/figure>\n\n<ol class=\"wp-block-list\">\n<li>Avvia il costruttore di Elementor entrando in qualsiasi pagina o template.<\/li>\n\n\n\n<li>Fai clic sul menu Hamburger <img loading=\"lazy\" decoding=\"async\" width=\"25\" height=\"18\" class=\"wp-image-4785\" style=\"width: 25px;\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/menu-hamburguesa.jpg\" alt=\"Menu hamburger\"\/> nell&#8217;angolo in alto a sinistra.<\/li>\n\n\n\n<li>Fai clic su <strong>Impostazioni del sito<\/strong>.<\/li>\n\n\n\n<li>Dal pannello delle opzioni fai clic sul <strong>CSS personalizzato<\/strong>.<\/li>\n\n\n\n<li>Nella casella <em>Aggiungi qui il tuo CSS personalizzato<\/em> inserisci il codice di cui hai bisogno.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">Fondamentalmente abbiamo nascosto per la stampa tutto ci\u00f2 che si trova all&#8217;interno dell&#8217;<strong>header<\/strong> e del <strong>footer<\/strong>, inoltre abbiamo incluso una classe <strong>.noimprimir<\/strong> per poterla assegnare agli elementi che non vogliamo stampare, come ad esempio il pulsante di stampa stesso, i commenti, ecc. Infine ho incluso una classe <strong>body<\/strong> per configurare lo sfondo bianco, questo \u00e8 necessario solo se abbiamo configurato lo sfondo con qualche colore. <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">La regola <strong>!important<\/strong> viene usata per aggiungere pi\u00f9 importanza a una propriet\u00e0\/valore del normale. Infatti, se usi la regola <strong>!important<\/strong>, annullerai TUTTE le regole di stile precedenti per quella specifica propriet\u00e0 in quell&#8217;elemento. <\/p>\n<\/blockquote>\n\n<p class=\"wp-block-paragraph\">Dobbiamo tenere presente che affinch\u00e9 le classi <strong>header<\/strong> e <strong>footer<\/strong> funzionino dobbiamo aver assegnato questi tag HTML ai template di <em>Intestazione<\/em> e <em>Pi\u00e8 di pagina<\/em>. Vediamo come possiamo farlo: <\/p>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/asignar-etiqueta-header-a-la-cabecera.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"720\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/asignar-etiqueta-header-a-la-cabecera.gif\" alt=\"Assegnare tag header all'Intestazione\" class=\"wp-image-4779\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\">Link di interesse<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css3_mediaqueries.asp\" target=\"_blank\" rel=\"noreferrer noopener\">CSS Media Queries<\/a> | W3 Schools<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Video passo dopo passo Come stampare una pagina web A volte abbiamo bisogno di stampare il contenuto di una pagina web per averla su carta. I browser (Google Chrome, Microsoft Edge, Mozilla Firefox, Apple Safari e Opera) includono una funzione per farlo che facilita questo compito. Possiamo invocare questa funzione dal browser stesso ma anche [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6848,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Come stampare solo parti di una pagina web con CSS","_seopress_titles_desc":"Come stampare una pagina web A volte abbiamo bisogno di stampare il contenuto di una pagina web per averla su carta. I browser (Google Chrome\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"entrambi","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[453],"tags":[430,407],"class_list":["post-6847","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-personalizzazione-di-wordpress","tag-web-design"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6847","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/comments?post=6847"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6847\/revisions"}],"predecessor-version":[{"id":6849,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/posts\/6847\/revisions\/6849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media\/6848"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/media?parent=6847"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/categories?post=6847"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/it\/wp-json\/wp\/v2\/tags?post=6847"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}