Print CSS Nedir? Nasıl Kullanılır?

3 Temmuz 2015

minimalcoding

3084 0

Print CSS Nedir? Nasıl Kullanılır?

CSS ile yazıcıdan çıktısı alınacak olan sayfanın istenmeyen alanlarının kaldırılmasını @media print özelliği ile yapmamız mümkün, ilgili sitil dosyasına çıktıda gözükmesini istemediğimiz alanları gizleyebilir , kullanıcılara daha yalın bir web sayfası çıktısı alma imkanı sağlayabilirsiniz. Makale türünden bir web sayası düşündüğümüzde örneğin bir haber sitesi ya da bir blog sitesini ele alacak olursak, kullanıcı deneyiminden yola çıkarak yazıcıdan ilgili makele yazısı, başlığı ve görsel alanlarının çıkması daha doğru olacaktır. Bu gibi durumda menü, yan menü, sayfa sonu (footer) gibi alanları gizlememiz gerekecektir. Okuduğunuz bu makalede çıktı almak için klavyeden Windows kullanıcılar için Ctrl+P Mac kullanıcıları için Cmd+P tuşuna basarak çıktı ön izleme ekranından print CSS’in nasıl çalıştığını görebilirsiniz.Şimdi Print CSS’in nasıl kullanılacağına bakalım.

Öncelikli olarak Html sayfamıza print CSS dosyasını nasıl linkleyeceğimizi görelim.

Html kod yapısı

Burada önemli olan CSS media tipinin print özelliği taşıyor olması

not: media tipini “all” olarak ayarlandığında içeriye tüm media yapılarını getireceğinden print yapısıda çalışacaktır.




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

Print CSS stil dosyası

@media print{ } yapısını açarak ilgili alanların stil yapılarıyla oynaya biliriz gözükmeseni istemediğiniz alanlar için “display:none” özelliğini verebilirsiniz.




@media print {
  body {
    background-color: #ffffff;
    color: black; /* Renk seçeneklerini istediğimiz gibi ayarlayabiliriz. */
  }

  p {
    color: red;
  }

  h1, h2, h3, h4, h5, h6 {
    color: yellow;
  }

  .menu,footer,.left-menu{
    display: none;
 /* Yazıcıda gözükmesini istemediğimiz alanlar için display none özelliğini kullana biliriz. */
  }
}

@media print {

body {

background-color: #ffffff;

color: black; /* Renk seçeneklerini istediğimiz gibi ayarlayabiliriz. */

}

p {

color: red;

}

h1, h2, h3, h4, h5, h6 {

color: yellow;

}

.menu,footer,.left-menu{

display: none;

/* Yazıcıda gözükmesini istemediğimiz alanlar için display none özelliğini kullana biliriz. */

}

Print CSS Nedir? Nasıl Kullanılır?

Html kod yapısı

Print CSS stil dosyası

Yorum yap