如何使用CSS打印阻止網頁

網頁是為了在屏幕上查看 。 雖然可以使用各種可用於查看網站(台式機,筆記本電腦,平板電腦,手機,可穿戴設備,電視等)的設備,但它們都包含某種類型的屏幕。 有人可以通過另一種方式查看您的網站,這種方式不包括屏幕。 我們指的是您的網頁上的物理打印。

幾年前,你會發現打印網站的人是很常見的情況。 我們記得與很多剛接觸網絡的客戶見面,並且感覺更舒適的瀏覽網站的打印頁面。 然後他們給了我們對這些紙張的反饋和編輯,而不是看著屏幕討論網站。 隨著人們對生活中的屏幕變得越來越舒服,並且由於屏幕已經倍增了很多倍,我們看到越來越少的人試圖將網頁打印到紙上,但它仍然會發生。 當您規劃出您的網站時,您可能需要考慮這種現象。 你想讓人們打印你的網頁嗎? 也許你沒有。 如果是這樣的話,你有一些選擇。

如何使用CSS打印阻止網頁

使用CSS很容易阻止人們打印您的網頁。 您只需創建一個名為“print.css”的1行樣式表,其中包含以下CSS行。

body {display:none; }

這種風格會將頁面的“body”元素變為不顯示 - 因為頁面上的所有內容都是body元素的子元素,這意味著整個頁面/網站都不會顯示。

一旦你有了你的“print.css”樣式表,你可以將它作為打印樣式表加載到你的HTML中。 下面是你如何做到這一點 - 只需將以下行添加到HTML頁面中的“head”元素即可。

上面一行的重要部分用粗體表示 - 這是一個打印樣式表。 該信息告訴瀏覽器,如果該網頁設置為打印,則使用該樣式表而不是該頁面用於屏幕顯示的任何默認樣式表。 當頁面切換到這個“print.css”頁面時,使整個頁面不顯示的風格將會啟動,所有打印的頁面都將成為空白頁面。

一次打印一頁

如果您不需要阻止網站上的大量網頁,則可以使用粘貼到HTML頭部的以下樣式逐頁阻止打印。