Yazdırma stilleri

@media print ile yazdırma stillerini öğrenirsin.

@media print bloğu

@media print bloğu yalnızca sayfa yazdırılırken uygulanır. Bu blokta yazdırma için gerekli olmayan menü, reklam ve form öğelerini gizler; yazı rengini siyah, arka planı beyaz yapar; bağlantı alt çizgilerini kaldırırsın.

Böylece çıktı temiz ve mürekkep dostu olur. Ekran stilleri yazdırırken devre dışı kalmaz; print bloğu yalnızca üzerine biner.

Yazdırırken menüyü gizle

Yazdırırken gezinme menüleri, reklamlar ve arama kutuları işe yaramaz. @media print içinde .nav, .ads { display: none; } yazarak bunları çıktıdan kaldırırsın. Sayfa yalnızca ana içeriği basar.

Renkli arka planları da kaldırmak mürekkebi korur; tarayıcılar varsayılan olarak arka planları zaten basmaz ama yine de background: #fff yazmak tutarlılığı artırır.

Yazdırma dostu renkler

Yazdırırken açık gri yazılar okunamaz; renkli arka planlar mürekkep yakar. @media print içinde body { color: #000; background: #fff; } yazmak çıktıyı siyah üzerine beyaz yapar.

Bağlantıların alt çizgilerini de kaldırabilirsin; çünkü çıktıda tıklama anlamsızdır. Yazı tipini de serif yaparsan uzun paragraflar kağıtta daha rahat okunur.

Uygulama Yazdırma düzenini kur

Bir @media print bloğu aç. İçinde .nav öğesini display: none ile gizle ve body yazı rengini siyah (#000) yap. Yalnızca bu bloğu yaz.

Örnek çözümü göster

@media print {
  .nav {
    display: none;
  }
  body {
    color: #000;
  }
}

Kendini test et

Hangi media query yazdırma için stiller yazmaya yarar?
```
/* ? */
@media ____ {
  .nav { display: none; }
}
```
- @media screen
- @media print
- @media tv
- @media all and print
Cevabı göster

@media print — Doğru. @media print bloğu yalnızca yazdırırken çalışır.

Yazdırma medya türünü yaz

@media ____ {
  .nav { display: none; }
  body { color: #000; }
}

Cevabı göster

@media print {
  .nav { display: none; }
  body { color: #000; }
}

Bildirimi yazdırma rolüyle eşleştir

@media print

Yazdırma koşulu
display: none

Yazdırırken gizle
color: #000

Siyah yazı rengi
background: #fff

Beyaz arka plan

Sıradaki ders: Özet - Çok sütunlu sayfa

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler