Как я могу напечатать веб-страницу со всем ее стилем CSS, прикрепленным к странице?

Я хочу добавить кнопку печати, чтобы пользователи могли печатать мою веб-страницу. Однако, когда я печатаю все стили CSS, они теряются. Кажется, принтер поддерживает только основные элементы html. Если я также хочу распечатать страницу точно так, как она выглядит в браузере, что мне делать? Я имею в виду, если я использую цветной принтер, он напечатает красочную страницу со стилями CSS. Когда я использую черно-белый принтер, он должен печатать светлые цвета как белые и темные цвета, как серый или черный.

Ответ 1

Если у вас есть media="screen" в элементе link, попробуйте удалить его или заменить на media="all".

Ответ 2

Взгляните на this и this, что должно помочь.

В принципе вам нужно добавить инструкцию печати css.

<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

Ответ 3

CSS-стили имеют атрибут media. Он указывает, к каким носителям этот css применим. Возможные типы носителей перечислены здесь.

<style type="text/css" media="all">
   @import "myCss.css";
</style>

ИЛИ

<link rel="stylesheet" type="text/css" media="print" href="print.css">