Внешний файл print.css - Как сделать элемент видимым только для печати, а не видимым на экране?

Question

В настоящее время я использую следующее в качестве внешнего файла print.css:

/ * Удалить ненужные элементы * /

hiddenedit, #hiddenbuttons, #header, #nav, .propertyselector, li.hiddentab, ul.hiddentab {display: none; }

/ * Убедитесь, что содержимое охватывает всю ширину * /

контейнер, # container2, #content {width: 100%; поле: 0; плавать: нет; } * +1010 * / * Изменить цвет текста на черный (полезно для светлого текста на темном фон) */ .lighttext {color: # 000} / * Улучшение цветовой контрастности ссылок # 781351 * / a: ссылка, a: посещенный { цвет: # 000}

Я понимаю, как это работает для отображения: нет для элементов, которые я не хочу печатать на странице. Мой вопрос: как я могу сделать обратное? Что мне делать, если на странице есть элементы, которые я хочу видеть только при печати страницы, а не при просмотре страницы?

Есть идеи? Спасибо.

Answer 1

Проще говоря

.onlyprint {display: none;}
@media print {
  .onlyprint {display: block;}
}

в ваши правила CSS.

Answer 2

Я бы предпочел следующее по сравнению с кодом Phihag, потому что вы также можете применить его к другим элементам, а не к элементам блока

@media not print {
  .only-print {display: none!important;}
}
@media print {
  .only-not-print {display: none!important;}
}

Answer 3

Вы бы сказали, что онлайн-таблица стилей скрыта, а печатная таблица CSS - отображена.Это то, что вы имели ввиду?вам нужно было бы назначить для него div.

Answer 4

Обязательно сделайте все наоборот ... в вашем файле css на экране установите те элементы, которые вы хотите скрыть, на display: none, а затем получите print.css, чтобы показать их.