CSS (kaskádové styly) vám poskytují značnou kontrolu nad tím, jak se obsah vašich webových stránek zobrazuje na obrazovce. Tato kontrola se vztahuje i na jiná média, například při tisku webové stránky.
Možná vás zajímá, proč byste chtěli přidat funkce tisku na vaši webovou stránku; Koneckonců, většina lidí už ví nebo může snadno zjistit, jak vytisknout webovou stránku pomocí nabídek svého prohlížeče.
Existují však situace, kdy přidání tlačítka tisku nebo odkaz na stránku nejen zjednoduší proces uživatelům, když potřebují vytisknout stránku ale možná ještě důležitější je, že vám dává větší kontrolu nad tím, jak se tyto výtisky objeví papír.
Zde je návod, jak na vaše stránky přidat tlačítka tisku nebo odkazy na tisk a jak definovat, které části obsahu vaší stránky budou vytištěny a které nikoli.
Přidání tlačítka pro tisk
Tlačítko pro tisk můžete snadno přidat na svou webovou stránku přidáním následujícího kódu do svého dokumentu HTML, kde se má tlačítko zobrazit:
onclick = "window.print (); return false;" />
Tlačítko bude označeno jako Vytiskněte tuto stránku když se objeví na webové stránce. Tento text si můžete přizpůsobit, co chcete, změnou textu mezi následujícími uvozovkami
value =ve výše uvedeném kódu.
Všimněte si, že před textem a za ním je prázdné místo; to zlepšuje vzhled tlačítka vložením mezery mezi konce textu a okraje zobrazeného tlačítka.
Přidání tiskového odkazu
Je ještě snazší přidat jednoduchý odkaz na vaši webovou stránku. Stačí vložit následující kód do svého dokumentu HTML, kam chcete odkaz zobrazit:
tisk
Text odkazu si můžete přizpůsobit změnou „tisku“ podle svého výběru.
Vytisknutí specifických oddílů
Můžete nastavit, aby uživatelé mohli tisknout konkrétní části své webové stránky pomocí tlačítka nebo odkazu pro tisk. Můžete to udělat přidáním a print.css soubor na svůj web, zavoláte jej do záhlaví dokumentu HTML a poté definujete ty části, které chcete snadno vytisknout definováním třídy.
Nejprve přidejte následující kód do hlavní části dokumentu HTML:
type = "text / css" media = "print" />
Dále vytvořte soubor s názvem print.css. V tomto souboru přidejte následující kód:
tělo {viditelnost: skryté;}
.print {viditelnost: viditelný;}Tento kód definuje všechny prvky v těle jako skryté při tisku, pokud prvek nemá přiřazenu třídu "print".
Nyní musíte pouze přiřadit třídu „print“ k prvkům své webové stránky, které chcete vytisknout. Chcete-li například vytisknout sekci definovanou v prvku div, použijete ji
Na stránce, která není přiřazena k této třídě, se nevytiskne nic.