Toto je 12. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 12. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
V tomto díle seriálu si ukážeme jak správně připravit webovou stránku pro tisk a úpravu CSS stylů před tiskem.
Občas je potřeba stránky upravit, než se budou tisknout. K tomuto účelu lze využít zápis v css @media print { /* Styly pro tisk */ }. Přes tento zápis můžete vypnout pozadí webu a další elementy, které by narušily vytištěný obsah. K nezobrazení prvku můžete využít display: none. Pro lepší přehlednost lze nadefinovat externí css přímo pro tisk, ale není podmínkou. Zápis je poté <link rel="stylesheet" href="print.css" media="print">.
Stránku lze vytisknout jak zavoláním požadovaného úkonu z menu v prohlížeči, tak i za pomocí tlačítka umístěného přímo na webu. Následující funkční ukázka ukazuje, jak si vytvořit tlačítko pro tisk.
body {font-family: arial;}button {padding-left: 15px;padding-right: 15px;padding-top: 5px;padding-bottom: 5px;color: #000;font-weight: bold;font-size: 14px;background: #ffc90e;border: 1px solid #000;cursor: pointer;}button:hover {opacity: 0.8;}h1 {font-size: 22px;}p {font-size: 13px;}/* CSS pro tisk */@media print {p.noprint { display: none; /* nevytiskne daný odstavec */}}
<!DOCTYPE html><html lang="cs-CZ"><head><meta charset="utf-8"><title>Tisk webové stránky</title></head><body><button onclick="window.print()">Tisk</button><h1>Ukázka tisku webové stránky</h1><p>Tento text je určen pro tisk, pro vyvolání funkce tisku prosím ztiskněte horní žluté tlačítko Tisk.</p><p class="noprint">Tento text se nevytiskne, protože je to zakázané přes css.</p></body></html>
