CSS (kaskadowe arkusze stylów) dają znaczną kontrolę nad sposobem wyświetlania zawartości stron internetowych na ekranie. Ta kontrola rozciąga się również na inne media, na przykład podczas drukowania strony internetowej.
Być może zastanawiasz się, dlaczego chcesz dodać funkcja drukowania do twojej strony internetowej; w końcu większość ludzi już wie lub może łatwo dowiedzieć się, jak wydrukować stronę internetową za pomocą menu przeglądarki.
Ale są sytuacje, w których dodanie przycisku drukowania lub połączyć do strony nie tylko ułatwi ten proces użytkownikom, którzy będą musieli wydrukować stronę ale, co może ważniejsze, daje większą kontrolę nad wyglądem tych wydruków papier.
Oto jak dodać do stron przyciski drukowania lub łącza do drukowania oraz określić, które elementy zawartości strony będą drukowane, a które nie.
Dodawanie przycisku drukowania
Możesz łatwo dodać przycisk drukowania do swojej strony internetowej, dodając następujący kod do dokumentu HTML w miejscu, w którym przycisk ma się pojawiać:
onclick = "window.print (); return false;" />
Przycisk zostanie oznaczony jako Wydrukuj tę stronę kiedy pojawia się na stronie internetowej. Możesz dostosować ten tekst do dowolnych potrzeb, zmieniając tekst między następującymi cudzysłowami
wartość =w powyższym kodzie.
Zauważ, że przed tekstem i po nim jest jedna pusta spacja; poprawia to wygląd przycisku, wstawiając spację między końcami tekstu a krawędziami wyświetlanego przycisku.
Dodawanie łącza do drukowania
Jeszcze łatwiej jest dodać do swojej strony prosty link do wydruku. Wystarczy wstawić następujący kod do dokumentu HTML, w którym ma się pojawiać link:
wydrukować
Możesz dostosować tekst linku, zmieniając „drukuj” na cokolwiek wybierzesz.
Tworzenie określonych sekcji do druku
Możesz skonfigurować możliwość drukowania przez użytkowników określonych części strony za pomocą przycisku drukowania lub łącza. Możesz to zrobić, dodając print.css plik do witryny, wywołując go w nagłówku dokumentu HTML, a następnie definiując te sekcje, które chcesz łatwo wydrukować, definiując klasę.
Najpierw dodaj następujący kod do sekcji nagłówka dokumentu HTML:
type = "text / css" media = "print" />
Następnie utwórz plik o nazwie print.css. W tym pliku dodaj następujący kod:
body {widoczność: ukryty;}
.print {widoczność: widoczny;}Ten kod definiuje wszystkie elementy w ciele jako ukryte podczas drukowania, chyba że element ma przypisaną klasę „print”.
Teraz wszystko, co musisz zrobić, to przypisać klasę „print” do elementów strony, które chcesz wydrukować. Na przykład, aby sekcję zdefiniowaną w elemencie div można było wydrukować, należy użyć
Żadne inne elementy strony, które nie są przypisane do tej klasy, nie zostaną wydrukowane.